/* Consilium Creators — Tweaks panel (mounts beside the plain-HTML page) */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "ivory",
  "headline": "Cormorant",
  "body": "Hanken Grotesk",
  "accent": "#e6b8ad"
}/*EDITMODE-END*/;

const DISPLAY_MAP = {
  "Cormorant": '"Cormorant Garamond", Georgia, serif',
  "EB Garamond": '"EB Garamond", Georgia, serif'
};
const BODY_MAP = {
  "Hanken Grotesk": '"Hanken Grotesk", system-ui, sans-serif',
  "Newsreader": '"Newsreader", Georgia, serif'
};
const ACCENTS = [
  { c: "#e6b8ad", ink: "#9c5a4a" }, // blush
  { c: "#b8c6a8", ink: "#5d7048" }, // sage
  { c: "#aec4d6", ink: "#4a6781" }, // sky
  { c: "#e8cd8b", ink: "#8f6f24" }  // gold
];

function applyTweaks(t) {
  var root = document.documentElement;
  root.setAttribute("data-theme", t.theme);
  root.style.setProperty("--font-display", DISPLAY_MAP[t.headline] || DISPLAY_MAP.Cormorant);
  root.style.setProperty("--font-body", BODY_MAP[t.body] || BODY_MAP["Hanken Grotesk"]);
  var a = ACCENTS.find(function (x) { return x.c === t.accent; }) || ACCENTS[0];
  root.style.setProperty("--accent2", a.c);
  root.style.setProperty("--accent2-ink", a.ink);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(function () { applyTweaks(t); }, [t.theme, t.headline, t.body, t.accent]);

  return (
    React.createElement(TweaksPanel, null,
      React.createElement(TweakSection, { label: "Aesthetic" }),
      React.createElement(TweakRadio, {
        label: "Theme", value: t.theme,
        options: ["ivory", "ink", "parchment"],
        onChange: function (v) { setTweak("theme", v); }
      }),
      React.createElement(TweakSection, { label: "Typography" }),
      React.createElement(TweakRadio, {
        label: "Headline", value: t.headline,
        options: ["Cormorant", "EB Garamond"],
        onChange: function (v) { setTweak("headline", v); }
      }),
      React.createElement(TweakRadio, {
        label: "Body text", value: t.body,
        options: ["Hanken Grotesk", "Newsreader"],
        onChange: function (v) { setTweak("body", v); }
      }),
      React.createElement(TweakSection, { label: "Accent" }),
      React.createElement(TweakColor, {
        label: "Secondary", value: t.accent,
        options: ACCENTS.map(function (x) { return x.c; }),
        onChange: function (v) { setTweak("accent", v); }
      })
    )
  );
}

// Apply tweaks (the EDITMODE block above is the persisted source of truth) before mount.
applyTweaks(TWEAK_DEFAULTS);

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(React.createElement(App));