---
interface Props {
  siteName: string;
  ctaLabel: string;
  ctaUrl: string;
}

const { siteName, ctaLabel, ctaUrl } = Astro.props;
const links = [
  ["Il laboratorio", "#laboratorio"],
  ["Il maestro", "#maestro"],
  ["Le lezioni", "#lezioni"],
  ["Progetti", "#spettacoli"],
  ["Galleria", "#galleria"],
];
---

<header class="site-header">
  <div class="container header-inner">
    <a class="wordmark" href="#inizio" aria-label={`${siteName}, torna all’inizio`}>{siteName}</a>
    <nav class="desktop-nav" aria-label="Navigazione principale">
      {links.map(([label, href]) => <a href={href}>{label}</a>)}
    </nav>
    <a class="button button-small desktop-cta" href={ctaUrl}>{ctaLabel}</a>
    <details class="mobile-menu">
      <summary aria-label="Apri il menu"><span aria-hidden="true"></span><span class="menu-label">Menu</span></summary>
      <nav aria-label="Navigazione mobile">
        {links.map(([label, href]) => <a href={href}>{label}</a>)}
        <a class="button button-small" href={ctaUrl}>{ctaLabel}</a>
      </nav>
    </details>
  </div>
</header>