// Animated flowing river SVG background — layered wave paths with subtle parallax drift
function RiverBackground({ intensity = 1, tone = "light" }) {
  // tone: 'light' for hero, 'dark' for inverted sections
  const isDark = tone === "dark";
  const grads = isDark
    ? [["#4AA8D0", "#7FC6E3"], ["#2d6d94", "#4AA8D0"], ["#1a4a6a", "#2d6d94"]]
    : [["#D6EEF8", "#EAF6FB"], ["#A9D9EC", "#CDE8F3"], ["#7FC6E3", "#A9D9EC"]];

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", pointerEvents: "none" }}>
      <svg
        viewBox="0 0 1440 900"
        preserveAspectRatio="xMidYMid slice"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}
      >
        <defs>
          {grads.map(([a, b], i) => (
            <linearGradient key={i} id={`river-g-${tone}-${i}`} x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor={a} stopOpacity={0.9} />
              <stop offset="1" stopColor={b} stopOpacity={0.6} />
            </linearGradient>
          ))}
          <filter id={`blur-${tone}`}>
            <feGaussianBlur stdDeviation="1.2" />
          </filter>
        </defs>

        {/* Layer 1 — back, slowest */}
        <g style={{ animation: "riverDrift1 28s linear infinite", opacity: 0.55 * intensity }}>
          <path
            d="M -200 500 C 200 400, 400 620, 720 500 S 1240 400, 1640 520 L 1640 900 L -200 900 Z"
            fill={`url(#river-g-${tone}-0)`}
          />
        </g>
        {/* Layer 2 — mid */}
        <g style={{ animation: "riverDrift2 22s linear infinite", opacity: 0.55 * intensity }}>
          <path
            d="M -200 600 C 240 520, 480 720, 780 600 S 1260 520, 1640 640 L 1640 900 L -200 900 Z"
            fill={`url(#river-g-${tone}-1)`}
          />
        </g>
        {/* Layer 3 — front, fastest */}
        <g style={{ animation: "riverDrift3 16s linear infinite", opacity: 0.75 * intensity }}>
          <path
            d="M -200 720 C 260 660, 520 820, 820 720 S 1280 640, 1640 760 L 1640 900 L -200 900 Z"
            fill={`url(#river-g-${tone}-2)`}
          />
        </g>

        {/* Soft highlight stripes — river current lines */}
        <g opacity={0.35 * intensity} stroke={isDark ? "#CDE8F3" : "#FFFFFF"} strokeWidth="1" fill="none" filter={`url(#blur-${tone})`}>
          <path d="M -100 480 C 240 440, 480 520, 820 480 S 1280 440, 1540 500" style={{ animation: "riverDrift1 24s linear infinite" }} />
          <path d="M -100 560 C 280 520, 520 600, 860 560 S 1300 520, 1540 580" style={{ animation: "riverDrift2 20s linear infinite" }} />
          <path d="M -100 640 C 220 600, 560 680, 900 640 S 1320 600, 1540 660" style={{ animation: "riverDrift3 18s linear infinite" }} />
        </g>
      </svg>
    </div>
  );
}

Object.assign(window, { RiverBackground });