/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

function App() {
  const [hero, setHero] = useState(1); // default to split (1 of 3)
  const [menuOpen, setMenuOpen] = useState(false);

  // Reveal on scroll
  useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries)=>{
      entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    els.forEach(el=>io.observe(el));
    return ()=>io.disconnect();
  }, [hero]);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const heroes = [HeroSplit, HeroMarquee, HeroCollage];
  const HeroComp = heroes[hero - 1] || HeroSplit;

  return (
    <>
      <Nav
        onOpenMenu={() => setMenuOpen(true)}
        onOpenLocations={() => scrollTo('locations')}
        onScrollTo={scrollTo}
      />

      <div id="top" style={{position:'relative'}}>
        <HeroComp />
        <div className="hero-switch" role="tablist" aria-label="Hero variant">
          {[1,2,3].map(n => (
            <button
              key={n}
              className={hero===n?'active':''}
              onClick={()=>setHero(n)}
              aria-label={`Hero ${n}`}
            >
              {n}
            </button>
          ))}
        </div>
      </div>

      <MenuSection onOpenFull={() => setMenuOpen(true)} />
      <LocationsSection />
      <GallerySection />
      <StorySection />
      <OrderSection />
      <ContactSection />
      <Footer />

      <FullMenuModal open={menuOpen} onClose={() => setMenuOpen(false)} />
    </>
  );
}

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