/* global React, ReactDOM, Hero, Catering, Menu, Stage, Bar, Pit, FindUs, SiteHeader, SiteFooter */
const { useState, useEffect } = React;

function App(){
  const [navOpen, setNavOpen] = useState(false);

  // close nav on scroll lock
  useEffect(() => {
    document.body.style.overflow = navOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [navOpen]);

  return (
    <>
      <div className="grain" aria-hidden="true" />
      <SiteHeader onMenu={() => setNavOpen(true)} />
      <NavOverlay open={navOpen} onClose={() => setNavOpen(false)} />

      <main>
        <Hero />
        <Catering />
        <Menu />
        <Stage />
        <Bar />
        <Pit />
        <FindUs />
      </main>

      <SiteFooter />
    </>
  );
}

function NavOverlay({ open, onClose }){
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [onClose]);
  const go = (id) => (e) => { 
    e.preventDefault(); 
    onClose(); 
    setTimeout(() => {
      const el = document.getElementById(id);
      if (el) window.scrollTo({ top: el.offsetTop - 20, behavior: 'smooth' });
    }, 300); 
  };
  return (
    <div className={`nav-overlay ${open ? 'is-open' : ''}`} onClick={onClose}>
      <button className="nav-close" onClick={onClose} aria-label="Close menu">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <path d="M5 5 L17 17 M17 5 L5 17" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
        </svg>
      </button>
      <nav onClick={(e) => e.stopPropagation()}>
        <a href="#menu" onClick={go('menu')}>Menu</a>
        <a href="#stage" onClick={go('stage')}>The Stage</a>
        <a href="#catering" onClick={go('catering')}>Catering</a>
        <a href="#find-us" onClick={go('find-us')}>Find Us</a>
      </nav>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);