// Nav — fixed header. Transparent over hero, solidifies to cream on scroll.
// `links` defaults to the global site map with real cross-page hrefs so the
// same Nav works on every page. `brandHref` points the wordmark home.
function Nav({ onOpenMenu, scrolled, links, brandHref }) {
  const items = links || [
    { label: 'A Casa', href: 'index.html' },
    { label: 'Cardápio', href: 'o-dia-inteiro.html' },
    { label: 'Rituais', href: 'index.html#rituais' },
    { label: 'Eventos', href: 'index.html#eventos' },
    { label: 'Bastidores', href: 'index.html#bastidores' },
    { label: 'Para o seu negócio', href: 'hoteis.html' },
  ];
  return (
    <nav className={'nav ' + (scrolled ? 'solid' : 'on-hero')}>
      <div className="wrap nav-inner">
        <a className="brand" href={brandHref || '#top'} aria-label="Panetteria">
          <img src={scrolled ? '../../assets/logo-chianti-wordmark.png' : '../../assets/logo-branco-wordmark.png'} alt="Panetteria" />
        </a>
        <div className="nav-links">
          {items.map((l) => <a key={l.label} href={l.href}>{l.label}</a>)}
          <button className="nav-cta">Encomende</button>
        </div>
        <button className="burger" aria-label="Menu" onClick={onOpenMenu}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
  );
}
window.Nav = Nav;