// Tweaks panel — hidden unless toggle is active
function TweaksPanel({ visible, state, onChange }) {
  if (!visible) return null;

  const themes = [
    { key: "persimmon", name: "Persimmon", color: "oklch(0.72 0.19 62)" },
    { key: "matcha", name: "Matcha", color: "oklch(0.72 0.18 150)" },
    { key: "indigo", name: "Indigo", color: "oklch(0.56 0.18 270)" },
    { key: "cherry", name: "Cherry", color: "oklch(0.65 0.22 20)" },
  ];

  const layouts = [
    { key: "centered", name: "Centered" },
    { key: "split", name: "Split" },
    { key: "demo", name: "Demo-first" },
  ];

  const tones = [
    { key: "bold", name: "Bold" },
    { key: "playful", name: "Playful" },
    { key: "precise", name: "Precise" },
  ];

  const demos = [
    { key: "professional", name: "Pro email" },
    { key: "casual", name: "Casual DM" },
    { key: "code", name: "Code" },
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-header">
        <div className="tweaks-dot" />
        <span>Tweaks</span>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Hero layout</div>
        <div className="tweaks-options">
          {layouts.map(l => (
            <button
              key={l.key}
              className={`tweak-chip ${state.layout === l.key ? "active" : ""}`}
              onClick={() => onChange({ layout: l.key })}
            >{l.name}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Copy tone</div>
        <div className="tweaks-options">
          {tones.map(t => (
            <button
              key={t.key}
              className={`tweak-chip ${state.tone === t.key ? "active" : ""}`}
              onClick={() => onChange({ tone: t.key })}
            >{t.name}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Accent color</div>
        <div className="tweaks-options tweaks-swatches">
          {themes.map(t => (
            <button
              key={t.key}
              className={`tweak-swatch ${state.theme === t.key ? "active" : ""}`}
              onClick={() => onChange({ theme: t.key })}
              title={t.name}
            >
              <span style={{ background: t.color }} />
              {t.name}
            </button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Demo scenario</div>
        <div className="tweaks-options">
          {demos.map(d => (
            <button
              key={d.key}
              className={`tweak-chip ${state.demo === d.key ? "active" : ""}`}
              onClick={() => onChange({ demo: d.key })}
            >{d.name}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <div className="tweaks-label">Mode</div>
        <div className="tweaks-options">
          <button
            className={`tweak-chip ${!state.dark ? "active" : ""}`}
            onClick={() => onChange({ dark: false })}
          >Light</button>
          <button
            className={`tweak-chip ${state.dark ? "active" : ""}`}
            onClick={() => onChange({ dark: true })}
          >Dark</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });