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

// =====================================================
// IDIA feature — big editorial block
// =====================================================
function IDIAFeature({ lang, navigate }) {
  const ref = useReveal();
  const axes = lang === "fr"
    ? ["Compétences", "Données & infrastructures", "Innovation", "Inclusion", "Éthique & régulation"]
    : ["Skills", "Data & infrastructure", "Innovation", "Inclusion", "Ethics & regulation"];

  return (
    <section ref={ref} style={{
      position: "relative", overflow: "hidden",
      background: "linear-gradient(180deg, #2E1065 0%, #4C1D95 100%)",
      color: "white", padding: "140px 0",
    }} className="bg-grain">
      {/* halftone */}
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.35) 1.2px, transparent 1.6px)",
        backgroundSize: "14px 14px",
        WebkitMaskImage: "radial-gradient(ellipse at 0% 100%, black 0%, transparent 50%)",
        maskImage: "radial-gradient(ellipse at 0% 100%, black 0%, transparent 50%)",
        opacity: 0.5,
      }}/>
      {/* slashes */}
      <div aria-hidden style={{ position: "absolute", right: -40, top: -40 }}>
        <Slashes size="min(40vw, 480px)" color="rgba(196,181,253,0.10)"/>
      </div>

      <div className="container-wide" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 80, alignItems: "center" }}
             className="idia-grid">
          <div>
            <div className="eyebrow-mark on-purple reveal" style={{
              color: "rgba(255,255,255,0.9)", marginBottom: 28,
            }}>
              {lang === "fr" ? "IA responsable" : "Responsible AI"}
            </div>
            <h2 className="reveal" style={{
              fontFamily: "var(--font-display)", fontWeight: 800,
              fontSize: "clamp(48px, 6vw, 84px)", lineHeight: 0.96,
              letterSpacing: "-0.03em", color: "white",
              margin: "0 0 22px", textWrap: "balance",
            }}>
              {lang === "fr"
                ? <>IDIA Mali&nbsp;: des priorités issues des consultations.</>
                : <>IDIA Mali: priorities drawn from consultations.</>}
            </h2>
            <p className="reveal" style={{
              fontFamily: "var(--font-display)", fontSize: 20, lineHeight: 1.5,
              color: "rgba(255,255,255,0.82)", maxWidth: 560,
              margin: "0 0 32px",
            }}>
              {lang === "fr"
                ? "Quatre consultations sectorielles — santé, agriculture, économie et éducation — ont nourri une consultation nationale en février 2026. Les échanges ont porté sur les compétences, les données, l'innovation, l'inclusion, l'éthique et la régulation."
                : "Four industry consultations—health, agriculture, economy, and education—fed into a national consultation in February 2026. Discussions covered skills, data, innovation, inclusion, ethics, and regulation."}
            </p>

            {/* axes chips */}
            <div className="reveal" style={{
              display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 36,
            }}>
              {axes.map((a, i) => (
                <span key={a} className="chip chip-dark" style={{
                  fontFamily: "var(--font-display)", fontWeight: 600,
                  padding: "8px 14px", fontSize: 13, letterSpacing: "0.02em",
                  textTransform: "none",
                }}>
                  <span style={{ color: "#FBBF24", marginRight: 6 }}>0{i+1}</span> {a}
                </span>
              ))}
            </div>

            <div className="reveal" style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a href="#idia" onClick={(e) => { e.preventDefault(); navigate("idia"); }}
                 className="btn btn-light">
                {lang === "fr" ? "Explorer la démarche" : "Explore the initiative"}
                <Icon name="arrow-right" size={16} className="arrow"/>
              </a>
            </div>
          </div>

          {/* Right: mini radial visual */}
          <div className="reveal">
            <IDIARadial axes={axes} lang={lang}/>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) { .idia-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
      `}</style>
    </section>
  );
}

function IDIARadial({ axes, lang }) {
  const size = 480;
  const cx = size / 2, cy = size / 2;
  const rOuter = 200, rInner = 60;
  const n = axes.length;
  const shortAxes = lang === "fr"
    ? ["Comp.", "Données", "Innov.", "Incl.", "Éthique"]
    : ["Skills", "Data", "Innov.", "Incl.", "Ethics"];
  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={{ position: "relative", aspectRatio: "1/1", maxWidth: 520, margin: "0 auto" }}>
      <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%">
        {/* outer rings */}
        {[0.4, 0.6, 0.8, 1].map((r, i) => (
          <circle key={i} cx={cx} cy={cy} r={rOuter * r}
                  fill="none" stroke="rgba(255,255,255,0.10)" strokeDasharray={i === 3 ? "" : "2 6"}/>
        ))}
        {/* polygon connector */}
        <polygon points={points.map(p => p.join(",")).join(" ")}
                 fill="rgba(196,181,253,0.07)" stroke="rgba(196,181,253,0.4)" strokeWidth="1"/>
        {/* spokes */}
        {points.map(([x, y], i) => (
          <line key={i} x1={cx} y1={cy} x2={x} y2={y}
                stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
        ))}
        {/* axis dots */}
        {points.map(([x, y], i) => (
          <g key={i}>
            <title>{axes[i]}</title>
            <circle cx={x} cy={y} r="36" fill="white"/>
            <text x={x} y={y - 2} textAnchor="middle" dominantBaseline="middle"
                  style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, fill: "var(--brand)" }}>
              0{i+1}
            </text>
            <text x={x} y={y + 12} textAnchor="middle" dominantBaseline="middle"
                  style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 8, fill: "var(--fg-2)", letterSpacing: "0.02em", textTransform: "uppercase" }}>
              {shortAxes[i]}
            </text>
          </g>
        ))}
        {/* center */}
        <circle cx={cx} cy={cy} r={rInner} fill="white"/>
        <text x={cx} y={cy - 10} textAnchor="middle" dominantBaseline="middle"
              style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, fill: "var(--brand)", letterSpacing: "-0.02em" }}>
          IDIA
        </text>
        <text x={cx} y={cy + 12} textAnchor="middle" dominantBaseline="middle"
              style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 7, fill: "var(--fg-3)", letterSpacing: "0.14em" }}>
          MALI
        </text>
        <text x={cx} y={cy + 24} textAnchor="middle" dominantBaseline="middle"
              style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 7, fill: "var(--fg-3)", letterSpacing: "0.09em" }}>
          CONSULTATION
        </text>
      </svg>
    </div>
  );
}

// =====================================================
// BUILDER SESSIONS
// =====================================================
function BuilderProof({ lang, navigate }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: "120px 0", background: "white" }}>
      <div className="container-wide">
        <div style={{ display:"flex",justifyContent:"space-between",alignItems:"flex-end",gap:32,flexWrap:"wrap",marginBottom:48 }}>
          <div style={{ maxWidth:760 }}><h2 className="reveal" style={{margin:0}}>{lang === "fr" ? "Nous formons, nous rassemblons et nous faisons avancer le débat public." : "We train, convene, and move the public conversation forward."}</h2></div>
          <a href="#event" onClick={(e)=>{e.preventDefault();navigate("event")}} className="link-arrow reveal">{lang === "fr" ? "Explorer nos réalisations" : "Explore our work"}<Icon name="arrow-right" size={14}/></a>
        </div>
        <div className="builder-proof-grid" style={{ display:"grid",gridTemplateColumns:"1.5fr 1fr 1fr",gap:16 }}>
          <div className="reveal"><PhotoPH src="assets/photos/vibe-coding-2025-cover.jpg" alt={lang === "fr" ? "Participant de la première édition Vibe Coding" : "Participant from the first Vibe Coding edition"} ratio="16/10" position="center 22%" caption={lang === "fr" ? "Vibe Coding · première édition 2025" : "Vibe Coding · first edition, 2025"}/></div>
          <div className="reveal"><PhotoPH src="assets/photos/claude-community-speaker.jpg" alt={lang === "fr" ? "Intervenant au lancement de Bamako Claude Community" : "Speaker at the Bamako Claude Community launch"} ratio="4/5" caption={lang === "fr" ? "Bamako Claude Community · juin 2026" : "Bamako Claude Community · June 2026"}/></div>
          <div className="reveal"><PhotoPH src="assets/photos/idia-national-consultation.jpg" alt={lang === "fr" ? "Consultation nationale sur l'intelligence artificielle" : "National consultation on artificial intelligence"} ratio="4/5" caption={lang === "fr" ? "Consultation nationale IDIA · février 2026" : "IDIA national consultation · February 2026"}/></div>
        </div>
      </div>
      <style>{`@media(max-width:880px){.builder-proof-grid{grid-template-columns:1fr!important}}`}</style>
    </section>
  );
}

// =====================================================
// PAN-AFRICAN BUILDER TRAINING
// =====================================================
function AfricaBuildersFeature({ lang, navigate }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding:"130px 0",background:"#111118",color:"white",overflow:"hidden" }}>
      <div className="container-wide africa-builders-grid" style={{ display:"grid",gridTemplateColumns:"1fr 1.05fr",gap:72,alignItems:"center" }}>
        <div>
          <h2 className="reveal" style={{ color:"white",margin:"0 0 22px",fontSize:"clamp(46px,6vw,82px)",lineHeight:.98 }}>
            {lang === "fr" ? "Former des builders à travers l'Afrique." : "Training builders across Africa."}
          </h2>
          <p className="reveal lead" style={{ color:"rgba(255,255,255,.78)",marginBottom:30 }}>
            {lang === "fr"
              ? "En octobre 2025, ImmersIA a animé avec ALX Ventures la session « The Art of Building Your MVP: No Code, Low Code, AI-Powered ». Plus de 130 entrepreneurs de toute l'Afrique ont travaillé sur l'itération, la validation par les utilisateurs et la création rapide de MVP."
              : "In October 2025, ImmersIA delivered ‘The Art of Building Your MVP: No Code, Low Code, AI-Powered’ with ALX Ventures. More than 130 entrepreneurs from across Africa worked through iteration, user validation, and rapid MVP building."}
          </p>
          <div className="reveal" style={{ display:"grid",gridTemplateColumns:"1fr 1fr",gap:24,padding:"26px 0",borderTop:"1px solid rgba(255,255,255,.18)",borderBottom:"1px solid rgba(255,255,255,.18)",marginBottom:32 }}>
            <div><strong style={{ display:"block",fontSize:40,lineHeight:1,color:"#C4B5FD" }}>130+</strong><span style={{ color:"rgba(255,255,255,.66)" }}>{lang === "fr" ? "entrepreneurs" : "entrepreneurs"}</span></div>
            <div><strong style={{ display:"block",fontSize:40,lineHeight:1,color:"#C4B5FD" }}>Africa</strong><span style={{ color:"rgba(255,255,255,.66)" }}>{lang === "fr" ? "portée continentale" : "continental reach"}</span></div>
          </div>
          <a href="#program" onClick={(e)=>{e.preventDefault();navigate("program")}} className="btn btn-light reveal">{lang === "fr" ? "Découvrir nos formations" : "Explore our training"}<Icon name="arrow-right" size={16}/></a>
        </div>
        <div className="reveal" style={{ display:"grid",gridTemplateColumns:"1.18fr .82fr",gap:14,alignItems:"end" }}>
          <PhotoPH src="assets/photos/alx-africa-builders-02.jpg" alt={lang === "fr" ? "Session en ligne sur la création de MVP avec des entrepreneurs africains" : "Online MVP-building session with entrepreneurs across Africa"} ratio="4/3" caption={lang === "fr" ? "Créer un MVP avec l'IA · ALX Ventures" : "Building an MVP with AI · ALX Ventures"}/>
          <PhotoPH src="assets/photos/alx-africa-builders-03.jpg" alt={lang === "fr" ? "Outils présentés pendant la session continentale" : "Tools presented during the continental builder session"} ratio="4/5" caption={lang === "fr" ? "Une boîte à outils concrète pour les builders" : "A practical toolkit for builders"}/>
        </div>
      </div>
      <style>{`@media(max-width:980px){.africa-builders-grid{grid-template-columns:1fr!important;gap:46px!important}}`}</style>
    </section>
  );
}

// =====================================================
// DEL — co-conducted digital, English and leadership program
// =====================================================
function DELFeature({ lang }) {
  const ref = useReveal();
  const areas = lang === "fr"
    ? [["01","Numérique","Des outils et compétences utiles"],["02","Anglais","Pour les carrières et l'entrepreneuriat"],["03","Leadership","Prise de parole et projets communautaires"]]
    : [["01","Digital","Practical tools and skills"],["02","English","For careers and entrepreneurship"],["03","Leadership","Public speaking and community projects"]];
  return (
    <section ref={ref} style={{ padding:"125px 0",background:"var(--bg-tinted)" }}>
      <div className="container-wide del-feature-grid" style={{ display:"grid",gridTemplateColumns:"1.05fr 1fr",gap:72,alignItems:"center" }}>
        <div>
          <h2 className="reveal" style={{ margin:"0 0 20px" }}>{lang === "fr" ? "DEL : numérique, anglais et leadership pour les jeunes femmes." : "DEL: digital, English, and leadership for young women."}</h2>
          <p className="reveal lead" style={{ color:"var(--fg-2)",marginBottom:32 }}>
            {lang === "fr"
              ? "ImmersIA co-organise le programme DEL avec NDIARAMA Media & Consulting. Ce programme fondé sur les compétences, destiné aux jeunes femmes au Mali, relie outils numériques, anglais professionnel, leadership, prise de parole et projets communautaires."
              : "ImmersIA co-conducts the DEL Program with NDIARAMA Media & Consulting. This skills-based program for young women in Mali connects digital tools, career English, leadership, public speaking, and community projects."}
          </p>
          <div className="reveal" style={{ borderTop:"1px solid var(--line-1)" }}>
            {areas.map(([n,title,text])=><div key={n} style={{ display:"grid",gridTemplateColumns:"44px 1fr",gap:14,padding:"18px 0",borderBottom:"1px solid var(--line-1)" }}><strong style={{ color:"var(--brand)" }}>{n}</strong><div><h3 style={{ fontSize:20,margin:"0 0 3px" }}>{title}</h3><p style={{ margin:0,color:"var(--fg-2)" }}>{text}</p></div></div>)}
          </div>
        </div>
        <div className="reveal"><PhotoPH src="assets/photos/del-academy-group.jpg" alt={lang === "fr" ? "Participantes et équipe du programme DEL" : "DEL Program participants and team"} ratio="4/3" caption={lang === "fr" ? "Programme DEL · compétences et leadership" : "DEL Program · skills and leadership"}/></div>
      </div>
      <style>{`@media(max-width:980px){.del-feature-grid{grid-template-columns:1fr!important;gap:44px!important}}`}</style>
    </section>
  );
}

// =====================================================
// BAMAKO CLAUDE COMMUNITY — featured community work
// =====================================================
function CommunityFeature({ lang, navigate }) {
  const ref = useReveal();
  const audiences = lang === "fr"
    ? ["Professionnels", "Développeurs", "Entrepreneurs", "Étudiants", "Journalistes", "Créateurs"]
    : ["Professionals", "Developers", "Entrepreneurs", "Students", "Journalists", "Creators"];
  return (
    <section ref={ref} style={{ padding:"130px 0",background:"var(--bg-subtle)",overflow:"hidden" }}>
      <div className="container-wide community-feature-grid" style={{display:"grid",gridTemplateColumns:"1.05fr 1fr",gap:72,alignItems:"center"}}>
        <div className="reveal"><PhotoPH src="assets/photos/claude-community-group.jpg" alt={lang === "fr" ? "Photo de groupe du lancement de Bamako Claude Community" : "Group photograph from the Bamako Claude Community launch"} ratio="4/3" caption={lang === "fr" ? "Lancement de Bamako Claude Community · 12 juin 2026" : "Bamako Claude Community launch · June 12, 2026"}/></div>
        <div>
          <span className="eyebrow-mark reveal">{lang === "fr" ? "Communauté locale, échanges ouverts" : "Local community, open exchange"}</span>
          <h2 className="reveal" style={{margin:"14px 0 20px"}}>{lang === "fr" ? <>Bamako Claude Community&nbsp;: apprendre côte à côte.</> : <>Bamako Claude Community: learning side by side.</>}</h2>
          <p className="reveal lead" style={{color:"var(--fg-2)",marginBottom:24}}>{lang === "fr" ? "Le 12 juin 2026, nous avons lancé une communauté malienne consacrée aux usages concrets de Claude. La rencontre s'est tenue à Sotuba dans une salle pleine, avec des participants connectés depuis plusieurs pays." : "On June 12, 2026, we launched a Mali-based community focused on practical uses of Claude. The gathering filled the room in Sotuba, with participants joining online from several countries."}</p>
          <p className="reveal" style={{fontSize:16,lineHeight:1.6,color:"var(--fg-2)",marginBottom:24}}>{lang === "fr" ? "La communauté partage des méthodes, présente des cas d'usage, encourage l'apprentissage entre pairs et aide chacun à mieux utiliser les outils." : "The community shares methods, demonstrates use cases, encourages peer learning, and helps everyone use the tools more effectively."}</p>
          <div className="reveal" style={{display:"flex",flexWrap:"wrap",gap:8,marginBottom:30}}>{audiences.map(a=><span className="chip" key={a}>{a}</span>)}</div>
          <a href="#community" onClick={(e)=>{e.preventDefault();navigate("community")}} className="btn btn-primary reveal">{lang === "fr" ? "Voir le lancement" : "See the launch"}<Icon name="arrow-right" size={16}/></a>
        </div>
      </div>
      <style>{`@media(max-width:980px){.community-feature-grid{grid-template-columns:1fr!important;gap:42px!important}}`}</style>
    </section>
  );
}

// =====================================================
// COLLABORATIONS AND PARTICIPATION
// =====================================================
function EcosystemParticipation({ lang }) {
  const ref = useReveal();
  const items = lang === "fr" ? [
    { image:"assets/photos/bamako-ai-participation.jpg", alt:"Participation d'ImmersIA au lancement de Bamako.ai Saison 3", tag:"Participation", title:"Bamako.ai · Saison 3", text:"ImmersIA a pris part au lancement de la Saison 3 de Bamako.ai, portée par Kabakoo Academies." },
    { image:"assets/photos/repat-exchange.jpg", alt:"Échange sur l'intelligence artificielle et la transformation du travail avec REPAT Mali", tag:"Dialogue professionnel", title:"IA & transformation du travail", text:"Des membres d'ImmersIA ont contribué à un échange avec REPAT Mali sur les transformations du travail liées à l'IA." },
  ] : [
    { image:"assets/photos/bamako-ai-participation.jpg", alt:"ImmersIA participating in the Bamako.ai Season 3 launch", tag:"Participation", title:"Bamako.ai · Season 3", text:"ImmersIA took part in the launch of Bamako.ai Season 3, led by Kabakoo Academies." },
    { image:"assets/photos/repat-exchange.jpg", alt:"Exchange on artificial intelligence and workplace transformation with REPAT Mali", tag:"Professional dialogue", title:"AI & the changing workplace", text:"ImmersIA members contributed to an exchange with REPAT Mali on how AI is transforming work." },
  ];
  return <section ref={ref} style={{padding:"120px 0",background:"white"}}><div className="container-wide"><div style={{maxWidth:780,marginBottom:52}}><h2 className="reveal" style={{margin:0}}>{lang === "fr" ? "Collaborations et événements auxquels nous contribuons." : "Collaborations and events we contribute to."}</h2></div><div className="ecosystem-grid" style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:22}}>{items.map((it,i)=><article className="reveal" key={it.title} style={{border:"1px solid var(--line-1)",borderRadius:"var(--radius-xl)",overflow:"hidden",background:"white","--reveal-delay":`${i*80}ms`}}><PhotoPH src={it.image} alt={it.alt} ratio="16/10" style={{borderRadius:0}}/><div style={{padding:26}}><span className="chip" style={{marginBottom:14}}>{it.tag}</span><h3 style={{fontSize:22,margin:"0 0 10px"}}>{it.title}</h3><p style={{margin:0,color:"var(--fg-2)",lineHeight:1.55}}>{it.text}</p></div></article>)}</div></div><style>{`@media(max-width:880px){.ecosystem-grid{grid-template-columns:1fr!important}}`}</style></section>;
}

// =====================================================
// EVENTS — upcoming carousel
// =====================================================
function EventsCarousel({ lang, navigate }) {
  const ref = useReveal();
  const events = [
    {
      date: { day: "31", month: lang === "fr" ? "JUIL" : "JUL", year: "2026" },
      type: "Build Sprint",
      title: "Replit Build Sprint",
      sub: lang === "fr" ? "Créer et déployer une app, un site ou un outil · Sotuba" : "Build and deploy an app, site, or tool · Sotuba",
      tag: lang === "fr" ? "À venir" : "Upcoming",
      tone: "warm",
      route: "program",
    },
    {
      date: { day: "25", month: lang === "fr" ? "JUIN" : "JUN", year: "2026" },
      type: "Masterclass",
      title: lang === "fr" ? "Du prompt à l'usine" : "From prompt to production",
      sub: lang === "fr" ? "Construire et automatiser de vraies applications · en ligne" : "Build and automate real applications · online",
      tag: lang === "fr" ? "Réalisé" : "Completed",
      tone: "blue",
      route: "program",
    },
    {
      date: { day: "12", month: lang === "fr" ? "JUIN" : "JUN", year: "2026" },
      type: lang === "fr" ? "Communauté" : "Community",
      title: "Bamako Claude Community",
      sub: lang === "fr" ? "Lancement, cas d'usage et apprentissage entre pairs · Sotuba" : "Launch, use cases, and peer learning · Sotuba",
      tag: lang === "fr" ? "Réalisé" : "Completed",
      tone: "purple",
      route: "community",
    },
    {
      date: { day: "06", month: lang === "fr" ? "FÉV" : "FEB", year: "2026" },
      type: "Vibe Coding",
      title: lang === "fr" ? "Des idées aux sites fonctionnels" : "From ideas to working sites",
      sub: lang === "fr" ? "Deux jours intensifs, sans prérequis de code · Sotuba" : "Two intensive days, no coding prerequisite · Sotuba",
      tag: lang === "fr" ? "Étude de cas" : "Case study",
      tone: "purple",
      route: "vibe",
    },
  ];

  return (
    <section ref={ref} style={{ padding: "120px 0", background: "white" }}>
      <div className="container-wide">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end",
                      marginBottom: 56, gap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 620 }}>
            <h2 className="reveal" style={{ margin: 0 }}>
              {lang === "fr" ? "Nos programmes et activités communautaires." : "Our programs and community activities."}
            </h2>
          </div>
          <a href="#event" onClick={(e) => { e.preventDefault(); navigate("event"); }}
             className="link-arrow reveal">
            {lang === "fr" ? "Voir toutes les réalisations" : "See all our work"}
            <Icon name="arrow-right" size={14} className="arrow"/>
          </a>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20,
        }} className="events-grid">
          {events.map((ev, i) => <EventCard key={i} ev={ev} delay={i * 80} lang={lang} navigate={navigate}/>)}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .events-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 540px) { .events-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function EventCard({ ev, delay, lang, navigate }) {
  const [hover, setHover] = React.useState(false);
  const toneColor = {
    purple: "var(--brand)", blue: "var(--accent)", warm: "var(--warm-accent)",
  }[ev.tone];
  return (
    <article className="reveal"
      role="link" tabIndex="0"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => navigate(ev.route || "event")}
      onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") navigate(ev.route || "event"); }}
      style={{
        "--reveal-delay": `${delay}ms`,
        position: "relative",
        background: "white",
        border: "1px solid var(--line-1)",
        borderRadius: "var(--radius-xl)",
        padding: 24,
        cursor: "pointer",
        transition: "all 280ms var(--ease-out)",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        boxShadow: hover ? "var(--shadow-md)" : "none",
        borderColor: hover ? toneColor : "var(--line-1)",
        overflow: "hidden",
      }}>
      {/* Date chip — big */}
      <div style={{
        display: "inline-flex", flexDirection: "column", alignItems: "center",
        padding: "10px 14px", borderRadius: 14,
        background: hover ? toneColor : "var(--bg-subtle)",
        color: hover ? "white" : "var(--fg-1)",
        transition: "all 280ms var(--ease-out)",
        marginBottom: 20, minWidth: 64,
      }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 800,
                       fontSize: 24, lineHeight: 1, letterSpacing: "-0.02em" }}>{ev.date.day}</span>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700,
                       fontSize: 10, letterSpacing: "0.12em", marginTop: 2,
                       color: hover ? "rgba(255,255,255,0.85)" : "var(--fg-3)" }}>{ev.date.month}</span>
      </div>

      <div style={{
        fontFamily: "var(--font-display)", fontSize: 11, fontWeight: 700,
        letterSpacing: "0.14em", textTransform: "uppercase",
        color: toneColor, marginBottom: 10,
      }}>{ev.type}</div>

      <h3 style={{
        fontFamily: "var(--font-display)", fontWeight: 700,
        fontSize: 20, letterSpacing: "-0.01em", lineHeight: 1.2,
        margin: "0 0 12px", color: "var(--fg-1)",
      }}>{ev.title}</h3>
      <p style={{
        fontFamily: "var(--font-display)", fontSize: 14, lineHeight: 1.45,
        color: "var(--fg-2)", margin: "0 0 20px",
      }}>{ev.sub}</p>

      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 12,
                       color: "var(--fg-3)", letterSpacing: "0.04em" }}>{ev.tag}</span>
        <Icon name="arrow-right" size={16}
              style={{
                color: toneColor,
                transition: "transform 280ms var(--ease-out)",
                transform: hover ? "translateX(4px)" : "translateX(0)",
              }}/>
      </div>
    </article>
  );
}

// =====================================================
// PARTNERS MARQUEE
// =====================================================
function PartnersMarquee({ lang }) {
  const ref = useReveal();
  const partners = [
    "NIYEL", "APDP", "CILAPPS", "Réseau Agrivision Sahel",
    "Folo Digital Consulting", "OPEN Mali", "Kabakoo Academies", "REPAT Mali",
  ];
  // duplicate for seamless loop
  const looped = [...partners, ...partners];

  return (
    <section ref={ref} style={{
      padding: "80px 0", background: "var(--bg-subtle)",
      borderTop: "1px solid var(--line-1)", borderBottom: "1px solid var(--line-1)",
      overflow: "hidden",
    }}>
      <div className="container-wide" style={{ marginBottom: 36 }}>
        <h3 className="reveal" style={{
          fontSize: 28, fontFamily: "var(--font-display)", fontWeight: 700,
          letterSpacing: "-0.02em", margin: 0, color: "var(--fg-1)",
        }}>
          {lang === "fr" ? "Des organisations avec lesquelles nous avons travaillé."
                          : "Organizations we have worked with."}
        </h3>
      </div>
      <div className="reveal" style={{ position: "relative" }}>
        <div className="marquee-track">
          {looped.map((p, i) => (
            <div key={i} style={{
              fontFamily: "var(--font-display)", fontWeight: 700,
              fontSize: "clamp(28px, 3vw, 44px)",
              letterSpacing: "-0.02em",
              color: "var(--fg-3)",
              padding: "0 8px",
              display: "flex", alignItems: "center", gap: 56,
              whiteSpace: "nowrap",
            }}>
              {p}
              <span style={{ color: "var(--tagline)", fontWeight: 900, fontSize: "0.8em" }}>//</span>
            </div>
          ))}
        </div>
        {/* edge fades */}
        <div aria-hidden style={{
          position: "absolute", left: 0, top: 0, bottom: 0, width: 120,
          background: "linear-gradient(90deg, var(--bg-subtle), transparent)",
          pointerEvents: "none",
        }}/>
        <div aria-hidden style={{
          position: "absolute", right: 0, top: 0, bottom: 0, width: 120,
          background: "linear-gradient(-90deg, var(--bg-subtle), transparent)",
          pointerEvents: "none",
        }}/>
      </div>
    </section>
  );
}

// =====================================================
// TESTIMONIALS
// =====================================================
function Testimonials({ lang }) {
  const ref = useReveal();
  const quotes = [
    {
      q: lang === "fr"
        ? "Merci beaucoup. Je suis vraiment ravi d'avoir participé à cette formation et j'ai hâte d'en suivre d'autres avec vous."
        : "Thank you very much. I am truly glad I took part in this training, and I look forward to joining more sessions with you.",
      name: lang === "fr" ? "Participant anonyme" : "Anonymous participant",
      role: lang === "fr" ? "Enquête post-événement · BCC" : "Post-event survey · BCC",
      tone: "warm",
    },
    {
      q: lang === "fr"
        ? "Ne jamais arrêter de construire. Construire une première version imparfaite. La perfectionner plus tard. Mais continuer à construire."
        : "Never stop building. Build ugly. Make it perfect later. Just continue building.",
      name: lang === "fr" ? "Participant anonyme" : "Anonymous participant",
      role: "ALX Ventures · Founder Academy",
      tone: "purple",
    },
    {
      q: lang === "fr"
        ? "Ce que j'ai trouvé le plus utile, c'est lorsque le facilitateur nous a montré concrètement comment construire le PRD d'un MVP avec Lovable AI et Perplexity."
        : "What I found most valuable was when the facilitator showed us exactly how to build an MVP PRD with Lovable AI and Perplexity.",
      name: lang === "fr" ? "Participant anonyme" : "Anonymous participant",
      role: "ALX Ventures · Founder Academy",
      tone: "blue",
    },
  ];

  return (
    <section ref={ref} style={{ padding: "120px 0", background: "white" }}>
      <div className="container-wide">
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <h2 className="reveal" style={{ margin: 0 }}>
            {lang === "fr"
              ? "Ce que les participants nous ont dit après nos sessions."
              : "What participants told us after our sessions."}
          </h2>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}
             className="quote-grid">
          {quotes.map((q, i) => <QuoteCard key={i} q={q} delay={i * 100}/>)}
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .quote-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function QuoteCard({ q, delay }) {
  const [hover, setHover] = React.useState(false);
  const accent = {
    purple: "var(--brand)", blue: "var(--accent)", warm: "var(--warm-accent)",
  }[q.tone];
  return (
    <figure className="reveal"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        "--reveal-delay": `${delay}ms`,
        margin: 0, padding: 32,
        background: hover ? "var(--bg-subtle)" : "white",
        border: "1px solid var(--line-1)",
        borderRadius: "var(--radius-2xl)",
        transition: "all 280ms var(--ease-out)",
        position: "relative", overflow: "hidden",
      }}>
      <div aria-hidden style={{
        position: "absolute", top: -10, left: 24,
        fontFamily: "var(--font-serif)", fontWeight: 700,
        fontSize: 110, color: accent, opacity: 0.18, lineHeight: 1,
      }}>"</div>
      <blockquote style={{
        margin: "16px 0 28px", padding: 0,
        fontFamily: "var(--font-display)", fontSize: 19, lineHeight: 1.45,
        color: "var(--fg-1)", fontWeight: 500,
        position: "relative", zIndex: 1, textWrap: "pretty",
      }}>{q.q}</blockquote>
      <figcaption style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <div style={{
          width: 44, height: 44, borderRadius: 999,
          background: `linear-gradient(135deg, ${accent}, var(--purple-300))`,
          color: "white", display: "flex", alignItems: "center", justifyContent: "center",
          fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 14,
        }}>{q.name.split(" ").map(n => n[0]).join("")}</div>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700,
                        fontSize: 14, color: "var(--fg-1)" }}>{q.name}</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 12,
                        color: "var(--fg-3)", marginTop: 2 }}>{q.role}</div>
        </div>
      </figcaption>
    </figure>
  );
}

// =====================================================
// NEWSLETTER CTA
// =====================================================
function NewsletterCTA({ lang, navigate }) {
  const ref = useReveal();
  const [email, setEmail] = React.useState("");
  const [sent, setSent] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.includes("@")) return;
    setSent(true);
  };
  return (
    <section ref={ref} style={{ padding: "0 0 120px", background: "white" }}>
      <div className="container-wide">
        <div className="reveal" style={{
          position: "relative", overflow: "hidden",
          background: "linear-gradient(135deg, #2E1065 0%, #5B21B6 60%, #7C3AED 100%)",
          borderRadius: "var(--radius-2xl)",
          padding: "72px 56px",
          color: "white",
        }}>
          {/* halftone */}
          <div aria-hidden style={{
            position: "absolute", inset: 0,
            backgroundImage: "radial-gradient(circle, rgba(255,255,255,0.35) 1px, transparent 1.4px)",
            backgroundSize: "12px 12px",
            WebkitMaskImage: "radial-gradient(ellipse at 100% 0%, black 0%, transparent 55%)",
            maskImage: "radial-gradient(ellipse at 100% 0%, black 0%, transparent 55%)",
            opacity: 0.5,
          }}/>
          <div aria-hidden style={{ position: "absolute", right: -20, bottom: -50 }}>
            <Slashes size={280} color="rgba(196,181,253,0.16)"/>
          </div>

          <div style={{
            position: "relative", display: "grid",
            gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center",
          }} className="news-grid">
            <div>
              <span className="eyebrow-mark on-purple">{t("newsletter.eyebrow", lang)}</span>
              <h2 style={{
                fontFamily: "var(--font-display)", fontWeight: 800,
                fontSize: "clamp(32px, 4vw, 52px)", lineHeight: 1.05,
                letterSpacing: "-0.02em", color: "white",
                margin: "14px 0 14px", textWrap: "balance",
              }}>{lang === "fr" ? "Construisons des initiatives IA utiles." : "Let's build useful AI initiatives."}</h2>
              <p style={{
                fontFamily: "var(--font-display)", fontSize: 17, lineHeight: 1.5,
                color: "rgba(255,255,255,0.82)", margin: 0, maxWidth: 460,
              }}>{lang === "fr" ? "Formation, communauté, dialogue public ou programme sectoriel : nous travaillons avec des partenaires qui veulent passer à l'action." : "Training, community, public dialogue, or sector program: we work with partners ready to take action."}</p>
            </div>

            <div className="reveal" style={{ display:"flex",flexDirection:"column",alignItems:"flex-start",gap:14 }}><p style={{fontFamily:"var(--font-display)",fontSize:18,lineHeight:1.5,color:"rgba(255,255,255,.82)",margin:0}}>{lang === "fr" ? "Vous êtes une plateforme, une école, une entreprise, une institution ou une communauté ? Nous pouvons concevoir le bon format avec vous." : "Are you a platform, school, company, institution, or community? We can design the right format with you."}</p><a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact")}} className="btn btn-light">{lang === "fr" ? "Discuter d'un partenariat" : "Discuss a partnership"}<Icon name="arrow-right" size={14}/></a></div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .news-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { IDIAFeature, BuilderProof, AfricaBuildersFeature, DELFeature, CommunityFeature, EcosystemParticipation, EventsCarousel, PartnersMarquee, Testimonials, NewsletterCTA });