/* TO.M.E — Panel de Tweaks (variantes de hero y estilo) */
const { useEffect } = React;

const TOME_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "sello",
  "accent": "oro",
  "herobg": "crema",
  "fuente": "moderna"
}/*EDITMODE-END*/;

const ACCENTS = {
  oro:  { accent:"#eecd89", ink:"#423330" },
  cafe: { accent:"#423330", ink:"#f7e9cc" }
};
const HEROBG = { crema:"#fbf4e4", blanco:"#ffffff" };

const FONTS = {
  moderna:   { d:"'Hepta Slab', Georgia, serif",          b:"'Hanken Grotesk', system-ui, sans-serif", w:800 },
  editorial: { d:"'Zilla Slab', Georgia, serif",          b:"'Spectral', Georgia, serif",              w:700 },
  contraste: { d:"'Bricolage Grotesque', system-ui, sans-serif", b:"'Newsreader', Georgia, serif",      w:800 }
};

function applyHero(view){
  document.body.dataset.hero = view;
  document.querySelectorAll('[data-heroview]').forEach(s=>{
    s.style.display = (s.dataset.heroview===view) ? '' : 'none';
  });
}
function applyAccent(key){
  const a = ACCENTS[key] || ACCENTS.oro;
  document.documentElement.style.setProperty('--accent', a.accent);
  document.documentElement.style.setProperty('--accent-ink', a.ink);
}
function applyHeroBg(key){
  const c = HEROBG[key] || HEROBG.crema;
  document.querySelectorAll('.hero-sello, .hero-editorial').forEach(h=>{ h.style.background = c; });
}
let titulosStyleEl;
function applyFont(key){
  const f = FONTS[key] || FONTS.moderna;
  const r = document.documentElement.style;
  r.setProperty('--font-display', f.d);
  r.setProperty('--font-body', f.b);
  r.setProperty('--display-weight', f.w);
}

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

  useEffect(()=>{ applyHero(t.hero); }, [t.hero]);
  useEffect(()=>{ applyAccent(t.accent); }, [t.accent]);
  useEffect(()=>{ applyHeroBg(t.herobg); }, [t.herobg]);
  useEffect(()=>{ applyFont(t.fuente); }, [t.fuente]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio label="Estilo" value={t.hero}
        options={[{value:"sello",label:"Sello"},{value:"editorial",label:"Editorial"},{value:"panoramico",label:"Foto"}]}
        onChange={(v)=>setTweak('hero', v)} />
      <TweakRadio label="Fondo" value={t.herobg}
        options={[{value:"crema",label:"Crema"},{value:"blanco",label:"Blanco"}]}
        onChange={(v)=>setTweak('herobg', v)} />

      <TweakSection label="Identidad" />
      <TweakColor label="Acento" value={ACCENTS[t.accent].accent}
        options={["#eecd89","#423330"]}
        onChange={(hex)=>setTweak('accent', hex==="#423330" ? "cafe" : "oro")} />
      <TweakSelect label="Tipografía" value={t.fuente}
        options={[{value:"moderna",label:"Hepta Slab + Hanken Grotesk"},{value:"editorial",label:"Zilla Slab + Spectral"},{value:"contraste",label:"Bricolage + Newsreader"}]}
        onChange={(v)=>setTweak('fuente', v)} />
    </TweaksPanel>
  );
}

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