<script setup>
useHead({
  meta: [
    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' }
  ],
  htmlAttrs: {
    lang: 'es'
  }
})

useSeoMeta({
  title: 'Vuelato - Busca vuelos baratos',
  description: 'Buscador de vuelos con fechas flexibles'
})

const mobileMenu = ref(false)

const navLinks = [
  { to: '/search', label: 'Buscar', icon: 'i-lucide-search' },
  { to: '/explore', label: 'Explorar', icon: 'i-lucide-compass' },
  { to: '/multi-city', label: 'Multi-city', icon: 'i-lucide-route' },
  { to: '/tracking', label: 'Seguimiento', icon: 'i-lucide-bell' },
  { to: '/watchlist', label: 'Watchlist', icon: 'i-lucide-heart' }
]
</script>

<template>
  <UApp>
    <UHeader>
      <template #left>
        <NuxtLink to="/" class="font-bold text-lg">
          Vuelato
        </NuxtLink>
        <nav class="hidden md:flex items-center gap-1 ml-4">
          <UButton
            v-for="link in navLinks"
            :key="link.to"
            :to="link.to"
            :label="link.label"
            variant="ghost"
            color="neutral"
            size="sm"
          />
        </nav>
      </template>

      <template #right>
        <AuthUserMenu />
        <UColorModeButton />
        <!-- Mobile menu button -->
        <UButton
          class="md:hidden"
          :icon="mobileMenu ? 'i-lucide-x' : 'i-lucide-menu'"
          color="neutral"
          variant="ghost"
          @click="mobileMenu = !mobileMenu"
        />
      </template>
    </UHeader>

    <!-- Mobile nav -->
    <Transition
      enter-active-class="transition-all duration-200 ease-out"
      enter-from-class="opacity-0 -translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition-all duration-150 ease-in"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 -translate-y-2"
    >
      <div v-if="mobileMenu" class="md:hidden border-b border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-950 px-4 py-3">
        <nav class="flex flex-col gap-1">
          <UButton
            v-for="link in navLinks"
            :key="link.to"
            :to="link.to"
            :label="link.label"
            :icon="link.icon"
            variant="ghost"
            color="neutral"
            block
            class="justify-start"
            @click="mobileMenu = false"
          />
        </nav>
      </div>
    </Transition>

    <UMain>
      <NuxtPage />
    </UMain>

    <USeparator />

    <UFooter>
      <template #left>
        <p class="text-sm text-muted">
          Vuelato &copy; {{ new Date().getFullYear() }}
        </p>
      </template>
      <template #right>
        <div class="flex gap-3 text-sm text-muted">
          <NuxtLink to="/search">Buscar</NuxtLink>
          <NuxtLink to="/explore">Explorar</NuxtLink>
          <NuxtLink to="/multi-city">Multi-city</NuxtLink>
        </div>
      </template>
    </UFooter>
  </UApp>
</template>
