// CTA Section — exact copy. Minimal footer with brand mark only.
function FinalCta({ ctaImg, tone = "dark" }) {
  React.useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    if (!window.gsap || !window.ScrollTrigger) return;
    const { gsap } = window;
    const ctx = gsap.context(() => {
      gsap.from(".cta-inner h2, .cta-inner p, .cta-inner .actions, .cta-foot", {
        y: 90,
        opacity: 0,
        filter: "blur(6px)",
        duration: 0.8,
        stagger: 0.15,
        ease: "sine.out",
        scrollTrigger: {
          trigger: ".cta",
          start: "top 75%",
          toggleActions: "play none none reverse",
        },
      });
    });
    return () => ctx.revert();
  }, []);

  return (
    <section id="cta" className={"cta tone-" + tone}>
      <div className="cta-photo">
        <img src={ctaImg} alt="" loading="lazy" decoding="async"/>
      </div>
      <div className="cta-inner">
        <h2>Your Money Deserves a Strategy.</h2>
        <p>Stop leaving your financial future to chance. Let&apos;s build a portfolio that works for you.</p>
        <div className="actions">
          <button className="btn btn-primary"
                  onClick={() => window.dispatchEvent(new CustomEvent("open-get-started"))}>
            Get Started
            <Arrow size={18} strokeWidth={2} color="#fff"/>
          </button>
        </div>
      </div>
      <div className="cta-foot">
        <img className="cta-foot-logo" src="assets/logos/rank-asset-white.svg" alt="Rank"/>
        <span className="cta-foot-tag">Rank Asset Managers Limited</span>
      </div>
    </section>
  );
}
window.FinalCta = FinalCta;