const TweaksPanel = ({ tweaks, setTweak, onClose }) => {
  const groups = [
    { label: "Visual direction — theme", key: "theme", options: [
      { v: "warm-paper", l: "Warm paper" },
      { v: "cool-editorial", l: "Cool editorial" },
      { v: "neutral-technical", l: "Neutral tech" },
      { v: "dark-ink", l: "Dark ink" },
    ]},
    { label: "Type direction", key: "typeDirection", options: [
      { v: "grotesk", l: "Grotesk" },
      { v: "editorial", l: "Editorial serif" },
      { v: "humanist", l: "Humanist" },
    ]},
    { label: "Density", key: "density", options: [
      { v: "dense", l: "Dense" }, { v: "balanced", l: "Balanced" }, { v: "spacious", l: "Spacious" },
    ]},
    { label: "Dangerous action pattern", key: "dangerousActionPattern", options: [
      { v: "type-to-confirm", l: "Type to confirm" },
      { v: "passkey-step", l: "Passkey step-up" },
      { v: "armed-commit", l: "Arm → commit" },
    ]},
    { label: "Environment treatment", key: "envSwitcherStyle", options: [
      { v: "rail-and-pill", l: "Rail + pill" },
      { v: "pill-only", l: "Pill only" },
      { v: "quiet", l: "Quiet (on-demand)" },
    ]},
    { label: "Auth method cards", key: "authCardLayout", options: [
      { v: "stacked", l: "Stacked grid" },
      { v: "list", l: "Row list" },
      { v: "inline", l: "Inline pills" },
    ]},
    { label: "Code snippet block", key: "codeBlockStyle", options: [
      { v: "filename-tabs", l: "Filename tabs" },
      { v: "minimal", l: "Minimal" },
      { v: "terminal", l: "Terminal chrome" },
    ]},
    { label: "Signing modal style", key: "signingModalStyle", options: [
      { v: "drawer", l: "Side drawer" },
      { v: "dialog", l: "Centered dialog" },
    ]},
    { label: "Empty-state illustration", key: "emptyStateStyle", options: [
      { v: "diagram", l: "Schematic" },
      { v: "glyph", l: "Dashed glyph" },
      { v: "stripes", l: "Striped placeholder" },
    ]},
  ];
  return (
    <div className="tweaks-panel">
      <div className="tweaks-hd">
        <ISliders size={14} style={{ color: "var(--ink-3)", marginRight: 8 }}/>
        Tweaks
        <button className="icon-btn" style={{ marginLeft: "auto", width: 22, height: 22 }} onClick={onClose}><IX size={12}/></button>
      </div>
      <div className="tweaks-body">
        {groups.map(g => (
          <div key={g.key} className="tweak-row">
            <div className="tweak-label">{g.label}</div>
            <div className="tweak-options">
              {g.options.map(o => (
                <button key={o.v} className={`tweak-chip ${tweaks[g.key] === o.v ? "on" : ""}`} onClick={() => setTweak(g.key, o.v)}>
                  {o.l}
                </button>
              ))}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

Object.assign(window, { TweaksPanel });