<template>
  <header class="absolute top-0 left-0 w-full z-50 bg-[#0A0B09]/85 backdrop-blur-sm">
    <nav class="w-full flex items-center justify-center gap-10 h-[52px] px-8">
      <NuxtLink
        v-for="item in navItems"
        :key="item.label"
        :to="item.href"
        class="relative text-xs font-semibold tracking-widest uppercase transition-colors duration-200 pb-1 whitespace-nowrap"
        :class="[
          item.active
            ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-[2px] after:bg-[#E3FA6D]'
            : 'text-white/80 hover:text-white'
        ]"
      >
        {{ item.label }}
      </NuxtLink>
    </nav>
  </header>
</template>

<script setup lang="ts">
const navItems = [
  { label: 'Home', href: '#hero', active: true },
  { label: 'A Imersão', href: '#imersao', active: false },
  { label: 'Metodologia', href: '#metodologia', active: false },
  { label: 'Executores', href: '#executores', active: false },
  { label: 'Próximos Destinos', href: '#destinos', active: false },
  { label: 'Contato', href: '#contato', active: false },
]
</script>
