/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "ink": "#0F2E25",
  "paper": "#F5EFE2",
  "gold": "#B8893E",
  "padScale": 1
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--ink", tweaks.ink);
    r.style.setProperty("--paper", tweaks.paper);
    r.style.setProperty("--gold", tweaks.gold);
    r.style.setProperty("--pad-y", `${140 * tweaks.padScale}px`);
  }, [tweaks]);

  return (
    <>
      <Hero />
      <About />
      <HowItWorks />
      <Partners />
      <Give />
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Palette">
          <TweakColor label="Ink (deep green)" value={tweaks.ink} onChange={v => setTweak("ink", v)} />
          <TweakColor label="Paper (cream)" value={tweaks.paper} onChange={v => setTweak("paper", v)} />
          <TweakColor label="Gold accent" value={tweaks.gold} onChange={v => setTweak("gold", v)} />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Section padding"
            value={String(tweaks.padScale)}
            options={[{ value: "0.75", label: "Tight" }, { value: "1", label: "Default" }, { value: "1.25", label: "Roomy" }]}
            onChange={v => setTweak("padScale", parseFloat(v))}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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