function Hero() {
  const { Button, Badge, VigilanceGauge, StatCard } = window.SahelSentinelDesignSystem_ecf0ad;
  const { HorizonArcs, MapGrid, SectionEyebrow } = window;

  return (
    <section data-screen-label="Hero" style={{
      position: "relative", overflow: "hidden",
      background: "linear-gradient(160deg, var(--indigo-900) 0%, var(--indigo-700) 62%, var(--teal-700) 130%)",
      padding: "140px var(--section-padding-x) 100px", color: "var(--text-inverse)",
    }}>
      <MapGrid opacity={0.05} />
      <div style={{ position: "absolute", bottom: -20, left: "50%", transform: "translateX(-50%)", opacity: 0.9 }}>
        <HorizonArcs width={820} />
      </div>
      <div style={{
        position: "relative", maxWidth: "var(--content-max-width)", margin: "0 auto",
        display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 56, alignItems: "center",
      }}>
        <div>
          <SectionEyebrow dark>Plateforme communautaire d'alerte précoce</SectionEyebrow>
          <h1 style={{
            fontSize: "var(--text-display-1)", color: "white", maxWidth: 640,
            marginBottom: 24,
          }}>
            Anticiper plus tôt.<br />Comprendre localement.<br />Agir avant la crise.
          </h1>
          <p style={{ fontSize: "var(--text-body-lg)", color: "var(--indigo-200)", maxWidth: 520, lineHeight: "var(--leading-relaxed)", marginBottom: 36 }}>
            Sahel Sentinel détecte la convergence des signaux climatiques, agricoles et
            communautaires, calcule un niveau de vigilance explicable, et soutient l'action
            préventive dans les territoires ruraux du Sahel.
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg">Découvrir le pilote</Button>
            <Button variant="outline" size="lg" style={{ color: "white", borderColor: "rgba(255,255,255,0.35)" }}>Devenir partenaire</Button>
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 40 }}>
            <Badge tone="accent">Pilote — Niger</Badge>
            <Badge tone="brand" style={{ background: "rgba(255,255,255,0.1)", color: "white" }}>IA responsable</Badge>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <div style={{
            background: "rgba(255,255,255,0.06)", border: "1px solid rgba(255,255,255,0.14)",
            borderRadius: "var(--radius-xl)", padding: 28, backdropFilter: "blur(18px)",
            boxShadow: "var(--shadow-lg)",
          }}>
            <div style={{ fontSize: 12.5, fontWeight: 600, color: "var(--indigo-200)", marginBottom: 18, letterSpacing: "0.04em" }}>
              NIVEAU DE VIGILANCE — COMMUNE DE SAY
            </div>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <VigilanceGauge value={62} size={220} />
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginTop: 20 }}>
              <div style={{ background: "rgba(255,255,255,0.07)", borderRadius: "var(--radius-md)", padding: "12px 14px" }}>
                <div style={{ fontFamily: "var(--font-data)", fontSize: 20, fontWeight: 600, color: "white" }}>-32%</div>
                <div style={{ fontSize: 11.5, color: "var(--indigo-200)" }}>Pluviométrie / moyenne</div>
              </div>
              <div style={{ background: "rgba(255,255,255,0.07)", borderRadius: "var(--radius-md)", padding: "12px 14px" }}>
                <div style={{ fontFamily: "var(--font-data)", fontSize: 20, fontWeight: 600, color: "white" }}>14</div>
                <div style={{ fontSize: 11.5, color: "var(--indigo-200)" }}>Signalements terrain (7j)</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;