// Animated particle network — circuit-board feel
const HeroCanvas = () => {
  const ref = React.useRef(null);

  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let nodes = [];
    let mouse = { x: -9999, y: -9999 };
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    const colors = [
      { r: 91, g: 43, b: 213 },   // purple
      { r: 30, g: 110, b: 250 },  // blue
      { r: 0, g: 200, b: 212 },   // teal
    ];

    const resize = () => {
      const w = canvas.clientWidth;
      const h = canvas.clientHeight;
      canvas.width = w * dpr;
      canvas.height = h * dpr;
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      const area = w * h;
      const target = Math.max(50, Math.min(120, Math.floor(area / 14000)));
      nodes = new Array(target).fill(0).map(() => ({
        x: Math.random() * w,
        y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.18,
        vy: (Math.random() - 0.5) * 0.18,
        r: Math.random() * 1.6 + 0.8,
        c: colors[Math.floor(Math.random() * colors.length)],
        phase: Math.random() * Math.PI * 2,
        speed: 0.4 + Math.random() * 0.6,
      }));
    };

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

    resize();
    window.addEventListener('resize', resize);
    window.addEventListener('mousemove', onMouse);
    canvas.addEventListener('mouseleave', onLeave);

    const MAX_DIST = 140;
    let t0 = performance.now();

    const tick = (t) => {
      const dt = Math.min(40, t - t0); t0 = t;
      const w = canvas.clientWidth, h = canvas.clientHeight;
      ctx.clearRect(0, 0, w, h);

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

        // mouse repulsion (gentle)
        const dx = n.x - mouse.x, dy = n.y - mouse.y;
        const d2 = dx*dx + dy*dy;
        if (d2 < 12000) {
          const f = (1 - d2 / 12000) * 0.6;
          n.x += (dx / Math.sqrt(d2 + 0.001)) * f;
          n.y += (dy / Math.sqrt(d2 + 0.001)) * f;
        }
      }

      // 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.sqrt(dx*dx + dy*dy);
          if (d < MAX_DIST) {
            const alpha = (1 - d / MAX_DIST) * 0.32;
            // blend the two colors
            const r = (a.c.r + b.c.r) / 2;
            const g = (a.c.g + b.c.g) / 2;
            const bl = (a.c.b + b.c.b) / 2;
            ctx.strokeStyle = `rgba(${r},${g},${bl},${alpha})`;
            ctx.lineWidth = 0.8;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y);
            ctx.lineTo(b.x, b.y);
            ctx.stroke();
          }
        }
      }

      // nodes (with pulse glow)
      const tt = t * 0.001;
      for (const n of nodes) {
        const pulse = 0.55 + 0.45 * Math.sin(tt * n.speed + n.phase);
        const rad = n.r * (0.85 + 0.4 * pulse);
        // glow
        const grad = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, rad * 6);
        grad.addColorStop(0, `rgba(${n.c.r},${n.c.g},${n.c.b},${0.55 * pulse})`);
        grad.addColorStop(1, `rgba(${n.c.r},${n.c.g},${n.c.b},0)`);
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.arc(n.x, n.y, rad * 6, 0, Math.PI * 2);
        ctx.fill();
        // core
        ctx.fillStyle = `rgba(${n.c.r},${n.c.g},${n.c.b},${0.7 + 0.3 * pulse})`;
        ctx.beginPath();
        ctx.arc(n.x, n.y, rad, 0, Math.PI * 2);
        ctx.fill();
      }

      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('resize', resize);
      window.removeEventListener('mousemove', onMouse);
      canvas.removeEventListener('mouseleave', onLeave);
    };
  }, []);

  return <canvas ref={ref} className="hero-canvas" />;
};

window.HeroCanvas = HeroCanvas;