// Tweaks panel
const { useState: tS, useEffect: tE } = React;

function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;

  const update = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch (e) {}
  };

  const optBtn = (active) => ({
    padding: '8px 14px',
    fontSize: 10,
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    border: `1px solid ${active ? 'var(--gold)' : 'rgba(255,255,255,0.15)'}`,
    background: active ? 'rgba(201, 166, 97, 0.18)' : 'transparent',
    color: active ? 'var(--gold-light)' : 'var(--cream)',
    cursor: 'pointer',
    fontFamily: 'Inter, sans-serif',
    transition: 'all 0.2s',
  });

  const labelStyle = {
    fontSize: 10,
    letterSpacing: '0.22em',
    textTransform: 'uppercase',
    color: 'rgba(255,255,255,0.55)',
    marginBottom: 10,
    display: 'block',
  };

  return (
    <div style={{
      position: 'fixed',
      bottom: 24,
      right: 24,
      width: 280,
      background: 'rgba(11, 11, 13, 0.95)',
      backdropFilter: 'blur(12px)',
      border: '1px solid var(--line)',
      color: 'var(--cream)',
      padding: 24,
      zIndex: 9999,
      fontFamily: 'Inter, sans-serif',
      boxShadow: '0 20px 60px rgba(0,0,0,0.4)',
    }}>
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 20,
        paddingBottom: 14,
        borderBottom: '1px solid var(--line)',
      }}>
        <span className="serif gold-text" style={{ fontSize: 20, letterSpacing: '0.15em', fontWeight: 500 }}>TWEAKS</span>
        <span style={{ fontSize: 9, letterSpacing: '0.2em', color: 'var(--muted-on-dark)' }}>LEGAL</span>
      </div>

      <div style={{ marginBottom: 20 }}>
        <label style={labelStyle}>Variante de logo</label>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {[
            ['abogados', 'Abogados'],
            ['legal', 'Legal'],
            ['mark', 'Solo marca'],
          ].map(([k, lbl]) => (
            <button key={k} style={optBtn(tweaks.logoVariant === k)} onClick={() => update('logoVariant', k)}>
              {lbl}
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 20 }}>
        <label style={labelStyle}>Hero</label>
        <div style={{ display: 'flex', gap: 6 }}>
          {[['dark', 'Oscuro'], ['light', 'Claro']].map(([k, lbl]) => (
            <button key={k} style={optBtn(tweaks.heroMode === k)} onClick={() => update('heroMode', k)}>
              {lbl}
            </button>
          ))}
        </div>
      </div>

      <div>
        <label style={labelStyle}>Acento</label>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
          {[
            ['gold', 'Dorado'],
            ['burgundy', 'Burdeos'],
            ['emerald', 'Esmeralda'],
          ].map(([k, lbl]) => (
            <button key={k} style={optBtn(tweaks.accentHue === k)} onClick={() => update('accentHue', k)}>
              {lbl}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });