<template>
  <div class="zone-end-choice py-16 px-4 border-t border-sky-dark-100 mt-16">
    <div class="max-w-2xl mx-auto">
      <!-- Choix binaire -->
      <FeatureChoiceCards
        v-if="choicePoint && choicePoint.choices[0].id !== choicePoint.choices[1].id"
        :choice-point="choicePoint"
      />

      <!-- Si une seule destination (contact) -->
      <div
        v-else-if="choicePoint"
        class="text-center"
      >
        <p class="font-narrative text-xl text-sky-text mb-8 italic">
          {{ locale === 'fr' ? choicePoint.questionFr : choicePoint.questionEn }}
        </p>

        <NuxtLink
          :to="localePath(choicePoint.choices[0].destination)"
          class="inline-flex items-center gap-3 px-8 py-4 bg-sky-accent text-sky-dark font-ui font-semibold rounded-xl hover:opacity-90 transition-opacity focus-visible:outline-2 focus-visible:outline-sky-accent focus-visible:outline-offset-2"
        >
          <span class="text-2xl">{{ choicePoint.choices[0].icon }}</span>
          <span>{{ locale === 'fr' ? choicePoint.choices[0].textFr : choicePoint.choices[0].textEn }}</span>
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const { getNextChoicePoint } = useNarrativePath()
const { locale } = useI18n()
const localePath = useLocalePath()

const choicePoint = computed(() => getNextChoicePoint())
</script>
