/* ============================================================
   Tweaks — palette & type for the Păun site
   ============================================================ */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "Silk",
  "displayFont": "Bodoni Moda",
  "bodyFont": "Jost",
  "baseSize": 17,
  "motion": true
}/*EDITMODE-END*/;

const THEMES = ["Silk", "Asphalt", "Nude", "Olive", "Bordeaux", "Slate", "Plum", "Noir"];
const DISPLAY_FONTS = ["Bodoni Moda", "Cormorant", "Marcellus", "Playfair Display"];
const BODY_FONTS = ["Jost", "Hanken Grotesk", "Schibsted Grotesk"];

const FONT_HREF = {
  "Cormorant": "Cormorant:ital,wght@0,400;0,500;1,400",
  "Marcellus": "Marcellus",
  "Playfair Display": "Playfair+Display:ital,wght@0,400;0,500;1,400",
  "Hanken Grotesk": "Hanken+Grotesk:wght@300;400;500",
  "Schibsted Grotesk": "Schibsted+Grotesk:wght@300;400;500"
};
const _loaded = {};
function ensureFont(name) {
  if (!FONT_HREF[name] || _loaded[name]) return;
  const l = document.createElement("link");
  l.rel = "stylesheet";
  l.href = "https://fonts.googleapis.com/css2?family=" + FONT_HREF[name] + "&display=swap";
  document.head.appendChild(l);
  _loaded[name] = true;
}

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

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.theme.toLowerCase());
  }, [t.theme]);
  React.useEffect(() => {
    ensureFont(t.displayFont);
    document.documentElement.style.setProperty("--font-display", `'${t.displayFont}', Georgia, serif`);
  }, [t.displayFont]);
  React.useEffect(() => {
    ensureFont(t.bodyFont);
    document.documentElement.style.setProperty("--font-body", `'${t.bodyFont}', system-ui, sans-serif`);
  }, [t.bodyFont]);
  React.useEffect(() => { document.body.style.fontSize = t.baseSize + "px"; }, [t.baseSize]);
  React.useEffect(() => { document.documentElement.classList.toggle("no-motion", !t.motion); }, [t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Colour palette" />
      <TweakSelect label="Theme" value={t.theme} options={THEMES} onChange={(v) => setTweak("theme", v)} />
      <TweakSection label="Typography" />
      <TweakSelect label="Display font" value={t.displayFont} options={DISPLAY_FONTS} onChange={(v) => setTweak("displayFont", v)} />
      <TweakSelect label="Body font" value={t.bodyFont} options={BODY_FONTS} onChange={(v) => setTweak("bodyFont", v)} />
      <TweakSlider label="Base size" value={t.baseSize} min={15} max={20} step={1} unit="px" onChange={(v) => setTweak("baseSize", v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Scroll reveals" value={t.motion} onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

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