// --- Tweaks panel ---

function TweaksPanel({ state, setState }) {
  const themes = [
    { k: 'green', label: 'GREEN' },
    { k: 'amber', label: 'AMBER' },
  ];
  const heroes = [
    { k: 'boot', label: 'BOOT' },
    { k: 'arcade', label: 'ARCADE' },
    { k: 'tv', label: 'TV' },
  ];
  const liveOpts = [
    { k: true, label: 'LIVE' },
    { k: false, label: 'OFFLINE' },
  ];

  return (
    <div className="tweaks-panel">
      <div className="head">
        <span>◉ TWEAKS</span>
        <span className="blink">_</span>
      </div>
      <div className="body">
        <div className="group">
          <label>THEME</label>
          <div className="opts">
            {themes.map(t => (
              <button key={t.k} className={state.theme === t.k ? 'active' : ''}
                onClick={() => setState({ theme: t.k })}>{t.label}</button>
            ))}
          </div>
        </div>
        <div className="group">
          <label>HERO LAYOUT</label>
          <div className="opts">
            {heroes.map(h => (
              <button key={h.k} className={state.hero === h.k ? 'active' : ''}
                onClick={() => setState({ hero: h.k })}>{h.label}</button>
            ))}
          </div>
        </div>
        <div className="group">
          <label>STREAM STATUS</label>
          <div className="opts">
            {liveOpts.map(l => (
              <button key={String(l.k)} className={state.live === l.k ? 'active' : ''}
                onClick={() => setState({ live: l.k })}>{l.label}</button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });