/* Tweaks island — controls the static HTML page via CSS vars + body class.
   Renders only the Tweaks panel; page content stays canonical HTML. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "accent": "#f97316",
  "displayFont": "Archivo",
  "motion": true
}/*EDITMODE-END*/;

const FONT_STACK = {
  "Archivo": '"Archivo", system-ui, sans-serif',
  "Anton": '"Anton", system-ui, sans-serif',
  "Space Grotesk": '"Space Grotesk", system-ui, sans-serif',
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--font-display", FONT_STACK[t.displayFont] || FONT_STACK.Archivo);
    document.body.classList.toggle("hero-b", t.heroLayout === "centered");
    document.body.classList.toggle("no-motion", !t.motion);
  }, [t.accent, t.displayFont, t.heroLayout, t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero layout" />
      <TweakRadio
        label="Direction"
        value={t.heroLayout}
        options={["split", "centered"]}
        onChange={(v) => setTweak("heroLayout", v)}
      />
      <TweakSection label="Identity" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#2563eb", "#0d5cab", "#0ea5e9", "#f97316"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSelect
        label="Display font"
        value={t.displayFont}
        options={["Archivo", "Anton", "Space Grotesk"]}
        onChange={(v) => setTweak("displayFont", v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle
        label="Animations"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

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