function Tweaks({ state, setState, visible, onClose }) {
  if (!visible) return null;
  const palette = ['#E8704A', '#3B82F6', '#16A34A', '#8B5CF6', '#0E1116'];
  return (
    <div className="tweaks">
      <div className="tweaks__head">
        <h4>Tweaks</h4>
        <button onClick={onClose} style={{ border: 0, background: 'transparent', color: 'var(--ink-3)', cursor: 'pointer', fontSize: 14 }}>×</button>
      </div>
      <div className="tweaks__row">
        <label>Accent color</label>
        <div className="tweaks__colors">
          {palette.map(c => (
            <button key={c} style={{ background: c }} className={state.accent === c ? 'active' : ''} onClick={() => setState({ accent: c })}/>
          ))}
        </div>
      </div>
      <div className="tweaks__row">
        <label>Headline</label>
        <textarea value={state.headline} onChange={e => setState({ headline: e.target.value })}/>
      </div>
      <div className="tweaks__row">
        <label>CTA label</label>
        <input type="text" value={state.ctaLabel} onChange={e => setState({ ctaLabel: e.target.value })}/>
      </div>
      <div className="tweaks__row">
        <label>Subhead</label>
        <textarea value={state.subhead} onChange={e => setState({ subhead: e.target.value })}/>
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;