// tweaks.jsx
function TweaksPanel({ theme, setTheme, heroCopy, setHeroCopy, visible }) {
  if (!visible) return null;
  const themes = [{ id: 'natural', label: '自然系' }, { id: 'bright', label: '明' }, { id: 'dark', label: '暗' }];
  const copies = [{ id: '0', label: '守る' }, { id: '1', label: '学ぶ' }, { id: '2', label: '地球' }];
  return (
    <div className="tweaks-panel">
      <h3>⚙ Tweaks</h3>
      <span className="tweaks-label">配色テーマ</span>
      <div className="tweaks-row">
        {themes.map(t => <button key={t.id} className={theme === t.id ? 'active' : ''} onClick={() => setTheme(t.id)}>{t.label}</button>)}
      </div>
      <span className="tweaks-label">ヒーロー見出し</span>
      <div className="tweaks-row">
        {copies.map(c => <button key={c.id} className={heroCopy === c.id ? 'active' : ''} onClick={() => setHeroCopy(c.id)}>{c.label}</button>)}
      </div>
    </div>
  );
}
Object.assign(window, { TweaksPanel });