// Main app
function App(){
  const [lang,setLang]=useLang();
  const route=useRoute();
  const {data:allExc}=useFetch('/excursions',[]);
  const {data:allVeh}=useFetch('/vehicles',[]);
  const DEFAULTS=/*EDITMODE-BEGIN*/{
    "heroMode":"rotator",
    "density":"comfy",
    "theme":"light",
    "primary":"#1FA0AE"
  }/*EDITMODE-END*/;
  const [tw,setTw]=useTweaks(DEFAULTS);
  React.useEffect(()=>{
    const d=document.documentElement;
    d.dataset.theme=tw.theme==="dark"?"dark":"";
    d.dataset.density=tw.density==="compact"?"compact":"";
    d.style.setProperty("--lagoon",tw.primary);
  },[tw]);
  const pages={
    "/voyageurs":<VoyageursPage lang={lang} allExc={allExc} allVeh={allVeh}/>,
    "/proprietaires":<ProprietairesPage lang={lang}/>,
    "/tarifs":<TarifsPage lang={lang} allExc={allExc} allVeh={allVeh}/>,
    "/contact":<ContactPage lang={lang}/>
  };
  return (
    <>
      <Header lang={lang} setLang={setLang} route={route}/>
      {pages[route]||<HomePage lang={lang} tweaks={tw} allExc={allExc}/>}
      <Footer lang={lang}/>
      <WhatsAppFab lang={lang}/>
      <TweaksPanel title="Tweaks">
        <TweakSection title="Visuel">
          <TweakRadio label="Hero" value={tw.heroMode} onChange={v=>setTw("heroMode",v)}
            options={[{value:"rotator",label:"Rotation"},{value:"static",label:"Statique"}]}/>
          <TweakRadio label="Densité" value={tw.density} onChange={v=>setTw("density",v)}
            options={[{value:"comfy",label:"Aéré"},{value:"compact",label:"Compact"}]}/>
          <TweakRadio label="Thème" value={tw.theme} onChange={v=>setTw("theme",v)}
            options={[{value:"light",label:"Clair"},{value:"dark",label:"Sombre"}]}/>
        </TweakSection>
        <TweakSection title="Accent">
          <TweakColor label="Primaire" value={tw.primary} onChange={v=>setTw("primary",v)}
            options={["#1FA0AE","#0F4C5C","#C9A24A","#E8765C"]}/>
        </TweakSection>
      </TweaksPanel>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);