<template>
  <footer class="bg-neutral-100 border-t border-neutral-200">
    <AppStripe>
      <!-- 📌 contact block -->
      <div
          class="flex flex-col sm:flex-row sm:items-center sm:justify-between
               gap-4 py-4 border-b border-neutral-300"
      >
        <!-- avatar + copy -->
        <AppHero src="/host.png"
                 alt="Ihre Gastgeberin Monika"
                 :size="16"
                 :title="t('footer.questions')"
                 :description="t('footer.prompt')">
          <!-- Contact shortcuts -->
          <div class="mt-2 space-y-1 text-sm">
            <!-- Phone (phone + WhatsApp icons) -->
            <div class="flex items-center gap-2">
              <!-- Heroicons phone -->
              <UIcon name="i-heroicons-phone" class="w-4 h-4 text-primary-600"/>
              <!-- WhatsApp icon (any Iconify set you use) -->
              <UIcon name="i-uil-whatsapp" class="w-4 h-4 text-primary-600"/>
              <a :href="`tel:${t('contact.phone').replace(/\s+/g, '')}`" class="hover:underline">
                {{ t('contact.phone') }}
              </a>
            </div>

            <!-- E-mail -->
            <div class="flex items-center gap-2">
              <UIcon name="i-heroicons-envelope" class="w-4 h-4 text-primary-600"/>
              <a :href="`mailto:${t('contact.email')}`" class="hover:underline">
                {{ t('contact.email') }}
              </a>
            </div>
          </div>
        </AppHero>

        <div class="flex flex-col gap-4 ">
          <UButton
              :to="variantPath('contact')"
              size="md"
              color="primary"
              variant="solid"
              trailing-icon="i-heroicons-envelope"
          >
            {{ t('button.contact') }}
          </UButton>

          <UButton
              :to="variantPath('book')"
              size="md"
              color="primary"
              variant="solid"
              trailing-icon="i-heroicons-globe-alt"
          >
            {{ t('button.book') }}
          </UButton>
        </div>

      </div>

      <!-- © line -->
      <div class="pt-4 text-center text-sm text-neutral-600 flex flex-col py-4">
        <span>&copy; {{ year }} Panoramablick Saalbach</span>
        <div>
          <NuxtLink :to="variantPath('legal', 'imprint')" :external="true" class="underline ml-2">Impressum</NuxtLink>
          <NuxtLink :to="variantPath('legal', 'privacy')" :external="true" class="underline ml-2">Datenschutz</NuxtLink>
          <NuxtLink :to="variantPath('legal', 'accessability')" :external="true" class="underline ml-2">Barrierefreiheit</NuxtLink>
        </div>
      </div>
    </AppStripe>
  </footer>
</template>

<script setup lang="ts">
const {t, tm, rt} = useVariantData()
const year = new Date().getFullYear()
const { variantPath } = useVariantPath()
</script>
