/* global React, ReactDOM, Nav, Footer, WhatsAppFab, HomePage, CatalogPage, VehicleDetailPage, ReservationPage, AboutPage, ContactPage, ConditionsPage, FaqPage */
const { useState:useStateA, useEffect:useEffectA } = React;

function useRoute(){
  const [route,setRoute]=useStateA(location.hash.replace(/^#/,"")||"/");
  useEffectA(()=>{
    const f=()=>setRoute(location.hash.replace(/^#/,"")||"/");
    window.addEventListener('hashchange',f);
    return ()=>window.removeEventListener('hashchange',f);
  },[]);
  return route;
}

function App(){
  const route=useRoute();
  const path=route.split('?')[0];
  const seg=path.split('/').filter(Boolean);

  // scroll to top on page change (detail/reservation handle their own)
  useEffectA(()=>{
    if(seg[0]!=="voiture") window.scrollTo(0,0);
  },[path]);

  // (re)init scroll reveal after each route render.
  // Belt-and-suspenders: IntersectionObserver for staggered reveal when the tab
  // is active, PLUS a scroll/resize handler computing visibility directly (works
  // even if IO is throttled), PLUS an initial pass so above-fold content shows
  // immediately. Nothing can stay permanently hidden.
  useEffectA(()=>{
    let io;
    const revealNear=()=>{
      const vh=window.innerHeight;
      document.querySelectorAll('.reveal:not(.in)').forEach(el=>{
        if(el.getBoundingClientRect().top < vh*0.92) el.classList.add('in');
      });
    };
    const t=setTimeout(()=>{
      io=new IntersectionObserver((ents)=>{
        ents.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });
      },{threshold:.1,rootMargin:"0px 0px -6% 0px"});
      document.querySelectorAll('.reveal:not(.in)').forEach(el=>io.observe(el));
      revealNear();
    },30);
    window.addEventListener('scroll',revealNear,{passive:true});
    window.addEventListener('resize',revealNear,{passive:true});
    return ()=>{clearTimeout(t);io&&io.disconnect();window.removeEventListener('scroll',revealNear);window.removeEventListener('resize',revealNear);};
  },[route]);

  let Page;
  switch(seg[0]){
    case undefined: Page=<HomePage/>; break;
    case "voitures": Page=<CatalogPage route={route}/>; break;
    case "voiture": Page=<VehicleDetailPage route={route}/>; break;
    case "reservation": Page=<ReservationPage route={route}/>; break;
    case "a-propos": Page=<AboutPage/>; break;
    case "conditions": Page=<ConditionsPage/>; break;
    case "contact": Page=<ContactPage/>; break;
    case "faq": Page=<FaqPage/>; break;
    default: Page=<HomePage/>;
  }
  return <>
    <Nav route={path}/>
    <main key={route}>{Page}</main>
    <Footer/>
    <WhatsAppFab/>
    <MobileActionBar/>
  </>;
}

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