// Final-call section. Bold gradient block with primary + secondary CTA.
const CTA = ({
  eyebrow = "Ready when you are",
  title,
  blurb,
  primary = { label: "Book a discovery call", href: "https://calendly.com/shoaib-adopsify/30min", external: true },
  secondary = { label: "See our services", href: "services.html" },
}) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    window.gsap.from(ref.current, {
      scrollTrigger: { trigger: ref.current, start: "top 80%" },
      y: 60, opacity: 0, duration: 1, ease: "expo.out",
    });
  }, []);

  return (
    <section style={{ padding: "40px clamp(16px, 4vw, 48px) clamp(76px, 9vw, 120px)", background: "var(--paper)" }}>
      <div ref={ref} style={{
        maxWidth: 1280, margin: "0 auto",
        background: "var(--ink-950)", color: "var(--paper)",
        borderRadius: 32, padding: "clamp(52px, 8vw, 112px) clamp(20px, 5vw, 64px)",
        position: "relative", overflow: "hidden",
      }}>
        <div aria-hidden style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(60% 60% at 80% 20%, rgba(110,43,217,0.4), transparent 60%), radial-gradient(50% 50% at 10% 90%, rgba(46,91,255,0.32), transparent 60%)",
          pointerEvents: "none",
        }}/>
        <div style={{ position: "relative", maxWidth: 880 }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
            letterSpacing: "0.14em", textTransform: "uppercase",
            color: "var(--brand-cyan)", marginBottom: 26,
          }}>{eyebrow}</div>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 400,
            fontSize: "clamp(48px, 7vw, 96px)", lineHeight: 1.02,
            letterSpacing: "-0.025em", margin: 0,
          }}>
            {title || <>Stop renting <span style={{ fontStyle: "italic", color: "var(--brand-cyan)" }}>impressions.</span><br/>Start owning <span style={{ fontStyle: "italic", color: "var(--brand-cyan)" }}>outcomes.</span></>}
          </h2>
          {blurb && (
            <p style={{ fontSize: 19, lineHeight: 1.6, color: "rgba(250,248,244,0.74)", maxWidth: 600, marginTop: 28 }}>{blurb}</p>
          )}
          <div style={{ marginTop: 44, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <a href={primary.href}
              {...(primary.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
              style={{
              background: "var(--paper)", color: "var(--ink-900)",
              padding: "16px 26px", borderRadius: 9999,
              fontSize: 15, fontWeight: 600, textDecoration: "none",
              display: "inline-flex", alignItems: "center", gap: 10,
              transition: "transform 200ms",
            }}
            onMouseEnter={e => e.currentTarget.style.transform = "translateY(-2px)"}
            onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}
            >
              {primary.label}
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M3 8h10M9 4l4 4-4 4"/>
              </svg>
            </a>
            <a href={secondary.href} style={{
              color: "var(--paper)", fontSize: 15, fontWeight: 600,
              padding: "16px 22px", borderRadius: 9999,
              border: "1px solid rgba(250,248,244,0.16)",
              background: "rgba(250,248,244,0.04)",
              textDecoration: "none",
              display: "inline-flex", alignItems: "center", gap: 8,
            }}>
              {secondary.label}
            </a>
            <span style={{
              fontFamily: "var(--font-mono)", fontSize: 13,
              color: "rgba(250,248,244,0.55)", marginLeft: 6,
            }}>
              30-min intro · no slide deck required
            </span>
          </div>
        </div>
      </div>
    </section>
  );
};
window.CTA = CTA;