/* Tweaks app — renders only the Tweaks panel and applies choices to the
   vanilla portfolio via CSS custom properties + body/html classes. */
const { useEffect } = React;

const ACCENTS = {
  "UH Scarlet": { c: "#C8102E", d: "#9E0B23" },
  "Crimson":    { c: "#A4133C", d: "#7C0E2D" },
  "Navy":       { c: "#1D4E89", d: "#143862" },
  "Forest":     { c: "#1F6B4A", d: "#154E36" },
  "Ink":        { c: "#2E2A24", d: "#171410" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "UH Scarlet",
  "scale": 1,
  "paper": "Warm",
  "snap": true
}/*EDITMODE-END*/;

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

  useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS["UH Scarlet"];
    root.style.setProperty("--scarlet", a.c);
    root.style.setProperty("--scarlet-d", a.d);
    root.style.setProperty("--scale", String(t.scale));
    if (t.paper === "Pure white") {
      root.style.setProperty("--paper", "#FFFFFF");
      root.style.setProperty("--paper-2", "#F6F5F2");
    } else {
      root.style.setProperty("--paper", "#FBFAF7");
      root.style.setProperty("--paper-2", "#F4F1EA");
    }
    root.classList.toggle("snap", !!t.snap);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Identity" />
      <TweakSelect label="Accent" value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak("accent", v)} />
      <TweakRadio label="Background" value={t.paper}
        options={["Warm", "Pure white"]}
        onChange={(v) => setTweak("paper", v)} />
      <TweakSection label="Typography" />
      <TweakSlider label="Type scale" value={t.scale} min={0.85} max={1.2} step={0.01}
        onChange={(v) => setTweak("scale", v)} />
      <TweakSection label="Presenting" />
      <TweakToggle label="Snap section-to-section" value={t.snap}
        onChange={(v) => setTweak("snap", v)} />
    </TweaksPanel>
  );
}

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