// Mode bar — Before (Thuma today) vs After (Malachyte)
function ModeBar({ mode, setMode, step }) {
  return (
    <div className={`mode-bar mode-bar--${mode}`}>
      <div className="mode-bar__eyebrow">Side-by-side · click to compare</div>
      <div className="mode-bar__split" role="tablist">
        <button
          className={`mode-half mode-half--alpha ${mode === 'alpha' ? 'is-active' : ''}`}
          onClick={() => setMode('alpha')}
        >
          <div className="mode-half__tag">BEFORE</div>
          <img src="assets/greenpan-logo.jpeg" alt="GreenPan" className="mode-half__logo" style={{borderRadius: 4}} />
          <div className="mode-half__caption">Today</div>
        </button>

        <div className="mode-bar__vs">VS</div>

        <button
          className={`mode-half mode-half--mal ${mode === 'malachyte' ? 'is-active' : ''}`}
          onClick={() => setMode('malachyte')}
        >
          <div className="mode-half__tag">AFTER</div>
          <img src="assets/malachyte-logo-gradient.png" alt="Malachyte" className="mode-half__logo" />
          <div className="mode-half__caption">With Malachyte</div>
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { ModeBar });