// Animated AI network visualization — nodes + flowing data + signature wordmark

const NetworkVisual = ({ height = 560 }) => {
  const canvasRef = React.useRef(null);
  const rafRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const dpr = window.devicePixelRatio || 1;

    let W = 0, H = 0;
    const resize = () => {
      const r = canvas.getBoundingClientRect();
      W = r.width; H = r.height;
      canvas.width = W * dpr; canvas.height = H * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    window.addEventListener("resize", resize);

    // Generate node grid (organic, slightly randomized)
    const cols = 7, rows = 5;
    const nodes = [];
    for (let r = 0; r < rows; r++) {
      for (let c = 0; c < cols; c++) {
        const baseX = (c + 0.5) / cols;
        const baseY = (r + 0.5) / rows;
        nodes.push({
          baseX, baseY,
          ox: (Math.random() - 0.5) * 0.04,
          oy: (Math.random() - 0.5) * 0.04,
          size: 1.6 + Math.random() * 2.4,
          phase: Math.random() * Math.PI * 2,
          freq: 0.4 + Math.random() * 0.7,
          isHighlight: Math.random() < 0.18,
        });
      }
    }

    // Define edges between nearby nodes
    const edges = [];
    nodes.forEach((a, i) => {
      nodes.forEach((b, j) => {
        if (j <= i) return;
        const dx = (a.baseX - b.baseX), dy = (a.baseY - b.baseY);
        const d = Math.hypot(dx, dy);
        if (d < 0.22) {
          edges.push({ a: i, b: j, dist: d });
        }
      });
    });

    // Pulses traveling along edges
    const pulses = edges.filter(() => Math.random() < 0.5).map(e => ({
      edge: e,
      t: Math.random(),
      speed: 0.08 + Math.random() * 0.18,
      hue: Math.random() < 0.6 ? "coral" : "blue",
    }));

    let t0 = performance.now();
    const draw = (now) => {
      const dt = (now - t0) / 1000; t0 = now;
      const t = now / 1000;
      ctx.clearRect(0, 0, W, H);

      // node positions cached
      const pos = nodes.map(n => ({
        x: (n.baseX + n.ox + Math.sin(t * n.freq + n.phase) * 0.012) * W,
        y: (n.baseY + n.oy + Math.cos(t * n.freq * 0.8 + n.phase) * 0.012) * H,
      }));

      // edges
      edges.forEach(e => {
        const A = pos[e.a], B = pos[e.b];
        const fade = 1 - (e.dist / 0.22);
        ctx.strokeStyle = `rgba(255,255,255,${0.06 + fade * 0.10})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(A.x, A.y); ctx.lineTo(B.x, B.y);
        ctx.stroke();
      });

      // pulses
      pulses.forEach(p => {
        p.t += p.speed * dt;
        if (p.t > 1) p.t -= 1;
        const A = pos[p.edge.a], B = pos[p.edge.b];
        const x = A.x + (B.x - A.x) * p.t;
        const y = A.y + (B.y - A.y) * p.t;
        const color = p.hue === "coral" ? "255,85,91" : "43,156,249";
        const grd = ctx.createRadialGradient(x, y, 0, x, y, 14);
        grd.addColorStop(0, `rgba(${color},0.95)`);
        grd.addColorStop(1, `rgba(${color},0)`);
        ctx.fillStyle = grd;
        ctx.beginPath(); ctx.arc(x, y, 14, 0, Math.PI * 2); ctx.fill();
        ctx.fillStyle = `rgba(${color},1)`;
        ctx.beginPath(); ctx.arc(x, y, 2.2, 0, Math.PI * 2); ctx.fill();
      });

      // nodes
      nodes.forEach((n, i) => {
        const P = pos[i];
        const pulse = 0.5 + 0.5 * Math.sin(t * 1.4 + n.phase);
        if (n.isHighlight) {
          // ringed coral node
          const R = n.size * (1.4 + pulse * 0.6);
          const grd = ctx.createRadialGradient(P.x, P.y, 0, P.x, P.y, R * 4);
          grd.addColorStop(0, "rgba(255,85,91,0.5)");
          grd.addColorStop(1, "rgba(255,85,91,0)");
          ctx.fillStyle = grd;
          ctx.beginPath(); ctx.arc(P.x, P.y, R * 4, 0, Math.PI * 2); ctx.fill();
          ctx.fillStyle = "#ff555b";
          ctx.beginPath(); ctx.arc(P.x, P.y, R, 0, Math.PI * 2); ctx.fill();
        } else {
          ctx.fillStyle = `rgba(255,255,255,${0.5 + pulse * 0.4})`;
          ctx.beginPath(); ctx.arc(P.x, P.y, n.size, 0, Math.PI * 2); ctx.fill();
        }
      });

      rafRef.current = requestAnimationFrame(draw);
    };
    rafRef.current = requestAnimationFrame(draw);

    return () => {
      cancelAnimationFrame(rafRef.current);
      window.removeEventListener("resize", resize);
    };
  }, []);

  return (
    <canvas ref={canvasRef} style={{
      position: "absolute", inset: 0, width: "100%", height: "100%",
      pointerEvents: "none",
    }} />
  );
};

Object.assign(window, { NetworkVisual });