// tweaks.jsx — expressive tweak controls for the home page.
// Tweaks the FEEL of the site, not single-property pixel pushing:
//   • palette  → swap accent + shade across the whole page
//   • serif    → cycle the heading typeface (Restora / Collinger / Qurova)
//   • rhythm   → editorial / spacious / compact section pacing

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "lemon",
  "serif": "Forum",
  "rhythm": "editorial"
}/*EDITMODE-END*/;

// ── palette definitions ────────────────────────────────────────────
// each palette retunes: --accent, --accent-ink, --accent-soft, --accent-glow,
// --shade, --shade-soft, --shade-line, --text, --ink, --panel-deep, --bg-soft
const PALETTES = {
  lemon: { // current — yellow + indigo + lavender
    label: "Lemon",
    swatch: ["#dbe35b", "#a19ece", "#2b317d"],
    vars: {
      "--accent": "#dbe35b",
      "--accent-ink": "#2b317d",
      "--accent-soft": "#f0f4b4",
      "--accent-glow": "rgba(219, 227, 91, 0.35)",
      "--shade": "#a19ece",
      "--shade-soft": "#ece9f6",
      "--shade-line": "rgba(161, 158, 206, 0.35)",
      "--text": "#2b317d",
      "--ink": "#181d52",
      "--panel-deep": "#0b0e29",
      "--bg-soft": "#f7f7fb",
      "--bg-tint": "#f1f2f8",
      "--muted": "rgba(43, 49, 125, 0.62)",
      "--hairline": "rgba(43, 49, 125, 0.12)",
    },
  },
  sage: { // muted apothecary
    label: "Sage",
    swatch: ["#c4d3a8", "#8fa68a", "#28342a"],
    vars: {
      "--accent": "#c4d3a8",
      "--accent-ink": "#2f4233",
      "--accent-soft": "#e7eed8",
      "--accent-glow": "rgba(196, 211, 168, 0.4)",
      "--shade": "#8fa68a",
      "--shade-soft": "#e1e8db",
      "--shade-line": "rgba(143, 166, 138, 0.32)",
      "--text": "#2f4233",
      "--ink": "#1c2820",
      "--panel-deep": "#1a241d",
      "--bg-soft": "#f4f6ef",
      "--bg-tint": "#ecf0e2",
      "--muted": "rgba(47, 66, 51, 0.62)",
      "--hairline": "rgba(47, 66, 51, 0.14)",
    },
  },
  terracotta: { // warm editorial
    label: "Clay",
    swatch: ["#e8a87c", "#c38e6c", "#4a2818"],
    vars: {
      "--accent": "#e8a87c",
      "--accent-ink": "#4a2818",
      "--accent-soft": "#f5dccb",
      "--accent-glow": "rgba(232, 168, 124, 0.42)",
      "--shade": "#c38e6c",
      "--shade-soft": "#f0e0d4",
      "--shade-line": "rgba(195, 142, 108, 0.32)",
      "--text": "#4a2818",
      "--ink": "#2e160a",
      "--panel-deep": "#1a0d06",
      "--bg-soft": "#f7f1ea",
      "--bg-tint": "#f1e5d8",
      "--muted": "rgba(74, 40, 24, 0.6)",
      "--hairline": "rgba(74, 40, 24, 0.12)",
    },
  },
  noir: { // monochrome ink — no warm accent
    label: "Noir",
    swatch: ["#cdd2e8", "#7e85b8", "#0e1233"],
    vars: {
      "--accent": "#cdd2e8",
      "--accent-ink": "#0e1233",
      "--accent-soft": "#e6e9f4",
      "--accent-glow": "rgba(205, 210, 232, 0.5)",
      "--shade": "#7e85b8",
      "--shade-soft": "#dde0ef",
      "--shade-line": "rgba(126, 133, 184, 0.3)",
      "--text": "#1e234e",
      "--ink": "#0e1233",
      "--panel-deep": "#080a20",
      "--bg-soft": "#f4f5fa",
      "--bg-tint": "#eaecf5",
      "--muted": "rgba(30, 35, 78, 0.62)",
      "--hairline": "rgba(30, 35, 78, 0.12)",
    },
  },
};

// ── serif stacks ──────────────────────────────────────────────────
const SERIFS = {
  Forum:     `"Forum", "Iowan Old Style", Georgia, serif`,
  Restora:   `"Restora", "Iowan Old Style", Georgia, serif`,
  Collinger: `"Collinger", "Iowan Old Style", Georgia, serif`,
  Qurova:    `"Qurova", "Iowan Old Style", Georgia, serif`,
};

// ── rhythm scaling (multiplier on section padding + headline sizes) ─
const RHYTHMS = {
  compact:   { padScale: 0.7, headScale: 0.88, label: "Compact" },
  editorial: { padScale: 1.0, headScale: 1.0,  label: "Editorial" },
  spacious:  { padScale: 1.35, headScale: 1.12, label: "Spacious" },
};

// ── live-apply tweaks to :root ───────────────────────────────────
function applyTweaks(t) {
  const root = document.documentElement;

  // palette
  const pal = PALETTES[t.palette] || PALETTES.lemon;
  for (const [k, v] of Object.entries(pal.vars)) root.style.setProperty(k, v);

  // serif
  root.style.setProperty("--serif", SERIFS[t.serif] || SERIFS.Restora);

  // rhythm — write two scalars; style hook below uses them
  const r = RHYTHMS[t.rhythm] || RHYTHMS.editorial;
  root.style.setProperty("--rhythm-pad", String(r.padScale));
  root.style.setProperty("--rhythm-head", String(r.headScale));
}

// rhythm needs to actually do something — inject a <style> once
(function injectRhythmStyle() {
  if (document.getElementById("__rhythm-style")) return;
  const s = document.createElement("style");
  s.id = "__rhythm-style";
  s.textContent = `
    .section { padding: calc(96px * var(--rhythm-pad, 1)) 0; }
    .section-sm { padding: calc(64px * var(--rhythm-pad, 1)) 0; }
    .hero { padding: calc(48px * var(--rhythm-pad, 1)) 0 calc(120px * var(--rhythm-pad, 1)); }
    .hero h1 { font-size: clamp(40px, calc(7.5vw * var(--rhythm-head, 1)), calc(96px * var(--rhythm-head, 1))); }
    h2, .h-1 { font-size: clamp(32px, calc(4vw * var(--rhythm-head, 1)), calc(48px * var(--rhythm-head, 1))); }
    .site-footer { padding: calc(72px * var(--rhythm-pad, 1)) 0 28px; }
  `;
  document.head.appendChild(s);
})();

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

  // re-apply whenever tweaks change
  React.useEffect(() => { applyTweaks(t); }, [t.palette, t.serif, t.rhythm]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor
        label="Mood"
        value={PALETTES[t.palette].swatch}
        options={Object.values(PALETTES).map(p => p.swatch)}
        onChange={(arr) => {
          // find which palette key matches the chosen swatch trio
          const key = Object.keys(PALETTES).find(
            k => PALETTES[k].swatch.join() === arr.join()
          ) || "lemon";
          setTweak("palette", key);
        }}
      />

      <TweakSection label="Headlines" />
      <TweakRadio
        label="Typeface"
        value={t.serif}
        options={Object.keys(SERIFS)}
        onChange={(v) => setTweak("serif", v)}
      />

      <TweakSection label="Pacing" />
      <TweakRadio
        label="Rhythm"
        value={t.rhythm}
        options={["compact", "editorial", "spacious"]}
        onChange={(v) => setTweak("rhythm", v)}
      />
    </TweaksPanel>
  );
}

// boot
applyTweaks(TWEAK_DEFAULTS);
const mount = document.getElementById("tweaks-root");
if (mount) ReactDOM.createRoot(mount).render(<TweaksApp />);