function TweaksPanel({ tweaks, setTweaks, visible }) {
  if (!visible) return null;
  const setKey = (k, v) => {
    const next = { ...tweaks, [k]: v };
    setTweaks(next);
    try {
      window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
    } catch (e) {}
  };

  const themes = [
    { key: 'sumi', label: '墨 Sumi', color: 'oklch(0.968 0.008 80)', dot: 'oklch(0.58 0.17 32)' },
    { key: 'matcha', label: '抹茶 Matcha', color: 'oklch(0.965 0.012 120)', dot: 'oklch(0.55 0.14 40)' },
    { key: 'indigo', label: '藍 Indigo', color: 'oklch(0.955 0.012 240)', dot: 'oklch(0.35 0.14 260)' },
    { key: 'night', label: '夜 Night', color: 'oklch(0.16 0.015 60)', dot: 'oklch(0.72 0.17 35)' },
  ];

  const headingFonts = [
    { key: 'shippori', label: 'Shippori' },
    { key: 'zen-old', label: 'Zen Old' },
    { key: 'noto-serif', label: 'Noto Serif' },
    { key: 'zen-kaku', label: 'Zen Kaku' },
  ];
  const bodyFonts = [
    { key: 'noto-sans', label: 'Noto Sans JP' },
    { key: 'zen-kaku', label: 'Zen Kaku' },
  ];
  const layouts = [
    { key: 'kinetic', label: 'キネティック' },
    { key: 'split', label: 'スプリット' },
    { key: 'centered', label: 'センター' },
  ];

  return (
    <div className="tweaks-panel">
      <h3>Tweaks <span className="close" onClick={() => window.parent.postMessage({ type: '__deactivate_edit_mode' }, '*')}>×</span></h3>
      <div className="tweak-group">
        <label>COLOR THEME / カラー</label>
        <div className="tweak-swatches">
          {themes.map(t => (
            <div key={t.key}
                 className={`swatch ${tweaks.theme === t.key ? 'active' : ''}`}
                 title={t.label}
                 style={{ background: `linear-gradient(135deg, ${t.color} 60%, ${t.dot} 60%)` }}
                 onClick={() => setKey('theme', t.key)} />
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>HEADING FONT / 見出し</label>
        <div className="tweak-opts">
          {headingFonts.map(f => (
            <div key={f.key} className={`tweak-opt ${tweaks.headingFont === f.key ? 'active' : ''}`}
                 onClick={() => setKey('headingFont', f.key)}>{f.label}</div>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>BODY FONT / 本文</label>
        <div className="tweak-opts">
          {bodyFonts.map(f => (
            <div key={f.key} className={`tweak-opt ${tweaks.bodyFont === f.key ? 'active' : ''}`}
                 onClick={() => setKey('bodyFont', f.key)}>{f.label}</div>
          ))}
        </div>
      </div>
      <div className="tweak-group">
        <label>HERO LAYOUT / Hero</label>
        <div className="tweak-opts" style={{ gridTemplateColumns: '1fr 1fr 1fr' }}>
          {layouts.map(l => (
            <div key={l.key} className={`tweak-opt ${tweaks.heroLayout === l.key ? 'active' : ''}`}
                 onClick={() => setKey('heroLayout', l.key)}>{l.label}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });