/* global React, Icon, Slashes, useReveal, CountUp, t, PhotoPH */

function IDIAPage({ lang, navigate }) {
  const ref = useReveal();
  const [vizMode, setVizMode] = React.useState("timeline"); // "timeline" | "radial"
  const [activeAxis, setActiveAxis] = React.useState(0);

  const axes = lang === "fr" ? [
    { id:"skills", label:"Compétences", short:"Former pour des usages concrets.", desc:"Les consultations ont fait ressortir le besoin de compétences accessibles, reliées aux réalités professionnelles et aux services publics.", metrics:["Formation pratique", "Capacités institutionnelles", "Apprentissage continu"] },
    { id:"data", label:"Données & infrastructures", short:"Créer les conditions d'une IA locale.", desc:"L'accès aux données, aux infrastructures et à une connectivité fiable fait partie des priorités publiées après la consultation nationale.", metrics:["Données adaptées au contexte", "Infrastructures disponibles", "Accès soutenable"] },
    { id:"innovation", label:"Innovation", short:"Financer ce qui se construit localement.", desc:"Les échanges ont souligné l'importance de soutenir les solutions et entrepreneurs locaux plutôt que de dépendre uniquement de technologies importées.", metrics:["Financement local", "Projets utiles", "Réseau de builders"] },
    { id:"inclusion", label:"Inclusion", short:"Ne laisser aucun secteur ni public de côté.", desc:"L'inclusion doit traverser la formation, l'accès aux outils et la conception des politiques publiques.", metrics:["Jeunesse et femmes", "Territoires et secteurs", "Accès équitable"] },
    { id:"ethics", label:"Éthique & régulation", short:"Protéger tout en permettant d'innover.", desc:"La consultation nationale a retenu la nécessité d'un cadre éthique et réglementaire adapté au contexte malien.", metrics:["Protection des personnes", "Responsabilités claires", "Gouvernance contextualisée"] },
  ] : [
    { id:"skills", label:"Skills", short:"Train for practical use.", desc:"Consultations highlighted the need for accessible skills connected to real work and public services.", metrics:["Hands-on training", "Institutional capacity", "Continuous learning"] },
    { id:"data", label:"Data & infrastructure", short:"Create the conditions for local AI.", desc:"Access to data, infrastructure, and reliable connectivity is among the priorities published after the national consultation.", metrics:["Context-relevant data", "Available infrastructure", "Sustainable access"] },
    { id:"innovation", label:"Innovation", short:"Fund what is built locally.", desc:"Discussions emphasized supporting local solutions and entrepreneurs rather than relying only on imported technologies.", metrics:["Local financing", "Useful projects", "Builder network"] },
    { id:"inclusion", label:"Inclusion", short:"Leave no sector or community behind.", desc:"Inclusion needs to run through training, access to tools, and public policy design.", metrics:["Youth and women", "Regions and sectors", "Equitable access"] },
    { id:"ethics", label:"Ethics & regulation", short:"Protect people while enabling innovation.", desc:"The national consultation identified the need for an ethical and regulatory framework adapted to Mali's context.", metrics:["People protection", "Clear responsibilities", "Contextual governance"] },
  ];

  return (
    <main ref={ref} data-screen-label="IDIA">
      <IDIAHero lang={lang}/>
      <IDIAStats lang={lang}/>
      <section style={{ padding:"80px 0",background:"var(--bg-canvas)" }}><div className="container-wide idia-photo-grid" style={{display:"grid",gridTemplateColumns:"2fr 1fr",gap:16}}><div className="reveal"><PhotoPH src="assets/photos/idia-consultation-room.jpg" alt={lang === "fr" ? "Participants à la consultation nationale sur l'IA" : "Participants in the national AI consultation"} ratio="16/9" caption={lang === "fr" ? "Consultation nationale · APDP · février 2026" : "National consultation · APDP · February 2026"}/></div><div className="reveal"><PhotoPH src="assets/photos/idia-sector-voice.jpg" alt={lang === "fr" ? "Intervenante lors d'une consultation sectorielle IDIA" : "Speaker during an IDIA industry consultation"} ratio="4/3" caption={lang === "fr" ? "Une contribution sectorielle au processus IDIA" : "An industry contribution to the IDIA process"}/></div></div><style>{`@media(max-width:880px){.idia-photo-grid{grid-template-columns:1fr!important}}`}</style></section>

      {/* Roadmap viz with toggle */}
      <section style={{ padding: "120px 0", background: "white" }}>
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end",
                        marginBottom: 48, gap: 32, flexWrap: "wrap" }}>
            <div style={{ maxWidth: 720 }}>
              <span className="eyebrow-mark reveal">{lang === "fr" ? "Priorités des consultations" : "Consultation priorities"}</span>
              <h2 className="reveal" style={{ marginTop: 14 }}>
                {lang === "fr"
                  ? "Des consultations sectorielles à la consultation nationale."
                  : "From industry consultations to the national consultation."}
              </h2>
            </div>
            <div className="reveal" role="group" style={{
              display: "inline-flex", padding: 4, gap: 4,
              border: "1px solid var(--line-1)", borderRadius: 999, background: "var(--bg-subtle)",
            }}>
              {["timeline", "radial"].map((m) => (
                <button key={m} onClick={() => setVizMode(m)}
                        style={{
                          border: "none", padding: "8px 18px", borderRadius: 999,
                          fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 13,
                          background: vizMode === m ? "white" : "transparent",
                          color: vizMode === m ? "var(--brand)" : "var(--fg-3)",
                          boxShadow: vizMode === m ? "var(--shadow-sm)" : "none",
                          transition: "all 220ms var(--ease-out)",
                          letterSpacing: "0.02em",
                        }}>
                  {m === "timeline"
                    ? (lang === "fr" ? "Chronologie" : "Timeline")
                    : (lang === "fr" ? "Axes" : "Axes")}
                </button>
              ))}
            </div>
          </div>

          <div className="reveal">
            {vizMode === "timeline"
              ? <Timeline lang={lang}/>
              : <Radial axes={axes} activeAxis={activeAxis} setActiveAxis={setActiveAxis}/>}
          </div>
        </div>
      </section>

      {/* Axis cards */}
      <section style={{ padding: "0 0 120px", background: "white" }}>
        <div className="container-wide">
          <div style={{
            display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20,
          }} className="axes-grid">
            {axes.map((a, i) => (
              <AxisCard key={a.id} axis={a} idx={i} delay={i * 70} accent={i % 3}/>
            ))}
          </div>
          <style>{`
            @media (max-width: 880px) { .axes-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      <IDIAConsultation lang={lang}/>
      <IDIAContribute lang={lang} navigate={navigate}/>
    </main>
  );
}

// ---- Hero ------------------------------------------------------
function IDIAHero({ lang }) {
  return (
    <section style={{
      position: "relative", overflow: "hidden", color: "white",
      background: "linear-gradient(180deg, #1E1B4B 0%, #2E1065 40%, #4C1D95 100%)",
      paddingTop: 100, paddingBottom: 80,
    }} className="bg-grain">
      {/* halftone */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle, rgba(196,181,253,0.4) 1.2px, transparent 1.6px)",
        backgroundSize: "13px 13px",
        WebkitMaskImage: "radial-gradient(ellipse at 90% 30%, black 0%, transparent 55%)",
        maskImage: "radial-gradient(ellipse at 90% 30%, black 0%, transparent 55%)",
        opacity: 0.45,
      }}/>
      <div aria-hidden style={{ position: "absolute", right: -60, top: 40 }}>
        <Slashes size="min(38vw, 460px)" color="rgba(167,139,250,0.16)"/>
      </div>

      <div className="container-wide" style={{ position: "relative", zIndex: 2 }}>
        <div className="eyebrow-mark on-purple reveal" style={{
          color: "rgba(255,255,255,0.9)", marginBottom: 28,
        }}>
          {lang === "fr" ? "Consultation nationale sur l'IA" : "National AI consultation"}
        </div>
        <h1 className="reveal" style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: "clamp(56px, 9vw, 140px)", lineHeight: 0.94,
          letterSpacing: "-0.04em", color: "white",
          margin: "0 0 28px", textWrap: "balance", maxWidth: 1100,
        }}>
          IDIA <span style={{ color: "#A78BFA", fontStyle: "italic", fontWeight: 500 }}>Mali</span>.
          <br/>{lang === "fr" ? "Faire entendre le terrain." : "Bringing field voices forward."}
        </h1>
        <p className="reveal" style={{
          fontFamily: "var(--font-display)", fontSize: "clamp(18px, 1.4vw, 22px)",
          lineHeight: 1.45, maxWidth: 720,
          color: "rgba(255,255,255,0.82)", margin: "0 0 36px",
        }}>
          {lang === "fr"
            ? "Après quatre consultations sectorielles menées avec des organisations partenaires, ImmersIA a contribué à une consultation nationale en février 2026 pour faire remonter les besoins du Mali en matière d'intelligence artificielle."
            : "After four industry consultations conducted with partner organizations, ImmersIA contributed to a national consultation in February 2026 to bring forward Mali's priorities for artificial intelligence."}
        </p>
        <div className="reveal" style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
          <a href="#contribute" className="btn btn-light" onClick={(e) => {
            e.preventDefault();
            document.querySelector("[data-section='contribute']")?.scrollIntoView({ behavior: "smooth", block: "start" });
          }}>
            {lang === "fr" ? "Voir le parcours" : "See the process"}
            <Icon name="arrow-right" size={16} className="arrow"/>
          </a>
        </div>
      </div>
    </section>
  );
}

// ---- Live consultation stats (band) ---------------------------
function IDIAStats({ lang }) {
  return (
    <section style={{
      background: "var(--bg-inverted-deep)", padding: "48px 0",
      borderTop: "1px solid rgba(255,255,255,0.10)",
    }}>
      <div className="container-wide" style={{
        display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, color: "white",
      }} className="idia-stats-grid">
        {[
          ["4", lang === "fr" ? "Consultations sectorielles au Mali" : "Industry consultations in Mali"],
          ["4", lang === "fr" ? "Secteurs : santé, agriculture, économie, éducation" : "Sectors: health, agriculture, economy, education"],
          ["1", lang === "fr" ? "Consultation nationale en février 2026" : "National consultation in February 2026"],
          ["5", lang === "fr" ? "Familles de priorités publiées" : "Published priority areas"],
        ].map(([n, l], i) => (
          <div key={i} style={{ borderLeft: i > 0 ? "1px solid rgba(255,255,255,0.18)" : "none", paddingLeft: i > 0 ? 24 : 0 }}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 800,
                          fontSize: "clamp(32px, 3vw, 44px)", letterSpacing: "-0.02em" }}>{n}</div>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 13,
                          color: "rgba(255,255,255,0.65)", marginTop: 6 }}>{l}</div>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 760px) {
          .idia-stats-grid { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </section>
  );
}

// ---- Timeline view --------------------------------------------
function Timeline({ lang }) {
  const milestones = lang === "fr" ? [
    { year:"09/25", title:"Mission IDIA", body:"Lancement de la démarche multi-pays portée avec NIYEL.", phase:"Cadrer" },
    { year:"10/25", title:"Santé", body:"Consultation sectorielle avec CILAPPS et NIYEL.", phase:"Écouter" },
    { year:"11/25", title:"Agriculture", body:"Consultation avec Réseau Agrivision Sahel.", phase:"Écouter" },
    { year:"12/25", title:"Économie & éducation", body:"Consultations avec Folo Digital Consulting et OPEN Mali.", phase:"Écouter" },
    { year:"02/26", title:"Consultation nationale", body:"Mise en commun des priorités à l'APDP; constitution annoncée d'un groupe de travail restreint.", phase:"Consolider" },
  ] : [
    { year:"09/25", title:"IDIA mission", body:"Launch of the multi-country initiative carried with NIYEL.", phase:"Frame" },
    { year:"10/25", title:"Health", body:"Industry consultation with CILAPPS and NIYEL.", phase:"Listen" },
    { year:"11/25", title:"Agriculture", body:"Consultation with Réseau Agrivision Sahel.", phase:"Listen" },
    { year:"12/25", title:"Economy & education", body:"Consultations with Folo Digital Consulting and OPEN Mali.", phase:"Listen" },
    { year:"02/26", title:"National consultation", body:"Priorities consolidated at APDP; a restricted working group was announced as the next step.", phase:"Consolidate" },
  ];

  return (
    <div style={{
      position: "relative",
      background: "var(--bg-subtle)",
      borderRadius: "var(--radius-2xl)",
      padding: "56px 40px 40px",
      overflow: "hidden",
    }}>
      {/* horizontal axis */}
      <div style={{
        position: "absolute", left: 40, right: 40, top: 110, height: 2,
        background: "linear-gradient(90deg, var(--purple-300), var(--purple-800), var(--accent))",
        borderRadius: 2,
      }}/>
      <div style={{
        display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 16,
        position: "relative",
      }} className="timeline-grid">
        {milestones.map((m, i) => (
          <div key={i} style={{ position: "relative" }}>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: 38, letterSpacing: "-0.02em", color: "var(--brand)",
              marginBottom: 22, lineHeight: 1,
            }}>{m.year}</div>
            {/* dot */}
            <div style={{
              width: 16, height: 16, borderRadius: 999,
              background: "white", border: "3px solid var(--brand)",
              boxShadow: "0 0 0 4px var(--purple-100)",
              marginBottom: 18,
            }}/>
            <div style={{
              fontFamily: "var(--font-display)", fontSize: 10,
              fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--tagline)", marginBottom: 8,
            }}>{m.phase}</div>
            <div style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: 17, lineHeight: 1.3, color: "var(--fg-1)",
              margin: "0 0 8px",
            }}>{m.title}</div>
            <p style={{
              fontFamily: "var(--font-display)", fontSize: 13, lineHeight: 1.45,
              color: "var(--fg-2)", margin: 0,
            }}>{m.body}</p>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 980px) {
          .timeline-grid { grid-template-columns: 1fr 1fr !important; }
        }
        @media (max-width: 540px) {
          .timeline-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
}

// ---- Radial view ----------------------------------------------
function Radial({ axes, activeAxis, setActiveAxis }) {
  const size = 560;
  const cx = size / 2, cy = size / 2;
  const rOuter = 230, rInner = 80;
  const n = axes.length;
  const angleFor = (i) => (-90 + (360 / n) * i) * (Math.PI / 180);
  const points = axes.map((_, i) => {
    const a = angleFor(i);
    return [cx + rOuter * Math.cos(a), cy + rOuter * Math.sin(a)];
  });

  return (
    <div style={{
      background: "var(--bg-subtle)",
      borderRadius: "var(--radius-2xl)",
      padding: 32,
      display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 32, alignItems: "center",
    }} className="radial-wrap">
      <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="auto" style={{ maxWidth: 560 }}>
        {[0.4, 0.6, 0.8, 1].map((r, i) => (
          <circle key={i} cx={cx} cy={cy} r={rOuter * r}
                  fill="none" stroke="var(--line-1)"
                  strokeDasharray={i === 3 ? "" : "2 6"}/>
        ))}
        <polygon points={points.map(p => p.join(",")).join(" ")}
                 fill="rgba(124,58,237,0.10)" stroke="var(--purple-400)" strokeWidth="1.5"/>
        {points.map(([x, y], i) => (
          <line key={i} x1={cx} y1={cy} x2={x} y2={y}
                stroke="var(--line-1)" strokeWidth="1"/>
        ))}
        {points.map(([x, y], i) => (
          <g key={i} onClick={() => setActiveAxis(i)} style={{ cursor: "pointer" }}>
            <circle cx={x} cy={y} r={activeAxis === i ? 42 : 36}
                    fill={activeAxis === i ? "var(--brand)" : "white"}
                    stroke={activeAxis === i ? "var(--brand)" : "var(--purple-300)"}
                    strokeWidth="2"
                    style={{ transition: "all 220ms var(--ease-out)" }}/>
            <text x={x} y={y - 2} textAnchor="middle" dominantBaseline="middle"
                  style={{ fontFamily: "var(--font-display)", fontWeight: 800,
                           fontSize: 20, fill: activeAxis === i ? "white" : "var(--brand)",
                           pointerEvents: "none" }}>0{i + 1}</text>
            <text x={x} y={y + 14} textAnchor="middle" dominantBaseline="middle"
                  style={{ fontFamily: "var(--font-display)", fontWeight: 700,
                           fontSize: 9, letterSpacing: "0.06em",
                           fill: activeAxis === i ? "rgba(255,255,255,0.85)" : "var(--fg-3)",
                           textTransform: "uppercase",
                           pointerEvents: "none" }}>{axes[i].label.slice(0, 10)}</text>
          </g>
        ))}
        <circle cx={cx} cy={cy} r={rInner} fill="var(--brand)"/>
        <text x={cx} y={cy - 6} textAnchor="middle" dominantBaseline="middle"
              style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 26,
                       fill: "white", letterSpacing: "-0.02em" }}>IDIA</text>
        <text x={cx} y={cy + 18} textAnchor="middle" dominantBaseline="middle"
              style={{ fontFamily: "var(--font-display)", fontSize: 10,
                       fill: "rgba(255,255,255,0.78)", letterSpacing: "0.14em" }}>MALI</text>
      </svg>

      <div>
        <div style={{
          fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 700,
          letterSpacing: "0.14em", color: "var(--tagline)", textTransform: "uppercase",
          marginBottom: 12,
        }}>{`Axe 0${activeAxis + 1}`}</div>
        <h3 style={{
          fontFamily: "var(--font-display)", fontWeight: 800,
          fontSize: 36, letterSpacing: "-0.02em", margin: "0 0 14px",
          color: "var(--fg-1)",
        }}>{axes[activeAxis].label}.</h3>
        <p style={{
          fontFamily: "var(--font-display)", fontSize: 17, lineHeight: 1.5,
          color: "var(--fg-2)", margin: "0 0 24px",
        }}>{axes[activeAxis].desc}</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
          {axes[activeAxis].metrics.map((m, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 12,
              padding: "12px 16px", background: "white",
              border: "1px solid var(--line-1)", borderRadius: "var(--radius-md)",
              fontFamily: "var(--font-display)", fontSize: 14, color: "var(--fg-1)",
              fontWeight: 500,
            }}>
              <Icon name="check" size={16} style={{ color: "var(--brand)" }}/>
              {m}
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .radial-wrap { grid-template-columns: 1fr !important; } }
      `}</style>
    </div>
  );
}

// ---- Axis cards (full grid below viz) -------------------------
function AxisCard({ axis, idx, delay, accent }) {
  const [hover, setHover] = React.useState(false);
  const palettes = [
    { bg: "var(--purple-50)",  border: "var(--purple-200)", accent: "var(--brand)" },
    { bg: "var(--blue-50)",    border: "var(--blue-300)",  accent: "var(--accent)" },
    { bg: "#FBEFE9",           border: "#F2D8C6",          accent: "var(--warm-accent)" },
  ];
  const p = palettes[accent];

  return (
    <article className="reveal"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        "--reveal-delay": `${delay}ms`,
        position: "relative",
        background: hover ? p.bg : "white",
        border: `1px solid ${hover ? p.border : "var(--line-1)"}`,
        borderRadius: "var(--radius-xl)",
        padding: 36,
        transition: "all 280ms var(--ease-out)",
        overflow: "hidden",
      }}>
      <div style={{
        position: "absolute", right: 28, top: 24,
        fontFamily: "var(--font-display)", fontWeight: 900,
        fontSize: 88, color: hover ? p.accent : "var(--ink-200)",
        opacity: hover ? 0.18 : 1,
        letterSpacing: "-0.04em", lineHeight: 1,
        transition: "all 280ms var(--ease-out)",
      }}>0{idx + 1}</div>

      <div style={{
        fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 700,
        letterSpacing: "0.14em", textTransform: "uppercase",
        color: p.accent, marginBottom: 14,
      }}>{`Priorité`}</div>
      <h3 style={{
        fontFamily: "var(--font-display)", fontWeight: 800,
        fontSize: 32, letterSpacing: "-0.02em", lineHeight: 1.1,
        color: "var(--fg-1)", margin: "0 0 10px",
      }}>{axis.label}.</h3>
      <p style={{
        fontFamily: "var(--font-display)", fontSize: 17, fontWeight: 600,
        lineHeight: 1.35, color: p.accent, margin: "0 0 16px",
      }}>{axis.short}</p>
      <p style={{
        fontFamily: "var(--font-display)", fontSize: 15, lineHeight: 1.5,
        color: "var(--fg-2)", margin: "0 0 24px", maxWidth: 480,
      }}>{axis.desc}</p>
      <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        {axis.metrics.map((m, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", gap: 10,
            fontFamily: "var(--font-display)", fontSize: 13, color: "var(--fg-1)",
          }}>
            <span style={{ color: p.accent, fontWeight: 800 }}>//</span>{m}
          </div>
        ))}
      </div>
    </article>
  );
}

// ---- Consultation strip ---------------------------------------
function IDIAConsultation({ lang }) {
  return (
    <section style={{
      background: "var(--bg-subtle)", padding: "100px 0",
      borderTop: "1px solid var(--line-1)", borderBottom: "1px solid var(--line-1)",
    }}>
      <div className="container-wide" style={{
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center",
      }} className="cons-grid">
        <div className="reveal">
          <span className="eyebrow-mark">{lang === "fr" ? "Consultation nationale · février 2026" : "National consultation · February 2026"}</span>
          <h2 style={{ marginTop: 14, marginBottom: 16 }}>
            {lang === "fr"
              ? "Quatre secteurs, puis une mise en commun nationale."
              : "Four sectors, followed by a national synthesis."}
          </h2>
          <p style={{ fontSize: 18, color: "var(--fg-2)", lineHeight: 1.5, margin: 0, maxWidth: 540 }}>
            {lang === "fr"
              ? "Les consultations santé, agriculture, développement économique et éducation ont été consolidées à l'APDP. Les priorités publiées portent sur les compétences, les données et infrastructures, l'innovation, l'inclusion, ainsi que l'éthique et la régulation."
              : "Consultations on health, agriculture, economic development, and education were consolidated at APDP. Published priorities cover skills, data and infrastructure, innovation, inclusion, ethics, and regulation."}
          </p>
        </div>
        <div className="reveal">
          <div style={{
            background: "white", border: "1px solid var(--line-1)",
            borderRadius: "var(--radius-xl)", padding: 32,
          }}>
            <div style={{ fontFamily: "var(--font-display)", fontSize: 12, fontWeight: 700,
                          letterSpacing: "0.14em", textTransform: "uppercase",
                          color: "var(--tagline)", marginBottom: 18 }}>
              {lang === "fr" ? "Parcours au Mali" : "Mali process"}
            </div>
            <ConsultationBars lang={lang}/>
            <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between",
                          alignItems: "center", paddingTop: 20, borderTop: "1px solid var(--line-1)" }}>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 32,
                              letterSpacing: "-0.02em", color: "var(--brand)" }}>
                  <CountUp to={4}/>
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 12, color: "var(--fg-3)", marginTop: 4 }}>
                  {lang === "fr" ? "consultations sectorielles réalisées" : "industry consultations completed"}
                </div>
              </div>
              <a href="#contribute" className="link-arrow"
                 onClick={(e) => {
                   e.preventDefault();
                   document.querySelector("[data-section='contribute']")?.scrollIntoView({ behavior: "smooth" });
                 }}>
                {lang === "fr" ? "Devenir partenaire" : "Become a partner"}
                <Icon name="arrow-right" size={14} className="arrow"/>
              </a>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .cons-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function ConsultationBars({ lang }) {
  const rows = [
    { label: lang === "fr" ? "Santé" : "Health", v: 1 },
    { label: lang === "fr" ? "Agriculture" : "Agriculture", v: 1 },
    { label: lang === "fr" ? "Développement économique" : "Economic development", v: 1 },
    { label: lang === "fr" ? "Éducation" : "Education", v: 1 },
  ];
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
      {rows.map((r) => (
        <div key={r.label}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 6,
                        fontFamily: "var(--font-display)", fontSize: 13 }}>
            <span style={{ color: "var(--fg-1)", fontWeight: 600 }}>{r.label}</span>
            <span style={{ color: "var(--fg-3)" }}>✓</span>
          </div>
          <div style={{ height: 8, background: "var(--bg-muted)", borderRadius: 99, overflow: "hidden" }}>
            <div style={{
              height: "100%",
              width: "100%",
              background: "linear-gradient(90deg, var(--brand), var(--purple-500))",
              borderRadius: 99,
              transition: "width 1.4s cubic-bezier(0.22, 1, 0.36, 1)",
            }}/>
          </div>
        </div>
      ))}
    </div>
  );
}

// ---- Resources ------------------------------------------------
function IDIAResources({ lang }) {
  const items = lang === "fr"
    ? [
        { tag: "Récapitulatif", title: "Consultation nationale sur l'intelligence artificielle", meta: "LinkedIn · février 2026", icon: "external" },
        { tag: "Parcours", title: "Santé, agriculture, économie et éducation", meta: "4 consultations · Mali", icon: "external" },
        { tag: "Bilan de cohorte", title: "Résultats IDIA dans quatre pays", meta: "LinkedIn · juillet 2026", icon: "external" },
        { tag: "Photos", title: "Consultation nationale à l'APDP", meta: "4 photographies documentaires", icon: "external" },
      ]
    : [
        { tag: "Recap", title: "National consultation on artificial intelligence", meta: "LinkedIn · February 2026", icon: "external" },
        { tag: "Process", title: "Health, agriculture, economy, and education", meta: "4 consultations · Mali", icon: "external" },
        { tag: "Cohort report", title: "IDIA results across four countries", meta: "LinkedIn · July 2026", icon: "external" },
        { tag: "Photos", title: "National consultation at APDP", meta: "4 documentary photographs", icon: "external" },
      ];
  return (
    <section style={{ padding: "120px 0", background: "white" }}>
      <div className="container-wide">
        <div style={{ marginBottom: 48, maxWidth: 720 }}>
          <span className="eyebrow-mark reveal">{lang === "fr" ? "Ressources" : "Resources"}</span>
          <h2 className="reveal" style={{ marginTop: 14 }}>
            {lang === "fr" ? "Lire, regarder, partager." : "Read, watch, share."}
          </h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}
             className="res-grid">
          {items.map((it, i) => (
            <a key={i} href="#" onClick={(e) => e.preventDefault()} className="reveal"
               style={{
                 "--reveal-delay": `${i * 60}ms`,
                 display: "flex", alignItems: "center", gap: 20,
                 padding: "24px 28px", background: "white",
                 border: "1px solid var(--line-1)", borderRadius: "var(--radius-xl)",
                 borderBottom: "1px solid var(--line-1)",
                 textDecoration: "none", color: "var(--fg-1)",
                 transition: "all 240ms var(--ease-out)",
               }}
               onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--brand)"; e.currentTarget.style.transform = "translateX(4px)"; }}
               onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line-1)"; e.currentTarget.style.transform = "translateX(0)"; }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12,
                background: "var(--purple-50)", color: "var(--brand)",
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0,
              }}>
                <Icon name={it.icon} size={20}/>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 700,
                              letterSpacing: "0.14em", color: "var(--tagline)",
                              textTransform: "uppercase", marginBottom: 6 }}>{it.tag}</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700,
                              fontSize: 17, color: "var(--fg-1)", lineHeight: 1.3 }}>
                  {it.title}
                </div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 13,
                              color: "var(--fg-3)", marginTop: 4 }}>{it.meta}</div>
              </div>
              <Icon name="arrow-up-right" size={20} style={{ color: "var(--fg-3)" }}/>
            </a>
          ))}
        </div>
        <style>{`
          @media (max-width: 880px) { .res-grid { grid-template-columns: 1fr !important; } }
        `}</style>
      </div>
    </section>
  );
}

// ---- Citizen contribution CTA ---------------------------------
function IDIAContribute({ lang, navigate }) {
  return (
    <section data-section="contribute" style={{
      position: "relative", overflow: "hidden",
      background: "linear-gradient(135deg, #1E40AF 0%, #4C1D95 50%, #2E1065 100%)",
      color: "white", padding: "120px 0",
    }} className="bg-grain">
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1.4px)",
        backgroundSize: "12px 12px",
        WebkitMaskImage: "radial-gradient(ellipse at 0% 50%, black 0%, transparent 60%)",
        maskImage: "radial-gradient(ellipse at 0% 50%, black 0%, transparent 60%)",
        opacity: 0.4,
      }}/>
      <div className="container-wide" style={{ position: "relative", zIndex: 2 }}>
        <div className="reveal" style={{ maxWidth: 820 }}>
          <span className="eyebrow-mark on-purple">{lang === "fr" ? "Travailler ensemble" : "Work together"}</span>
          <h2 style={{
            fontFamily: "var(--font-display)", fontWeight: 800,
            fontSize: "clamp(40px, 5vw, 72px)", lineHeight: 1.02,
            letterSpacing: "-0.03em", color: "white",
            margin: "14px 0 22px", textWrap: "balance",
          }}>
            {lang === "fr"
              ? "Relions expertise de terrain, formation et décision publique."
              : "Connect field expertise, training, and public decision-making."}
          </h2>
          <p style={{
            fontFamily: "var(--font-display)", fontSize: 19, lineHeight: 1.5,
            color: "rgba(255,255,255,0.82)", margin: "0 0 32px", maxWidth: 620,
          }}>
            {lang === "fr"
              ? "ImmersIA collabore avec des organisations sectorielles et institutionnelles pour organiser des consultations utiles et ancrées dans le contexte malien."
              : "ImmersIA works with sector and institutional organizations to run useful consultations grounded in Mali's context."}
          </p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className="btn btn-light">
              {lang === "fr" ? "Parler d'un partenariat" : "Discuss a partnership"}
              <Icon name="arrow-right" size={16} className="arrow"/>
            </a>
            <a href="#join" onClick={(e) => { e.preventDefault(); navigate("join"); }} className="btn btn-ghost-dark">
              {lang === "fr" ? "Devenir partenaire" : "Become a partner"}
              <Icon name="arrow-up-right" size={16} className="arrow"/>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IDIAPage });