// Transport.jsx — top bar: play/stop, BPM, swing, master.
function Transport({ playing, onToggle, onStop, bpm, setBpm, swing, setSwing }) {
  return (
    <div className="tp">
      <div className="tp-brand">
        <img src="../../assets/spiral.svg" alt="" className="tp-spiral" />
        <span className="tp-title">STUDIO</span>
        <span className="tp-sub">// sequencer</span>
      </div>
      <div className="tp-controls">
        <button className={'tp-play' + (playing ? ' on' : '')} onClick={onToggle}
          aria-label={playing ? 'Pause' : 'Play'}>{playing ? '❚❚' : '▶'}</button>
        <button className="tp-btn" onClick={onStop} aria-label="Stop">⏹</button>
        <div className="tp-field">
          <span className="tp-lbl">BPM</span>
          <div className="tp-stepper">
            <button onClick={() => setBpm(b => Math.max(60, b - 1))} aria-label="BPM −">−</button>
            <span className="tp-val">{bpm}</span>
            <button onClick={() => setBpm(b => Math.min(180, b + 1))} aria-label="BPM +">+</button>
          </div>
        </div>
        <div className="tp-field tp-swing">
          <span className="tp-lbl">Swing</span>
          <input type="range" min="0" max="100" value={swing} onChange={e => setSwing(+e.target.value)} />
          <span className="tp-val sm">{swing}%</span>
        </div>
      </div>
      <div className="tp-meta t-eyebrow">{playing ? '● running' : 'stopped'}</div>
    </div>
  );
}
window.Transport = Transport;