// Tweaks panel — paper/ink mode, accent, density, contact form, work default
function TweaksPanel({ state, setState, onClose }) {
  const set = (k, v) => setState({ ...state, [k]: v });

  const accentOptions = [
    { id: 'ember', color: '#B8532A', label: 'Ember' },
    { id: 'ink',    color: '#1E1A16', label: 'Ink' },
    { id: 'sage',   color: '#5A6B4F', label: 'Sage' },
    { id: 'indigo', color: '#3A4A7A', label: 'Indigo' },
  ];

  return (
    <aside className="tweaks" aria-label="Tweaks">
      <div className="tweaks-head">
        <span className="tweaks-title">Tweaks</span>
        <button className="tweaks-close" onClick={onClose} aria-label="Close">×</button>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <span className="tweak-label">Mode</span>
          <div className="tweak-options">
            {['paper', 'inked'].map((t) => (
              <button key={t} className="tweak-chip"
                data-active={state.theme === t}
                onClick={() => set('theme', t)}>
                {t === 'paper' ? 'Paper' : 'Inked'}
              </button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Accent</span>
          <div className="tweak-options">
            {accentOptions.map((a) => (
              <button key={a.id}
                className="tweak-chip tweak-swatch"
                data-active={state.accent === a.id}
                style={{ background: a.color }}
                aria-label={a.label}
                title={a.label}
                onClick={() => set('accent', a.id)} />
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Density</span>
          <div className="tweak-options">
            {['editorial', 'compact'].map((d) => (
              <button key={d} className="tweak-chip"
                data-active={state.density === d}
                onClick={() => set('density', d)}>
                {d[0].toUpperCase() + d.slice(1)}
              </button>
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <span className="tweak-label">Contact form</span>
          <div className="tweak-options">
            {[{v:true,l:'Show'},{v:false,l:'Email only'}].map((o) => (
              <button key={String(o.v)} className="tweak-chip"
                data-active={state.showForm === o.v}
                onClick={() => set('showForm', o.v)}>
                {o.l}
              </button>
            ))}
          </div>
        </div>
      </div>
    </aside>
  );
}
window.TweaksPanel = TweaksPanel;