<template>
  <div class="min-h-screen flex flex-col items-center justify-center px-4 py-16">
    <Transition name="hero" mode="out-in">
      <!-- État initial : CTA -->
      <div v-if="!showHeroSelector" key="landing" class="text-center max-w-2xl">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-narrative text-sky-text animate-fade-slide-up">
          {{ $t('landing.title') }}
        </h1>
        <p class="mt-4 text-xl md:text-2xl font-ui text-sky-text/70 animate-fade-slide-up animate-delay-200">
          {{ $t('landing.subtitle') }}
        </p>
        <div class="flex flex-col sm:flex-row gap-4 mt-8 justify-center animate-fade-slide-up animate-delay-400">
          <button
            class="px-8 py-4 bg-sky-accent text-sky-dark font-ui font-semibold text-lg rounded-lg hover:opacity-90 transition-opacity"
            @click="showHeroSelector = true"
          >
            {{ $t('landing.cta_adventure') }}
          </button>
          <NuxtLink
            :to="localePath('/resume')"
            class="px-8 py-4 border border-sky-text/30 text-sky-text font-ui text-lg rounded-lg hover:border-sky-accent hover:text-sky-accent transition-colors text-center"
          >
            {{ $t('landing.cta_express') }}
          </NuxtLink>
        </div>
      </div>

      <!-- État sélection héros -->
      <div v-else key="hero-select" class="w-full max-w-4xl">
        <FeatureHeroSelector
          v-model="selectedHero"
          @confirm="onHeroConfirm"
          @back="showHeroSelector = false"
        />
      </div>
    </Transition>

    <ClientOnly>
      <LayoutWelcomeBack />
    </ClientOnly>
  </div>
</template>

<script setup lang="ts">
import type { HeroType } from '~/components/feature/HeroSelector.vue'
import { useProgressionStore } from '~/stores/progression'

const { setPageMeta } = useSeo()
const { t } = useI18n()
const localePath = useLocalePath()
const store = useProgressionStore()

const showHeroSelector = ref(false)
const selectedHero = ref<HeroType | null>(null)

setPageMeta({
  title: t('meta.title'),
  description: t('meta.description'),
})

function onHeroConfirm() {
  if (selectedHero.value) {
    store.setHero(selectedHero.value)
  }
  navigateTo(localePath('/projets'))
}
</script>
