function Tweaks({ open, onClose, value, onChange }) {
  if (!open) return null;

  const palettes = [
    { id: 'noir',    label: 'Noir',    colors: ['#04070E', '#00E5FF', '#4A9EFF'] },
    { id: 'voltage', label: 'Voltage', colors: ['#040815', '#3EF0FF', '#B84FFF'] },
    { id: 'abyss',   label: 'Abyss',   colors: ['#02050C', '#55D1FF', '#0FFFC4'] },
    { id: 'vapor',   label: 'Vapor',   colors: ['#06040F', '#00FFF0', '#FF3EE8'] },
  ];
  const types = [
    { id: 'space-plex', label: 'Space' },
    { id: 'syne-plex',  label: 'Syne' },
    { id: 'mono-all',   label: 'Mono' },
  ];
  const heroes = [
    { id: 'wave',  label: 'Wave' },
    { id: 'stack', label: 'Stack' },
    { id: 'split', label: 'Split' },
  ];

  const set = (key, val) => onChange({ ...value, [key]: val });

  return (
    <div className="tweaks">
      <h5>
        Tweaks
        <span className="close" onClick={onClose}>×</span>
      </h5>

      <div className="tweak-group">
        <div className="tweak-label">Palette</div>
        <div className="swatch-row">
          {palettes.map(p => (
            <button
              key={p.id}
              className={`swatch${value.palette === p.id ? ' active' : ''}`}
              style={{ background: `linear-gradient(135deg, ${p.colors[0]} 0%, ${p.colors[0]} 30%, ${p.colors[1]} 30%, ${p.colors[1]} 65%, ${p.colors[2]} 65%)` }}
              onClick={() => set('palette', p.id)}
              aria-label={p.label}
            />
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: 'var(--mono)', fontSize: 9, color: 'var(--text-dim)', letterSpacing: '0.1em' }}>
          {palettes.map(p => <span key={p.id} style={{ flex: 1, textAlign: 'center' }}>{p.label.toUpperCase()}</span>)}
        </div>
      </div>

      <div className="tweak-group">
        <div className="tweak-label">Typography</div>
        <div className="tweak-row">
          {types.map(t => (
            <button key={t.id}
              className={`tweak-chip${value.typePair === t.id ? ' active' : ''}`}
              onClick={() => set('typePair', t.id)}>
              {t.label}
            </button>
          ))}
        </div>
      </div>

      <div className="tweak-group">
        <div className="tweak-label">Hero layout</div>
        <div className="tweak-row">
          {heroes.map(h => (
            <button key={h.id}
              className={`tweak-chip${value.heroVariant === h.id ? ' active' : ''}`}
              onClick={() => set('heroVariant', h.id)}>
              {h.label}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Tweaks = Tweaks;