// app.jsx — root + Tweaks panel wiring

const TWEAK_DEFAULTS = {
  "theme": "light",
  "palette": "ue",
  "typo": "default"
};

function App() {
  const { values, setTweak } = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", values.theme === "dark" ? "dark" : "light");
    root.setAttribute("data-palette", values.palette);
    root.setAttribute("data-typo", values.typo);
  }, [values.theme, values.palette, values.typo]);

  useReveal();

  const toggleTheme = () => setTweak("theme", values.theme === "dark" ? "light" : "dark");

  return (
    <React.Fragment>
      <Nav theme={values.theme} onToggleTheme={toggleTheme} />
      <main>
        <Hero />
        <ToolsSection />
        <HowItWorks />
        <UseCases />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Apparence">
          <TweakRadio
            label="Thème"
            value={values.theme}
            options={[
              { value: "light", label: "Clair" },
              { value: "dark", label: "Sombre" }
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
          <TweakRadio
            label="Palette"
            value={values.palette}
            options={[
              { value: "ue", label: "UE" },
              { value: "editorial", label: "Édito" },
              { value: "terminal", label: "Terminal" }
            ]}
            onChange={(v) => setTweak("palette", v)}
          />
          <TweakRadio
            label="Typo"
            value={values.typo}
            options={[
              { value: "default", label: "Défaut" },
              { value: "editorial", label: "Serif" },
              { value: "sans", label: "Sans" },
              { value: "mono", label: "Mono" }
            ]}
            onChange={(v) => setTweak("typo", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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