// App + Tweaks wiring — fonts are fixed (Vipnagorgialla + Roboto per user)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "amber"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.classList.toggle("theme-light", tweaks.theme === "light");
    document.body.classList.toggle("theme-dark", tweaks.theme === "dark");
    ["red", "blue", "green", "mono", "amber"].forEach((a) => {
      document.body.classList.toggle(`accent-${a}`, tweaks.accent === a);
    });
    setTimeout(() => { window.__bindHovers?.(); window.__bindReveals?.(); }, 50);
  }, [tweaks]);

  return (
    <>
      <Hero />
      <Marquee />
      <Metrics />
      <TrustedBy />
      <Authority />
      <Story />
      <Framework />
      <Difference />
      <Vision />
      <CTA />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          onChange={(v) => setTweak("theme", v)}
          options={[
            { value: "dark", label: "Dark" },
            { value: "light", label: "Light" },
          ]}
        />
        <TweakSection label="Accent color" />
        <TweakRadio
          label="Hue"
          value={tweaks.accent}
          onChange={(v) => setTweak("accent", v)}
          options={[
            { value: "amber", label: "Amber" },
            { value: "red", label: "Red" },
            { value: "blue", label: "Blue" },
            { value: "green", label: "Green" },
            { value: "mono", label: "Mono" },
          ]}
        />
      </TweaksPanel>
    </>
  );
};

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