// Nav.jsx — sticky blurred nav with mobile drawer.
function Nav({ active, onNav }) {
  const [open, setOpen] = React.useState(false);
  const links = [
    ['welt', 'Welt'], ['events', 'Events'], ['studio', 'Studio'],
    ['gym', 'Gym'], ['kollektiv', 'Kollektiv'],
  ];
  const go = (id) => { onNav && onNav(id); setOpen(false); };
  return (
    <nav className="lp-nav">
      <a className="lp-logo" onClick={() => go('welt')}>
        <img src="../../assets/spiral.svg" alt="" className="lp-logo-mark" />
        AUFN&nbsp;<span>PUNKT</span>
      </a>
      <button className="lp-burger" aria-label="Menü" aria-expanded={open}
        onClick={() => setOpen(o => !o)}>{open ? '✕' : '≡'}</button>
      <div className={'lp-links' + (open ? ' open' : '')}>
        {links.map(([id, label]) => (
          <a key={id} className={active === id ? 'is-active' : ''} onClick={() => go(id)}>{label}</a>
        ))}
        <a className="lp-handle" href="#" onClick={e => e.preventDefault()}>@aufnpunkt.t</a>
      </div>
    </nav>
  );
}
window.Nav = Nav;