/* tweaks-app.jsx — mounts the Tweaks panel; applies fonts + motion.
   Theme is locked to red (white bg, red accent) per the brief. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headFont": "Space Grotesk",
  "motion": true
}/*EDITMODE-END*/;

const HEAD_FONTS = ["Space Grotesk", "Sora", "Schibsted Grotesk"];

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", "red");
    root.style.setProperty("--font-head", `'${t.headFont}', system-ui, sans-serif`);
    document.body.classList.toggle("no-motion", !t.motion);
  }, [t.headFont, t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Typography" />
      <TweakSelect label="Headline font" value={t.headFont}
        options={HEAD_FONTS}
        onChange={(v) => setTweak("headFont", v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Entrance animations" value={t.motion}
        onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweak-root")).render(<TweaksApp />);