function Nav({ onNav, page }) {
  const [showBar, setShowBar] = React.useState(true);
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  /* Lock body scroll when mobile menu is open */
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const handleNav = (k) => {
    setMenuOpen(false);
    onNav(k);
  };

  const items = [
    { k: 'home',      label: 'Home' },
    { k: 'chi-siamo', label: 'Chi siamo' },
    { k: 'scadenze',  label: 'Scadenze' },
    { k: 'faq',       label: 'FAQ' },
  ];

  return (
    <header className="as-header">
      {showBar && (
        <div className="as-bar">
          <span className="as-bar-text">
            <b>Scadenza 730:</b> 30 settembre 2026 — Si prenoti per tempo
          </span>
          <button className="as-bar-x" aria-label="Chiudi" onClick={() => setShowBar(false)}>✕</button>
        </div>
      )}

      <div className={`as-nav${scrolled ? ' as-nav-scrolled' : ''}${menuOpen ? ' menu-open' : ''}`}>
        <div className="as-nav-inner">
          <a className="as-logo" href="#" onClick={(e) => { e.preventDefault(); handleNav('home'); }}>
            <span className="as-logo-name">Anna Serra</span>
            <span className="as-logo-sub">CONSULENTE DEL LAVORO</span>
          </a>

          {/* Desktop links */}
          <nav className="as-nav-links" aria-label="Navigazione principale">
            {items.map(i => (
              <a
                key={i.k}
                href="#"
                className={`as-nav-link${page === i.k ? ' is-active' : ''}`}
                aria-current={page === i.k ? 'page' : undefined}
                onClick={(e) => { e.preventDefault(); handleNav(i.k); }}
              >
                {i.label}
              </a>
            ))}
          </nav>

          {/* Desktop CTA — hidden on mobile */}
          <button className="btn btn-primary as-nav-cta" onClick={() => handleNav('contatti')}>
            Contattaci
          </button>

          {/* Hamburger — visible only on mobile */}
          <button
            className={`as-hamburger${menuOpen ? ' is-open' : ''}`}
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label={menuOpen ? 'Chiudi menu' : 'Apri menu'}
            aria-expanded={menuOpen}
          >
            <span></span>
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      {/* Mobile fullscreen overlay */}
      {menuOpen && (
        <div className="as-mobile-menu" role="dialog" aria-label="Menu di navigazione">
          {items.map(i => (
            <a
              key={i.k}
              href="#"
              className={`as-mobile-link${page === i.k ? ' is-active' : ''}`}
              aria-current={page === i.k ? 'page' : undefined}
              onClick={(e) => { e.preventDefault(); handleNav(i.k); }}
            >
              {i.label}
            </a>
          ))}
          <button
            className="btn btn-primary as-mobile-cta"
            onClick={() => handleNav('contatti')}
          >
            Contattaci
          </button>
        </div>
      )}
    </header>
  );
}

window.Nav = Nav;