// Hero canvas — luminous water particles + caustic ripples
const WaterCanvas = ({ accent = "#ffd600" }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let w, h, dpr;
    const particles = [];
    const ripples = [];
    let raf;
    let lastRipple = 0;

    const resize = () => {
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      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);
    };
    resize();
    window.addEventListener("resize", resize);

    // particles (luminous bokeh)
    const PCOUNT = 70;
    for (let i = 0; i < PCOUNT; i++) {
      particles.push({
        x: Math.random() * w,
        y: Math.random() * h,
        r: Math.random() * 1.6 + 0.3,
        vx: (Math.random() - 0.5) * 0.18,
        vy: -(Math.random() * 0.25 + 0.05),
        a: Math.random() * 0.6 + 0.1,
        ph: Math.random() * Math.PI * 2,
      });
    }

    let mx = w / 2, my = h / 2;
    const onMove = (e) => {
      const r = canvas.getBoundingClientRect();
      mx = e.clientX - r.left; my = e.clientY - r.top;
      const now = performance.now();
      if (now - lastRipple > 90) {
        ripples.push({ x: mx, y: my, r: 0, a: 0.45 });
        lastRipple = now;
      }
    };
    window.addEventListener("mousemove", onMove);

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

      // soft gradient base
      const g = ctx.createRadialGradient(w * 0.5, h * 0.45, 0, w * 0.5, h * 0.5, Math.max(w, h) * 0.7);
      g.addColorStop(0, "rgba(255,214,0,0.10)");
      g.addColorStop(0.4, "rgba(50,30,120,0.05)");
      g.addColorStop(1, "rgba(10,13,18,0)");
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, w, h);

      // caustic horizontal lines (light on water)
      ctx.save();
      ctx.globalCompositeOperation = "screen";
      for (let i = 0; i < 6; i++) {
        const y = (h * 0.55) + i * 18 + Math.sin(t / 1200 + i) * 6;
        const grad = ctx.createLinearGradient(0, y, w, y);
        grad.addColorStop(0, "rgba(255,214,0,0)");
        grad.addColorStop(0.5, `rgba(255,229,102,${0.05 + i * 0.005})`);
        grad.addColorStop(1, "rgba(255,214,0,0)");
        ctx.fillStyle = grad;
        ctx.fillRect(0, y - 0.5, w, 1);
      }
      ctx.restore();

      // particles
      for (const p of particles) {
        p.x += p.vx;
        p.y += p.vy;
        p.ph += 0.02;
        if (p.y < -10) { p.y = h + 10; p.x = Math.random() * w; }
        if (p.x < -10) p.x = w + 10;
        if (p.x > w + 10) p.x = -10;
        const tw = (Math.sin(p.ph) + 1) / 2;
        ctx.globalAlpha = p.a * (0.4 + tw * 0.6);
        ctx.fillStyle = "#ffe566";
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
        ctx.fill();

        // glow
        ctx.globalAlpha = p.a * 0.15;
        ctx.beginPath();
        ctx.arc(p.x, p.y, p.r * 4, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.globalAlpha = 1;

      // ripples
      for (let i = ripples.length - 1; i >= 0; i--) {
        const rp = ripples[i];
        rp.r += 1.4;
        rp.a *= 0.965;
        ctx.strokeStyle = `rgba(255,229,102,${rp.a})`;
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.arc(rp.x, rp.y, rp.r, 0, Math.PI * 2);
        ctx.stroke();
        if (rp.a < 0.02) ripples.splice(i, 1);
      }

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

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("resize", resize);
      window.removeEventListener("mousemove", onMove);
    };
  }, []);
  return <canvas ref={ref} aria-hidden="true" />;
};

window.WaterCanvas = WaterCanvas;