// App entry — orchestrates sections, modals, scroll-spy nav.

const { useState: useStateA, useEffect: useEffectA, useCallback: useCallbackA, useRef: useRefA } = React;

function App(){
  const [activeSection, setActiveSection] = useStateA('');
  const [collectionId, setCollectionId] = useStateA(null);
  const [lightboxIdx, setLightboxIdx] = useStateA(null);
  const [formOpen, setFormOpen] = useStateA(false);
  const [formInitColl, setFormInitColl] = useStateA('');

  // Scroll-spy
  useEffectA(()=>{
    const ids = ['collections', 'designer', 'bespoke', 'lookbook', 'press', 'contact'];
    const onScroll = ()=>{
      const y = window.scrollY + 200;
      let cur = '';
      ids.forEach(id=>{
        const el = document.getElementById(id);
        if(el && el.offsetTop <= y) cur = id;
      });
      setActiveSection(cur);
    };
    window.addEventListener('scroll', onScroll, {passive:true});
    onScroll();
    return ()=>window.removeEventListener('scroll', onScroll);
  },[]);

  const navigate = useCallbackA((id)=>{
    if(id==='top'){ window.scrollTo({top:0, behavior:'smooth'}); return; }
    const el = document.getElementById(id);
    if(el){
      window.scrollTo({top: el.offsetTop - 60, behavior:'smooth'});
    }
  },[]);

  const openBook = useCallbackA((coll='')=>{ setFormInitColl(coll); setFormOpen(true); },[]);

  // Detect "light" nav when over light section
  const [navLight, setNavLight] = useStateA(false);
  useEffectA(()=>{
    const lightIds = ['designer', 'press'];
    const onScroll = ()=>{
      const top = window.scrollY + 50;
      let light=false;
      lightIds.forEach(id=>{
        const el = document.getElementById(id);
        if(el){
          const start = el.offsetTop;
          const end = start + el.offsetHeight;
          if(top >= start && top < end) light = true;
        }
      });
      setNavLight(light);
    };
    window.addEventListener('scroll', onScroll, {passive:true});
    onScroll();
    return ()=>window.removeEventListener('scroll', onScroll);
  },[]);

  return (
    <>
      <Nav active={activeSection} onNavigate={navigate} onBook={()=>openBook()} light={navLight}/>
      <main>
        <Hero onBook={()=>openBook()} onExplore={()=>navigate('collections')}/>
        <IntroStrip/>
        <Collections onOpen={(id)=>setCollectionId(id)}/>
        <Designer onLearnMore={()=>navigate('designer')}/>
        <Bespoke onBook={()=>openBook()}/>
        <Lookbook onOpenImg={(i)=>setLightboxIdx(i)}/>
        <Press/>
        <Contact onBook={()=>openBook()}/>
      </main>
      <Footer onNavigate={navigate}/>
      <WhatsAppFab/>

      {collectionId && <CollectionView collectionId={collectionId} onClose={()=>setCollectionId(null)}/>}
      {lightboxIdx!=null && (
        <Lightbox
          index={lightboxIdx}
          onClose={()=>setLightboxIdx(null)}
          onNext={()=>setLightboxIdx(i=>(i+1) % window.PG_DATA.LOOKBOOK.length)}
          onPrev={()=>setLightboxIdx(i=>(i-1+window.PG_DATA.LOOKBOOK.length) % window.PG_DATA.LOOKBOOK.length)}
        />
      )}
      <ConsultationForm open={formOpen} onClose={()=>setFormOpen(false)} initialCollection={formInitColl}/>
    </>
  );
}

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