function Problem() {
  const { SectionEyebrow } = window;
  const steps = [
    { icon: "database", label: "Données dispersées", desc: "Météo, marchés, terrain — jamais croisés à temps." },
    { icon: "eye-off", label: "Signaux faibles ignorés", desc: "Chaque signe pris isolément semble mineur." },
    { icon: "clock", label: "Retard de réaction", desc: "L'alerte arrive quand la crise est déjà là." },
    { icon: "map-pin-off", label: "Action non locale", desc: "Les réponses nationales manquent le contexte du terrain." },
  ];

  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, []);

  return (
    <section data-screen-label="Problème" style={{ padding: "var(--section-padding-y) var(--section-padding-x)", background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--content-max-width)", margin: "0 auto" }}>
        <SectionEyebrow>Le problème</SectionEyebrow>
        <h2 style={{ fontSize: "var(--text-display-2)", maxWidth: 760, marginBottom: 16 }}>
          Les signaux existent. Ils arrivent trop tard, et jamais au bon niveau.
        </h2>
        <p style={{ fontSize: "var(--text-body-lg)", color: "var(--text-secondary)", maxWidth: 680, marginBottom: 56 }}>
          Les données environnementales, agricoles et économiques existent déjà — mais restent
          dispersées, tardives, et déconnectées des observations du terrain.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 4, position: "relative" }}>
          <div style={{ position: "absolute", top: 27, left: "12.5%", right: "12.5%", height: 2, background: "var(--border-default)", zIndex: 0 }} />
          {steps.map((s, i) => (
            <div key={s.label} style={{ position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "0 12px" }}>
              <div style={{
                width: 56, height: 56, borderRadius: "50%", background: "var(--surface-card)",
                border: "2px solid var(--ochre-400)", display: "flex", alignItems: "center", justifyContent: "center",
                marginBottom: 18, boxShadow: "var(--shadow-sm)",
              }}>
                <i data-lucide={s.icon} style={{ width: 22, height: 22, color: "var(--ochre-600)" }}></i>
              </div>
              <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 6 }}>{s.label}</div>
              <div style={{ fontSize: 13, color: "var(--text-secondary)", lineHeight: 1.5 }}>{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Problem = Problem;