/* Hard4Tech — animated background: floating particles + drifting tech rings.
   Echoes the ITS-style living gradient. window.AnimatedBG */
function AnimatedBG() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    const ctx = canvas.getContext("2d");
    let w, h, dpr, particles = [], rings = [], raf, t = 0;
    const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
    const rand = (a, b) => a + Math.random() * (b - a);

    function init() {
      const n = Math.round((w * h) / 26000);
      const count = Math.min(80, Math.max(30, n));
      particles = Array.from({ length: count }, () => ({
        x: rand(0, w), y: rand(0, h), r: rand(0.4, 1.9),
        vx: rand(-0.12, 0.12), vy: rand(-0.20, -0.02),
        a: rand(0.12, 0.65), tw: rand(0, Math.PI * 2), ts: rand(0.5, 1.7),
      }));
      rings = Array.from({ length: 7 }, () => ({
        x: rand(0, w), y: rand(0, h), r: rand(38, 132),
        vx: rand(-0.16, 0.16), vy: rand(-0.12, 0.12),
        a: rand(0.025, 0.07), rot: rand(0, Math.PI * 2), vr: rand(-0.0016, 0.0016),
      }));
    }
    function resize() {
      dpr = Math.min(1.5, window.devicePixelRatio || 1);
      w = window.innerWidth; h = window.innerHeight;
      canvas.width = w * dpr; canvas.height = h * dpr;
      canvas.style.width = w + "px"; canvas.style.height = h + "px";
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      init();
    }
    function drawRing(g) {
      ctx.save();
      ctx.translate(g.x, g.y); ctx.rotate(g.rot);
      ctx.strokeStyle = "rgba(255,255,255," + g.a + ")"; ctx.lineWidth = 1;
      ctx.beginPath(); ctx.arc(0, 0, g.r, 0, Math.PI * 2); ctx.stroke();
      ctx.beginPath(); ctx.arc(0, 0, g.r * 0.6, 0, Math.PI * 2); ctx.stroke();
      const ticks = 28;
      for (let i = 0; i < ticks; i++) {
        const ang = (i / ticks) * Math.PI * 2;
        const r1 = g.r * 0.84, r2 = g.r;
        ctx.beginPath();
        ctx.moveTo(Math.cos(ang) * r1, Math.sin(ang) * r1);
        ctx.lineTo(Math.cos(ang) * r2, Math.sin(ang) * r2);
        ctx.stroke();
      }
      ctx.restore();
    }
    function drawStatic() {
      ctx.clearRect(0, 0, w, h);
      rings.forEach(drawRing);
      particles.forEach((p) => {
        ctx.beginPath(); ctx.fillStyle = "rgba(255,255,255," + p.a + ")";
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
      });
    }
    function frame() {
      t += 0.016;
      ctx.clearRect(0, 0, w, h);
      for (const g of rings) {
        g.x += g.vx; g.y += g.vy; g.rot += g.vr;
        if (g.x < -150) g.x = w + 150; if (g.x > w + 150) g.x = -150;
        if (g.y < -150) g.y = h + 150; if (g.y > h + 150) g.y = -150;
        drawRing(g);
      }
      for (const p of particles) {
        p.x += p.vx; p.y += p.vy;
        if (p.y < -6) p.y = h + 6; if (p.x < -6) p.x = w + 6; if (p.x > w + 6) p.x = -6;
        const tw = 0.5 + 0.5 * Math.sin(t * p.ts + p.tw);
        ctx.beginPath(); ctx.fillStyle = "rgba(255,255,255," + (p.a * tw) + ")";
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill();
      }
      raf = requestAnimationFrame(frame);
    }

    resize();
    if (reduce) drawStatic(); else frame();
    window.addEventListener("resize", resize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);
  return <canvas ref={ref} className="bg-canvas" aria-hidden="true" />;
}
window.AnimatedBG = AnimatedBG;