function TweaksPanel({ tweaks, setTweaks, onClose }) {
  const stages = [
    { id: 'intro', label: 'Empty' },
    { id: 'plan', label: 'Generating' },
    { id: 'active', label: 'Running' },
  ];
  const hues = [
    { id: 'orange', hue: 45, label: 'Ember' },
    { id: 'plum', hue: 320, label: 'Plum' },
    { id: 'sage', hue: 160, label: 'Sage' },
    { id: 'slate', hue: 255, label: 'Slate' },
  ];

  const applyHue = (hue) => {
    document.documentElement.style.setProperty('--accent', `oklch(0.68 0.14 ${hue})`);
    document.documentElement.style.setProperty('--accent-hover', `oklch(0.62 0.15 ${hue})`);
    document.documentElement.style.setProperty('--accent-soft', `oklch(0.94 0.04 ${hue})`);
    document.documentElement.style.setProperty('--accent-fg', `oklch(0.35 0.1 ${hue})`);
  };

  return (
    <div className="tweaks-panel">
      <h4>
        <span>Tweaks</span>
        <span className="close" onClick={onClose}><I.X /></span>
      </h4>
      <div className="tweak-row">
        <div className="tweak-label">Demo state</div>
        <div className="tweak-options">
          {stages.map(s => (
            <button key={s.id} className="tweak-chip" data-active={tweaks.stage === s.id}
              onClick={() => setTweaks({ ...tweaks, stage: s.id })}>{s.label}</button>
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Accent color</div>
        <div className="tweak-swatches">
          {hues.map(h => (
            <button key={h.id} className="tweak-swatch" data-active={tweaks.hue === h.id}
              style={{background: `oklch(0.68 0.14 ${h.hue})`}}
              title={h.label}
              onClick={() => { applyHue(h.hue); setTweaks({ ...tweaks, hue: h.id }); }} />
          ))}
        </div>
      </div>
      <div className="tweak-row">
        <div className="tweak-label">Which campaign</div>
        <div className="tweak-options">
          <button className="tweak-chip" data-active={tweaks.camp === 'new'} onClick={() => setTweaks({...tweaks, camp:'new'})}>New (first)</button>
          <button className="tweak-chip" data-active={tweaks.camp === 'second'} onClick={() => setTweaks({...tweaks, camp:'second'})}>Second (reuse brand)</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });