/* Tweaks app — drives the vanilla site via CSS variables + data attrs */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2b53ff",
  "font": "Inter Tight",
  "motion": "on",
  "heroCase": "upper"
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Inter Tight": '"Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif',
  "Archivo": '"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif',
  "Space Grotesk": '"Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif'
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    const stack = FONT_STACKS[t.font] || FONT_STACKS["Inter Tight"];
    root.style.setProperty("--font-display", stack);
    root.style.setProperty("--font-body", stack);
    root.setAttribute("data-motion", t.motion === "off" ? "off" : "on");
    const name = document.querySelector(".hero__name");
    if (name) name.style.textTransform = t.heroCase === "upper" ? "uppercase" : "none";
  }, [t.accent, t.font, t.motion, t.heroCase]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor label="Accent color" value={t.accent}
        options={["#2b53ff", "#c6f135", "#ff5a3c", "#9b7bff", "#ffffff"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Typeface" />
      <TweakSelect label="Display font" value={t.font}
        options={["Inter Tight", "Archivo", "Space Grotesk"]}
        onChange={(v) => setTweak("font", v)} />
      <TweakRadio label="Hero case" value={t.heroCase}
        options={["upper", "title"]}
        onChange={(v) => setTweak("heroCase", v)} />
      <TweakSection label="Motion" />
      <TweakRadio label="Animations" value={t.motion}
        options={["on", "off"]}
        onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

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