// Tweaks — small design controls for the Venture Group site.
// Visible only when the Tweaks toolbar toggle is on.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#05C8D8",
  "headingStyle": "Serif"
}/*EDITMODE-END*/;

function VgTweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.documentElement.style.setProperty(
      "--accent-soft",
      t.accent + "24"
    );
    document.body.classList.toggle("sans-headings", t.headingStyle === "Sans");
  }, [t.accent, t.headingStyle]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent color"
        value={t.accent}
        options={["#05C8D8", "#7B5FF4", "#1A7A52"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Typography" />
      <TweakRadio
        label="Headings"
        value={t.headingStyle}
        options={["Serif", "Sans"]}
        onChange={(v) => setTweak("headingStyle", v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<VgTweaksApp />);