<template>
  <div class="min-h-screen">
    <!-- Hero section -->
    <section class="relative overflow-hidden bg-gradient-to-b from-sky-dark to-sky-darker py-16">
      <div class="container mx-auto px-4">
        <h1 class="text-center text-4xl font-narrative font-bold text-white md:text-5xl">
          {{ $t('journey.title') }}
        </h1>
        <p class="mx-auto mt-4 max-w-2xl text-center text-lg text-gray-400">
          {{ $t('journey.page_description') }}
        </p>
      </div>

      <!-- Decorative elements -->
      <div class="absolute -left-20 top-20 h-40 w-40 rounded-full bg-sky-500/5 blur-3xl" />
      <div class="absolute -right-20 bottom-10 h-60 w-60 rounded-full bg-emerald-500/5 blur-3xl" />
    </section>

    <!-- Timeline section -->
    <section class="container mx-auto px-4 py-16">
      <div class="relative">
        <!-- Ligne centrale verticale -->
        <div class="absolute bottom-0 left-2 top-0 w-0.5 bg-gradient-to-b from-sky-500/50 via-sky-dark to-sky-500/50 md:left-1/2 md:-translate-x-1/2" />

        <!-- Étapes -->
        <div class="space-y-12">
          <TimelineItem
            v-for="(milestone, index) in milestones"
            :key="index"
            :milestone="milestone"
            :index="index"
            :is-left="index % 2 === 0"
          />
        </div>
      </div>
    </section>

    <!-- Message de fin -->
    <section class="container mx-auto px-4 pb-16">
      <div class="mx-auto max-w-2xl rounded-xl bg-gradient-to-r from-sky-500/10 to-emerald-500/10 p-8 text-center">
        <p class="font-narrative text-xl italic text-gray-300">
          {{ $t('journey.end_message') }}
        </p>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import type { Milestone } from '~/components/feature/TimelineItem.vue'

definePageMeta({
  layout: 'adventure',
})

const { setPageMeta } = useSeo()
const { t, tm } = useI18n()
const progressStore = useProgressStore()

setPageMeta({
  title: t('journey.page_title'),
  description: t('journey.page_description'),
})

onMounted(() => {
  progressStore.visitSection('journey')
})

// Charger les milestones depuis i18n
const milestones = computed<Milestone[]>(() => {
  const data = tm('journey.milestones')
  if (Array.isArray(data)) {
    return data as Milestone[]
  }
  return []
})
</script>
