<template>
  <header class="sticky top-0 z-40 border-b border-white/8 bg-surface-bg/80 backdrop-blur-xl">
    <div class="container-content flex h-[var(--header-height)] items-center justify-between px-4">
      <!-- Logo -->
      <NuxtLink to="/" class="flex items-center gap-2 text-lg tracking-tight">
        <div class="i-lucide-book-open h-6 w-6 text-primary" />
        <span class="font-calligraphy font-bold text-gradient text-xl italic">{{ site?.identity.name }}</span>
      </NuxtLink>

      <!-- Desktop navigation -->
      <nav class="hidden md:flex items-center gap-1" aria-label="Navigation principale">
        <NuxtLink
          v-for="item in site?.navigation"
          :key="item.to"
          :to="item.to"
          class="btn-ghost text-sm"
          active-class="text-white! bg-white/5"
        >
          {{ item.label }}
        </NuxtLink>
        <UiPaletteSelector />
      </nav>

      <!-- Mobile menu button -->
      <button
        class="btn-ghost md:hidden !p-2"
        aria-label="Menu"
        @click="isMobileMenuOpen = true"
      >
        <div class="i-lucide-menu h-5 w-5" />
      </button>
    </div>

    <!-- Mobile menu -->
    <LayoutNavMobile v-model:open="isMobileMenuOpen" :nav="site?.navigation ?? []" />
  </header>
</template>

<script setup lang="ts">
const { data: site } = await useSiteContent()
const isMobileMenuOpen = ref(false)
</script>
