/* global React */

// ===== NAV (shared) — Home · Bar Temático · Eventos =====
function Nav({ active }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { href: 'index.html', label: 'Home', id: 'home' },
    { href: 'Bar.html', label: 'Bar Temático', id: 'bar' },
    { href: 'Eventos.html', label: 'Eventos', id: 'eventos' }
  ];

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a href="index.html" className="nav-logo">
          <img src="assets/logo.png" alt="Vamo' Nene" />
          <div className="brand-mark">
            <span className="top">Vamo' Nene</span>
            <span className="bot">Experience</span>
          </div>
        </a>
        <div className={`nav-links ${open ? 'open' : ''}`}>
          {links.map(l => (
            <a key={l.id} href={l.href} className={active === l.id ? 'active' : ''}>{l.label}</a>
          ))}
        </div>
        <div className="nav-cta">
          <a href="https://wa.me/5491100000000?text=Hola%20Vamo%20Nene" target="_blank" rel="noopener" className="btn btn-ghost">WhatsApp</a>
          <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;