/* BinTat modern — App root */
const { useState:useS, useEffect:useE } = React;
const { Nav, Footer, Home, Brands, Logistics, About, Contact, CursorGlow, ScrollProgress, ScrollFX } = window;

const PAGES = { home:Home, brands:Brands, logistics:Logistics, about:About, contact:Contact };
const VALID = Object.keys(PAGES);

function App(){
  const [lang, setLang] = useS(()=> localStorage.getItem('bintat_lang') || 'fr');
  const [page, setPage] = useS(()=>{
    const h = (location.hash||'').replace('#','');
    return VALID.includes(h) ? h : 'home';
  });

  useE(()=>{ localStorage.setItem('bintat_lang', lang); document.documentElement.lang = lang; },[lang]);

  const go = (p)=>{
    if(!VALID.includes(p)) p='home';
    setPage(p);
    history.replaceState(null,'','#'+p);
    window.scrollTo({top:0,behavior:'instant'});
  };

  useE(()=>{
    const onHash = ()=>{ const h=(location.hash||'').replace('#',''); if(VALID.includes(h)) setPage(h); };
    window.addEventListener('hashchange', onHash);
    return ()=>window.removeEventListener('hashchange', onHash);
  },[]);

  const t = { ...window.CONTENT[lang], lang };
  const Page = PAGES[page] || Home;

  const navBar = <Nav t={t} lang={lang} setLang={setLang} page={page} go={go} />;
  return (
    <React.Fragment>
      <ScrollProgress/>
      <ScrollFX/>
      <CursorGlow/>
      {page!=='home' && navBar}
      <Page t={t} go={go} navBar={page==='home' ? navBar : null} />
      <Footer t={t} go={go} />
    </React.Fragment>
  );
}

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