// Main app
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "dark",
  "lang": "pt"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang || "pt";

  useEffect(() => {
    document.documentElement.setAttribute("data-palette", tweaks.palette || "dark");
  }, [tweaks.palette]);

  const c = COPY[lang];

  return (
    <>
      <Nav c={c} lang={lang} setLang={(l) => setTweak("lang", l)} />
      <Ticker items={c.ticker} />
      <Hero c={c} lang={lang} />
      <Areas c={c} />
      <Cases c={c} />
      <Insights c={c} />
      <Contact c={c} />
      <Footer c={c} lang={lang} />

      <TweaksPanel title="Tweaks">
        <TweakSection label={lang === "pt" ? "Paleta" : "Palette"} />
        <TweakRadio
          label={lang === "pt" ? "Tema" : "Theme"}
          value={tweaks.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            { value: "dark",     label: "Dark" },
            { value: "light",    label: "Light" },
            { value: "contrast", label: "Hi-con" },
          ]}
        />
        <TweakSection label={lang === "pt" ? "Idioma" : "Language"} />
        <TweakRadio
          label={lang === "pt" ? "Conteúdo" : "Content"}
          value={tweaks.lang}
          onChange={(v) => setTweak("lang", v)}
          options={[
            { value: "pt", label: "PT" },
            { value: "en", label: "EN" },
          ]}
        />
      </TweaksPanel>
    </>
  );
}

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