<template>
  <header class="absolute top-7 center-0 z-50 bg-black/60">
    <nav class="w-full flex items-center justify-center h-[55px] px-4">
      <NuxtLink
        v-for="item in navItems"
        :key="item.label"
        :to="item.href"
        class="relative text-xs font-open-sans font-semibold px-3 uppercase transition-colors duration-200 pb-1 leading-7"
        :class="[
          item.active
            ? 'text-[#E3FA6D] after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-[#E3FA6D]'
            : 'text-white hover:text-white/85'
        ]"
      >
        {{ 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>
