/* 6ix Mela — homepage nav + mobile drawer */
const NAV_ITEMS = [
  { label: 'Lineup', id: 'lineup' },
  { label: 'Tickets', id: 'tickets' },
  { label: 'Venue', id: 'venue' },
  { label: 'Partner', id: 'connect' },
  { label: 'FAQ', id: 'faq' },
];
const TM_URL = 'https://www.ticketmaster.ca/6ix-mela-toronto-ontario-09-12-2026/event/100064F08F4C6125';

function Nav({ onNav, onTickets }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', fn); fn();
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const go = (id) => { onNav(id); setOpen(false); };
  return (
    <React.Fragment>
      <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
        <div className="nav-logo" onClick={() => go('home')}>
          <img src="assets/logo-v2.png" alt="6ix Mela" />
          <b>6IX MELA</b>
        </div>
        <div className="nav-links">
          {NAV_ITEMS.map((n) => (
            <button key={n.id} className="nav-link" onClick={() => go(n.id)}>{n.label}</button>
          ))}
        </div>
        <div className="nav-right">
          <a className="btn btn-primary btn-sm" href={TM_URL} target="_blank" rel="noopener">Get Tickets <Icon name="arrow-up-right" size={16} /></a>
          <button className="nav-burger" onClick={() => setOpen(true)} aria-label="Menu"><Icon name="menu" size={28} /></button>
        </div>
      </nav>
      <div className={'drawer' + (open ? ' open' : '')}>
        <div className="drawer-head">
          <div className="nav-logo"><img src="assets/logo-v2.png" alt="" /><b>6IX MELA</b></div>
          <button className="nav-burger" style={{ display: 'inline-flex' }} onClick={() => setOpen(false)}><Icon name="x" size={30} /></button>
        </div>
        {NAV_ITEMS.map((n) => <button key={n.id} className="nav-link" onClick={() => go(n.id)}>{n.label}</button>)}
        <a className="btn btn-primary btn-lg" style={{ marginTop: 24, justifyContent: 'center' }} href={TM_URL} target="_blank" rel="noopener" onClick={() => setOpen(false)}>Get Tickets <Icon name="arrow-up-right" size={18} /></a>
      </div>
    </React.Fragment>
  );
}
window.Nav = Nav;