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

  const inputs = [
    { icon: "cloud-rain", label: "Données environnementales", desc: "Pluviométrie, végétation, températures" },
    { icon: "wheat", label: "Données agricoles & économiques", desc: "Rendements, marchés, prix" },
    { icon: "users", label: "Observations communautaires", desc: "Signalements terrain vérifiés" },
  ];
  const outputs = [
    { icon: "brain-cog", label: "Analyse" },
    { icon: "gauge", label: "Niveau de vigilance" },
    { icon: "megaphone", label: "Alerte locale" },
    { icon: "clipboard-check", label: "Recommandation" },
  ];

  return (
    <section id="solution" data-screen-label="Solution" 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>La solution</SectionEyebrow>
        <h2 style={{ fontSize: "var(--text-display-2)", maxWidth: 760, marginBottom: 16 }}>
          Trois sources de signal. Une lecture claire. Une action à temps.
        </h2>
        <p style={{ fontSize: "var(--text-body-lg)", color: "var(--text-secondary)", maxWidth: 680, marginBottom: 56 }}>
          Sahel Sentinel croise les données et le terrain pour produire un niveau de vigilance
          explicable — jamais une boîte noire.
        </p>

        <div style={{ display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 14, flex: "1 1 280px" }}>
            {inputs.map((s) => (
              <div key={s.label} style={{ display: "flex", gap: 14, alignItems: "flex-start", background: "var(--surface-card)", borderRadius: "var(--radius-lg)", padding: "16px 18px", boxShadow: "var(--shadow-xs)" }}>
                <div style={{ width: 40, height: 40, borderRadius: "var(--radius-md)", background: "var(--surface-brand-soft)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <i data-lucide={s.icon} style={{ width: 19, height: 19, color: "var(--indigo-600)" }}></i>
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14.5 }}>{s.label}</div>
                  <div style={{ fontSize: 12.5, color: "var(--text-secondary)" }}>{s.desc}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{ flex: "0 0 auto", color: "var(--text-tertiary)", fontSize: 26, padding: "0 8px" }}>→</div>

          <div style={{ flex: "1 1 320px", background: "var(--indigo-900)", borderRadius: "var(--radius-xl)", padding: 26 }}>
            <div style={{ fontSize: 11.5, fontWeight: 700, letterSpacing: "0.08em", color: "var(--teal-300)", marginBottom: 16 }}>MOTEUR DE VIGILANCE</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              {outputs.map((o, i) => (
                <div key={o.label} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <div style={{ width: 30, height: 30, borderRadius: "50%", background: "rgba(255,255,255,0.08)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--teal-300)", fontFamily: "var(--font-data)", fontSize: 12, flexShrink: 0 }}>
                    <i data-lucide={o.icon} style={{ width: 15, height: 15 }}></i>
                  </div>
                  <div style={{ color: "white", fontSize: 14, fontWeight: 500 }}>{o.label}</div>
                  {i < outputs.length - 1 && <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.1)" }} />}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Solution = Solution;