window.Tweaks = function Tweaks({ state, setState, onClose }) {
  const set = (k, v) => setState({ ...state, [k]: v });
  return (
    <div className="tweaks">
      <header className="tweaks-hdr">
        <span>Tweaks</span>
        <button className="icon-btn" onClick={onClose}><Icon name="x" size={14} /></button>
      </header>
      <div className="tweaks-body">
        <div className="tweak-row">
          <span className="tweak-label">Theme</span>
          <div className="seg">
            {['light', 'dark'].map(v => (
              <button key={v} className={state.theme === v ? 'on' : ''} onClick={() => set('theme', v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Density</span>
          <div className="seg">
            {['compact', 'comfortable'].map(v => (
              <button key={v} className={state.density === v ? 'on' : ''} onClick={() => set('density', v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Ad card</span>
          <div className="seg">
            {['standard', 'minimal'].map(v => (
              <button key={v} className={state.cardStyle === v ? 'on' : ''} onClick={() => set('cardStyle', v)}>{v}</button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Accent</span>
          <div className="seg">
            {[
              { v: 'teal', c: '#129683' },
              { v: 'amber', c: '#e69a0c' },
              { v: 'indigo', c: '#4f46e5' },
            ].map(o => (
              <button
                key={o.v}
                className={state.accent === o.v ? 'on' : ''}
                onClick={() => set('accent', o.v)}
              >
                <span className="swatch" style={{ background: o.c }} />
                {o.v}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
