function Innovation() {
  const { RiskLoop, Badge } = window.SahelSentinelDesignSystem_ecf0ad;
  const { SectionEyebrow } = window;
  const [active, setActive] = React.useState("alert");
  const stepDetails = {
    observe: "Collecte continue des données environnementales, agricoles et des signalements communautaires.",
    analyse: "Croisement des signaux pour détecter une convergence de risque.",
    verify: "Vérification humaine des signaux ambigus par les agents terrain.",
    alert: "Diffusion d'une alerte locale, contextualisée et explicable.",
    act: "Recommandations d'action adaptées au territoire et à la période.",
    learn: "Retour d'expérience terrain qui affine le modèle de vigilance.",
  };
  const order = ["observe", "analyse", "verify", "alert", "act", "learn"];
  const stepLabels = { observe: "Observer", analyse: "Analyser", verify: "Vérifier", alert: "Alerter", act: "Agir", learn: "Apprendre" };

  React.useEffect(() => {
    const id = setInterval(() => {
      setActive((cur) => order[(order.indexOf(cur) + 1) % order.length]);
    }, 2600);
    return () => clearInterval(id);
  }, []);

  return (
    <section id="innovation" data-screen-label="Innovation" style={{ padding: "var(--section-padding-y) var(--section-padding-x)", background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--content-max-width)", margin: "0 auto", display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 56, alignItems: "center" }}>
        <div style={{ display: "flex", justifyContent: "center" }}>
          <RiskLoop size={440} activeStep={active} />
        </div>
        <div>
          <SectionEyebrow>L'innovation</SectionEyebrow>
          <h2 style={{ fontSize: "var(--text-display-2)", marginBottom: 16 }}>
            Le Community Risk Loop
          </h2>
          <p style={{ fontSize: "var(--text-body-lg)", color: "var(--text-secondary)", marginBottom: 28, maxWidth: 520 }}>
            Un cycle continu qui relie la donnée, le terrain et la décision — jamais une alerte
            isolée, toujours une boucle d'apprentissage.
          </p>
          <div style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", padding: 20, boxShadow: "var(--shadow-sm)" }}>
            <Badge vigilance={active === "alert" ? "alerte" : active === "learn" ? "normal" : undefined} tone="brand">
              {stepLabels[active]}
            </Badge>
            <p style={{ fontSize: 14, color: "var(--text-secondary)", marginTop: 10, lineHeight: 1.55 }}>{stepDetails[active]}</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Innovation = Innovation;