function CTAFinal() {
  const { Button, Input } = window.SahelSentinelDesignSystem_ecf0ad;
  const { HorizonArcs } = window;

  return (
    <section data-screen-label="CTA final" style={{
      position: "relative", overflow: "hidden",
      background: "linear-gradient(135deg, var(--teal-700) 0%, var(--indigo-800) 100%)",
      padding: "96px var(--section-padding-x)", color: "white", textAlign: "center",
    }}>
      <div style={{ position: "absolute", top: -40, left: "50%", transform: "translateX(-50%) rotate(180deg)", opacity: 0.5 }}>
        <HorizonArcs width={700} color="rgba(255,255,255,0.12)" />
      </div>
      <div style={{ position: "relative", maxWidth: 640, margin: "0 auto" }}>
        <h2 style={{ fontSize: "var(--text-display-3)", color: "white", marginBottom: 16 }}>
          Construisons ensemble la vigilance de demain au Sahel.
        </h2>
        <p style={{ fontSize: 15.5, color: "rgba(255,255,255,0.85)", marginBottom: 32 }}>
          Découvrez le projet, soutenez le pilote, ou devenez partenaire de Sahel Sentinel.
        </p>
        <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap", marginBottom: 28 }}>
          <Button variant="primary" size="lg" style={{ background: "white", color: "var(--teal-700)" }}>Découvrir le projet</Button>
          <Button variant="outline" size="lg" style={{ color: "white", borderColor: "rgba(255,255,255,0.4)" }}>Nous contacter</Button>
        </div>
      </div>
    </section>
  );
}
window.CTAFinal = CTAFinal;