function Footer() {
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); }, []);
  const cols = [
    { title: "Produit", links: ["Solution", "Innovation", "Modules", "Pilote"] },
    { title: "Projet", links: ["Impact", "Équipe", "Partenaires"] },
    { title: "Ressources", links: ["Présentation (PDF)", "Contact"] },
  ];
  return (
    <footer style={{ background: "var(--indigo-900)", color: "var(--indigo-200)", padding: "64px var(--section-padding-x) 32px" }}>
      <div style={{ maxWidth: "var(--content-max-width)", margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(3, 1fr)", gap: 40, paddingBottom: 40, borderBottom: "1px solid rgba(255,255,255,0.1)" }}>
          <div>
            <img src="../../assets/logo/mark-mono-light.svg" style={{ width: 34, height: 34, marginBottom: 14 }} />
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 17, color: "white" }}>Sahel Sentinel</div>
            <div style={{ fontSize: 13, marginTop: 6, maxWidth: 260, lineHeight: 1.5 }}>Anticiper plus tôt. Comprendre localement. Agir avant la crise.</div>
            <div style={{ display: "flex", gap: 10, marginTop: 18 }}>
              {["linkedin", "twitter", "mail"].map((ic) => (
                <div key={ic} style={{ width: 34, height: 34, borderRadius: "50%", background: "rgba(255,255,255,0.07)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <i data-lucide={ic} style={{ width: 15, height: 15, color: "var(--indigo-200)" }}></i>
                </div>
              ))}
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.08em", color: "white", marginBottom: 14 }}>{c.title.toUpperCase()}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {c.links.map((l) => (
                  <a key={l} href="#" style={{ fontSize: 13.5, color: "var(--indigo-200)", textDecoration: "none" }}>{l}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", paddingTop: 24, fontSize: 12, color: "var(--indigo-300)", flexWrap: "wrap", gap: 8 }}>
          <span>© 2026 Sahel Sentinel. Tous droits réservés.</span>
          <span>contact@sahelsentinel.org</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;