// Flow field neural background (port to JSX, no TS)
const { useEffect, useRef } = React;

function FlowField({ color = "#E8B859", trailOpacity = 0.08, particleCount = 500, speed = 0.7, className = "" }) {
  const canvasRef = useRef(null);
  const containerRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const container = containerRef.current;
    if (!canvas || !container) return;
    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    let width = container.clientWidth;
    let height = container.clientHeight;
    let particles = [];
    let raf;
    let mouse = { x: -1000, y: -1000 };

    class Particle {
      constructor() { this.reset(true); }
      reset(random = false) {
        this.x = Math.random() * width;
        this.y = Math.random() * height;
        this.vx = 0; this.vy = 0;
        this.age = random ? Math.random() * 200 : 0;
        this.life = Math.random() * 220 + 120;
      }
      update() {
        const angle = (Math.cos(this.x * 0.004) + Math.sin(this.y * 0.004)) * Math.PI;
        this.vx += Math.cos(angle) * 0.22 * speed;
        this.vy += Math.sin(angle) * 0.22 * speed;
        const dx = mouse.x - this.x, dy = mouse.y - this.y;
        const dist = Math.sqrt(dx*dx + dy*dy);
        const R = 160;
        if (dist < R) {
          const f = (R - dist) / R;
          this.vx -= dx * f * 0.05;
          this.vy -= dy * f * 0.05;
        }
        this.x += this.vx; this.y += this.vy;
        this.vx *= 0.94; this.vy *= 0.94;
        this.age++;
        if (this.age > this.life) this.reset();
        if (this.x < 0) this.x = width;
        if (this.x > width) this.x = 0;
        if (this.y < 0) this.y = height;
        if (this.y > height) this.y = 0;
      }
      draw(c) {
        c.fillStyle = color;
        const a = 1 - Math.abs((this.age / this.life) - 0.5) * 2;
        c.globalAlpha = a * 0.9;
        c.fillRect(this.x, this.y, 1.4, 1.4);
      }
    }

    const init = () => {
      const dpr = window.devicePixelRatio || 1;
      canvas.width = width * dpr;
      canvas.height = height * dpr;
      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.scale(dpr, dpr);
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      particles = [];
      for (let i = 0; i < particleCount; i++) particles.push(new Particle());
    };

    const animate = () => {
      ctx.globalAlpha = 1;
      ctx.fillStyle = `rgba(8, 12, 22, ${trailOpacity})`;
      ctx.fillRect(0, 0, width, height);
      particles.forEach(p => { p.update(); p.draw(ctx); });
      raf = requestAnimationFrame(animate);
    };

    const onResize = () => {
      width = container.clientWidth;
      height = container.clientHeight;
      init();
    };
    const onMove = (e) => {
      const r = canvas.getBoundingClientRect();
      mouse.x = e.clientX - r.left;
      mouse.y = e.clientY - r.top;
    };
    const onLeave = () => { mouse.x = -1000; mouse.y = -1000; };

    init(); animate();
    window.addEventListener("resize", onResize);
    container.addEventListener("mousemove", onMove);
    container.addEventListener("mouseleave", onLeave);
    return () => {
      window.removeEventListener("resize", onResize);
      container.removeEventListener("mousemove", onMove);
      container.removeEventListener("mouseleave", onLeave);
      cancelAnimationFrame(raf);
    };
  }, [color, trailOpacity, particleCount, speed]);

  return (
    <div ref={containerRef} className={"flowfield-root " + className}>
      <canvas ref={canvasRef} />
    </div>
  );
}

window.FlowField = FlowField;