// Tweaks panel
const ACCENTS = [
  { name: 'Ice',    value: 'oklch(0.82 0.12 215)', hex: '#7ED4EF' },
  { name: 'Violet', value: 'oklch(0.72 0.18 290)', hex: '#A78BFA' },
  { name: 'Ember',  value: 'oklch(0.78 0.14 55)',  hex: '#F5A65B' },
  { name: 'Acid',   value: 'oklch(0.86 0.18 140)', hex: '#8AE66E' },
  { name: 'Mono',   value: 'oklch(0.92 0 0)',      hex: '#E8E8EA' },
];

function TweaksPanel({ open, setOpen, tweaks, setTweaks }) {
  if (!open) return null;
  const setK = (k, v) => setTweaks({ ...tweaks, [k]: v });
  return (
    <div className={`tweaks ${open ? 'open' : ''}`}>
      <div className="tweaks-head">
        <span>TWEAKS</span>
        <span style={{ cursor: 'pointer', color: 'var(--ink-dim)' }} onClick={() => setOpen(false)}>×</span>
      </div>
      <div className="tweaks-body">
        <div className="tweak-row">
          <label>ACCENT</label>
          <div className="tweak-swatches">
            {ACCENTS.map(a => (
              <div key={a.name}
                className={`tweak-swatch ${tweaks.accent === a.hex ? 'active' : ''}`}
                style={{ background: a.hex }}
                title={a.name}
                onClick={() => setK('accent', a.hex)} />
            ))}
          </div>
        </div>
        <div className="tweak-row">
          <label>MOTION · {tweaks.intensity}/10</label>
          <input type="range" min="1" max="10" value={tweaks.intensity}
            className="tweak-slider"
            onChange={e => setK('intensity', parseInt(e.target.value))} />
        </div>
        <div className="tweak-row">
          <label>GRAIN · {Math.round(tweaks.grain * 100)}%</label>
          <input type="range" min="0" max="100" value={tweaks.grain * 100}
            className="tweak-slider"
            onChange={e => setK('grain', parseInt(e.target.value) / 100)} />
        </div>
        <div className="tweak-row">
          <label>TYPE</label>
          <div className="tweak-toggle">
            <button className={tweaks.type === 'serif' ? 'active' : ''} onClick={() => setK('type', 'serif')}>Serif</button>
            <button className={tweaks.type === 'sans' ? 'active' : ''} onClick={() => setK('type', 'sans')}>Sans</button>
            <button className={tweaks.type === 'mono' ? 'active' : ''} onClick={() => setK('type', 'mono')}>Mono</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel, ACCENTS });