function Tweaks({ open, values, onChange }) {
  if (!open) return null;
  const set = (k, v) => {
    const next = { ...values, [k]: v };
    onChange(next);
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [k]: v } }, '*');
  };
  const Seg = ({ k, options }) => (
    <div className="tweak-segment">
      {options.map(o => (
        <button key={o.v} className={values[k] === o.v ? 'active' : ''} onClick={() => set(k, o.v)}>
          {o.l}
        </button>
      ))}
    </div>
  );
  return (
    <div className="tweaks open">
      <h3>
        <span>Tweaks</span>
        <span style={{color:'var(--fg-dim)'}}>live</span>
      </h3>
      <div className="tweak-row">
        <label>Hero Layout</label>
        <Seg k="heroLayout" options={[
          {v:'orb', l:'Orb'},
          {v:'editorial', l:'Editorial'},
          {v:'split', l:'Split'},
        ]} />
      </div>
      <div className="tweak-row">
        <label>Typography</label>
        <Seg k="typography" options={[
          {v:'space-grotesk', l:'Grotesk'},
          {v:'serif-display', l:'Serif'},
          {v:'mono-display', l:'Mono'},
        ]} />
      </div>
      <div className="tweak-row">
        <label>Animation Intensity</label>
        <Seg k="animationIntensity" options={[
          {v:'subtle', l:'Subtle'},
          {v:'full', l:'Full'},
          {v:'heavy', l:'Heavy'},
        ]} />
      </div>
    </div>
  );
}
window.Tweaks = Tweaks;