<template>
  <div class="min-h-screen flex flex-col items-center justify-center gap-6 px-4">
    <h1 class="text-4xl md:text-5xl font-narrative text-sky-text text-center">{{ $t('landing.title') }}</h1>
    <p class="text-xl font-ui text-sky-text/70">{{ $t('landing.subtitle') }}</p>
    <div class="flex gap-4 mt-4">
      <NuxtLink
        :to="localePath('/projets')"
        class="px-6 py-3 bg-sky-accent text-sky-dark font-ui font-semibold rounded-lg hover:opacity-90 transition-opacity"
      >
        {{ $t('landing.cta_adventure') }}
      </NuxtLink>
      <NuxtLink
        :to="localePath('/resume')"
        class="px-6 py-3 border border-sky-text/30 text-sky-text font-ui rounded-lg hover:border-sky-accent hover:text-sky-accent transition-colors"
      >
        {{ $t('landing.cta_express') }}
      </NuxtLink>
    </div>
  </div>
</template>

<script setup lang="ts">
const { setPageMeta } = useSeo()
const { t } = useI18n()
const localePath = useLocalePath()

setPageMeta({
  title: t('meta.title'),
  description: t('meta.description'),
})
</script>
