/* BigCTA, the unmistakable bottom CTA.
   Single light zone, headline sits directly above the button. A ghost cursor
   arcs in, hovers, then clicks the button on a loop; on click it morphs from
   an arrow pointer into a white pointing hand. The page-wide light→dark
   transition is handled by the InkSection engine block earlier in the scroll. */
function BigCTA({ id = "begin", label, lead = "3 minutes. Indicative pathway. No cost." }) {
  const ref = useReveal(0.2);
  const btnWrap = useRef(null);
  const [ghost, setGhost] = useState({ x: -100, y: -100, click: 0, visible: false });

  useEffect(() => {
    const start = () => {
      let stopped = false;
      const loop = async () => {
        while (!stopped) {
          // Enter from bottom-right
          setGhost({ x: 280, y: 220, click: 0, visible: true });
          await new Promise((r) => setTimeout(r, 900));
          // Arc to button center
          setGhost({ x: 0, y: 0, click: 0, visible: true });
          await new Promise((r) => setTimeout(r, 900));
          // Click pulse, pointer + radiating ticks, button presses in, ripple expands
          setGhost({ x: 0, y: 0, click: 1, visible: true });
          await new Promise((r) => setTimeout(r, 520));
          setGhost({ x: 0, y: 0, click: 0, visible: true });
          await new Promise((r) => setTimeout(r, 700));
          // Drift off
          setGhost({ x: -320, y: -120, click: 0, visible: true });
          await new Promise((r) => setTimeout(r, 800));
          setGhost({ x: -320, y: -120, click: 0, visible: false });
          await new Promise((r) => setTimeout(r, 2400));
        }
      };
      loop();
      return () => { stopped = true; };
    };
    const el = btnWrap.current; if (!el) return;
    let stopper = null;
    const io = new IntersectionObserver((e) => {
      e.forEach((x) => {
        if (x.isIntersecting && !stopper) stopper = start();
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => { io.disconnect(); if (stopper) stopper(); };
  }, []);

  return (
    <section id={id} ref={ref} className="section reveal" style={{ padding: "120px 0 140px", background: "var(--pearl)", borderTop: "1px solid var(--mist)", borderBottom: "1px solid var(--mist)", position: "relative", overflow: "hidden" }}>
      <div className="container" style={{ textAlign: "center", position: "relative", zIndex: 2 }}>
        <div className="reveal serif-em" style={{ fontSize: 20, color: "var(--slate)" }}>The next step</div>
        <h2 className="reveal display h2" style={{ margin: "16px auto 0", maxWidth: 980 }}>
          See which capital partner <span className="serif-em">fits your deal</span>.
        </h2>
        <p className="reveal body-l" style={{ marginTop: 24, maxWidth: 640, marginInline: "auto" }}>
          {lead} Answer a few structured questions and the platform will surface the lender profile most aligned to your scenario.
        </p>

        <div className="reveal" style={{ marginTop: 40, display: "flex", justifyContent: "center", position: "relative" }}>
          <div ref={btnWrap} style={{ position: "relative", display: "inline-flex" }}>
            <a href="assessment.html" className="btn-mega" style={{
              transform: ghost.click ? "translateY(4px) scale(0.985)" : "translateY(0) scale(1)",
              boxShadow: ghost.click
                ? "0 2px 0 0 rgba(10,10,10,0.18) inset, 0 1px 2px rgba(10,10,10,0.12)"
                : "0 10px 24px -12px rgba(10,10,10,0.45)",
              transition: "transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease",
              position: "relative", zIndex: 2,
            }}>
              {label || "Begin Funding Assessment"}
              <span className="arrow"><I.Arrow s={22}/></span>
            </a>

            {/* Ghost cursor, standard ink mouse pointer, constant throughout the loop */}
            <span style={{
              position: "absolute", top: "50%", left: "50%",
              width: 26, height: 28,
              transform: `translate(calc(-50% + ${ghost.x}px), calc(-50% + ${ghost.y}px))`,
              transition: "transform 1.1s cubic-bezier(.4,.0,.2,1), opacity .4s ease",
              opacity: ghost.visible ? 0.95 : 0,
              pointerEvents: "none", zIndex: 3,
              filter: "drop-shadow(0 1px 2px rgba(10,10,10,0.25))",
            }}>
              <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none">
                <path
                  d="M3 2l7.07 17 2.51-7.39 7.39-2.51L3 2z"
                  fill="var(--ink)" stroke="#fff" strokeWidth="1.2"
                  strokeLinejoin="round" strokeLinecap="round"
                />
              </svg>
            </span>

            {/* Click ripple, larger, double ring for emphasis */}
            <span style={{
              position: "absolute", top: "50%", left: "50%",
              width: ghost.click ? 320 : 0, height: ghost.click ? 320 : 0,
              transform: "translate(-50%, -50%)",
              borderRadius: 999, border: "1.5px solid var(--ink)", opacity: ghost.click ? 0 : 0.45,
              transition: "width .65s ease-out, height .65s ease-out, opacity .65s ease-out",
              pointerEvents: "none", zIndex: 1,
            }}/>
            <span style={{
              position: "absolute", top: "50%", left: "50%",
              width: ghost.click ? 200 : 0, height: ghost.click ? 200 : 0,
              transform: "translate(-50%, -50%)",
              borderRadius: 999, border: "1px solid var(--ink)", opacity: ghost.click ? 0 : 0.5,
              transition: "width .45s ease-out, height .45s ease-out, opacity .45s ease-out",
              pointerEvents: "none", zIndex: 1,
            }}/>
          </div>
        </div>

        <div className="reveal" style={{ marginTop: 24, display: "inline-flex", gap: 24, flexWrap: "wrap", justifyContent: "center", color: "var(--slate)", fontSize: 13 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><I.Clock s={14}/> ~3 minutes</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><I.Sparkle s={14}/> Indicative, no obligation</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8 }}><I.Check s={14}/> Only sent to compatible lenders as enquiry</span>
        </div>

        <p className="small reveal" style={{ marginTop: 28, maxWidth: 720, marginInline: "auto", lineHeight: 1.7 }}>
          Indicative pathway only. Funding is subject to lender assessment, due diligence, valuation, credit approval and legal documentation.
        </p>
      </div>
    </section>
  );
}
window.BigCTA = BigCTA;