<template>
  <div class="section-padding">
    <div class="container-content">

      <!-- Header -->
      <div class="mx-auto max-w-2xl text-center mb-8">
        <div class="section-icon mx-auto mb-6">
          <div :class="`i-lucide-${content?.icon ?? 'landmark'}`" class="h-12 w-12" />
        </div>
        <p class="mb-2 font-mono text-sm tracking-widest text-primary uppercase text-center">
          {{ content?.kicker }}
        </p>
        <h1 class="font-display text-3xl font-bold mb-4" style="color: hsl(var(--color-text))">
          {{ content?.title ?? slug }}
        </h1>
        <p class="text-lg leading-relaxed" style="color: hsl(var(--color-text-muted))">
          {{ content?.description }}
        </p>
      </div>

      <!-- Navigation prev / index / next -->
      <nav class="ctx-nav mx-auto max-w-2xl mb-10">
        <NuxtLink v-if="prevItem?.to" :to="prevItem.to" class="ctx-nav-btn ctx-nav-prev">
          <div class="i-lucide-arrow-left h-4 w-4 shrink-0" />
          <span>{{ prevItem.label }}</span>
        </NuxtLink>
        <div v-else class="ctx-nav-spacer" />

        <NuxtLink to="/citoyenne" class="ctx-nav-btn ctx-nav-index">
          <div class="i-lucide-layout-grid h-4 w-4" />
          <span>Citoyenne</span>
        </NuxtLink>

        <NuxtLink v-if="nextItem?.to" :to="nextItem.to" class="ctx-nav-btn ctx-nav-next">
          <span>{{ nextItem.label }}</span>
          <div class="i-lucide-arrow-right h-4 w-4 shrink-0" />
        </NuxtLink>
        <div v-else class="ctx-nav-spacer" />
      </nav>

      <!-- Zone sections — relative pour ancrer le sidebar -->
      <div class="sections-area">

        <!-- Sidebar sommaire -->
        <aside v-if="sommaire.length > 1" class="page-sidebar">
          <nav class="sommaire-sidebar">
            <p class="sommaire-sidebar-title">Sur cette page</p>
            <ol class="sommaire-sidebar-list">
              <li v-for="(entry, ei) in sommaire" :key="ei">
                <a :href="`#${entry.id}`" class="sommaire-sidebar-link">
                  <span class="sommaire-n">{{ ei + 1 }}</span>
                  <span>{{ entry.title }}</span>
                </a>
              </li>
            </ol>
          </nav>
        </aside>

        <!-- Features grid -->
        <div
          v-if="content?.features"
          id="section-features"
          class="grid gap-4 sm:grid-cols-2 mb-12 max-w-2xl mx-auto section-anchor"
        >
          <div v-for="feature in content.features" :key="feature.title" class="feature-card">
            <div class="feature-icon">
              <div :class="`i-lucide-${feature.icon} h-5 w-5`" />
            </div>
            <h3 class="font-display font-semibold mb-1" style="color: hsl(var(--color-text))">{{ feature.title }}</h3>
            <p class="text-sm leading-relaxed" style="color: hsl(var(--color-text-muted))">{{ feature.text }}</p>
          </div>
        </div>

        <!-- Project card -->
        <div
          v-if="content?.project"
          id="section-project"
          class="project-card mb-8 max-w-2xl mx-auto section-anchor"
        >
          <div class="project-icon">
            <div class="i-lucide-rocket h-5 w-5" />
          </div>
          <h2 class="font-display text-xl font-semibold mb-2" style="color: hsl(var(--color-text))">
            {{ content.project.name }}
          </h2>
          <p style="color: hsl(var(--color-text-muted))" class="leading-relaxed">
            {{ content.project.text }}
          </p>
          <span v-if="content?.gestation" class="gestation-badge mt-3">
            <div class="i-lucide-flask-conical h-3 w-3" />
            En gestation
          </span>
        </div>

        <!-- Extended content -->
        <div
          v-if="content?.content"
          id="section-content"
          class="prose-block mb-10 max-w-2xl mx-auto section-anchor"
        >
          <p class="leading-relaxed whitespace-pre-line" style="color: hsl(var(--color-text-muted))">
            {{ content.content }}
          </p>
        </div>

        <!-- Actions -->
        <div class="text-center flex flex-col items-center gap-3 sm:flex-row sm:justify-center mb-4">
          <UiBaseButton v-if="slug === 'decision'" :href="decisionUrl" target="_blank">
            <div class="i-lucide-external-link mr-2 h-4 w-4" />
            Ouvrir libreDecision
          </UiBaseButton>
          <UiBaseButton v-if="slug === 'tarifs-eau'" :href="sejeteral0Url" target="_blank">
            <div class="i-lucide-external-link mr-2 h-4 w-4" />
            Lancer SejeteralO
          </UiBaseButton>
        </div>

      </div><!-- /sections-area -->

    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string

const [{ data: content }, { data: homeData }] = await Promise.all([
  usePageContent(`citoyenne/${slug}`),
  usePageContent('home'),
])

const appConfig = useAppConfig()
const decisionUrl = (appConfig.libredecision as { url: string })?.url ?? '#'
const sejeteral0Url = (appConfig.sejeteral0 as { url: string })?.url ?? '#'

// Sommaire
const sommaire = computed(() => {
  const entries: { title: string; id: string }[] = []
  if ((content.value?.features as unknown[])?.length) entries.push({ title: 'Fonctionnalités', id: 'section-features' })
  if (content.value?.project) entries.push({ title: (content.value.project as { name: string }).name, id: 'section-project' })
  if (content.value?.content) entries.push({ title: 'En savoir plus', id: 'section-content' })
  return entries
})

// Prev / next dans la section citoyenne
interface AxisItem { label: string; to?: string; icon?: string }
const politiqueItems = computed<AxisItem[]>(
  () => (homeData.value as Record<string, unknown> | null)?.axes?.politique?.items as AxisItem[] ?? [],
)
const currentPath = `/citoyenne/${slug}`
const currentIdx = computed(() => politiqueItems.value.findIndex(i => i.to === currentPath))
const prevItem = computed(() => currentIdx.value > 0 ? politiqueItems.value[currentIdx.value - 1] : null)
const nextItem = computed(() => currentIdx.value < politiqueItems.value.length - 1 ? politiqueItems.value[currentIdx.value + 1] : null)

useSeoPage({
  title: content.value?.meta?.title ?? slug,
  description: content.value?.description as string ?? undefined,
})
</script>

<style scoped>
.section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 1rem;
  background: hsl(var(--color-primary) / 0.1);
  border: 1px solid hsl(var(--color-primary) / 0.2);
  color: hsl(var(--color-primary));
}

.feature-card {
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-text) / 0.08);
  background: hsl(var(--color-surface));
}

.feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  margin-bottom: 0.75rem;
}

.project-card {
  padding: 1.5rem;
  border-radius: 0.75rem;
  border: 1px solid hsl(var(--color-primary) / 0.15);
  background: hsl(var(--color-surface));
}

.project-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  margin-bottom: 1rem;
}

.gestation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--color-accent) / 0.12);
  color: hsl(var(--color-accent));
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-mono);
}

.prose-block {
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: hsl(var(--color-surface));
}

.section-anchor {
  scroll-margin-top: 5.5rem;
}

/* ── Navigation prev/next ── */
.ctx-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
}

.ctx-nav-spacer { min-width: 0; }

.ctx-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.875rem;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--color-text-muted));
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.08);
  transition: all 0.15s;
  min-width: 0;
}

.ctx-nav-btn:hover {
  color: hsl(var(--color-primary));
  border-color: hsl(var(--color-primary) / 0.25);
  background: hsl(var(--color-primary) / 0.05);
}

.ctx-nav-prev { justify-content: flex-start; }
.ctx-nav-next { justify-content: flex-end; }

.ctx-nav-prev span,
.ctx-nav-next span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ctx-nav-index {
  justify-content: center;
  background: hsl(var(--color-primary) / 0.08);
  border-color: hsl(var(--color-primary) / 0.15);
  color: hsl(var(--color-primary));
  font-size: 0.75rem;
  padding: 0.45rem 0.75rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.ctx-nav-index:hover { background: hsl(var(--color-primary) / 0.15); }

@media (max-width: 480px) {
  .ctx-nav { grid-template-columns: auto 1fr auto; }
  .ctx-nav-prev span, .ctx-nav-next span { display: none; }
  .ctx-nav-prev, .ctx-nav-next { padding: 0.5rem; }
}

/* ── Zone sections ── */
.sections-area {
  position: relative;
}

/* ── Sidebar sommaire ── */
.page-sidebar {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 10.5rem;
  height: 100%;
}

@media (min-width: 1300px) {
  .page-sidebar { display: block; }
}

.sommaire-sidebar {
  position: sticky;
  top: 5.5rem;
  padding: 0.875rem;
  border-radius: 14px;
  background: hsl(var(--color-surface));
  border: 1px solid hsl(var(--color-text) / 0.07);
}

.sommaire-sidebar-title {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: hsl(var(--color-text-muted));
  margin: 0 0 0.6rem;
}

.sommaire-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sommaire-sidebar-link {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.28rem 0.4rem;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.75rem;
  color: hsl(var(--color-text-muted));
  line-height: 1.4;
  transition: color 0.12s, background 0.12s;
}

.sommaire-sidebar-link:hover {
  color: hsl(var(--color-primary));
  background: hsl(var(--color-primary) / 0.06);
}

.sommaire-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: hsl(var(--color-primary) / 0.1);
  color: hsl(var(--color-primary));
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  flex-shrink: 0;
}
</style>
