function CTA() {
  const widgetRef = React.useRef(null);

  React.useEffect(() => {
    if (!widgetRef.current) return;

    // Inject Cal.com embed loader once
    (function (C, A, L) {
      let p = function (a, ar) { a.q.push(ar); };
      let d = C.document;
      C.Cal = C.Cal || function () {
        let cal = C.Cal; let ar = arguments;
        if (!cal.loaded) {
          cal.ns = {}; cal.q = cal.q || [];
          d.head.appendChild(d.createElement("script")).src = A;
          cal.loaded = true;
        }
        if (ar[0] === L) {
          const api = function () { p(api, arguments); };
          const namespace = ar[1]; api.q = api.q || [];
          if (typeof namespace === "string") { cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]); }
          else p(cal, ar);
          return;
        }
        p(cal, ar);
      };
    })(window, "https://app.cal.com/embed/embed.js", "init");

    window.Cal("init", "thirty-min", { origin: "https://cal.com" });
    window.Cal.ns["thirty-min"]("inline", {
      elementOrSelector: widgetRef.current,
      config: { layout: "month_view", theme: "dark" },
      calLink: "tawhidx/30min",
    });
    window.Cal.ns["thirty-min"]("ui", {
      theme: "dark",
      cssVarsPerTheme: {
        dark: {
          "cal-brand": "#6ea7ff",
          "cal-bg": "#121a2d",
          "cal-bg-emphasis": "#1a2440",
          "cal-bg-muted": "#15203a",
          "cal-bg-subtle": "#1a2440",
          "cal-bg-info": "rgba(74,142,255,0.12)",
          "cal-text": "#f3f6fc",
          "cal-text-emphasis": "#ffffff",
          "cal-text-muted": "#c6d0e0",
          "cal-text-subtle": "#9aa8bf",
          "cal-border": "rgba(110,167,255,0.22)",
          "cal-border-default": "rgba(110,167,255,0.22)",
          "cal-border-subtle": "rgba(110,167,255,0.14)",
          "cal-border-emphasis": "rgba(110,167,255,0.40)",
        },
      },
      hideEventTypeDetails: false,
    });
  }, []);

  return (
    <section id="book-a-call" style={{ padding: '88px 0 140px', position: 'relative', overflow: 'hidden' }}>
      {/* Soft top spotlight */}
      <div aria-hidden style={{
        position: 'absolute',
        left: '50%', top: 0,
        transform: 'translateX(-50%)',
        width: 1100, height: 360,
        background: 'radial-gradient(ellipse 50% 100% at 50% 0%, rgba(110,167,255,0.22) 0%, rgba(74,142,255,0.08) 45%, transparent 75%)',
        filter: 'blur(20px)',
        pointerEvents: 'none',
        zIndex: 0,
      }} />
      {/* Faint masked grid texture */}
      <div aria-hidden style={{
        position: 'absolute',
        inset: 0,
        backgroundImage:
          'linear-gradient(rgba(110,167,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(110,167,255,0.06) 1px, transparent 1px)',
        backgroundSize: '56px 56px',
        maskImage:
          'radial-gradient(ellipse 60% 60% at 50% 35%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 80%)',
        WebkitMaskImage:
          'radial-gradient(ellipse 60% 60% at 50% 35%, #000 0%, rgba(0,0,0,0.55) 45%, transparent 80%)',
        pointerEvents: 'none',
        zIndex: 0,
      }} />
      {/* Fade to black at bottom — cinematic cut between sections */}
      <div aria-hidden style={{
        position: 'absolute',
        left: 0, right: 0, bottom: 0,
        height: 220,
        background: 'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 60%, #000 100%)',
        pointerEvents: 'none',
        zIndex: 1,
      }} />

      <div className="container" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <Reveal>
          <SectionEyebrow label="Work With Us" />
        </Reveal>
        <Reveal delay={80}>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 72px)', marginTop: 24, maxWidth: 900, margin: '24px auto 18px', lineHeight: 1.05 }}>
            <span className="serif-italic" style={{ color: 'var(--ink-dim)' }}>Let's Level Up</span><br />
            Your Business
          </h2>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontSize: 16.5, color: 'var(--ink-dim)', maxWidth: 540, margin: '0 auto 28px', lineHeight: 1.55 }}>
            Book a free 30-minute strategy call. Pick a time that works — we'll handle the rest.
          </p>
        </Reveal>

        <Reveal delay={240}>
          <div style={{
            maxWidth: 1040,
            margin: '0 auto',
            borderRadius: 20,
            overflow: 'hidden',
            position: 'relative',
          }}>
            <div
              ref={widgetRef}
              className="cal-embed"
              style={{ minWidth: 320, height: 540, width: '100%', display: 'block' }}
            />
          </div>
        </Reveal>

        <Reveal delay={320}>
          <p style={{ marginTop: 24, fontSize: 13.5, color: 'var(--ink-muted)' }}>
            Prefer email? <a href="mailto:hello@nexcutmedia.com" style={{ color: 'var(--accent-2)', textDecoration: 'underline', textUnderlineOffset: 3 }}>hello@nexcutmedia.com</a>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { CTA });