function TweaksPanel({ tweaks, onChange }) {
  const groups = [
    {
      key: 'heroLayout',
      label: 'Hero layout',
      options: [
        { v: 'editorial', l: 'Editorial' },
        { v: 'centered', l: 'Centered' },
        { v: 'split', l: 'Split' }
      ]
    },
    {
      key: 'workDensity',
      label: 'Work grid',
      options: [
        { v: 'three-up', l: '3-up' },
        { v: 'two-up', l: '2-up' }
      ]
    }
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-panel-title">
        Tweaks <span>v1</span>
      </div>
      {groups.map(g => (
        <div className="tweak-group" key={g.key}>
          <label className="tweak-label">{g.label}</label>
          <div className="tweak-options">
            {g.options.map(opt => (
              <button
                key={opt.v}
                className={'tweak-chip' + (tweaks[g.key] === opt.v ? ' is-active' : '')}
                onClick={() => onChange(g.key, opt.v)}
              >
                {opt.l}
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

window.TweaksPanel = TweaksPanel;