<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beats — Step Sequencer & Drum Machine</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a10;--card:#111118;--border:#1a1a28;--text:#c8c8e0;--dim:#556;--accent:#4488ff;--beat:#ff4444;--active:#44ff88}
body{background:var(--bg);color:var(--text);font-family:'SF Mono','Fira Code',monospace;overflow-x:hidden}
.header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--card)}
.header h1{font-size:16px;color:var(--accent);font-weight:600;letter-spacing:1px}
.transport{display:flex;align-items:center;gap:8px}
.transport button{background:#1a1a28;border:1px solid #333;color:#ccc;width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;transition:all 0.15s;display:flex;align-items:center;justify-content:center}
.transport button:hover{background:#222;border-color:#666}
.transport button.playing{background:#1a3a1a;border-color:var(--active);color:var(--active)}
.bpm-group{display:flex;align-items:center;gap:6px;margin-left:8px}
.bpm-group input{width:50px;background:#0d0d14;border:1px solid #333;color:var(--text);text-align:center;padding:4px;border-radius:4px;font-family:inherit;font-size:13px}
.bpm-group label{color:var(--dim);font-size:10px;text-transform:uppercase}
.swing-group{display:flex;align-items:center;gap:4px;margin-left:8px}
.swing-group input[type=range]{width:60px;height:3px;accent-color:var(--accent)}
.swing-group span{color:var(--dim);font-size:10px;min-width:20px}
.controls{display:flex;align-items:center;gap:6px;margin-left:auto}
.controls select{background:#0d0d14;border:1px solid #333;color:var(--text);padding:4px 8px;border-radius:4px;font-family:inherit;font-size:11px}
.controls button{background:#1a1a28;border:1px solid #333;color:#aaa;padding:4px 10px;border-radius:4px;font-size:10px;cursor:pointer;font-family:inherit}
.controls button:hover{background:#222;border-color:#666;color:#fff}

.grid-container{padding:16px;overflow-x:auto}
.track{display:flex;align-items:center;margin-bottom:2px}
.track-info{width:100px;flex-shrink:0;padding:4px 8px;display:flex;align-items:center;gap:6px}
.track-name{font-size:11px;color:var(--dim);min-width:50px;cursor:pointer}
.track-name:hover{color:var(--text)}
.track-vol{width:40px;height:3px;accent-color:var(--dim)}
.track-mute{width:16px;height:16px;border-radius:3px;border:1px solid #333;background:transparent;cursor:pointer;font-size:8px;color:#666;display:flex;align-items:center;justify-content:center}
.track-mute.muted{background:#ff444440;border-color:#ff4444;color:#ff4444}
.steps{display:flex;gap:1px}
.step{width:32px;height:32px;border-radius:3px;cursor:pointer;transition:all 0.08s;border:1px solid transparent;position:relative}
.step.off{background:#111118}
.step.on{border-color:rgba(255,255,255,0.15)}
.step.beat{background:#0d0d18} /* quarter note markers */
.step:hover{border-color:#444;transform:scale(1.05)}
.step.playhead{box-shadow:0 0 8px rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.5)}
.step.on.playhead{box-shadow:0 0 12px rgba(255,255,255,0.5)}

/* Velocity indicator */
.step .vel-bar{position:absolute;bottom:1px;left:2px;right:2px;height:2px;border-radius:1px;background:rgba(255,255,255,0.3)}

.pattern-bar{display:flex;align-items:center;gap:6px;padding:8px 16px;border-top:1px solid var(--border);background:var(--card)}
.pattern-bar button{background:#1a1a28;border:1px solid #333;color:#aaa;padding:4px 10px;border-radius:4px;font-size:10px;cursor:pointer;font-family:inherit;min-width:28px}
.pattern-bar button:hover{background:#222;border-color:#666}
.pattern-bar button.active-pattern{background:#223;border-color:var(--accent);color:var(--accent)}
.pattern-bar .label{color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:0.5px}

.vis{height:60px;background:var(--card);border-top:1px solid var(--border);position:relative;overflow:hidden}
.vis canvas{width:100%;height:100%}
</style>
</head>
<body>
<div class="header">
  <h1>BEATS</h1>
  <div class="transport">
    <button id="playBtn" onclick="togglePlay()" title="Play/Stop">&#9654;</button>
  </div>
  <div class="bpm-group">
    <input type="number" id="bpmInput" value="120" min="40" max="300" onchange="setBPM(this.value)">
    <label>BPM</label>
  </div>
  <div class="swing-group">
    <label style="color:var(--dim);font-size:10px">Swing</label>
    <input type="range" id="swingSlider" min="0" max="0.7" value="0" step="0.05" oninput="swing=parseFloat(this.value);document.getElementById('swingVal').textContent=Math.round(swing*100)+'%'">
    <span id="swingVal">0%</span>
  </div>
  <div class="controls">
    <select id="stepsSelect" onchange="setSteps(+this.value)">
      <option value="8">8 Steps</option>
      <option value="16" selected>16 Steps</option>
      <option value="32">32 Steps</option>
    </select>
    <select id="presetSelect" onchange="loadPreset(this.value)">
      <option value="">-- Presets --</option>
      <option value="basic">Basic Beat</option>
      <option value="hiphop">Hip Hop</option>
      <option value="dnb">Drum & Bass</option>
      <option value="house">House</option>
      <option value="funk">Funk</option>
      <option value="latin">Latin</option>
      <option value="trap">Trap</option>
      <option value="breakbeat">Breakbeat</option>
    </select>
    <button onclick="clearAll()">Clear</button>
    <button onclick="randomize()">Random</button>
  </div>
</div>

<div class="grid-container" id="gridContainer"></div>

<div class="pattern-bar" id="patternBar">
  <span class="label">Patterns:</span>
</div>

<div class="vis">
  <canvas id="visCanvas"></canvas>
</div>

<script>
// ============================================================
// BEATS — Step Sequencer & Drum Machine
// Pure Web Audio API • Zero Dependencies
// Tool #264 — BBobop
// ============================================================

let audioCtx = null;

function ensureAudio() {
  if (!audioCtx) {
    audioCtx = new (window.AudioContext || window.webkitAudioContext)();
  }
  if (audioCtx.state === 'suspended') audioCtx.resume();
}

// ============================================================
// DRUM SYNTHESIS (all sounds from math, no samples)
// ============================================================

const SOUNDS = {
  kick: (ctx, time, vel = 1) => {
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(160 * vel, time);
    osc.frequency.exponentialRampToValueAtTime(40, time + 0.12);
    gain.gain.setValueAtTime(0.9 * vel, time);
    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.3);
    osc.connect(gain).connect(ctx.destination);
    osc.start(time);
    osc.stop(time + 0.3);
    // Click transient
    const click = ctx.createOscillator();
    const cg = ctx.createGain();
    click.type = 'square';
    click.frequency.setValueAtTime(800, time);
    click.frequency.exponentialRampToValueAtTime(40, time + 0.02);
    cg.gain.setValueAtTime(0.4 * vel, time);
    cg.gain.exponentialRampToValueAtTime(0.001, time + 0.04);
    click.connect(cg).connect(ctx.destination);
    click.start(time);
    click.stop(time + 0.04);
  },

  snare: (ctx, time, vel = 1) => {
    // Noise burst
    const bufSize = ctx.sampleRate * 0.15;
    const buf = ctx.createBuffer(1, bufSize, ctx.sampleRate);
    const data = buf.getChannelData(0);
    for (let i = 0; i < bufSize; i++) data[i] = (Math.random() * 2 - 1) * 0.8;
    const noise = ctx.createBufferSource();
    noise.buffer = buf;
    const ng = ctx.createGain();
    const nf = ctx.createBiquadFilter();
    nf.type = 'highpass';
    nf.frequency.value = 2000;
    ng.gain.setValueAtTime(0.6 * vel, time);
    ng.gain.exponentialRampToValueAtTime(0.001, time + 0.15);
    noise.connect(nf).connect(ng).connect(ctx.destination);
    noise.start(time);
    noise.stop(time + 0.15);
    // Body
    const osc = ctx.createOscillator();
    const og = ctx.createGain();
    osc.type = 'triangle';
    osc.frequency.setValueAtTime(200, time);
    osc.frequency.exponentialRampToValueAtTime(80, time + 0.06);
    og.gain.setValueAtTime(0.5 * vel, time);
    og.gain.exponentialRampToValueAtTime(0.001, time + 0.08);
    osc.connect(og).connect(ctx.destination);
    osc.start(time);
    osc.stop(time + 0.08);
  },

  hihat: (ctx, time, vel = 1) => {
    const bufSize = ctx.sampleRate * 0.05;
    const buf = ctx.createBuffer(1, bufSize, ctx.sampleRate);
    const data = buf.getChannelData(0);
    for (let i = 0; i < bufSize; i++) data[i] = Math.random() * 2 - 1;
    const noise = ctx.createBufferSource();
    noise.buffer = buf;
    const gain = ctx.createGain();
    const hp = ctx.createBiquadFilter();
    const bp = ctx.createBiquadFilter();
    hp.type = 'highpass'; hp.frequency.value = 7000;
    bp.type = 'bandpass'; bp.frequency.value = 10000; bp.Q.value = 1;
    gain.gain.setValueAtTime(0.25 * vel, time);
    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.05);
    noise.connect(hp).connect(bp).connect(gain).connect(ctx.destination);
    noise.start(time);
    noise.stop(time + 0.05);
  },

  openhat: (ctx, time, vel = 1) => {
    const bufSize = ctx.sampleRate * 0.2;
    const buf = ctx.createBuffer(1, bufSize, ctx.sampleRate);
    const data = buf.getChannelData(0);
    for (let i = 0; i < bufSize; i++) data[i] = Math.random() * 2 - 1;
    const noise = ctx.createBufferSource();
    noise.buffer = buf;
    const gain = ctx.createGain();
    const hp = ctx.createBiquadFilter();
    hp.type = 'highpass'; hp.frequency.value = 6000;
    gain.gain.setValueAtTime(0.2 * vel, time);
    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.2);
    noise.connect(hp).connect(gain).connect(ctx.destination);
    noise.start(time);
    noise.stop(time + 0.2);
  },

  clap: (ctx, time, vel = 1) => {
    // Multiple noise bursts for clap texture
    for (let i = 0; i < 3; i++) {
      const bufSize = ctx.sampleRate * 0.02;
      const buf = ctx.createBuffer(1, bufSize, ctx.sampleRate);
      const data = buf.getChannelData(0);
      for (let j = 0; j < bufSize; j++) data[j] = Math.random() * 2 - 1;
      const noise = ctx.createBufferSource();
      noise.buffer = buf;
      const g = ctx.createGain();
      const bp = ctx.createBiquadFilter();
      bp.type = 'bandpass'; bp.frequency.value = 2500; bp.Q.value = 0.6;
      const onset = time + i * 0.012;
      g.gain.setValueAtTime(0.5 * vel, onset);
      g.gain.exponentialRampToValueAtTime(0.001, onset + 0.04);
      noise.connect(bp).connect(g).connect(ctx.destination);
      noise.start(onset);
      noise.stop(onset + 0.04);
    }
    // Tail
    const bufSize = ctx.sampleRate * 0.15;
    const buf = ctx.createBuffer(1, bufSize, ctx.sampleRate);
    const data = buf.getChannelData(0);
    for (let i = 0; i < bufSize; i++) data[i] = Math.random() * 2 - 1;
    const noise = ctx.createBufferSource();
    noise.buffer = buf;
    const g = ctx.createGain();
    const bp = ctx.createBiquadFilter();
    bp.type = 'bandpass'; bp.frequency.value = 2000; bp.Q.value = 0.5;
    g.gain.setValueAtTime(0.4 * vel, time + 0.035);
    g.gain.exponentialRampToValueAtTime(0.001, time + 0.15);
    noise.connect(bp).connect(g).connect(ctx.destination);
    noise.start(time + 0.035);
    noise.stop(time + 0.15);
  },

  tom: (ctx, time, vel = 1) => {
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = 'sine';
    osc.frequency.setValueAtTime(200, time);
    osc.frequency.exponentialRampToValueAtTime(80, time + 0.15);
    gain.gain.setValueAtTime(0.6 * vel, time);
    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.2);
    osc.connect(gain).connect(ctx.destination);
    osc.start(time);
    osc.stop(time + 0.2);
  },

  rim: (ctx, time, vel = 1) => {
    const osc = ctx.createOscillator();
    const gain = ctx.createGain();
    osc.type = 'square';
    osc.frequency.setValueAtTime(800, time);
    gain.gain.setValueAtTime(0.3 * vel, time);
    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.02);
    osc.connect(gain).connect(ctx.destination);
    osc.start(time);
    osc.stop(time + 0.02);
  },

  cowbell: (ctx, time, vel = 1) => {
    const osc1 = ctx.createOscillator();
    const osc2 = ctx.createOscillator();
    const gain = ctx.createGain();
    osc1.type = 'square'; osc1.frequency.value = 587;
    osc2.type = 'square'; osc2.frequency.value = 845;
    gain.gain.setValueAtTime(0.2 * vel, time);
    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.1);
    const bp = ctx.createBiquadFilter();
    bp.type = 'bandpass'; bp.frequency.value = 700; bp.Q.value = 3;
    osc1.connect(bp);
    osc2.connect(bp);
    bp.connect(gain).connect(ctx.destination);
    osc1.start(time); osc1.stop(time + 0.1);
    osc2.start(time); osc2.stop(time + 0.1);
  },
};

// ============================================================
// TRACK & PATTERN STATE
// ============================================================

const TRACK_DEFS = [
  { name: 'KICK',  sound: 'kick',    color: '#ff4444' },
  { name: 'SNARE', sound: 'snare',   color: '#ffaa44' },
  { name: 'HIHAT', sound: 'hihat',   color: '#44ddff' },
  { name: 'OPEN',  sound: 'openhat', color: '#44aaff' },
  { name: 'CLAP',  sound: 'clap',    color: '#ff44aa' },
  { name: 'TOM',   sound: 'tom',     color: '#aa44ff' },
  { name: 'RIM',   sound: 'rim',     color: '#44ff88' },
  { name: 'COWB',  sound: 'cowbell', color: '#ffff44' },
];

let numSteps = 16;
let numPatterns = 4;
let currentPattern = 0;
let bpm = 120;
let swing = 0;
let playing = false;
let currentStep = -1;
let nextStepTime = 0;
let timerID = null;

// patterns[patternIndex][trackIndex][stepIndex] = { on: bool, vel: 0-1 }
let patterns = [];

// Track state (per-track, not per-pattern)
let trackState = TRACK_DEFS.map(() => ({ volume: 0.8, muted: false }));

function initPatterns() {
  patterns = [];
  for (let p = 0; p < numPatterns; p++) {
    const pat = [];
    for (let t = 0; t < TRACK_DEFS.length; t++) {
      const steps = [];
      for (let s = 0; s < numSteps; s++) {
        steps.push({ on: false, vel: 0.8 });
      }
      pat.push(steps);
    }
    patterns.push(pat);
  }
}
initPatterns();

function getPattern() { return patterns[currentPattern]; }

// ============================================================
// SEQUENCER ENGINE
// ============================================================

const LOOKAHEAD = 25; // ms
const SCHEDULE_AHEAD = 0.1; // seconds

function scheduler() {
  if (!audioCtx) return;
  
  while (nextStepTime < audioCtx.currentTime + SCHEDULE_AHEAD) {
    scheduleStep(currentStep, nextStepTime);
    advanceStep();
  }
  timerID = setTimeout(scheduler, LOOKAHEAD);
}

function scheduleStep(step, time) {
  if (step < 0) return;
  const pat = getPattern();
  
  for (let t = 0; t < TRACK_DEFS.length; t++) {
    const cell = pat[t][step];
    if (!cell.on || trackState[t].muted) continue;
    
    const soundFn = SOUNDS[TRACK_DEFS[t].sound];
    if (soundFn) {
      soundFn(audioCtx, time, cell.vel * trackState[t].volume);
    }
  }
  
  // Visual update (slightly delayed to sync with audio)
  const delay = Math.max(0, (time - audioCtx.currentTime) * 1000);
  setTimeout(() => updatePlayhead(step), delay);
}

function advanceStep() {
  const stepDuration = 60.0 / bpm / 4; // 16th notes
  
  currentStep = (currentStep + 1) % numSteps;
  
  // Apply swing (delay even-indexed 16ths)
  const swingDelay = (currentStep % 2 === 1) ? stepDuration * swing : 0;
  nextStepTime += stepDuration + swingDelay;
}

function togglePlay() {
  ensureAudio();
  
  if (playing) {
    playing = false;
    clearTimeout(timerID);
    currentStep = -1;
    updatePlayhead(-1);
    document.getElementById('playBtn').classList.remove('playing');
    document.getElementById('playBtn').innerHTML = '&#9654;';
  } else {
    playing = true;
    currentStep = 0;
    nextStepTime = audioCtx.currentTime + 0.05;
    scheduler();
    document.getElementById('playBtn').classList.add('playing');
    document.getElementById('playBtn').innerHTML = '&#9632;';
  }
}

function setBPM(val) {
  bpm = Math.max(40, Math.min(300, parseInt(val) || 120));
  document.getElementById('bpmInput').value = bpm;
}

function setSteps(n) {
  numSteps = n;
  // Resize all patterns
  for (const pat of patterns) {
    for (const track of pat) {
      while (track.length < n) track.push({ on: false, vel: 0.8 });
      while (track.length > n) track.pop();
    }
  }
  renderGrid();
}

// ============================================================
// UI RENDERING
// ============================================================

function renderGrid() {
  const container = document.getElementById('gridContainer');
  container.innerHTML = '';
  const pat = getPattern();

  for (let t = 0; t < TRACK_DEFS.length; t++) {
    const track = document.createElement('div');
    track.className = 'track';
    
    // Track info
    const info = document.createElement('div');
    info.className = 'track-info';
    
    const name = document.createElement('span');
    name.className = 'track-name';
    name.textContent = TRACK_DEFS[t].name;
    name.style.color = TRACK_DEFS[t].color;
    name.onclick = () => {
      ensureAudio();
      SOUNDS[TRACK_DEFS[t].sound](audioCtx, audioCtx.currentTime, 0.8);
    };
    
    const mute = document.createElement('button');
    mute.className = 'track-mute' + (trackState[t].muted ? ' muted' : '');
    mute.textContent = 'M';
    mute.onclick = () => {
      trackState[t].muted = !trackState[t].muted;
      mute.className = 'track-mute' + (trackState[t].muted ? ' muted' : '');
    };
    
    info.appendChild(name);
    info.appendChild(mute);
    track.appendChild(info);
    
    // Steps
    const steps = document.createElement('div');
    steps.className = 'steps';
    
    for (let s = 0; s < numSteps; s++) {
      const step = document.createElement('div');
      const cell = pat[t][s];
      step.className = 'step' + (cell.on ? ' on' : ' off') + (s % 4 === 0 ? ' beat' : '');
      step.dataset.track = t;
      step.dataset.step = s;
      
      if (cell.on) {
        step.style.background = TRACK_DEFS[t].color + (Math.round(cell.vel * 99 + 10)).toString(16).padStart(2, '0');
        const bar = document.createElement('div');
        bar.className = 'vel-bar';
        bar.style.width = (cell.vel * 100) + '%';
        bar.style.background = TRACK_DEFS[t].color;
        step.appendChild(bar);
      }

      // Left click: toggle
      step.addEventListener('mousedown', (e) => {
        if (e.button === 0) {
          ensureAudio();
          const ti = +step.dataset.track;
          const si = +step.dataset.step;
          const c = pat[ti][si];
          c.on = !c.on;
          if (c.on) {
            c.vel = 0.8;
            SOUNDS[TRACK_DEFS[ti].sound](audioCtx, audioCtx.currentTime, c.vel);
          }
          renderGrid();
        }
      });
      
      // Right click: velocity cycle
      step.addEventListener('contextmenu', (e) => {
        e.preventDefault();
        const ti = +step.dataset.track;
        const si = +step.dataset.step;
        const c = pat[ti][si];
        if (!c.on) { c.on = true; c.vel = 0.4; }
        else {
          c.vel += 0.2;
          if (c.vel > 1.05) { c.on = false; c.vel = 0.8; }
        }
        if (c.on) {
          ensureAudio();
          SOUNDS[TRACK_DEFS[ti].sound](audioCtx, audioCtx.currentTime, c.vel);
        }
        renderGrid();
      });
      
      steps.appendChild(step);
    }
    
    track.appendChild(steps);
    container.appendChild(track);
  }
}

function updatePlayhead(step) {
  const allSteps = document.querySelectorAll('.step');
  allSteps.forEach(el => el.classList.remove('playhead'));
  
  if (step >= 0) {
    const playheadSteps = document.querySelectorAll(`.step[data-step="${step}"]`);
    playheadSteps.forEach(el => el.classList.add('playhead'));
  }
  
  // Update visualizer
  drawVis(step);
}

// ============================================================
// PATTERN BAR
// ============================================================

function renderPatternBar() {
  const bar = document.getElementById('patternBar');
  bar.innerHTML = '<span class="label">Patterns:</span>';
  
  for (let p = 0; p < numPatterns; p++) {
    const btn = document.createElement('button');
    btn.textContent = p + 1;
    btn.className = p === currentPattern ? 'active-pattern' : '';
    btn.onclick = () => {
      currentPattern = p;
      renderGrid();
      renderPatternBar();
    };
    bar.appendChild(btn);
  }
  
  const addBtn = document.createElement('button');
  addBtn.textContent = '+';
  addBtn.onclick = () => {
    if (numPatterns < 8) {
      numPatterns++;
      const pat = [];
      for (let t = 0; t < TRACK_DEFS.length; t++) {
        const steps = [];
        for (let s = 0; s < numSteps; s++) steps.push({ on: false, vel: 0.8 });
        pat.push(steps);
      }
      patterns.push(pat);
      renderPatternBar();
    }
  };
  bar.appendChild(addBtn);
  
  const copyBtn = document.createElement('button');
  copyBtn.textContent = 'Copy';
  copyBtn.onclick = () => {
    if (numPatterns < 8) {
      numPatterns++;
      const src = patterns[currentPattern];
      const copy = src.map(track => track.map(step => ({ ...step })));
      patterns.push(copy);
      currentPattern = numPatterns - 1;
      renderGrid();
      renderPatternBar();
    }
  };
  bar.appendChild(copyBtn);
}

// ============================================================
// PRESETS
// ============================================================

const PRESET_DATA = {
  basic: {
    bpm: 120, swing: 0, steps: 16,
    tracks: [
      [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,0,0], // kick
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0], // snare
      [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,0], // hihat
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0], // open
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0], // clap
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0], // tom
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0], // rim
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0], // cowbell
    ]
  },
  hiphop: {
    bpm: 90, swing: 0.3, steps: 16,
    tracks: [
      [1,0,0,0, 0,0,0,0, 1,0,1,0, 0,0,0,0],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,1],
      [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,1,0],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
    ]
  },
  dnb: {
    bpm: 174, swing: 0, steps: 16,
    tracks: [
      [1,0,0,0, 0,0,0,0, 0,0,1,0, 0,0,0,0],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 0,0,1,0],
      [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,1],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,1, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
    ]
  },
  house: {
    bpm: 128, swing: 0, steps: 16,
    tracks: [
      [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,1,0, 0,0,1,0, 0,0,1,0, 0,0,1,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
    ]
  },
  funk: {
    bpm: 110, swing: 0.2, steps: 16,
    tracks: [
      [1,0,0,0, 0,0,1,0, 0,1,0,0, 0,0,0,0],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,1],
      [1,0,1,1, 1,0,1,0, 1,0,1,1, 1,0,1,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,1],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,1,0, 0,0,0,0, 0,0,1,0],
    ]
  },
  latin: {
    bpm: 105, swing: 0, steps: 16,
    tracks: [
      [1,0,0,0, 0,0,1,0, 0,0,0,0, 1,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,1,0, 0,0,0,0],
      [0,0,1,0, 0,0,0,1, 0,0,1,0, 0,0,0,1],
      [1,0,0,1, 0,0,1,0, 1,0,0,1, 0,0,1,0],
    ]
  },
  trap: {
    bpm: 140, swing: 0.15, steps: 16,
    tracks: [
      [1,0,0,0, 0,0,0,0, 1,0,0,1, 0,0,0,0],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
      [1,1,1,1, 1,1,1,1, 1,1,1,1, 1,1,1,1],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,1],
      [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
    ]
  },
  breakbeat: {
    bpm: 135, swing: 0.1, steps: 16,
    tracks: [
      [1,0,0,0, 0,0,0,0, 0,0,1,0, 0,0,0,0],
      [0,0,0,0, 1,0,0,1, 0,0,0,0, 1,0,0,0],
      [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,1],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,1,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
      [0,0,0,0, 0,0,0,0, 0,0,0,0, 0,0,0,0],
    ]
  },
};

function loadPreset(name) {
  const preset = PRESET_DATA[name];
  if (!preset) return;
  
  ensureAudio();
  
  bpm = preset.bpm;
  swing = preset.swing;
  numSteps = preset.steps;
  
  document.getElementById('bpmInput').value = bpm;
  document.getElementById('swingSlider').value = swing;
  document.getElementById('swingVal').textContent = Math.round(swing * 100) + '%';
  document.getElementById('stepsSelect').value = numSteps;
  
  const pat = getPattern();
  for (let t = 0; t < TRACK_DEFS.length; t++) {
    // Resize
    while (pat[t].length < numSteps) pat[t].push({ on: false, vel: 0.8 });
    while (pat[t].length > numSteps) pat[t].pop();
    
    for (let s = 0; s < numSteps; s++) {
      pat[t][s].on = !!preset.tracks[t]?.[s];
      pat[t][s].vel = pat[t][s].on ? 0.8 : 0.8;
    }
  }
  
  renderGrid();
}

// ============================================================
// UTILITIES
// ============================================================

function clearAll() {
  const pat = getPattern();
  for (const track of pat) {
    for (const step of track) step.on = false;
  }
  renderGrid();
}

function randomize() {
  const pat = getPattern();
  const densities = [0.35, 0.2, 0.4, 0.1, 0.15, 0.1, 0.1, 0.08];
  
  for (let t = 0; t < TRACK_DEFS.length; t++) {
    const d = densities[t] || 0.15;
    for (let s = 0; s < numSteps; s++) {
      pat[t][s].on = Math.random() < d;
      pat[t][s].vel = 0.5 + Math.random() * 0.5;
    }
  }
  renderGrid();
}

// ============================================================
// VISUALIZER
// ============================================================

const visCanvas = document.getElementById('visCanvas');
const visCtx = visCanvas.getContext('2d');
let visData = new Float32Array(128).fill(0);

function drawVis(step) {
  const w = visCanvas.width = visCanvas.parentElement.clientWidth;
  const h = visCanvas.height = 60;
  
  visCtx.fillStyle = '#111118';
  visCtx.fillRect(0, 0, w, h);
  
  // Shift history left
  const newData = new Float32Array(128);
  for (let i = 0; i < 127; i++) newData[i] = visData[i + 1] * 0.95;
  
  // Add current step energy
  if (step >= 0) {
    const pat = getPattern();
    let energy = 0;
    for (let t = 0; t < TRACK_DEFS.length; t++) {
      if (pat[t][step].on && !trackState[t].muted) {
        energy += pat[t][step].vel * 0.3;
      }
    }
    newData[127] = Math.min(1, energy);
  }
  visData = newData;
  
  // Draw waveform
  visCtx.beginPath();
  visCtx.strokeStyle = '#4488ff40';
  visCtx.lineWidth = 1;
  for (let i = 0; i < 128; i++) {
    const x = (i / 128) * w;
    const y = h / 2 - visData[i] * h * 0.4;
    if (i === 0) visCtx.moveTo(x, y);
    else visCtx.lineTo(x, y);
  }
  visCtx.stroke();
  
  // Mirror
  visCtx.beginPath();
  visCtx.strokeStyle = '#4488ff20';
  for (let i = 0; i < 128; i++) {
    const x = (i / 128) * w;
    const y = h / 2 + visData[i] * h * 0.4;
    if (i === 0) visCtx.moveTo(x, y);
    else visCtx.lineTo(x, y);
  }
  visCtx.stroke();
  
  // Fill between
  visCtx.beginPath();
  visCtx.fillStyle = '#4488ff08';
  for (let i = 0; i < 128; i++) {
    const x = (i / 128) * w;
    const y = h / 2 - visData[i] * h * 0.4;
    if (i === 0) visCtx.moveTo(x, y);
    else visCtx.lineTo(x, y);
  }
  for (let i = 127; i >= 0; i--) {
    const x = (i / 128) * w;
    const y = h / 2 + visData[i] * h * 0.4;
    visCtx.lineTo(x, y);
  }
  visCtx.fill();
  
  // Step indicator
  if (step >= 0) {
    const sx = (step / numSteps) * w;
    const sw = w / numSteps;
    visCtx.fillStyle = '#ffffff08';
    visCtx.fillRect(sx, 0, sw, h);
  }
}

// ============================================================
// KEYBOARD SHORTCUTS
// ============================================================

addEventListener('keydown', (e) => {
  if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return;
  
  if (e.code === 'Space') { e.preventDefault(); togglePlay(); }
  if (e.code === 'KeyC') clearAll();
  if (e.code === 'KeyR') randomize();
  
  // Number keys for patterns
  const num = parseInt(e.key);
  if (num >= 1 && num <= numPatterns) {
    currentPattern = num - 1;
    renderGrid();
    renderPatternBar();
  }
});

// ============================================================
// INIT
// ============================================================

renderGrid();
renderPatternBar();
drawVis(-1);
</script>
</body>
</html>