/* global React, Icon, Slashes, t */

function Footer({ lang, navigate }) {
  const cols = [
    {
      title: lang === "fr" ? "Organisation" : "Organization",
      items: [
        ["about", lang === "fr" ? "À propos" : "About"],
        ["join",  lang === "fr" ? "Nous rejoindre" : "Join us"],
        ["contact", "Contact"],
      ],
    },
    {
      title: lang === "fr" ? "Programmes" : "Programs",
      items: [
        ["program", lang === "fr" ? "Formations panafricaines" : "Pan-African builder training"],
        ["idia",    "Initiative IDIA"],
        ["program", "Vibe Coding"],
        ["program", "Build Sprints"],
        ["program", lang === "fr" ? "Masterclasses pratiques" : "Practical masterclasses"],
      ],
    },
    {
      title: lang === "fr" ? "Ressources" : "Resources",
      items: [
        ["media", lang === "fr" ? "Médiathèque" : "Media library"],
        ["media", lang === "fr" ? "Publications" : "Publications"],
        ["blog",  "Blog"],
        ["event", lang === "fr" ? "Toutes les réalisations" : "All work"],
        ["community", "Bamako Claude Community"],
        ["vibe", "Vibe Coding · case study"],
        ["event", lang === "fr" ? "Programme DEL" : "DEL Program"],
      ],
    },
  ];

  return (
    <footer style={{
      position: "relative",
      background: "var(--bg-inverted-deep)",
      color: "white",
      overflow: "hidden",
      marginTop: 96,
    }} className="bg-grain">
      {/* Decorative // */}
      <div aria-hidden style={{
        position: "absolute", right: -60, top: -80, zIndex: 0,
      }}>
        <Slashes size={360} color="rgba(167,139,250,0.10)"/>
      </div>
      {/* Halftone */}
      <div aria-hidden className="bg-halftone" style={{
        position: "absolute", inset: 0,
        color: "rgba(255,255,255,0.06)",
        WebkitMaskImage: "radial-gradient(ellipse at 80% 0%, black 0%, transparent 60%)",
        maskImage: "radial-gradient(ellipse at 80% 0%, black 0%, transparent 60%)",
      }}/>

      <div className="container-wide" style={{ position: "relative", padding: "80px 32px 36px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 56 }}
             className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
              <img src="assets/logo-immersia-white.png" alt="ImmersIA"
                   style={{ height: 36, width: "auto" }}/>
            </div>
            <p style={{
              fontFamily: "var(--font-display)", fontWeight: 500,
              fontSize: 22, lineHeight: 1.25, letterSpacing: "-0.01em",
              maxWidth: 360, color: "rgba(255,255,255,0.92)",
              margin: "0 0 24px",
            }}>
              {lang === "fr"
                ? "Former des builders et faire avancer une IA utile, depuis le Mali à travers l'Afrique."
                : "Training builders and advancing useful AI from Mali across Africa."}
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 8,
                         color: "rgba(255,255,255,0.7)", fontSize: 14 }}>
              <span style={{ display: "inline-flex", gap: 8, alignItems: "center" }}>
                <Icon name="map-pin" size={16}/> Sotuba ACI · Bamako, Mali
              </span>
              <a href="https://www.linkedin.com/company/92924284/" target="_blank" rel="noreferrer" style={{ display:"inline-flex",gap:8,alignItems:"center",color:"rgba(255,255,255,.7)",borderBottom:"none" }}><Icon name="external" size={16}/> ImmersIA · LinkedIn</a>
            </div>
          </div>

          {cols.map((c) => (
            <div key={c.title}>
              <div style={{
                fontFamily: "var(--font-display)", fontWeight: 700,
                fontSize: 12, letterSpacing: "0.14em", textTransform: "uppercase",
                color: "rgba(255,255,255,0.55)", marginBottom: 18,
              }}>{c.title}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {c.items.map(([r, label], idx) => (
                  <a key={idx} href={`#${r}`}
                     onClick={(e) => { e.preventDefault(); navigate(r); }}
                     style={{
                       color: "rgba(255,255,255,0.85)",
                       fontFamily: "var(--font-display)", fontSize: 14,
                       borderBottom: "none",
                     }}>{label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        <hr style={{
          margin: "56px 0 24px", border: "none", height: 1,
          background: "rgba(255,255,255,0.14)",
        }}/>

        <div style={{
          display: "flex", justifyContent: "space-between", flexWrap: "wrap",
          gap: 16, color: "rgba(255,255,255,0.55)", fontSize: 13,
          fontFamily: "var(--font-display)",
        }}>
          <span>{t("footer.rights", lang)}</span>
          <span style={{ display: "inline-flex", gap: 18 }}>
            <a href="https://www.linkedin.com/company/92924284/" target="_blank" rel="noreferrer" style={{ color: "rgba(255,255,255,0.7)", borderBottom: "none" }}>LinkedIn ↗</a>
            <a href="#" style={{ color: "rgba(255,255,255,0.7)", borderBottom: "none" }}>
              {lang === "fr" ? "Confidentialité" : "Privacy"}
            </a>
          </span>
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
        }
        @media (max-width: 540px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

Object.assign(window, { Footer });