// Tweaks panel

function TweaksPanel({ state, setState, visible }) {
  if (!visible) return null;
  const heroOptions = [
    { id: 'spectrum',  label: 'SPECTRUM · 頻譜儀表板 (預設)' },
    { id: 'manifesto', label: 'MANIFESTO · 大字宣言' },
    { id: 'waveform',  label: 'WAVEFORM · 波形 × 指向性' },
  ];
  return (
    <div className="tweaks">
      <div className="tweaks-head">
        <span>⚙ TWEAKS</span>
        <span>v2026.04</span>
      </div>
      <div className="tweaks-body">
        <div className="tweaks-row">
          <label>HERO LAYOUT · 首頁 Hero 版型</label>
          <div className="tweaks-options">
            {heroOptions.map(o => (
              <button key={o.id}
                className={`tweaks-opt ${state.heroVariant === o.id ? 'active' : ''}`}
                onClick={() => setState({ ...state, heroVariant: o.id })}>
                {o.label}
              </button>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });