const canvas = document.getElementById("heroCanvas");
const ctx = canvas.getContext("2d");
let width = 0;
let height = 0;
let particles = [];
let tick = 0;

function resizeCanvas() {
  const ratio = window.devicePixelRatio || 1;
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = Math.floor(width * ratio);
  canvas.height = Math.floor(height * ratio);
  ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
  buildParticles();
}

function buildParticles() {
  const count = Math.max(34, Math.floor((width * height) / 24000));
  particles = Array.from({ length: count }, (_, index) => ({
    x: (index * 97) % Math.max(width, 1),
    y: (index * 53) % Math.max(height, 1),
    size: 2 + (index % 3),
    speed: 0.12 + (index % 5) * 0.035,
    lane: index % 7
  }));
}

function drawGrid() {
  ctx.clearRect(0, 0, width, height);
  ctx.fillStyle = "#f6fbff";
  ctx.fillRect(0, 0, width, height);

  ctx.save();
  ctx.translate(width * 0.55, height * 0.46);
  ctx.rotate(-0.08);
  ctx.strokeStyle = "rgba(79, 163, 255, 0.16)";
  ctx.lineWidth = 1;
  for (let x = -width; x < width; x += 64) {
    ctx.beginPath();
    ctx.moveTo(x, -height);
    ctx.lineTo(x + height * 0.3, height);
    ctx.stroke();
  }
  for (let y = -height; y < height; y += 64) {
    ctx.beginPath();
    ctx.moveTo(-width, y);
    ctx.lineTo(width, y);
    ctx.stroke();
  }
  ctx.restore();

  ctx.fillStyle = "rgba(79, 163, 255, 0.10)";
  ctx.fillRect(width * 0.66, height * 0.14, width * 0.22, height * 0.7);
  ctx.fillStyle = "rgba(72, 199, 216, 0.12)";
  ctx.fillRect(width * 0.77, height * 0.32, width * 0.15, height * 0.34);
  ctx.fillStyle = "rgba(255, 255, 255, 0.56)";
  ctx.fillRect(width * 0.7, height * 0.22, width * 0.1, height * 0.18);
}

function drawParticles() {
  particles.forEach((particle, index) => {
    particle.x += particle.speed;
    particle.y += Math.sin((tick + index) / 32) * 0.12;
    if (particle.x > width + 20) {
      particle.x = -20;
    }

    const hue = particle.lane % 3;
    ctx.fillStyle = hue === 0 ? "rgba(41, 111, 214, 0.38)" : hue === 1 ? "rgba(72, 199, 216, 0.34)" : "rgba(64, 185, 155, 0.26)";
    ctx.fillRect(particle.x, particle.y, particle.size * 3.8, particle.size);

    if (index % 4 === 0) {
      ctx.strokeStyle = "rgba(41, 111, 214, 0.10)";
      ctx.beginPath();
      ctx.moveTo(particle.x - 60, particle.y + particle.size / 2);
      ctx.lineTo(particle.x - 12, particle.y + particle.size / 2);
      ctx.stroke();
    }
  });
}

function animate() {
  tick += 1;
  drawGrid();
  drawParticles();
  requestAnimationFrame(animate);
}

function copyText(id) {
  const source = document.getElementById(id);
  if (!source) return;
  const text = source.textContent.trim();
  const showToast = () => {
    const toast = document.getElementById("toast");
    toast.classList.add("show");
    window.setTimeout(() => toast.classList.remove("show"), 1400);
  };
  const fallbackCopy = () => {
    const textarea = document.createElement("textarea");
    textarea.value = text;
    textarea.setAttribute("readonly", "");
    textarea.style.position = "fixed";
    textarea.style.left = "-9999px";
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand("copy");
    textarea.remove();
    showToast();
  };

  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(text).then(showToast).catch(fallbackCopy);
  } else {
    fallbackCopy();
  }
}

document.querySelectorAll("[data-copy]").forEach((button) => {
  button.addEventListener("click", () => copyText(button.dataset.copy));
});

window.addEventListener("resize", resizeCanvas);
resizeCanvas();
animate();
