---
import Icon from "./Icon.astro";
import { coffeeUrl } from "../data/content";

const nav = [
  { label: "À propos", href: "#about", id: "about" },
  { label: "Projets", href: "#projets", id: "projets" },
  { label: "Parcours", href: "#parcours", id: "parcours" },
  { label: "Stack", href: "#stack", id: "stack" },
  { label: "Contact", href: "#contact", id: "contact" },
];
---
<header class="site-header">
  <nav class="nav" aria-label="Navigation principale">
    <a class="nav-logo" href="#top" aria-label="Johan Leroy, accueil">
      <img src="/images/logo/logo.png" alt="Logo Johan Leroy" width="36" height="29" />
    </a>

    <div class="nav-links">
      {nav.map((i) => <a class="nav-link" href={i.href} data-nav={i.id}>{i.label}</a>)}
    </div>

    <div class="nav-actions">
      <a
        class="btn-coffee btn-coffee--header"
        href={coffeeUrl}
        target="_blank"
        rel="noopener"
        aria-label="Offrez-moi un café (ouvre un nouvel onglet)"
      >
        <Icon name="coffee" size={15} /> Café
      </a>

      <button id="theme-toggle" type="button" class="btn-icon" aria-label="Basculer le thème clair / sombre">
        <Icon name="sun" class="icon-sun" />
        <Icon name="moon" class="icon-moon" />
      </button>

      <button
        id="burger"
        type="button"
        class="burger"
        aria-label="Ouvrir le menu"
        aria-expanded="false"
        aria-controls="mobile-menu"
      >
        <Icon name="burger" size={20} />
      </button>
    </div>
  </nav>

  <div id="mobile-menu" class="mobile-menu">
    {nav.map((i) => <a class="mobile-link" href={i.href}>{i.label}</a>)}
    <div class="mobile-cta">
      <a
        class="m-coffee"
        href={coffeeUrl}
        target="_blank"
        rel="noopener"
        aria-label="Offrez-moi un café (ouvre un nouvel onglet)"
      >☕ Un café</a>
    </div>
  </div>
</header>
