// components/final-cta.jsx
// Section 7/8. Final CTA + Countdown to World Cup kickoff + repeat downloads + share line.

function FinalCTASection({ onIntent, isLaunched }) {
  const C = window.COPY;

  // Responsive card width for the carousel. Desktop bumps to 240px so the
  // cards earn presence in the wider Final CTA section; mobile keeps 175px
  // so the cards fit narrow viewports without overflow.
  const [cardWidth, setCardWidth] = React.useState(() =>
    typeof window !== "undefined" && window.innerWidth > 720 ? 240 : 175
  );
  React.useEffect(() => {
    const onResize = () => setCardWidth(window.innerWidth > 720 ? 240 : 175);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  const onSocialClick = (platform) => {
    window.trackEvent("secondary_social_follow_click", { source: "final_cta", platform });
  };

  const onCopyLink = async () => {
    window.trackEvent("share_link_copy", { source: "final_cta" });
    try {
      await navigator.clipboard.writeText(C.finalCta.shareUrl);
      // Visual ack handled inline below.
      const el = document.getElementById("copy-link-ack");
      if (el) {
        el.classList.add("show");
        setTimeout(() => el.classList.remove("show"), 1800);
      }
    } catch (e) { /* noop */ }
  };

  const onSmsClick = () => {
    window.trackEvent("share_sms_click", { source: "final_cta" });
  };

  return (
    <section
      id="final-cta"
      aria-labelledby="final-cta-heading"
      className="section-dark final-cta"
    >
      <div className="container final-cta-inner">
        <h2 id="final-cta-heading" className="section-h2 final-cta-h">
          Ready when you are. <i className="ish-italic">ish.</i>
        </h2>

        {/* Download CTAs sit ABOVE the carousel per v=124 — primary
            action first, the rotating "what's coming" carousel below
            as supporting context. */}
        <div className="final-cta-buttons">
          <DownloadIntentButtons source="final_cta" onIntent={onIntent} isLaunched={isLaunched} />
        </div>

        {window.MEDIA && window.MEDIA.liveCarousel && window.LiveCarousel && (
          <div className="final-cta-carousel">
            <LiveCarousel
              matches={window.MEDIA.liveCarousel.matches}
              cardWidth={cardWidth}
              size="md"
            />
          </div>
        )}
      </div>
    </section>
  );
}

window.FinalCTASection = FinalCTASection;