function Tweaks({ enabled }) {
  const [variant, setVariant] = React.useState(window.GS_TWEAKS?.variant || 'aurora');

  React.useEffect(() => {
    document.body.setAttribute('data-variant', variant);
  }, [variant]);

  const setV = (v) => {
    setVariant(v);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { variant: v } }, '*');
  };

  if (!enabled) return null;

  const variants = [
    { id: 'aurora', label: 'Aurora' },
    { id: 'editorial', label: 'Editorial' },
  ];

  return (
    <div className="tweaks-panel">
      <h4>Tweaks · Estilo</h4>
      <div className="tweaks-row">
        <span className="label">Variante visual</span>
        <div className="tweaks-options">
          {variants.map((v) => (
            <button key={v.id} className={variant === v.id ? 'active' : ''} onClick={() => setV(v.id)}>
              {v.label}
            </button>
          ))}
        </div>
      </div>
      <div style={{ fontSize: '0.72rem', color: 'var(--fg-dim)', marginTop: 4 }}>
        Aurora · oscuro con degradados<br/>
        Editorial · claro y profesional
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;