// ff-mesh.jsx — animated flowing-mesh background for the hero
// Smooth flowing parametric curves rendered to canvas. Calm, motion-heavy
// (continuous slow drift), respects prefers-reduced-motion.

const { useEffect: __m_useEffect, useRef: __m_useRef } = React;

function FlowMesh({ accent = "#3b82f6", density = 22, opacity = 0.5 }) {
  const canvasRef = __m_useRef(null);
  const rafRef = __m_useRef(0);
  const t0 = __m_useRef(performance.now());

  __m_useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const reduce = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    let w = 0, h = 0, dpr = 1;
    const resize = () => {
      dpr = Math.min(2, window.devicePixelRatio || 1);
      const r = canvas.getBoundingClientRect();
      w = r.width;
      h = r.height;
      canvas.width = Math.floor(w * dpr);
      canvas.height = Math.floor(h * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    };
    resize();
    const ro = new ResizeObserver(resize);
    ro.observe(canvas);

    // Parse accent → rgb so we can fade alpha cheaply
    const accentRgb = (() => {
      const tmp = document.createElement("canvas").getContext("2d");
      tmp.fillStyle = accent;
      const hex = tmp.fillStyle.replace("#", "");
      const r = parseInt(hex.substring(0, 2), 16);
      const g = parseInt(hex.substring(2, 4), 16);
      const b = parseInt(hex.substring(4, 6), 16);
      return [r, g, b];
    })();
    const [ar, ag, ab] = accentRgb;

    const lines = density;

    const draw = (now) => {
      const t = (now - t0.current) / 1000;
      ctx.clearRect(0, 0, w, h);

      // Faint horizon glow
      const grad = ctx.createRadialGradient(w * 0.5, h * 1.05, 0, w * 0.5, h * 1.05, h * 1.1);
      grad.addColorStop(0, `rgba(${ar},${ag},${ab},${0.18 * opacity})`);
      grad.addColorStop(1, "rgba(0,0,0,0)");
      ctx.fillStyle = grad;
      ctx.fillRect(0, 0, w, h);

      ctx.lineWidth = 1;
      for (let i = 0; i < lines; i++) {
        const u = i / (lines - 1);
        const baseY = h * (0.12 + u * 0.92);
        const amp = 26 + Math.sin(t * 0.4 + i) * 12;
        const phase = t * (0.35 + u * 0.55) + i * 0.7;
        const a = 0.05 + 0.35 * (1 - Math.abs(u - 0.5) * 1.4);

        ctx.strokeStyle = `rgba(${ar},${ag},${ab},${Math.max(0, a * opacity)})`;
        ctx.beginPath();
        const segs = 64;
        for (let s = 0; s <= segs; s++) {
          const x = (s / segs) * w;
          const k = x / w;
          // Layered sine for organic flow
          const y =
            baseY +
            Math.sin(k * 3.4 + phase) * amp +
            Math.sin(k * 6.8 + phase * 0.7) * (amp * 0.4) +
            Math.sin(k * 1.7 - phase * 0.5) * (amp * 0.7);
          if (s === 0) ctx.moveTo(x, y);
          else ctx.lineTo(x, y);
        }
        ctx.stroke();
      }

      // Faint particles along a few lines
      for (let i = 0; i < 7; i++) {
        const u = (i + 0.5) / 7;
        const phase = t * (0.3 + u * 0.6) + i * 1.7;
        const x = ((t * (40 + i * 8)) % (w + 80)) - 40;
        const k = x / w;
        const baseY = h * (0.15 + u * 0.86);
        const y =
          baseY +
          Math.sin(k * 3.4 + phase) * 22 +
          Math.sin(k * 1.7 - phase * 0.5) * 16;
        const a = 0.5 + Math.sin(t * 1.4 + i) * 0.3;
        ctx.fillStyle = `rgba(${ar},${ag},${ab},${Math.max(0.1, a * opacity)})`;
        ctx.beginPath();
        ctx.arc(x, y, 1.4, 0, Math.PI * 2);
        ctx.fill();
      }

      if (!reduce) rafRef.current = requestAnimationFrame(draw);
    };
    rafRef.current = requestAnimationFrame(draw);
    return () => {
      cancelAnimationFrame(rafRef.current);
      ro.disconnect();
    };
  }, [accent, density, opacity]);

  return (
    <canvas
      ref={canvasRef}
      style={{
        position: "absolute",
        inset: 0,
        width: "100%",
        height: "100%",
        pointerEvents: "none",
        maskImage:
          "radial-gradient(ellipse 85% 70% at 50% 60%, black 40%, transparent 90%)",
        WebkitMaskImage:
          "radial-gradient(ellipse 85% 70% at 50% 60%, black 40%, transparent 90%)",
      }}
    />
  );
}

window.FlowMesh = FlowMesh;