/* Tweaks app — mounts ONLY the panel; drives CSS vars on the vanilla page. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#930500",
  "theme": "daylight",
  "display": "Instrument Serif",
  "round": "soft"
}/*EDITMODE-END*/;

const ACCENTS = {
  "#930500": "#6f0400", // oxblood red (brand)
  "#4f7bb3": "#3f6494", // deep powder blue
  "#7f8c6b": "#677255", // sage
  "#b06a72": "#94545b"  // dusty rose
};
const RADII = { sharp: ["6px", "10px"], soft: ["18px", "30px"], pill: ["28px", "40px"] };

function ApplyTweaks(t) {
  const root = document.documentElement.style;
  root.setProperty("--accent", t.accent);
  root.setProperty("--clay", t.accent);
  root.setProperty("--clay-deep", ACCENTS[t.accent] || t.accent);
  root.setProperty("--display", `"${t.display}", Georgia, serif`);
  const [r, rl] = RADII[t.round] || RADII.soft;
  root.setProperty("--radius", r);
  root.setProperty("--radius-lg", rl);
  document.body.classList.toggle("theme-evening", t.theme === "evening");
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => ApplyTweaks(t), [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Palette" />
      <TweakColor label="Accent" value={t.accent}
        options={["#930500", "#4f7bb3", "#7f8c6b", "#b06a72"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakRadio label="Mood" value={t.theme}
        options={["daylight", "evening"]}
        onChange={(v) => setTweak("theme", v)} />
      <TweakSection label="Type & shape" />
      <TweakSelect label="Display font" value={t.display}
        options={["Instrument Serif", "Cormorant Garamond", "Playfair Display", "DM Serif Display"]}
        onChange={(v) => setTweak("display", v)} />
      <TweakRadio label="Corners" value={t.round}
        options={["sharp", "soft", "pill"]}
        onChange={(v) => setTweak("round", v)} />
    </TweaksPanel>
  );
}

// apply current defaults immediately (host keeps the EDITMODE block in sync on reload)
ApplyTweaks(TWEAK_DEFAULTS);

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