function Impact() {
  const { StatCard, Badge } = window.SahelSentinelDesignSystem_ecf0ad;
  const { SectionEyebrow, MapGrid } = window;
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, []);

  const badges = [
    { icon: "sprout", label: "Sécurité alimentaire" },
    { icon: "shield-check", label: "Résilience communautaire" },
    { icon: "users", label: "Participation des jeunes" },
    { icon: "venus", label: "Inclusion des femmes" },
    { icon: "landmark", label: "Décision locale renforcée" },
  ];

  return (
    <section id="impact" data-screen-label="Impact" style={{ position: "relative", overflow: "hidden", padding: "var(--section-padding-y) var(--section-padding-x)", background: "var(--indigo-900)", color: "white" }}>
      <MapGrid opacity={0.05} />
      <div style={{ position: "relative", maxWidth: "var(--content-max-width)", margin: "0 auto" }}>
        <SectionEyebrow dark>Impact visé</SectionEyebrow>
        <h2 style={{ fontSize: "var(--text-display-2)", color: "white", maxWidth: 720, marginBottom: 40 }}>
          Un impact mesuré dès le pilote, pensé pour l'échelle régionale.
        </h2>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, marginBottom: 40 }}>
          <div style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: "22px 24px" }}>
            <div style={{ fontFamily: "var(--font-data)", fontWeight: 600, fontSize: 34, color: "var(--teal-300)" }}>40</div>
            <div style={{ fontSize: 13.5, color: "var(--indigo-200)", marginTop: 8 }}>villages — objectif pilote 2027</div>
          </div>
          <div style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: "22px 24px" }}>
            <div style={{ fontFamily: "var(--font-data)", fontWeight: 600, fontSize: 34, color: "var(--teal-300)" }}>2</div>
            <div style={{ fontSize: 13.5, color: "var(--indigo-200)", marginTop: 8 }}>communes — phase de démarrage</div>
          </div>
          <div style={{ background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: "var(--radius-lg)", padding: "22px 24px" }}>
            <div style={{ fontFamily: "var(--font-data)", fontWeight: 600, fontSize: 34, color: "var(--teal-300)" }}>6</div>
            <div style={{ fontSize: 13.5, color: "var(--indigo-200)", marginTop: 8 }}>pays sahéliens — ambition régionale</div>
          </div>
        </div>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
          {badges.map((b) => (
            <div key={b.label} style={{ display: "flex", alignItems: "center", gap: 8, background: "rgba(255,255,255,0.07)", borderRadius: "var(--radius-pill)", padding: "8px 16px", fontSize: 13 }}>
              <i data-lucide={b.icon} style={{ width: 15, height: 15, color: "var(--teal-300)" }}></i>
              {b.label}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Impact = Impact;