// Tweaks for index.html — three expressive controls that reshape the feel:
//   • Mood     — palette story (Deltek / Aurora / Editorial / Graphite)
//   • Density  — rhythm + scale (Cozy / Standard / Editorial)
//   • Hero     — entry atmosphere (Glow / Grid / Beam / Aperture)

const KB_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "deltek",
  "density": "standard",
  "hero": "glow"
}/*EDITMODE-END*/;

function KBTweaksApp() {
  const [t, setTweak] = useTweaks(KB_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const body = document.body;
    // wipe any previous tweak classes
    [...body.classList].forEach((c) => {
      if (c.startsWith("mood-") || c.startsWith("density-") || c.startsWith("hero-")) {
        body.classList.remove(c);
      }
    });
    body.classList.add(`mood-${t.mood}`);
    body.classList.add(`density-${t.density}`);
    body.classList.add(`hero-${t.hero}`);
  }, [t.mood, t.density, t.hero]);

  // Editorial mood swaps to a serif — load Fraunces + Source Serif 4 lazily.
  React.useEffect(() => {
    if (t.mood !== "editorial") return;
    if (document.getElementById("kb-editorial-fonts")) return;
    const l = document.createElement("link");
    l.id = "kb-editorial-fonts";
    l.rel = "stylesheet";
    l.href = "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap";
    document.head.appendChild(l);
  }, [t.mood]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mood" />
      <TweakSelect
        label="Palette story"
        value={t.mood}
        options={[
          { value: "deltek",    label: "Deltek — navy + blue" },
          { value: "aurora",    label: "Aurora — indigo + cyan" },
          { value: "editorial", label: "Editorial — cream + serif" },
          { value: "graphite",  label: "Graphite — monochrome" },
        ]}
        onChange={(v) => setTweak("mood", v)}
      />

      <TweakSection label="Rhythm" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={["cozy", "standard", "editorial"]}
        onChange={(v) => setTweak("density", v)}
      />

      <TweakSection label="Hero" />
      <TweakSelect
        label="Atmosphere"
        value={t.hero}
        options={[
          { value: "glow",     label: "Glow — soft radial wash" },
          { value: "grid",     label: "Grid — blueprint mesh" },
          { value: "beam",     label: "Beam — diagonal light" },
          { value: "aperture", label: "Aperture — concentric rings" },
        ]}
        onChange={(v) => setTweak("hero", v)}
      />
    </TweaksPanel>
  );
}

const __kbTweakMount = document.createElement("div");
document.body.appendChild(__kbTweakMount);
ReactDOM.createRoot(__kbTweakMount).render(<KBTweaksApp />);