/* EnableUnion — app shell, routing, tweaks */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "fr",
  "density": "regular"
}/*EDITMODE-END*/;

function App() {
  const route = useRoute();
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang === "en" ? "en" : "fr";
  const t = window.I18N[lang];

  // persist language to localStorage too, so the cookie banner copy stays right
  React.useEffect(() => {
    try { localStorage.setItem("eu_lang", lang); } catch (e) {}
    document.documentElement.lang = lang;
    document.documentElement.setAttribute("data-density", tweaks.density);
    document.title = lang === "fr"
      ? "EnableUnion — Outiller l'individu, fortifier le collectif"
      : "EnableUnion — Equip the individual, strengthen the whole";
  }, [lang, tweaks.density]);

  const setLang = (l) => setTweak("lang", l);

  let page;
  switch (route) {
    case "/about":    page = <AboutPage t={t} />; break;
    case "/products": page = <ProductsPage t={t} />; break;
    case "/contact":  page = <ContactPage t={t} />; break;
    case "/legal":    page = <LegalPage t={t} kind="legal" />; break;
    case "/privacy":  page = <LegalPage t={t} kind="privacy" />; break;
    case "/terms":    page = <LegalPage t={t} kind="terms" />; break;
    case "/cookies":  page = <LegalPage t={t} kind="cookies" />; break;
    case "/":
    default:          page = <HomePage t={t} />;
  }

  // re-key so each route gets fade-in
  return (
    <div className="shell" data-screen-label={"Route " + route}>
      <TopBar t={t} lang={lang} setLang={setLang} />
      <Header t={t} route={route} />
      <main key={route}>{page}</main>
      <Footer t={t} />
      <CookieBanner t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "fr" ? "Langue" : "Language"} />
        <TweakRadio
          label={lang === "fr" ? "Langue du site" : "Site language"}
          value={tweaks.lang}
          onChange={(v) => setTweak("lang", v)}
          options={[
            { value: "fr", label: "Français" },
            { value: "en", label: "English" },
          ]}
        />
        <TweakSection label={lang === "fr" ? "Présentation" : "Layout"} />
        <TweakRadio
          label={lang === "fr" ? "Densité" : "Density"}
          value={tweaks.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "regular", label: lang === "fr" ? "Aéré" : "Spacious" },
            { value: "compact", label: lang === "fr" ? "Compact" : "Compact" },
          ]}
        />
      </TweaksPanel>
    </div>
  );
}

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