// site/Nav.jsx
function SiteNav({ dark }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const logo = dark ? 'assets/logo-white.png' : 'assets/logo-black.png';
  const currentPage = window.location.pathname.split('/').pop() || 'index.html';
  const links = [
    { label: 'Business Events', href: 'business-events.html' },
    { label: 'Incentive Travel', href: 'incentive-travel.html' },
    { label: 'Innovation', href: 'innovation.html', matches: ['happy-sites.html'] },
  ];
  const isActive = l => currentPage === l.href || (l.matches && l.matches.includes(currentPage));
  return (
    <React.Fragment>
      <nav className={`site-nav ${dark ? 'dark' : ''}`}>
        <a className="logo" href="index.html"><img src={logo} alt="ENGAGE" /></a>
        <div className="links">
          {links.map(l => <a key={l.href} href={l.href} className={isActive(l) ? 'active' : ''}>{l.label}</a>)}
        </div>
        <div className="spacer" />
        <a className="btn btn-primary" href="contact.html">Start a conversation <span className="btn-arrow">›</span></a>
        <span className="burger" role="button" aria-label="Toggle menu" onClick={() => setMenuOpen(o => !o)}>
          <span /><span /><span />
        </span>
      </nav>
      <div className={`mobile-menu${dark ? ' dark' : ''}${menuOpen ? ' open' : ''}`}>
        {links.map(l => <a key={l.href} href={l.href} className={isActive(l) ? 'active' : ''} onClick={() => setMenuOpen(false)}>{l.label}</a>)}
        <a href="contact.html" className="btn btn-primary" onClick={() => setMenuOpen(false)}>
          Start a conversation <span className="btn-arrow">›</span>
        </a>
      </div>
    </React.Fragment>
  );
}
window.SiteNav = SiteNav;