/* ============================================================
   Albert Lorenzo — Tweaks panel (variations to compare)
   Applies to the vanilla page via CSS variables + data attrs.
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#2b59c3", "#2348a0"],
  "headingFont": "serif",
  "heroLayout": "split",
  "heroDim": "medio",
  "effects": true
}/*EDITMODE-END*/;

const HERO_DIM = { suave: 0.06, medio: 0.18, alto: 0.34 };

function applyTweaks(t) {
  const root = document.documentElement;
  if (Array.isArray(t.accent)) {
    root.style.setProperty('--accent', t.accent[0]);
    root.style.setProperty('--accent-600', t.accent[1] || t.accent[0]);
  }
  root.style.setProperty('--display', t.headingFont === 'sans' ? 'var(--sans)' : 'var(--serif)');
  document.body.setAttribute('data-hero', t.heroLayout);
  root.style.setProperty('--hero-dim', String(HERO_DIM[t.heroDim] != null ? HERO_DIM[t.heroDim] : 0.18));
  root.style.setProperty('--fx', t.effects ? '1' : '0');
  document.body.setAttribute('data-fx', t.effects ? 'on' : 'off');
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color de acento" />
      <TweakColor
        label="Acento"
        value={t.accent}
        options={[
          ["#2b59c3", "#2348a0"],
          ["#0e7d76", "#0a635d"],
          ["#46546f", "#38445c"],
          ["#5b46c4", "#4a38a8"]
        ]}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Tipografía" />
      <TweakRadio
        label="Titulares"
        value={t.headingFont}
        options={['serif', 'sans']}
        onChange={(v) => setTweak('headingFont', v)}
      />

      <TweakSection label="Hero" />
      <TweakRadio
        label="Disposición"
        value={t.heroLayout}
        options={['split', 'centrado', 'minimal']}
        onChange={(v) => setTweak('heroLayout', v)}
      />
      <TweakRadio
        label="Oscuridad"
        value={t.heroDim}
        options={['suave', 'medio', 'alto']}
        onChange={(v) => setTweak('heroDim', v)}
      />

      <TweakSection label="Movimiento" />
      <TweakToggle
        label="Efectos dinámicos"
        value={t.effects}
        onChange={(v) => setTweak('effects', v)}
      />
    </TweaksPanel>
  );
}

// Apply defaults immediately (the host rewrites this block on disk when tweaked,
// so TWEAK_DEFAULTS already reflects the saved state on reload).
applyTweaks(TWEAK_DEFAULTS);

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