---
const base = import.meta.env.BASE_URL;
const items = [
  { href: '#concept', label: 'Concept' },
  { href: '#ambition', label: 'Ambition' },
  { href: '#pourquoi', label: 'Pourquoi' },
  { href: '#configurations', label: 'Configurations' },
  { href: '#architecture', label: 'Architecture' },
  { href: '#cas-dusage', label: "Cas d'usage" },
  { href: '#equipe', label: 'Équipe' },
  { href: '#roadmap', label: 'Feuille de route' },
  { href: '#contact', label: 'Contact' },
];
---

<header class="sticky top-0 z-40 border-b border-white/5 bg-abyss-950/75 backdrop-blur">
  <div class="container-narrow flex h-16 items-center gap-6">
    <a href={base} class="flex shrink-0 items-center gap-2.5" aria-label="NowYouSea — retour à l'accueil">
      <span class="relative inline-flex h-8 w-8 items-center justify-center rounded-md bg-gradient-to-br from-tide-500 to-lagoon-500 shadow-glow">
        <svg viewBox="0 0 24 24" class="h-5 w-5 text-abyss-950" fill="currentColor" aria-hidden="true">
          <path d="M2 16c2 0 2-2 4-2s2 2 4 2 2-2 4-2 2 2 4 2 2-2 4-2v4H2z"/>
          <circle cx="12" cy="9" r="2"/>
          <path d="M7 9a5 5 0 0 1 10 0" stroke="currentColor" stroke-width="1.5" fill="none" opacity=".65"/>
        </svg>
      </span>
      <span class="font-display text-base font-semibold tracking-tight whitespace-nowrap">NowYouSea</span>
    </a>

    <nav aria-label="Navigation principale" class="hidden flex-1 justify-center xl:flex">
      <ul class="flex items-center gap-5 text-sm text-foam-100/75">
        {items.map((item) => (
          <li>
            <a href={item.href} class="whitespace-nowrap hover:text-tide-400">{item.label}</a>
          </li>
        ))}
      </ul>
    </nav>

    <div class="ml-auto shrink-0 xl:ml-0">
      <a href="#contact" class="btn btn-primary hidden whitespace-nowrap md:inline-flex">
        Demander une démo
        <svg viewBox="0 0 24 24" class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M5 12h14M13 5l7 7-7 7"/>
        </svg>
      </a>
    </div>
  </div>
</header>