// SHADER BACKGROUND — flowing gradient aurora effect using team colors
(function() {
  const useE = React.useEffect;
  const useR = React.useRef;

  function ShaderBg({ color1, color2, color3, opacity }) {
    const canvasRef = useR(null);
    const rafRef = useR(null);

    useE(() => {
      const canvas = canvasRef.current;
      if (!canvas) return;
      const ctx = canvas.getContext("2d");
      let running = true;
      let W = 0, H = 0;

      const parseHex = (hex) => {
        const h = (hex || "#5BB7E2").replace("#", "");
        return {
          r: parseInt(h.substring(0, 2), 16) || 100,
          g: parseInt(h.substring(2, 4), 16) || 150,
          b: parseInt(h.substring(4, 6), 16) || 200,
        };
      };

      const c1 = parseHex(color1);
      const c2 = parseHex(color2);
      const c3 = parseHex(color3);
      const alpha = opacity || 0.18;

      const blobs = [
        { x: 0.3, y: 0.4, r: 0.35, sx: 0.15, sy: 0.12, px: 0, py: 0, c: c1 },
        { x: 0.7, y: 0.3, r: 0.30, sx: 0.10, sy: 0.18, px: 1.5, py: 0.8, c: c2 },
        { x: 0.5, y: 0.7, r: 0.40, sx: 0.12, sy: 0.08, px: 3.0, py: 2.1, c: c3 },
        { x: 0.2, y: 0.6, r: 0.25, sx: 0.18, sy: 0.14, px: 4.5, py: 3.2, c: c1 },
        { x: 0.8, y: 0.5, r: 0.28, sx: 0.08, sy: 0.16, px: 2.0, py: 1.5, c: c2 },
      ];

      let t = 0;
      let last = performance.now();

      const draw = (now) => {
        if (!running) return;
        const dt = (now - last) / 1000;
        last = now;
        t += dt * 0.4;

        // Resize each frame if needed (handles initial mount and layout shifts)
        const cw = canvas.clientWidth;
        const ch = canvas.clientHeight;
        if (cw > 0 && ch > 0 && (cw !== W || ch !== H)) {
          W = cw; H = ch;
          const dpr = window.devicePixelRatio || 1;
          canvas.width = W * dpr;
          canvas.height = H * dpr;
          ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
        }

        if (W === 0 || H === 0) { rafRef.current = requestAnimationFrame(draw); return; }

        ctx.clearRect(0, 0, W, H);

        blobs.forEach((b) => {
          const bx = (b.x + Math.sin(t * b.sx + b.px) * 0.25) * W;
          const by = (b.y + Math.cos(t * b.sy + b.py) * 0.2) * H;
          const br = b.r * Math.max(W, H);

          const grad = ctx.createRadialGradient(bx, by, 0, bx, by, br);
          grad.addColorStop(0, `rgba(${b.c.r},${b.c.g},${b.c.b},${alpha * 1.2})`);
          grad.addColorStop(0.4, `rgba(${b.c.r},${b.c.g},${b.c.b},${alpha * 0.5})`);
          grad.addColorStop(1, `rgba(${b.c.r},${b.c.g},${b.c.b},0)`);

          ctx.fillStyle = grad;
          ctx.fillRect(0, 0, W, H);
        });

        rafRef.current = requestAnimationFrame(draw);
      };

      rafRef.current = requestAnimationFrame(draw);
      return () => { running = false; cancelAnimationFrame(rafRef.current); };
    }, [color1, color2, color3, opacity]);

    return React.createElement("canvas", {
      ref: canvasRef,
      style: { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", zIndex: 0 },
    });
  }

  window.ShaderBg = ShaderBg;
})();