<template>
  <div class="section-padding">
    <div class="container-content">
      <div class="mx-auto max-w-2xl">
        <div class="gestation-icon mx-auto mb-6">
          <div class="i-lucide-flask-conical h-12 w-12 text-accent" />
        </div>

        <h1 class="font-display text-3xl font-bold text-white mb-4 text-center">
          {{ item?.label ?? 'En gestation' }}
        </h1>

        <p class="text-lg text-white/60 leading-relaxed mb-8 text-center">
          {{ item?.description ?? 'Cette initiative est en cours de préparation.' }}
        </p>

        <!-- Présentation spécifique -->
        <div v-if="item?.presentation" class="presentation-card mb-10">
          <div class="presentation-icon">
            <div class="i-lucide-rocket h-5 w-5" />
          </div>
          <h2 class="font-display text-xl font-semibold text-white mb-2">
            {{ item.presentation.title }}
          </h2>
          <p class="text-white/60 leading-relaxed">
            {{ item.presentation.text }}
          </p>
          <p class="mt-4 text-sm text-white/30 italic">En cours de développement.</p>
        </div>

        <!-- Bouton SejeteralO pour tarifs-eau -->
        <div v-if="slug === 'tarifs-eau'" class="text-center mb-10">
          <UiBaseButton :href="sejeteral0Url" target="_blank">
            <div class="i-lucide-external-link mr-2 h-4 w-4" />
            Lancer SejeteralO
          </UiBaseButton>
        </div>

        <div class="text-center">
          <UiBaseButton variant="ghost" to="/">
            <div class="i-lucide-arrow-left mr-2 h-4 w-4" />
            Retour à l'accueil
          </UiBaseButton>
        </div>
      </div>
    </div>
  </div>
</template>

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

const { data: content } = await usePageContent('home')

const appConfig = useAppConfig()
const sejeteral0Url = (appConfig.sejeteral0 as { url: string }).url

const item = computed(() => {
  const axes = (content.value as any)?.axes
  if (!axes) return null
  for (const axis of Object.values(axes) as any[]) {
    for (const it of axis.items ?? []) {
      if (it.to === `/gestation/${slug}`) return it
    }
  }
  return null
})

useHead({
  title: item.value?.label ?? `En gestation — ${slug}`,
})
</script>

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

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

.presentation-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;
}
</style>
