/* MIA Conecta — Tweaks (applies to the vanilla page via CSS vars) */
const MIA_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  brand: "#12b4e6",
  accent: "#6c4cf0",
  hero: "aurora",
  corners: "redondeadas",
} /*EDITMODE-END*/;

function MiaTweaks() {
  const [t, setTweak] = useTweaks(MIA_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--brand", t.brand);
    root.style.setProperty("--accent", t.accent);
    if (t.corners === "rectas") {
      root.style.setProperty("--r", "6px");
      root.style.setProperty("--r-sm", "5px");
    } else {
      root.style.setProperty("--r", "20px");
      root.style.setProperty("--r-sm", "13px");
    }
    document.body.setAttribute("data-hero", t.hero);
  }, [t.brand, t.accent, t.hero, t.corners]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color de marca" />
      <TweakColor
        label="Principal"
        value={t.brand}
        options={["#12b4e6", "#2a6fdb", "#10a37f", "#0e7c86", "#5b6cff"]}
        onChange={(v) => setTweak("brand", v)}
      />
      <TweakColor
        label="Acento IA"
        value={t.accent}
        options={["#6c4cf0", "#ff6a4d", "#1fc26b", "#f5a623", "#e8438f"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Estilo" />
      <TweakRadio
        label="Fondo del héroe"
        value={t.hero}
        options={["aurora", "limpio", "red"]}
        onChange={(v) => setTweak("hero", v)}
      />
      <TweakRadio
        label="Esquinas"
        value={t.corners}
        options={["redondeadas", "rectas"]}
        onChange={(v) => setTweak("corners", v)}
      />
    </TweaksPanel>
  );
}

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