// HeroCanvas.jsx — interactive particle constellation for hero background
function HeroCanvas() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current; if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let w = 0, h = 0, dpr = window.devicePixelRatio || 1;
    let mx = -9999, my = -9999;
    let raf;

    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);
      seed();
    };

    let pts = [];
    const seed = () => {
      const density = Math.max(60, Math.floor((w * h) / 14000));
      pts = new Array(density).fill(0).map(() => ({
        x: Math.random() * w,
        y: Math.random() * h,
        vx: (Math.random() - 0.5) * 0.25,
        vy: (Math.random() - 0.5) * 0.25,
        r: Math.random() * 1.6 + 0.6,
        mint: Math.random() < 0.12,
      }));
    };

    const onMove = (e) => { mx = e.clientX; my = e.clientY; };
    const onLeave = () => { mx = my = -9999; };

    const tick = () => {
      ctx.clearRect(0, 0, w, h);
      const maxDist = 120;

      // draw connection lines
      for (let i = 0; i < pts.length; i++) {
        const p = pts[i];
        for (let j = i + 1; j < pts.length; j++) {
          const q = pts[j];
          const dx = p.x - q.x, dy = p.y - q.y;
          const d2 = dx * dx + dy * dy;
          if (d2 < maxDist * maxDist) {
            const a = 1 - Math.sqrt(d2) / maxDist;
            ctx.strokeStyle = `rgba(10,10,10,${a * 0.22})`;
            ctx.lineWidth = 0.6;
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(q.x, q.y);
            ctx.stroke();
          }
        }
      }

      // draw cursor connections + push
      for (const p of pts) {
        // mouse repel
        const dx = p.x - mx, dy = p.y - my;
        const d2 = dx * dx + dy * dy;
        const mouseR = 160;
        if (d2 < mouseR * mouseR) {
          const d = Math.sqrt(d2) || 1;
          const push = (1 - d / mouseR) * 1.2;
          p.vx += (dx / d) * push * 0.3;
          p.vy += (dy / d) * push * 0.3;
          const a = 1 - d / mouseR;
          ctx.strokeStyle = `rgba(134,200,161,${a * 0.8})`;
          ctx.lineWidth = 0.8;
          ctx.beginPath();
          ctx.moveTo(p.x, p.y);
          ctx.lineTo(mx, my);
          ctx.stroke();
        }

        // update
        p.x += p.vx; p.y += p.vy;
        // gentle damping
        p.vx *= 0.96; p.vy *= 0.96;
        // brownian drift
        p.vx += (Math.random() - 0.5) * 0.03;
        p.vy += (Math.random() - 0.5) * 0.03;
        // wrap
        if (p.x < -10) p.x = w + 10; if (p.x > w + 10) p.x = -10;
        if (p.y < -10) p.y = h + 10; if (p.y > h + 10) p.y = -10;

        // draw dot
        ctx.fillStyle = p.mint ? '#86C8A1' : 'rgba(10,10,10,0.7)';
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();
      }

      raf = requestAnimationFrame(tick);
    };

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

  return <canvas ref={canvasRef} className="hero-canvas" aria-hidden />;
}
window.HeroCanvas = HeroCanvas;