/* ===== Tweaks panel — XV Ana Isabel ===== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "tema": "Rosa clásico",
  "fuenteNombre": "Pinyon Script",
  "animacion": "Festiva",
  "brillos": true
}/*EDITMODE-END*/;

const THEMES = {
  "Rosa clásico": { deep:"#bf1559", rose:"#e0628f", soft:"#f0a6c0", rg:["#f06aa0","#d4256f","#a30c4e"] },
  "Fucsia":       { deep:"#b50b67", rose:"#e34f93", soft:"#f29ec4", rg:["#f765ad","#cc1576","#8f0a55"] },
  "Coral":        { deep:"#d23b5e", rose:"#ef7e8f", soft:"#f7b4ba", rg:["#f88aa0","#e0506a","#b32a44"] },
  "Vino":         { deep:"#8e1742", rose:"#c34d77", soft:"#e0a0b8", rg:["#d96a90","#a52456","#71123a"] }
};
const NAME_FONTS = {
  "Pinyon Script": "'Pinyon Script', cursive",
  "Great Vibes":   "'Great Vibes', cursive",
  "Tangerine":     "'Tangerine', cursive",
  "Parisienne":    "'Parisienne', cursive"
};
const ANIM_LEVEL = { "Apagada":0, "Suave":1, "Festiva":2 };

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

  React.useEffect(()=>{
    const r = document.documentElement.style;
    const th = THEMES[t.tema] || THEMES["Rosa clásico"];
    r.setProperty('--rose-deep', th.deep);
    r.setProperty('--rose', th.rose);
    r.setProperty('--rose-soft', th.soft);
    r.setProperty('--rg1', th.rg[0]);
    r.setProperty('--rg2', th.rg[1]);
    r.setProperty('--rg3', th.rg[2]);
  },[t.tema]);

  React.useEffect(()=>{
    document.documentElement.style.setProperty('--font-script', NAME_FONTS[t.fuenteNombre]||NAME_FONTS["Pinyon Script"]);
  },[t.fuenteNombre]);

  React.useEffect(()=>{
    if(window.__invite) window.__invite.applyAnim(ANIM_LEVEL[t.animacion] ?? 2);
  },[t.animacion]);

  React.useEffect(()=>{
    if(window.__invite) window.__invite.setSparkles(!!t.brillos);
  },[t.brillos]);

  return (
    <TweaksPanel title="Ajustes">
      <TweakSection label="Estilo" />
      <TweakSelect label="Tema de color" value={t.tema}
        options={Object.keys(THEMES)} onChange={v=>setTweak('tema',v)} />
      <TweakSelect label="Fuente del nombre" value={t.fuenteNombre}
        options={Object.keys(NAME_FONTS)} onChange={v=>setTweak('fuenteNombre',v)} />
      <TweakSection label="Animación" />
      <TweakRadio label="Movimiento" value={t.animacion}
        options={["Apagada","Suave","Festiva"]} onChange={v=>setTweak('animacion',v)} />
      <TweakToggle label="Brillos" value={t.brillos} onChange={v=>setTweak('brillos',v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App/>);