/* global React */
const { useState, useRef, useEffect } = React;

// ═══════════════════════════════════════════════════════
//  CONSTANTS
// ═══════════════════════════════════════════════════════
const KE_NOTE_NAMES = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'];
const ke_midiToHz   = m => 440 * Math.pow(2, (m - 69) / 12);
const ke_midiToName = m => KE_NOTE_NAMES[m % 12] + (Math.floor(m / 12) - 1);
const KE_BASS_MIDI  = [28,31,33,35,36,38,40,41,43,45,47,48,50,52];
const KE_TRACKS     = ['kick','clap','hat','ohat','bass'];

// Brand-mapped palette
const KE = {
  kick:    '#E5179C',  // pink
  clap:    '#FF2DAA',  // pink-hot
  hat:     '#F4ECDD',  // paper
  ohat:    '#C8FF00',  // acid
  bass:    '#D9CFBE',  // paper-dim
  pad:     '#B8137E',  // pink-deep
  bg:      '#1A1614',  // ink-soft (slightly lifted vs page ink)
  surface: '#221C1A',
  border:  'rgba(244,236,221,0.12)',
  borderS: 'rgba(244,236,221,0.06)',
  text:    '#F4ECDD',
  muted:   '#9CA3AE',
  dim:     '#5C636E',
  label:   '#F4ECDD',
  unit:    '#9CA3AE',
};

const KE_TRACK_INFO = {
  kick: { label:'KICK',  color: KE.kick },
  clap: { label:'CLAP',  color: KE.clap },
  hat:  { label:'H.HAT', color: KE.hat  },
  ohat: { label:'O.HAT', color: KE.ohat },
  bass: { label:'BASS',  color: KE.bass },
};

const KE_FONT_LABEL  = "var(--font-mono)";
const KE_FONT_TITLE  = "var(--font-display)";

// ═══════════════════════════════════════════════════════
//  SYNTHESIS
// ═══════════════════════════════════════════════════════
function ke_mkReverb(ctx) {
  const conv = ctx.createConvolver();
  const len  = ctx.sampleRate * 2.5;
  const buf  = ctx.createBuffer(2, len, ctx.sampleRate);
  for (let c = 0; c < 2; c++) {
    const d = buf.getChannelData(c);
    for (let i = 0; i < len; i++)
      d[i] = (Math.random()*2-1) * Math.pow(1-i/len, 2.2);
  }
  conv.buffer = buf;
  return conv;
}

function ke_synthKick(ctx, t, master, p) {
  const vol = (p.trackVol.kick/100) * (p.masterVol/100);
  const osc = ctx.createOscillator();
  const g   = ctx.createGain();
  osc.type = 'sine';
  osc.frequency.setValueAtTime(p.kickFreqStart, t);
  osc.frequency.exponentialRampToValueAtTime(Math.max(p.kickFreqStart*0.17,20), t+p.kickDecay*0.55);
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(1.5*vol, t+0.003);
  g.gain.exponentialRampToValueAtTime(0.001, t+p.kickDecay);
  osc.connect(g); g.connect(master);
  osc.start(t); osc.stop(t+p.kickDecay+0.1);
}

function ke_synthClap(ctx, t, reverb, master, p, clapBufs) {
  const vol = (p.trackVol.clap/100) * (p.masterVol/100);
  for (let i = 0; i < 3; i++) {
    const src = ctx.createBufferSource(); src.buffer = clapBufs[i];
    const bpf = ctx.createBiquadFilter();
    bpf.type='bandpass'; bpf.frequency.value=1200+i*350; bpf.Q.value=0.7;
    const g = ctx.createGain();
    const delay = i*0.013;
    g.gain.setValueAtTime((0.38-i*0.08)*vol, t+delay);
    g.gain.exponentialRampToValueAtTime(0.001, t+delay+0.2);
    src.connect(bpf); bpf.connect(g);
    g.connect(reverb); g.connect(master);
    src.start(t+delay);
  }
}

function ke_synthHat(ctx, t, master, p, open, noiseBuf) {
  const key = open ? 'ohat' : 'hat';
  const vol = (p.trackVol[key]/100) * (p.masterVol/100);
  const dur = open ? 0.22 : 0.04;
  const src = ctx.createBufferSource(); src.buffer = noiseBuf;
  const hpf = ctx.createBiquadFilter();
  hpf.type='highpass'; hpf.frequency.value=open?6500:7200;
  const g = ctx.createGain();
  g.gain.setValueAtTime(vol*(open?0.22:0.28), t);
  g.gain.exponentialRampToValueAtTime(0.001, t+dur);
  src.connect(hpf); hpf.connect(g); g.connect(master);
  src.start(t);
}

function ke_synthBass(ctx, t, step, master, p) {
  const vol  = (p.trackVol.bass/100) * (p.masterVol/100);
  const midi = KE_BASS_MIDI[p.bassNotes[step] ?? 4];
  const hz   = ke_midiToHz(midi);
  const osc1 = ctx.createOscillator();
  const osc2 = ctx.createOscillator();
  const filt = ctx.createBiquadFilter();
  const g    = ctx.createGain();
  const m1   = ctx.createGain(); m1.gain.value = 0.7;
  const m2   = ctx.createGain(); m2.gain.value = 0.3;
  osc1.type='sawtooth'; osc1.frequency.value=hz;
  osc2.type='square';   osc2.frequency.value=hz; osc2.detune.value=5;
  const cutoff = Math.max(p.bassFilterFreq, 80);
  const envTop = Math.min(cutoff+p.bassEnvAmt, 18000);
  filt.type='lowpass';
  filt.frequency.setValueAtTime(cutoff*0.3, t);
  filt.frequency.exponentialRampToValueAtTime(envTop, t+0.04);
  filt.frequency.exponentialRampToValueAtTime(Math.max(cutoff*0.25,60), t+0.28);
  filt.Q.value = p.bassResonance;
  g.gain.setValueAtTime(0, t);
  g.gain.linearRampToValueAtTime(0.65*vol, t+0.008);
  g.gain.exponentialRampToValueAtTime(0.001, t+0.32);
  osc1.connect(m1); osc2.connect(m2);
  m1.connect(filt); m2.connect(filt);
  filt.connect(g); g.connect(master);
  osc1.start(t); osc1.stop(t+0.38);
  osc2.start(t); osc2.stop(t+0.38);
}

function ke_synthPad(ctx, t, reverb, p) {
  if (!p.padEnabled) return null;
  const vol = p.padVol / 100;
  return [36,43,48,55].map((note, i) => {
    const osc  = ctx.createOscillator();
    const filt = ctx.createBiquadFilter();
    const g    = ctx.createGain();
    osc.type = i%2===0?'sawtooth':'triangle';
    osc.frequency.value = ke_midiToHz(note);
    osc.detune.value    = (Math.random()-0.5)*10;
    filt.type='lowpass'; filt.frequency.value=500+i*60;
    g.gain.setValueAtTime(0, t);
    g.gain.linearRampToValueAtTime(vol*(0.06-i*0.01), t+3.5);
    osc.connect(filt); filt.connect(g); g.connect(reverb);
    osc.start(t);
    return {osc, g};
  });
}

// ═══════════════════════════════════════════════════════
//  UI PRIMITIVES
// ═══════════════════════════════════════════════════════
function KeKnob({ label, value, min, max, inc=1, unit='', onChange, color }) {
  const display = inc >= 1
    ? Math.round(value)
    : inc < 0.05 ? parseFloat(value).toFixed(2)
    : parseFloat(value).toFixed(1);
  return (
    <div style={{ display:'flex', flexDirection:'column', alignItems:'center', minWidth:'76px' }}>
      <div style={{ fontSize:'9px', fontFamily: KE_FONT_LABEL, letterSpacing:'0.18em', color: KE.text, marginBottom:'6px', whiteSpace:'nowrap', textTransform:'uppercase' }}>
        {label}
      </div>
      <input type="range" min={min} max={max} step={inc} value={value}
        onChange={e => onChange(parseFloat(e.target.value))}
        style={{ width:'72px', cursor:'pointer', accentColor: color }} />
      <div style={{ fontSize:'12px', fontFamily: KE_FONT_LABEL, color: color || KE.text, marginTop:'5px', letterSpacing:'0.08em' }}>
        {display}<span style={{ fontSize:'9px', color: KE.unit, marginLeft:'2px' }}>{unit}</span>
      </div>
    </div>
  );
}

function KePill({ active, accent, onClick, children }) {
  return (
    <button onClick={onClick} style={{
      padding:'3px 9px', cursor:'pointer', borderRadius:'4px',
      fontSize:'9px', fontFamily: KE_FONT_LABEL, letterSpacing:'0.16em',
      background: active ? (accent ? `${accent}22` : 'rgba(244,236,221,0.08)') : 'transparent',
      color:       active ? (accent || KE.text) : KE.dim,
      border:     `1px solid ${active ? (accent ? `${accent}55` : KE.border) : 'rgba(244,236,221,0.08)'}`,
      transition: 'all 0.12s',
    }}>{children}</button>
  );
}

function KeSectionLabel({ children }) {
  return (
    <div style={{
      fontSize:'10px', fontFamily: KE_FONT_LABEL, letterSpacing:'0.32em',
      color: KE.kick, marginBottom:'16px', paddingBottom:'10px',
      borderBottom:`1px solid ${KE.border}`, textTransform:'uppercase',
    }}>{children}</div>
  );
}

// ═══════════════════════════════════════════════════════
//  MAIN
// ═══════════════════════════════════════════════════════
function KevinEngine() {
  const [bpm,       setBpm]       = useState(124);
  const [swing,     setSwing]     = useState(6);
  const [masterVol, setMasterVol] = useState(78);
  const [reverbWet, setReverbWet] = useState(26);
  const [duration,  setDuration]  = useState(45);

  const [steps, setSteps] = useState({
    kick: [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,0,0],
    clap: [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
    hat:  [0,1,0,1, 0,1,0,1, 0,1,0,1, 0,1,0,1],
    ohat: [0,0,0,0, 0,0,0,1, 0,0,0,0, 0,0,0,1],
    bass: [1,0,0,1, 0,0,0,0, 1,0,0,0, 0,1,0,0],
  });
  const [trackVol,  setTrackVol]  = useState({ kick:90, clap:72, hat:54, ohat:58, bass:82 });
  const [muted,     setMuted]     = useState({ kick:false, clap:false, hat:false, ohat:false, bass:false });
  const [soloed,    setSoloed]    = useState({ kick:false, clap:false, hat:false, ohat:false, bass:false });
  const [bassNotes, setBassNotes] = useState([4,4,4,4, 4,4,3,4, 4,4,4,3, 4,4,6,4]);

  const [kickFreqStart,  setKickFreqStart]  = useState(160);
  const [kickDecay,      setKickDecay]      = useState(0.46);
  const [bassFilterFreq, setBassFilterFreq] = useState(820);
  const [bassResonance,  setBassResonance]  = useState(6);
  const [bassEnvAmt,     setBassEnvAmt]     = useState(1100);
  const [padVol,         setPadVol]         = useState(6);
  const [padEnabled,     setPadEnabled]     = useState(true);

  const [playing,     setPlaying]     = useState(false);
  const [currentStep, setCurrentStep] = useState(-1);
  const [elapsed,     setElapsed]     = useState(0);

  // Mobile: show 8 of 16 steps at a time, toggle Bar A/B
  const [isNarrow, setIsNarrow] = useState(() =>
    typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches);
  const [barPage, setBarPage] = useState(0);  // 0 = steps 1–8, 1 = steps 9–16

  const ctxRef         = useRef(null);
  const masterGRef     = useRef(null);
  const revGRef        = useRef(null);
  const timerRef       = useRef(null);
  const animRef        = useRef(null);
  const nextNoteRef    = useRef(0);
  const stepRef        = useRef(0);
  const startRef       = useRef(0);
  const padRef         = useRef(null);
  const cleanupRef     = useRef(null);
  const Eref           = useRef({});
  const displayStepRef = useRef(-1);
  const prevDisplayRef = useRef(-1);
  const stepPadRefs    = useRef({});

  useEffect(() => {
    Eref.current = {
      bpm, swing, masterVol, reverbWet, duration,
      steps, trackVol, muted, solo: soloed, bassNotes,
      kickFreqStart, kickDecay,
      bassFilterFreq, bassResonance, bassEnvAmt,
      padVol, padEnabled,
    };
  });

  useEffect(() => {
    if (!masterGRef.current || !ctxRef.current) return;
    masterGRef.current.gain.linearRampToValueAtTime(masterVol/100, ctxRef.current.currentTime+0.05);
  }, [masterVol]);

  useEffect(() => {
    if (!revGRef.current || !ctxRef.current) return;
    revGRef.current.gain.linearRampToValueAtTime(reverbWet/100, ctxRef.current.currentTime+0.05);
  }, [reverbWet]);

  useEffect(() => {
    const mq = window.matchMedia('(max-width: 640px)');
    const h = e => setIsNarrow(e.matches);
    mq.addEventListener('change', h);
    return () => mq.removeEventListener('change', h);
  }, []);

  const toggleStep    = (t, i) => setSteps(p => ({ ...p, [t]: p[t].map((v,j) => j===i ? 1-v : v) }));
  const cycleBassNote = (i, d) => setBassNotes(p => { const n=[...p]; n[i]=(n[i]+d+KE_BASS_MIDI.length)%KE_BASS_MIDI.length; return n; });
  const clearTrack    = t => setSteps(p => ({ ...p, [t]: Array(16).fill(0) }));
  const fillTrack     = (t, pat) => setSteps(p => ({ ...p, [t]: pat }));

  const handlePlay = () => {
    if (ctxRef.current) ctxRef.current.close();
    const ctx = new (window.AudioContext || window.webkitAudioContext)();
    ctxRef.current = ctx;
    const master = ctx.createGain();
    master.gain.value = Eref.current.masterVol / 100;
    masterGRef.current = master;
    const reverb = ke_mkReverb(ctx);
    const revGain = ctx.createGain();
    revGain.gain.value = Eref.current.reverbWet / 100;
    revGRef.current = revGain;
    reverb.connect(revGain); revGain.connect(master); master.connect(ctx.destination);

    // Pre-build noise buffers once — reused every step to avoid GC pressure
    const mkNoise = secs => {
      const len = Math.floor(ctx.sampleRate * secs);
      const b = ctx.createBuffer(1, len, ctx.sampleRate);
      const d = b.getChannelData(0);
      for (let j = 0; j < len; j++) d[j] = Math.random()*2-1;
      return b;
    };
    const prebuilt = {
      clap: [mkNoise(0.12), mkNoise(0.12), mkNoise(0.12)],
      hat:  mkNoise(0.08),
      ohat: mkNoise(0.3),
    };

    padRef.current = ke_synthPad(ctx, ctx.currentTime, reverb, Eref.current);
    stepRef.current = 0; startRef.current = ctx.currentTime;
    nextNoteRef.current = ctx.currentTime + 0.08;
    setPlaying(true); setElapsed(0);

    const cleanup = () => {
      if (timerRef.current) clearTimeout(timerRef.current);
      if (animRef.current)  cancelAnimationFrame(animRef.current);
      if (padRef.current) {
        padRef.current.forEach(({osc, g}) => {
          try { g.gain.linearRampToValueAtTime(0, ctx.currentTime+0.5); osc.stop(ctx.currentTime+0.6); } catch(_){}
        });
        padRef.current = null;
      }
      KE_TRACKS.forEach(t => {
        for (let i = 0; i < 16; i++) {
          const el = stepPadRefs.current[`${t}-${i}`];
          if (el) el.removeAttribute('data-cur');
        }
      });
      displayStepRef.current = -1;
      prevDisplayRef.current = -1;
      setPlaying(false); setCurrentStep(-1); setElapsed(0);
    };
    cleanupRef.current = cleanup;

    let lastReactTime = 0;
    const tick = () => {
      const now = ctx.currentTime;
      const e   = Math.min(now - startRef.current, Eref.current.duration);
      const cs  = displayStepRef.current;

      // Direct DOM step highlight — no React re-render, runs at full 60fps
      if (cs !== prevDisplayRef.current) {
        KE_TRACKS.forEach(t => {
          const prev = stepPadRefs.current[`${t}-${prevDisplayRef.current}`];
          if (prev) prev.removeAttribute('data-cur');
          const next = stepPadRefs.current[`${t}-${cs}`];
          if (next) next.setAttribute('data-cur', '1');
        });
        prevDisplayRef.current = cs;
      }

      // React state throttled to ~10fps — only for elapsed + transport text
      if (now - lastReactTime >= 0.1) {
        lastReactTime = now;
        setElapsed(e);
        setCurrentStep(cs);
      }

      if (e < Eref.current.duration) animRef.current = requestAnimationFrame(tick);
    };
    animRef.current = requestAnimationFrame(tick);

    const doSchedule = () => {
      if (!ctx || ctx.state==='closed') return;
      const p = Eref.current;
      const stepDur  = (60/p.bpm)/4;
      const swingAmt = (p.swing/100)*stepDur;
      const soloAny  = Object.values(p.solo).some(Boolean);
      const now = ctx.currentTime;
      while (nextNoteRef.current < now + 0.2) {
        const t  = nextNoteRef.current;
        if (t - startRef.current >= p.duration) { cleanup(); return; }
        const s  = stepRef.current;
        const st = t + (s%2===1 ? swingAmt : 0);
        const ok = k => !p.muted[k] && !(soloAny && !p.solo[k]);
        if (p.steps.kick[s] && ok('kick')) ke_synthKick(ctx, st, master, p);
        if (p.steps.clap[s] && ok('clap')) ke_synthClap(ctx, st, reverb, master, p, prebuilt.clap);
        if (p.steps.hat[s]  && ok('hat'))  ke_synthHat(ctx, st, master, p, false, prebuilt.hat);
        if (p.steps.ohat[s] && ok('ohat')) ke_synthHat(ctx, st, master, p, true,  prebuilt.ohat);
        if (p.steps.bass[s] && ok('bass')) ke_synthBass(ctx, st, s, master, p);
        displayStepRef.current = s;
        stepRef.current = (s+1) % 16;
        nextNoteRef.current += stepDur;
      }
      timerRef.current = setTimeout(doSchedule, 40);
    };
    doSchedule();
  };

  const handleStop = () => { if (cleanupRef.current) cleanupRef.current(); };
  useEffect(() => () => { if (cleanupRef.current) cleanupRef.current(); }, []);

  const progress = Math.min(elapsed / duration, 1);
  const soloAny  = Object.values(soloed).some(Boolean);

  const PRESETS = {
    kick: {
      'Four on floor': [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,0,0],
      'Synco':         [1,0,0,0, 0,0,1,0, 1,0,0,0, 0,1,0,0],
      'Half time':     [1,0,0,0, 0,0,0,0, 1,0,0,0, 0,0,0,0],
    },
    clap: {
      '2 & 4':       [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
      'Ghost roll':  [0,0,1,0, 0,0,1,0, 1,0,0,0, 0,0,1,0],
      'Off beat':    [0,0,1,0, 0,0,0,0, 0,0,1,0, 0,0,1,0],
    },
    hat: {
      '16ths':       [1,1,1,1, 1,1,1,1, 1,1,1,1, 1,1,1,1],
      '8ths swing':  [0,1,0,1, 0,1,0,1, 0,1,0,1, 0,1,0,1],
      'Forest gv':   [1,0,1,0, 1,1,0,1, 1,0,1,0, 0,1,1,0],
    },
    ohat: {
      'Off beat':    [0,0,0,0, 0,0,0,1, 0,0,0,0, 0,0,0,1],
      'Every 4':     [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
      'Sparse':      [0,0,0,0, 0,0,0,0, 0,0,0,1, 0,0,0,0],
    },
    bass: {
      'Groove':      [1,0,0,1, 0,0,0,0, 1,0,0,0, 0,1,0,0],
      'Minimal':     [1,0,0,0, 0,0,1,0, 0,0,0,0, 1,0,0,0],
      'Driving':     [1,0,1,0, 0,0,1,0, 1,0,0,0, 0,0,1,0],
    },
  };

  const stepStart = isNarrow ? barPage * 8 : 0;
  const stepEnd   = isNarrow ? barPage * 8 + 8 : 16;

  // ─── RENDER ───
  return (
    <div style={{
      background: KE.bg, color: KE.text,
      fontFamily: 'var(--font-body)',
      fontWeight: 400,
      padding:'28px 30px', borderRadius:'12px',
      border:`1px solid ${KE.border}`,
      boxShadow:'0 22px 60px -22px rgba(0,0,0,0.55)',
      boxSizing:'border-box', overflowX:'auto',
    }}>
      <style>{`[data-cur="1"]{background:var(--cc)!important;border-color:var(--cc)!important;box-shadow:0 0 14px var(--cc-glow)!important;}`}</style>

      {/* HEADER */}
      <div style={{
        display:'flex',
        flexDirection: isNarrow ? 'column' : 'row',
        justifyContent:'space-between',
        alignItems: isNarrow ? 'flex-start' : 'flex-end',
        gap: isNarrow ? '10px' : '0',
        marginBottom:'24px', paddingBottom:'14px', borderBottom:`1px solid ${KE.border}`,
      }}>
        <div>
          <div style={{ fontSize:'10px', fontFamily: KE_FONT_LABEL, letterSpacing:'0.32em', color: KE.kick, marginBottom:'6px', textTransform:'uppercase' }}>
            Groove Sequencer · Try the sound
          </div>
          <div style={{
            fontSize: isNarrow ? '28px' : '34px', fontFamily: KE_FONT_TITLE, letterSpacing:'0.04em',
            color: KE.text, lineHeight:1, textTransform:'uppercase',
          }}>
            Kevin <span style={{ color: KE.kick }}>Engine</span>
          </div>
        </div>
        <div style={{ fontSize:'10px', fontFamily: KE_FONT_LABEL, color: KE.muted, textAlign: isNarrow ? 'left' : 'right', letterSpacing:'0.18em', textTransform:'uppercase' }}>
          16 Steps · Live Edit
        </div>
      </div>

      {/* GLOBAL */}
      <div style={{ marginBottom:'26px' }}>
        <KeSectionLabel>Global</KeSectionLabel>
        <div style={{ display:'flex', gap:'18px', flexWrap:'wrap' }}>
          <KeKnob label="BPM"      value={bpm}       min={60}  max={180} inc={1}   onChange={setBpm}        color={KE.text} />
          <KeKnob label="Swing"    value={swing}     min={0}   max={20}  inc={0.5} onChange={setSwing}   unit="%" color={KE.hat} />
          <KeKnob label="Master"   value={masterVol} min={0}   max={100} inc={1}   onChange={setMasterVol} unit="%" color={KE.text} />
          <KeKnob label="Reverb"   value={reverbWet} min={0}   max={80}  inc={1}   onChange={setReverbWet} unit="%" color={KE.ohat} />
          <KeKnob label="Duration" value={duration}  min={10}  max={120} inc={5}   onChange={setDuration}  unit="s"  color={KE.bass} />
        </div>
      </div>

      {/* SEQUENCER */}
      <div style={{ marginBottom:'26px' }}>
        <KeSectionLabel>Sequencer</KeSectionLabel>

        {/* Bar A/B toggle — mobile only */}
        {isNarrow && (
          <div style={{ display:'flex', gap:'6px', marginBottom:'14px', alignItems:'center' }}>
            <span style={{ fontSize:'9px', fontFamily: KE_FONT_LABEL, letterSpacing:'0.22em', color: KE.muted, textTransform:'uppercase', marginRight:'2px' }}>Bars</span>
            {[0,1].map(p => {
              const active = barPage === p;
              const isPlayingBar = playing && Math.floor(currentStep/8) === p;
              return (
                <button key={p} onClick={() => setBarPage(p)} style={{
                  position:'relative',
                  padding:'6px 12px', cursor:'pointer', borderRadius:'4px',
                  fontSize:'10px', fontFamily: KE_FONT_LABEL, letterSpacing:'0.18em',
                  background: active ? KE.kick : 'transparent',
                  color: active ? '#0E0B0A' : (isPlayingBar ? KE.kick : KE.text),
                  border: `1px solid ${active ? KE.kick : KE.border}`,
                  fontWeight: 700, textTransform:'uppercase',
                }}>
                  {p === 0 ? 'A · 1–8' : 'B · 9–16'}
                  {!active && isPlayingBar && (
                    <span style={{
                      position:'absolute', top:'-3px', right:'-3px',
                      width:'8px', height:'8px', borderRadius:'50%',
                      background: KE.kick, boxShadow: `0 0 8px ${KE.kick}`,
                      animation: 'ke-pulse 1s ease-in-out infinite',
                    }} />
                  )}
                </button>
              );
            })}
            <span style={{ marginLeft:'auto', fontSize:'9px', fontFamily: KE_FONT_LABEL, color: KE.dim, letterSpacing:'0.18em' }}>
              16 STEPS
            </span>
            <style>{`@keyframes ke-pulse{0%,100%{opacity:0.4}50%{opacity:1}}`}</style>
          </div>
        )}

        {/* Beat numbers */}
        <div style={{ display:'flex', alignItems:'center', marginBottom:'6px', minWidth: isNarrow ? 0 : '780px' }}>
          <div style={{ width: isNarrow ? '82px' : '112px', flexShrink:0 }} />
          {Array.from({length:16}).map((_,i) => {
            if (i < stepStart || i >= stepEnd) return null;
            const vis = i - stepStart;
            return (
              <div key={i} style={{
                flex:1, textAlign:'center',
                fontSize:'9px', fontFamily: KE_FONT_LABEL,
                color: i%4===0 ? KE.muted : KE.dim,
                marginLeft: vis>0&&vis%4===0 ? '6px' : '0',
              }}>{String(i+1).padStart(2,'0')}</div>
            );
          })}
          {!isNarrow && <div style={{ width:'138px', flexShrink:0 }} />}
        </div>

        {KE_TRACKS.map(track => {
          const info    = KE_TRACK_INFO[track];
          const isMuted = muted[track];
          const isSolo  = soloed[track];
          const dimmed  = isMuted || (soloAny && !isSolo);
          const presets = PRESETS[track];

          return (
            <div key={track} style={{ marginBottom:'10px', minWidth: isNarrow ? 0 : '780px' }}>
              <div style={{ display:'flex', alignItems:'center', gap:'4px', flexWrap: isNarrow ? 'wrap' : 'nowrap' }}>

                {/* Track label */}
                <div style={{
                  width:'50px', fontSize:'10px', fontFamily: KE_FONT_LABEL,
                  letterSpacing:'0.12em', textAlign:'right',
                  color: dimmed ? KE.dim : info.color,
                  flexShrink:0, paddingRight:'6px',
                  transition:'color 0.15s',
                  textTransform:'uppercase',
                }}>{info.label}</div>

                <KePill active={isMuted} onClick={() => setMuted(p=>({...p,[track]:!p[track]}))}>M</KePill>
                <KePill active={isSolo} accent={info.color} onClick={() => setSoloed(p=>({...p,[track]:!p[track]}))}>S</KePill>

                {/* Step pads */}
                {steps[track].map((on, i) => {
                  if (i < stepStart || i >= stepEnd) return null;
                  const vis = i - stepStart;
                  const col = info.color;
                  return (
                    <div key={i}
                      ref={el => { stepPadRefs.current[`${track}-${i}`] = el; }}
                      onClick={() => toggleStep(track, i)}
                      style={{
                        flex:1, height: isNarrow ? '34px' : '28px', borderRadius:'4px', cursor:'pointer',
                        marginLeft: vis>0&&vis%4===0 ? '6px' : '0',
                        background: on ? `${col}55` : KE.surface,
                        border:`1px solid ${on ? `${col}80` : KE.border}`,
                        boxShadow: on ? `0 0 4px ${col}33` : 'none',
                        opacity: dimmed ? 0.2 : 1,
                        transition:'background 0.04s, box-shadow 0.04s, opacity 0.12s',
                        willChange: 'background, box-shadow',
                        '--cc': col,
                        '--cc-glow': `${col}99`,
                      }}
                    />
                  );
                })}

                {/* Right: vol + preset — wraps below pads on narrow */}
                <div style={{
                  width: isNarrow ? '100%' : '134px',
                  flexShrink:0,
                  marginLeft: isNarrow ? 0 : '10px',
                  marginTop: isNarrow ? '6px' : 0,
                  display:'flex',
                  flexDirection: isNarrow ? 'row' : 'column',
                  gap: isNarrow ? '6px' : '4px',
                }}>
                  <div style={{ display:'flex', alignItems:'center', gap:'6px', flex: isNarrow ? 1 : undefined, minWidth:0 }}>
                    <input type="range" min={0} max={100} value={trackVol[track]}
                      onChange={e => setTrackVol(p=>({...p,[track]:+e.target.value}))}
                      style={{ flex:1, minWidth:0, cursor:'pointer', accentColor:info.color }} />
                    <div style={{ fontSize:'9px', fontFamily: KE_FONT_LABEL, color:KE.text, width:'26px', textAlign:'right' }}>
                      {trackVol[track]}%
                    </div>
                  </div>
                  <div style={{ display:'flex', gap:'4px', flex: isNarrow ? 1 : undefined, minWidth:0 }}>
                    <select
                      onChange={e => { if(e.target.value) fillTrack(track, presets[e.target.value]); e.target.value=''; }}
                      defaultValue=""
                      style={{
                        flex:1, minWidth:0, background: KE.surface, color: KE.text,
                        border:`1px solid ${KE.border}`, fontSize:'9px', fontFamily: KE_FONT_LABEL,
                        padding:'3px 4px', cursor:'pointer', letterSpacing:'0.12em',
                        textTransform:'uppercase',
                      }}>
                      <option value="" disabled>Preset</option>
                      {Object.keys(presets).map(k => <option key={k} value={k}>{k}</option>)}
                    </select>
                    <button onClick={() => clearTrack(track)} style={{
                      background:'transparent', border:`1px solid ${KE.border}`,
                      color: KE.text, fontSize:'9px', fontFamily: KE_FONT_LABEL,
                      padding:'3px 8px', cursor:'pointer', letterSpacing:'0.12em',
                      borderRadius:'3px',
                    }}>CLR</button>
                  </div>
                </div>
              </div>

              {/* Bass note row */}
              {track==='bass' && (
                <div style={{ display:'flex', alignItems:'center', marginTop:'4px' }}>
                  <div style={{ width: isNarrow ? '82px' : '112px', flexShrink:0 }} />
                  {steps.bass.map((on, i) => {
                    if (i < stepStart || i >= stepEnd) return null;
                    const vis = i - stepStart;
                    return (
                    <div key={i} style={{
                      flex:1, textAlign:'center',
                      marginLeft: vis>0&&vis%4===0 ? '6px' : '0',
                      minWidth:0,
                    }}>
                      {on ? (
                        <div>
                          <div onClick={()=>cycleBassNote(i,1)} style={{
                            fontSize:'9px', color: KE.bass, cursor:'pointer',
                            userSelect:'none', lineHeight:'1.2', opacity:0.8,
                          }}>▲</div>
                          <div style={{
                            fontSize:'9px', fontFamily: KE_FONT_LABEL, color: KE.bass,
                            lineHeight:'1.4', letterSpacing:'0.06em',
                          }}>{ke_midiToName(KE_BASS_MIDI[bassNotes[i]])}</div>
                          <div onClick={()=>cycleBassNote(i,-1)} style={{
                            fontSize:'9px', color: KE.bass, cursor:'pointer',
                            userSelect:'none', lineHeight:'1.2', opacity:0.8,
                          }}>▼</div>
                        </div>
                      ) : (
                        <div style={{ fontSize:'9px', color: KE.dim, lineHeight:'3.2' }}>·</div>
                      )}
                    </div>
                    );
                  })}
                  {!isNarrow && <div style={{ width:'134px', flexShrink:0 }} />}
                </div>
              )}
            </div>
          );
        })}
      </div>

      {/* SYNTH PARAMS */}
      <div style={{ marginBottom:'26px' }}>
        <KeSectionLabel>Synth Parameters</KeSectionLabel>
        <div style={{ display:'flex', gap:'40px', flexWrap:'wrap', rowGap:'24px' }}>

          <div>
            <div style={{ fontSize:'9px', fontFamily: KE_FONT_LABEL, color: KE.kick, letterSpacing:'0.18em', marginBottom:'12px', textTransform:'uppercase' }}>
              Kick Drum
            </div>
            <div style={{ display:'flex', gap:'14px' }}>
              <KeKnob label="Freq Start" value={kickFreqStart} min={40}  max={400}  inc={5}    onChange={setKickFreqStart} unit="Hz" color={KE.kick} />
              <KeKnob label="Decay"      value={kickDecay}     min={0.1} max={1.0}  inc={0.01} onChange={setKickDecay}     unit="s"  color={KE.kick} />
            </div>
          </div>

          <div>
            <div style={{ fontSize:'9px', fontFamily: KE_FONT_LABEL, color: KE.bass, letterSpacing:'0.18em', marginBottom:'12px', textTransform:'uppercase' }}>
              Bass Filter
            </div>
            <div style={{ display:'flex', gap:'14px' }}>
              <KeKnob label="Cutoff"  value={bassFilterFreq} min={100}  max={4000} inc={50}  onChange={setBassFilterFreq} unit="Hz" color={KE.bass} />
              <KeKnob label="Reso"    value={bassResonance}  min={0.1}  max={15}   inc={0.1} onChange={setBassResonance}            color={KE.bass} />
              <KeKnob label="Env Amt" value={bassEnvAmt}     min={0}    max={5000} inc={100} onChange={setBassEnvAmt}     unit="Hz" color={KE.bass} />
            </div>
          </div>

          <div>
            <div style={{ fontSize:'9px', fontFamily: KE_FONT_LABEL, color: KE.pad, letterSpacing:'0.18em', marginBottom:'12px', textTransform:'uppercase' }}>
              Atmosphere Pad
            </div>
            <div style={{ display:'flex', gap:'14px', alignItems:'flex-end' }}>
              <KeKnob label="Vol" value={padVol} min={0} max={20} inc={0.5} onChange={setPadVol} color={KE.pad} />
              <button onClick={()=>setPadEnabled(p=>!p)} style={{
                marginBottom:'18px', padding:'6px 16px',
                fontSize:'9px', fontFamily: KE_FONT_LABEL, letterSpacing:'0.18em',
                background: padEnabled ? `${KE.pad}26` : 'transparent',
                color: padEnabled ? KE.pad : KE.text,
                border: `1px solid ${padEnabled ? `${KE.pad}66` : KE.border}`,
                cursor:'pointer', borderRadius:'4px',
                transition:'all 0.12s', textTransform:'uppercase',
              }}>
                {padEnabled ? 'Pad On' : 'Pad Off'}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* TRANSPORT */}
      <div style={{
        borderTop:`1px solid ${KE.border}`, paddingTop:'20px',
        display:'flex', alignItems:'center', gap:'20px',
      }}>
        <button onClick={playing ? handleStop : handlePlay} style={{
          padding:'13px 36px', fontSize:'11px', fontFamily: KE_FONT_LABEL,
          letterSpacing:'0.32em', textTransform:'uppercase',
          cursor:'pointer', borderRadius:'999px', flexShrink:0, fontWeight:700,
          background: playing ? 'transparent' : KE.kick,
          color:       playing ? KE.text      : '#0E0B0A',
          border:      playing ? `1px solid ${KE.muted}` : 'none',
          boxShadow:   playing ? 'none' : `0 8px 24px -10px ${KE.kick}aa`,
          transition:'all 0.12s',
        }}>
          {playing ? '■ Stop' : '▶ Play'}
        </button>

        <div style={{ flex:1 }}>
          <div style={{ height:'4px', background: KE.surface, borderRadius:'2px', overflow:'hidden', marginBottom:'10px', position:'relative' }}>
            <div style={{
              height:'100%', width:`${progress*100}%`,
              background:`linear-gradient(90deg, ${KE.kick}, ${KE.ohat})`,
              transition:'width 0.08s linear',
            }} />
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', fontSize:'10px', fontFamily: KE_FONT_LABEL, color: KE.text, letterSpacing:'0.12em' }}>
            <span>{elapsed.toFixed(1)}<span style={{ color:KE.unit, fontSize:'8px', marginLeft:'2px' }}>s</span></span>
            <span style={{ color: KE.muted }}>{playing
              ? `Step ${String(currentStep+1).padStart(2,'0')} / 16  ·  ${bpm} BPM`
              : '— Stopped —'
            }</span>
            <span>{duration}<span style={{ color:KE.unit, fontSize:'8px', marginLeft:'2px' }}>s</span></span>
          </div>
        </div>
      </div>

      {/* Footer hint */}
      <div style={{
        marginTop:'18px', fontSize:'9px', fontFamily: KE_FONT_LABEL,
        color: KE.muted, letterSpacing:'0.18em', textAlign:'center', lineHeight:'2',
        textTransform:'uppercase',
      }}>
        Click pads to toggle  ·  M = Mute  ·  S = Solo  ·  ▲▼ Bass notes  ·  Presets per track
      </div>
    </div>
  );
}

Object.assign(window, { KevinEngine });