// Nav.jsx — sticky pill-style header with mobile hamburger
const Nav = ({ onOrder }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        setScrolled(window.scrollY > 40);
        ticking = false;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    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 close = () => setMenuOpen(false);

  return (
    <React.Fragment>
      <header className={'psd-nav' + (scrolled ? ' psd-nav--scrolled' : '')}>
        <div className="psd-nav-inner">
          <a href="#top" className="psd-nav-brand" onClick={close}>
            <img src="assets/logo-nav.svg" alt="Puerto Rican Deli" className="psd-nav-wordmark" />
          </a>
          <nav className="psd-nav-links">
            <a href="#menu">Menu</a>
            <a href="#gallery">Gallery</a>
            <a href="#about">About</a>
            <a href="#visit">Visit</a>
            <a href="#reviews">Reviews</a>
          </nav>
          <button className="psd-btn psd-btn--primary psd-btn--sm psd-nav-order-btn" onClick={onOrder}>
            Order Online <span aria-hidden="true">→</span>
          </button>
          <button
            className="psd-nav-burger"
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(o => !o)}
          >
            <span className={'psd-burger-line' + (menuOpen ? ' open' : '')} />
          </button>
        </div>
      </header>

      {menuOpen && (
        <div className="psd-mobile-menu" role="dialog" aria-modal="true" aria-label="Navigation menu">
          <nav className="psd-mobile-links">
            <a href="#menu" onClick={close}>Menu</a>
            <a href="#gallery" onClick={close}>Gallery</a>
            <a href="#about" onClick={close}>About</a>
            <a href="#visit" onClick={close}>Visit</a>
            <a href="#reviews" onClick={close}>Reviews</a>
          </nav>
          <button className="psd-btn psd-btn--primary psd-mobile-order-btn" onClick={() => { close(); onOrder(); }}>
            Order Online <span aria-hidden="true">→</span>
          </button>
        </div>
      )}
    </React.Fragment>
  );
};

window.Nav = Nav;