// Animated network background — dots connected by lines,
// used for Hero A full-bleed and CTA overlay.
const { useEffect, useRef } = React;

function NetworkBackground({
  density = 0.00009,        // nodes per pixel
  maxDist = 160,            // connection distance
  speed = 0.18,             // node velocity
  nodeColor = "rgba(15, 78, 176, 0.55)",
  lineColor = "rgba(15, 78, 176, 0.16)",
  bg = "transparent",
  highlight = true,         // hover attraction
  fadeEdges = true,
}) {
  const ref = useRef(null);

  useEffect(() => {
    const canvas = ref.current;
    const ctx = canvas.getContext("2d");
    let raf, nodes = [], w = 0, h = 0, dpr = Math.min(window.devicePixelRatio || 1, 2);
    let mouse = { x: -9999, y: -9999, active: false };

    const resize = () => {
      const rect = canvas.getBoundingClientRect();
      w = rect.width; h = rect.height;
      canvas.width = w * dpr; canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const count = Math.max(30, Math.floor(w * h * density));
      nodes = Array.from({ length: count }, () => ({
        x: Math.random() * w,
        y: Math.random() * h,
        vx: (Math.random() - 0.5) * speed,
        vy: (Math.random() - 0.5) * speed,
        r: Math.random() * 1.3 + 0.6,
      }));
    };

    const onMove = (e) => {
      const rect = canvas.getBoundingClientRect();
      mouse.x = e.clientX - rect.left;
      mouse.y = e.clientY - rect.top;
      mouse.active = true;
    };
    const onLeave = () => { mouse.active = false; mouse.x = -9999; mouse.y = -9999; };

    const tick = () => {
      if (bg !== "transparent") { ctx.fillStyle = bg; ctx.fillRect(0,0,w,h); }
      else ctx.clearRect(0, 0, w, h);

      // update
      for (const n of nodes) {
        n.x += n.vx; n.y += n.vy;
        if (n.x < 0 || n.x > w) n.vx *= -1;
        if (n.y < 0 || n.y > h) n.vy *= -1;

        if (highlight && mouse.active) {
          const dx = n.x - mouse.x, dy = n.y - mouse.y;
          const d2 = dx*dx + dy*dy;
          if (d2 < 140 * 140) {
            const f = (1 - Math.sqrt(d2) / 140) * 0.04;
            n.vx += (dx / Math.sqrt(d2+0.01)) * f;
            n.vy += (dy / Math.sqrt(d2+0.01)) * f;
          }
        }
        // cap velocity
        const sp = Math.hypot(n.vx, n.vy);
        const maxSp = speed * 2.2;
        if (sp > maxSp) { n.vx = n.vx / sp * maxSp; n.vy = n.vy / sp * maxSp; }
      }

      // lines
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const a = nodes[i], b = nodes[j];
          const dx = a.x - b.x, dy = a.y - b.y;
          const d = Math.hypot(dx, dy);
          if (d < maxDist) {
            const alpha = (1 - d / maxDist);
            ctx.strokeStyle = lineColor.replace(/[\d.]+\)$/g, (alpha * 0.35 + 0.03).toFixed(3) + ")");
            ctx.lineWidth = 0.6;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
            ctx.stroke();
          }
        }
      }

      // node
      for (const n of nodes) {
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.r, 0, Math.PI * 2);
        ctx.fillStyle = nodeColor;
        ctx.fill();
      }

      // edge fade via radial gradient overlay
      if (fadeEdges) {
        const g = ctx.createRadialGradient(w/2, h/2, Math.min(w,h)*0.3, w/2, h/2, Math.max(w,h)*0.65);
        g.addColorStop(0, "rgba(255,255,255,0)");
        g.addColorStop(1, "rgba(255,255,255,0.85)");
        ctx.fillStyle = g;
        ctx.fillRect(0, 0, w, h);
      }

      raf = requestAnimationFrame(tick);
    };

    resize();
    tick();
    window.addEventListener("resize", resize);
    canvas.addEventListener("mousemove", onMove);
    canvas.addEventListener("mouseleave", onLeave);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", resize);
      canvas.removeEventListener("mousemove", onMove);
      canvas.removeEventListener("mouseleave", onLeave);
    };
  }, [density, maxDist, speed, nodeColor, lineColor, bg, highlight, fadeEdges]);

  return <canvas ref={ref} />;
}

window.NetworkBackground = NetworkBackground;