/* global React, MagneticButton, Icons */
const { useRef, useEffect } = React;

// Handle-inspired final CTA: big dark glassy card with a constant, ambient
// "lava lamp" of organic blurred blobs that drift, merge and bounce off the
// card edges. No mouse interaction needed.
function LavaLamp() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    let raf, w = 0, h = 0;
    const dpr = Math.min(window.devicePixelRatio || 1, 2);

    // Soft, cool palette that sits on the deep-blue card.
    const palette = [
      [120, 150, 255],
      [90, 120, 240],
      [150, 170, 250],
      [70, 100, 220],
    ];

    const rand = (a, b) => a + Math.random() * (b - a);
    let blobs = [];

    const seed = () => {
      blobs = Array.from({ length: 11 }, (_, i) => {
        const r = rand(0.16, 0.30); // radius as fraction of min(w,h)
        return {
          x: rand(0, 1),
          y: rand(0, 1),
          vx: rand(-0.001, 0.001),
          vy: rand(-0.001, 0.001),
          r,
          c: palette[i % palette.length],
        };
      });
    };

    const resize = () => {
      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);
    };

    const draw = () => {
      ctx.clearRect(0, 0, w, h);
      const m = Math.min(w, h);
      for (const b of blobs) {
        b.x += b.vx; b.y += b.vy;
        // bounce off the card edges (centers travel the full card so blobs
        // reach the corners and cover the whole window)
        if (b.x < 0) { b.x = 0; b.vx = Math.abs(b.vx); }
        if (b.x > 1) { b.x = 1; b.vx = -Math.abs(b.vx); }
        if (b.y < 0) { b.y = 0; b.vy = Math.abs(b.vy); }
        if (b.y > 1) { b.y = 1; b.vy = -Math.abs(b.vy); }

        const px = b.x * w, py = b.y * h, pr = b.r * m;
        const g = ctx.createRadialGradient(px, py, 0, px, py, pr);
        const [cr, cg, cb] = b.c;
        g.addColorStop(0, `rgba(${cr},${cg},${cb},0.95)`);
        g.addColorStop(1, `rgba(${cr},${cg},${cb},0)`);
        ctx.fillStyle = g;
        ctx.beginPath();
        ctx.arc(px, py, pr, 0, Math.PI * 2);
        ctx.fill();
      }
      raf = requestAnimationFrame(draw);
    };

    seed();
    resize();
    draw();
    window.addEventListener("resize", resize);
    return () => { cancelAnimationFrame(raf); window.removeEventListener("resize", resize); };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      aria-hidden="true"
      style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
        zIndex: 0, pointerEvents: "none",
        filter: "blur(26px) saturate(1.2)",
        mixBlendMode: "lighten", opacity: 1,
      }}
    />
  );
}

function FinalCtaSection() {
  return (
    <section className="final-section" style={{
      padding: "112px 0 120px",
      background: "var(--bg-1)",
      position: "relative",
    }}>
      <div className="final-outer" style={{ maxWidth: "min(1320px, 86vw)", margin: "0 auto", padding: "0 32px" }}>
        <div
          className="final-card"
          style={{
            position: "relative",
            borderRadius: 32,
            overflow: "hidden",
            background:
              "radial-gradient(120% 80% at 50% 50%, rgba(5,48,206,0.55), rgba(20,50,125,0.85) 38%, rgba(11,26,71,1) 80%)",
            boxShadow: "0 30px 80px -30px rgba(20,50,125,0.55)",
            padding: "96px 48px",
            color: "#fff",
            isolation: "isolate",
          }}
        >
          <LavaLamp />

          <div style={{ position: "relative", zIndex: 1, maxWidth: 760, margin: "0 auto", textAlign: "center" }}>
            <div className="reveal" style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              padding: "6px 14px", borderRadius: 999,
              background: "rgba(255,255,255,0.10)", border: "1px solid rgba(255,255,255,0.18)",
              fontSize: 12, color: "rgba(255,255,255,0.85)", letterSpacing: "0.04em", textTransform: "uppercase",
              marginBottom: 24,
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: 999,
                background: "#8CA0F6", boxShadow: "0 0 0 4px rgba(140,160,246,0.20)",
              }}/>
              Próximamente · crédito empresarial
            </div>

            <h2 className="reveal" style={{
              margin: 0, fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: "clamp(2.4rem, 4.5vw + 1rem, 4.25rem)",
              lineHeight: 1.04, letterSpacing: "-0.035em", color: "#fff",
              marginBottom: 22, "--reveal-delay": "80ms",
            }}>
              Impulsa tu empresa con<br/>
              <span style={{ color: "rgba(255,255,255,0.55)" }}>finanzas inteligentes.</span>
            </h2>

            <p className="reveal" style={{
              fontSize: 17, color: "rgba(255,255,255,0.75)",
              lineHeight: 1.55, maxWidth: 540, margin: "0 auto 36px",
              "--reveal-delay": "160ms",
            }}>
              Nuevas funciones premium en camino: Crédito, integraciones contables
              y dashboards personalizados. Empieza hoy sin esperar.
            </p>

            <div className="reveal hero-cta-row" style={{
              display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap",
              "--reveal-delay": "240ms",
            }}>
              <MagneticButton variant="primary" onClick={trackLead} style={{
                background: "#fff", color: "var(--blue-900)",
                boxShadow: "0 0 0 1px rgba(255,255,255,0.6) inset, 0 12px 28px -8px rgba(0,0,0,0.35)",
              }}>
                Aplica ahora <Icons.ArrowRight size={14}/>
              </MagneticButton>
              <MagneticButton variant="outline" onClick={trackLead} style={{
                background: "rgba(255,255,255,0.08)", color: "#fff",
                borderColor: "rgba(255,255,255,0.25)",
              }}>
                Agenda demo <Icons.ArrowUpRight size={14}/>
              </MagneticButton>
            </div>

            {/* Tiny live signal */}
            <div className="reveal" style={{
              marginTop: 56, display: "inline-flex", alignItems: "center", gap: 10,
              fontSize: 12, color: "rgba(255,255,255,0.65)",
              "--reveal-delay": "320ms",
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: 999, background: "#9BFFA9",
                boxShadow: "0 0 0 4px rgba(155,255,169,0.18)",
                animation: "pulse-dot 1.8s ease-in-out infinite",
              }}/>
              Onboarding promedio: menos de 24 horas<Fn n={7}/>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.FinalCtaSection = FinalCtaSection;