// Tweaks de Páginas EA — acento, chat del hero y radio de esquinas.

const PAGINASEA_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "acento": ["#0b7a4b", "#1d3b2f", "#bfe8cd"],
  "chatHero": true,
  "radio": 14
}/*EDITMODE-END*/;

const PAGINASEA_PALETTES = [
  { name: 'verde',     colors: ["#0b7a4b", "#1d3b2f", "#bfe8cd"] },
  { name: 'azul',      colors: ["#1c5fa8", "#16314e", "#bcd9f2"] },
  { name: 'terracota', colors: ["#ad5034", "#46291f", "#f2cdaf"] },
];

function PaginaseaTweaks() {
  const [t, setTweak] = useTweaks(PAGINASEA_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const match = PAGINASEA_PALETTES.find(
      (p) => JSON.stringify(p.colors) === JSON.stringify(t.acento)
    );
    const name = match ? match.name : 'verde';
    if (name === 'verde') { delete root.dataset.accent; }
    else { root.dataset.accent = name; }

    root.dataset.chat = t.chatHero ? 'on' : 'off';
    root.style.setProperty('--radius', t.radio + 'px');
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Color" />
      <TweakColor
        label="Acento"
        value={t.acento}
        options={PAGINASEA_PALETTES.map((p) => p.colors)}
        onChange={(v) => setTweak('acento', v)}
      />
      <TweakSection label="Portada" />
      <TweakToggle
        label="Chat de WhatsApp en portada"
        value={t.chatHero}
        onChange={(v) => setTweak('chatHero', v)}
      />
      <TweakSection label="Forma" />
      <TweakSlider
        label="Radio de esquinas"
        value={t.radio} min={6} max={26} unit="px"
        onChange={(v) => setTweak('radio', v)}
      />
    </TweaksPanel>
  );
}

const paginaseaTweaksRoot = document.createElement('div');
document.body.appendChild(paginaseaTweaksRoot);
ReactDOM.createRoot(paginaseaTweaksRoot).render(<PaginaseaTweaks />);