/* Tweaks for Shaivy Bhatia portfolio — single-font system (Bricolage Grotesque) */
const TYPEFACES = {
  "Bricolage Grotesque": '"Bricolage Grotesque", system-ui, sans-serif',
  "Space Grotesk": '"Space Grotesk", system-ui, sans-serif',
  "Hanken Grotesk": '"Hanken Grotesk", system-ui, sans-serif',
};
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A86FD6",
  "typeface": "Bricolage Grotesque",
  "weight": "contrast",
  "cards": "cover",
  "motion": "lively",
  "motif": "echoed",
  "gemcard": "solid"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    const fam = TYPEFACES[t.typeface] || TYPEFACES["Bricolage Grotesque"];
    root.style.setProperty("--accent", t.accent);
    // one font everywhere — point every token at the chosen family
    root.style.setProperty("--serif", fam);
    root.style.setProperty("--sans", fam);
    root.style.setProperty("--display", fam);
    root.style.setProperty("--hero-font", fam);
    root.dataset.display = t.weight;
    root.dataset.cards = t.cards;
    root.dataset.motion = t.motion;
    root.dataset.motif = t.motif;
    root.dataset.gemcard = t.gemcard;
  }, [t.accent, t.typeface, t.weight, t.cards, t.motion, t.motif, t.gemcard]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Type — one font, used differently" />
      <TweakSelect
        label="Typeface"
        value={t.typeface}
        options={["Bricolage Grotesque", "Space Grotesk", "Hanken Grotesk"]}
        onChange={(v) => setTweak("typeface", v)}
      />
      <TweakRadio
        label="Weight treatment"
        value={t.weight}
        options={["contrast", "heavy", "even", "airy"]}
        onChange={(v) => setTweak("weight", v)}
      />
      <TweakSection label="Identity" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#A86FD6", "#C45C9E", "#7C5CE0", "#E0518A", "#5A8BF5"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Layout" />
      <TweakRadio
        label="Case cards"
        value={t.cards}
        options={["cover", "minimal"]}
        onChange={(v) => setTweak("cards", v)}
      />
      <TweakRadio
        label="Playful shapes"
        value={t.motif}
        options={["contained", "echoed"]}
        onChange={(v) => setTweak("motif", v)}
      />
      <TweakRadio
        label="AI gem cards"
        value={t.gemcard}
        options={["solid", "subtle", "fun"]}
        onChange={(v) => setTweak("gemcard", v)}
      />
      <TweakSection label="Motion" />
      <TweakRadio
        label="Intensity"
        value={t.motion}
        options={["lively", "subtle", "off"]}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

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