/* ============================================================
   DR. CARLOS DEAN — Tweaks app
   Three expressive controls that reshape the whole mood:
   · Acento (oro)      — accent palette across hairlines, type, logo
   · Tipografía (voz)  — display serif personality
   · Movimiento        — cinematic intensity (Ken Burns, parallax, marquee, reveal)
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C9A84C",
  "voz": "Cormorant",
  "movimiento": "Cinemático"
}/*EDITMODE-END*/;

// accent hex → derived gold scale {main, soft, bright}
const ACCENTS = {
  "#C9A84C": { main: "#C9A84C", soft: "#D8BE72", bright: "#F5D87A" }, // Oro clásico
  "#CDBE8E": { main: "#CDBE8E", soft: "#DDD0A8", bright: "#EFE4C4" }, // Champán
  "#B07D3B": { main: "#B07D3B", soft: "#C99458", bright: "#E6BC7B" }, // Bronce
  "#BFBCB2": { main: "#BFBCB2", soft: "#D2D0C8", bright: "#EAE8E1" }  // Platino
};
const VOZ = { "Cormorant": "cormorant", "Playfair": "playfair", "Bodoni": "bodoni" };
const MOV = { "Quieto": "quieto", "Calmo": "calmo", "Cinemático": "cinematico" };

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

  React.useEffect(() => {
    const root = document.documentElement;
    const a = ACCENTS[t.accent] || ACCENTS["#C9A84C"];
    root.style.setProperty("--gold", a.main);
    root.style.setProperty("--gold-soft", a.soft);
    root.style.setProperty("--gold-bright", a.bright);
    root.setAttribute("data-type", VOZ[t.voz] || "cormorant");
    root.setAttribute("data-motion", MOV[t.movimiento] || "cinematico");
    // nudge parallax to recompute with the new multiplier
    window.dispatchEvent(new Event("scroll"));
  }, [t.accent, t.voz, t.movimiento]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Acento" />
      <TweakColor
        label="Oro"
        value={t.accent}
        options={["#C9A84C", "#CDBE8E", "#B07D3B", "#BFBCB2"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Voz editorial" />
      <TweakRadio
        label="Tipografía display"
        value={t.voz}
        options={["Cormorant", "Playfair", "Bodoni"]}
        onChange={(v) => setTweak("voz", v)}
      />
      <TweakSection label="Movimiento" />
      <TweakRadio
        label="Cinemática"
        value={t.movimiento}
        options={["Quieto", "Calmo", "Cinemático"]}
        onChange={(v) => setTweak("movimiento", v)}
      />
    </TweaksPanel>
  );
}

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