function Features() {
  const { Card } = window.SahelSentinelDesignSystem_ecf0ad;
  const { SectionEyebrow } = window;
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, []);

  const modules = [
    { icon: "layout-dashboard", name: "Tableau de bord", desc: "Vue d'ensemble du niveau de vigilance par territoire, en un coup d'œil." },
    { icon: "map", name: "Carte des risques", desc: "Cartographie dynamique des zones de vigilance et de leur évolution." },
    { icon: "smartphone", name: "Signalements terrain", desc: "Remontée d'observations communautaires depuis le mobile, hors-ligne compris." },
    { icon: "git-branch", name: "Moteur de risque explicable", desc: "Chaque niveau de vigilance est justifié par les signaux qui le composent." },
    { icon: "bell-ring", name: "Centre d'alertes", desc: "Diffusion locale multicanal — SMS, radio communautaire, application." },
    { icon: "clipboard-list", name: "Recommandations adaptées", desc: "Actions préventives contextualisées au territoire et à la saison." },
  ];

  return (
    <section id="modules" data-screen-label="Fonctionnalités" style={{ padding: "var(--section-padding-y) var(--section-padding-x)", background: "var(--surface-card-sunken)" }}>
      <div style={{ maxWidth: "var(--content-max-width)", margin: "0 auto" }}>
        <SectionEyebrow>Modules</SectionEyebrow>
        <h2 style={{ fontSize: "var(--text-display-2)", maxWidth: 700, marginBottom: 56 }}>
          Une plateforme, six briques essentielles.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {modules.map((m) => (
            <Card key={m.name} hoverable>
              <div style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--surface-accent-soft)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <i data-lucide={m.icon} style={{ width: 21, height: 21, color: "var(--teal-700)" }}></i>
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16.5, marginBottom: 8 }}>{m.name}</div>
              <div style={{ fontSize: 13.5, color: "var(--text-secondary)", lineHeight: 1.55 }}>{m.desc}</div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Features = Features;