// Final CTA — big closer.
function CtaFinal() {
  return (
    <section style={{
      color: "#fff",
      padding: "140px 0",
      position: "relative",
      overflow: "hidden"
    }}>
      {/* Bright gradient streak */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 50% 100%, rgba(42,91,255,.30), transparent 65%)",
        pointerEvents: "none"
      }} />
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0,
        backgroundImage: "linear-gradient(to right, rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.04) 1px, transparent 1px)",
        backgroundSize: "56px 56px",
        maskImage: "radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%)",
        WebkitMaskImage: "radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%)",
        pointerEvents: "none",
        display: "none",
      }} />

      <div className="container relative" style={{ textAlign: "center" }}>
        <div className="t-eyebrow" style={{ color: "rgba(255,255,255,.5)", marginBottom: 20 }}>7 DIAS GRÁTIS

        </div>
        <h2 className="t-display" style={{
          color: "#fff", margin: 0, marginBottom: 26,
          fontSize: "clamp(44px, 6.5vw, 96px)"
        }}>
          Sua próxima obra<br />
          merece <span style={{ color: "#7DA7FF" }}>controle real.</span>
        </h2>
        <p className="t-lead" style={{
          color: "rgba(255,255,255,.7)",
          maxWidth: 620, margin: "0 auto 36px"
        }}>
          Você pode continuar perdendo dinheiro em planilha — ou levar
          7 dias pra descobrir o controle que sua empresa precisa.
        </p>

        <div style={{
          display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap",
          alignItems: "center"
        }}>
          <a href="#precos" className="btn btn-blue" style={{ height: 60, padding: "0 30px", fontSize: 16 }}>
            <IconPlay size={14} /> Começar agora
          </a>
          <a href="#demo" className="btn btn-ghost-light" style={{ height: 60, padding: "0 26px", fontSize: 16 }}>
            Ver demo ao vivo <IconArrow size={16} />
          </a>
        </div>

        {/* Quick trust strip */}
        <div style={{
          marginTop: 56,
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 18,
          maxWidth: 880, margin: "56px auto 0"
        }} className="trust-grid">
          {[
          { k: "320+", v: "obras gerenciadas" },
          { k: "R$ 12M", v: "em DRE processado" },
          { k: "98%", v: "renovam o plano" },
          { k: "<1h", v: "tempo médio de suporte" }].
          map((t, i) =>
          <div key={i} style={{
            padding: 18,
            borderRadius: 14,
            background: "rgba(255,255,255,.04)",
            border: "1px solid rgba(255,255,255,.08)",
            textAlign: "left"
          }}>
              <div className="mono tabular" style={{
              fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em",
              color: "#fff"
            }}>{t.k}</div>
              <div style={{ fontSize: 12.5, color: "rgba(255,255,255,.6)", marginTop: 4 }}>{t.v}</div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>);

}

window.CtaFinal = CtaFinal;