const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const modeSelect = document.getElementById("mode");
const intensitySlider = document.getElementById("intensity");

function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
window.addEventListener("resize", resize);
resize();

let t = 0;

const modes = {
  delta: { freq: 1.2, amp: 140, hue: 220 },
  theta: { freq: 3.5, amp: 110, hue: 190 },
  alpha: { freq: 8, amp: 90, hue: 160 },
  beta: { freq: 18, amp: 70, hue: 40 },
  gamma: { freq: 32, amp: 100, hue: 300 }
};

function draw() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.12)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  const { freq, amp, hue } = modes[modeSelect.value];
  const intensity = intensitySlider.value;
  const centerY = canvas.height / 2;

  for (let layer = 0; layer < 7; layer++) {
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.strokeStyle = `hsla(
      ${hue + layer * 15 + t * 10},
      100%,
      60%,
      0.85
    )`;

    for (let x = 0; x <= canvas.width; x++) {
      const y =
        centerY +
        Math.sin(x * 0.008 * freq + t + layer) *
        amp *
        intensity *
        Math.sin(t * 0.5 + layer);
      ctx.lineTo(x, y);
    }
    ctx.stroke();
  }

  t += 0.025;
  requestAnimationFrame(draw);
}

draw();