/* Tweaks for Relmu Estudio — drives CSS variables on :root */

const ACCENTS = {
  Terracota:  { accent: "#BC7A47", soft: "rgba(188,122,71,0.12)", ink: "#FBF7F0" },
  Salvia:     { accent: "#6F8270", soft: "rgba(111,130,112,0.14)", ink: "#FBF7F0" },
  "Azul piedra": { accent: "#6E8298", soft: "rgba(110,130,152,0.14)", ink: "#FBF7F0" },
  "Ámbar madera": { accent: "#C08A3E", soft: "rgba(192,138,62,0.14)", ink: "#33291A" },
};

const HEADINGS = {
  "Serif editorial": '"Newsreader", Georgia, serif',
  "Sans redondeada": '"Hanken Grotesk", system-ui, sans-serif',
};

const RELMU_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Terracota",
  "heading": "Serif editorial"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement.style;
  const a = ACCENTS[t.accent] || ACCENTS["Terracota"];
  root.setProperty("--accent", a.accent);
  root.setProperty("--accent-soft", a.soft);
  root.setProperty("--accent-ink", a.ink);
  root.setProperty("--font-display", HEADINGS[t.heading] || HEADINGS["Serif editorial"]);
}

function RelmuTweaks() {
  const [t, setTweak] = useTweaks(RELMU_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t.accent, t.heading]);

  return (
    <TweaksPanel>
      <TweakSection label="Color de marca" />
      <TweakColor
        label="Acento"
        value={(ACCENTS[t.accent] || {}).accent}
        options={Object.values(ACCENTS).map((a) => a.accent)}
        onChange={(hex) => {
          const name = Object.keys(ACCENTS).find((k) => ACCENTS[k].accent === hex);
          if (name) setTweak("accent", name);
        }}
      />
      <TweakSection label="Tipografía de títulos" />
      <TweakRadio
        label="Estilo"
        value={t.heading}
        options={Object.keys(HEADINGS)}
        onChange={(v) => setTweak("heading", v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const el = document.getElementById("tweaks-root");
  if (window.ReactDOM && window.ReactDOM.createRoot) {
    ReactDOM.createRoot(el).render(<RelmuTweaks />);
  } else {
    ReactDOM.render(<RelmuTweaks />, el);
  }
})();