function CTAFinal({ onPrimaryCTA }) {
  return (
    <section style={{
      background: PALETTE.navy, color: PALETTE.paper,
      borderTop: `1px solid ${PALETTE.ruleInverse}`,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0, opacity: 0.4,
        background: "url(assets/pattern-trade-flow.svg) center/cover no-repeat",
      }}/>
      <div style={{
        position: "relative", maxWidth: 1200, margin: "0 auto",
        padding: "96px 32px",
      }} className="vst-section">
        <div style={{
          display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center",
        }} className="vst-grid-2">
          <div>
            <Eyebrow style={{ marginBottom: 18, color: PALETTE.amber500 }}>
              Get started · No commitment
            </Eyebrow>
            <h2 style={{
              fontFamily: "'Source Serif 4', serif", fontSize: 50, fontWeight: 600,
              lineHeight: 1.06, letterSpacing: "-.022em", color: PALETTE.paper,
              margin: 0, textWrap: "balance",
            }} className="vst-h2">
              Ready to access named-entity Mexican trade intelligence?
            </h2>
            <p style={{
              fontFamily: "Inter, sans-serif", fontSize: 18, lineHeight: 1.6,
              color: "rgba(250,249,245,.74)", marginTop: 22, marginBottom: 32, maxWidth: 620,
            }}>
              Start with our free LM3 Public Snapshot. ≈ 25 pages, anonymized Top 100, full methodology.
              Read it, decide whether the rigor matches what you'd ask of a paid research desk.
            </p>

            <div style={{ display: "flex", gap: 18, alignItems: "center", flexWrap: "wrap" }}>
              <PrimaryButton onClick={onPrimaryCTA} style={{ padding: "14px 26px", fontSize: 16 }}>
                Read LM3 free <span className="vst-link-arrow">→</span>
              </PrimaryButton>
              <a href="mailto:hello@vstrade.co" style={{
                fontFamily: "JetBrains Mono, monospace", fontSize: 14, fontWeight: 500,
                color: PALETTE.paper, textDecoration: "none",
                borderBottom: `1px solid rgba(250,249,245,.3)`, paddingBottom: 2,
              }}>hello@vstrade.co</a>
            </div>

            <div style={{
              marginTop: 36, paddingTop: 24,
              borderTop: `1px solid ${PALETTE.ruleInverse}`,
              display: "flex", gap: 32, flexWrap: "wrap",
              fontFamily: "Inter, sans-serif", fontSize: 12, color: "rgba(250,249,245,.58)",
            }}>
              <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={{ color: PALETTE.green }}><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                LFPDPPP 2025 compliant
              </span>
              <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={{ color: PALETTE.green }}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                IMMEX verified · Mar 2026
              </span>
              <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" style={{ color: PALETTE.green }}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                Replies within 1 business day
              </span>
            </div>
          </div>

          {/* visual block */}
          <div style={{
            background: PALETTE.navy800, border: `1px solid ${PALETTE.ruleInverse}`,
            borderTop: `2px solid ${PALETTE.amber}`,
            padding: 28, position: "relative",
          }} className="vst-hide-mobile">
            <div style={{
              fontFamily: "JetBrains Mono, monospace", fontSize: 10,
              color: PALETTE.amber500, letterSpacing: ".14em", fontWeight: 600,
              marginBottom: 18,
            }}>LM3 · MX-AI-2026-Q1 · ≈ 25 PAGES</div>
            <div style={{
              fontFamily: "'Source Serif 4', serif", fontSize: 24, fontWeight: 600,
              color: PALETTE.paper, lineHeight: 1.2, letterSpacing: "-.012em",
            }}>Mexican AI Server Imports — Industry Brief</div>

            <div style={{ marginTop: 22, display: "grid", gap: 12 }}>
              {[
                ["Aggregate", "USD 329.56B"],
                ["YoY 2025", "+64.9%"],
                ["Named importers", "100"],
                ["Coverage", "92%"],
                ["Revision policy", "Quarterly"],
              ].map(([k, v]) => (
                <div key={k} style={{
                  display: "flex", justifyContent: "space-between",
                  paddingBottom: 9, borderBottom: `1px solid ${PALETTE.ruleInverse}`,
                  fontFamily: "Inter, sans-serif", fontSize: 13,
                }}>
                  <span style={{ color: "rgba(250,249,245,.65)" }}>{k}</span>
                  <span style={{ color: PALETTE.paper, fontWeight: 600, fontFamily: k.includes("policy") ? "Inter, sans-serif" : "JetBrains Mono, monospace", fontVariantNumeric: "tabular-nums" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CTAFinal = CTAFinal;