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

function WorkPage({ lang, navigate }) {
  const ref = useReveal();
  const work = lang === "fr" ? [
    { route:"program", image:"assets/photos/alx-africa-builders-02.jpg", tag:"Formation panafricaine", title:"Créer des MVP à travers l'Afrique", text:"Une session ImmersIA avec ALX Ventures sur l'itération, la validation utilisateur et la création rapide de MVP avec l'IA.", meta:"Octobre 2025 · 130+ entrepreneurs" },
    { route:"vibe", image:"assets/photos/vibe-coding-2025-cover.jpg", tag:"Formation pratique", title:"Atelier Vibe Coding", text:"Un format lancé en 2025 pour transformer des idées en prototypes et sites fonctionnels en 48 heures avec l'IA.", meta:"Depuis 2025 · plusieurs éditions" },
    { route:"community", image:"assets/photos/claude-community-group.jpg", tag:"Communauté", title:"Bamako Claude Community", text:"Une communauté pour partager des cas d'usage, des méthodes et apprendre entre pairs.", meta:"12 juin 2026 · Sotuba + en ligne" },
    { route:"program", image:"assets/photos/ai-masterclass-online.jpg", tag:"Masterclass", title:"Du prompt à l'usine", text:"Une session en ligne pour apprendre à structurer et automatiser de vraies applications avec l'IA.", meta:"25 juin 2026 · environ 50 participants" },
    { route:"idia", image:"assets/photos/idia-consultation-room.jpg", tag:"Dialogue public", title:"IDIA Mali", text:"Quatre consultations sectorielles ont alimenté une consultation nationale sur les priorités IA du Mali.", meta:"Octobre 2025–février 2026" },
    { route:null, image:"assets/photos/repat-exchange.jpg", tag:"Échange professionnel", title:"IA & transformation du travail", text:"Une contribution à l'échange organisé avec REPAT Mali sur les effets de l'IA dans le monde professionnel.", meta:"Mars 2026 · participation ImmersIA" },
    { route:null, image:"assets/photos/bamako-ai-participation.jpg", tag:"Participation", title:"Bamako.ai · Saison 3", text:"ImmersIA a participé au lancement de la troisième saison portée par Kabakoo Academies.", meta:"Septembre 2025 · participation ImmersIA" },
    { route:null, image:"assets/photos/del-academy-group.jpg", tag:"Numérique · Anglais · Leadership", title:"Programme DEL", text:"Un programme co-organisé par ImmersIA et NDIARAMA Media & Consulting pour renforcer les compétences et le leadership des jeunes femmes au Mali.", meta:"2025 · programme co-organisé" },
  ] : [
    { route:"program", image:"assets/photos/alx-africa-builders-02.jpg", tag:"Pan-African training", title:"Building MVPs across Africa", text:"An ImmersIA session with ALX Ventures on iteration, user validation, and rapid AI-powered MVP building.", meta:"October 2025 · 130+ entrepreneurs" },
    { route:"vibe", image:"assets/photos/vibe-coding-2025-cover.jpg", tag:"Hands-on training", title:"Vibe Coding Workshop", text:"A format launched in 2025 for turning ideas into prototypes and working websites in 48 hours with AI.", meta:"Since 2025 · multiple editions" },
    { route:"community", image:"assets/photos/claude-community-group.jpg", tag:"Community", title:"Bamako Claude Community", text:"A community for sharing use cases, methods, and peer learning.", meta:"June 12, 2026 · Sotuba + online" },
    { route:"program", image:"assets/photos/ai-masterclass-online.jpg", tag:"Masterclass", title:"From prompt to production", text:"An online session on structuring and automating real applications with AI.", meta:"June 25, 2026 · approximately 50 participants" },
    { route:"idia", image:"assets/photos/idia-consultation-room.jpg", tag:"Public dialogue", title:"IDIA Mali", text:"Four industry consultations informed a national conversation about Mali's AI priorities.", meta:"October 2025–February 2026" },
    { route:null, image:"assets/photos/repat-exchange.jpg", tag:"Industry exchange", title:"AI & the changing workplace", text:"A contribution to the REPAT Mali exchange on how AI is changing professional life.", meta:"March 2026 · ImmersIA participation" },
    { route:null, image:"assets/photos/bamako-ai-participation.jpg", tag:"Participation", title:"Bamako.ai · Season 3", text:"ImmersIA participated in the launch of the third season led by Kabakoo Academies.", meta:"September 2025 · ImmersIA participation" },
    { route:null, image:"assets/photos/del-academy-group.jpg", tag:"Digital · English · Leadership", title:"DEL Program", text:"A program co-conducted by ImmersIA and NDIARAMA Media & Consulting to strengthen young women's skills and leadership in Mali.", meta:"2025 · co-conducted program" },
  ];
  return <main ref={ref} data-screen-label="Work">
    <section style={{position:"relative",overflow:"hidden",background:"linear-gradient(180deg,#fff 0%,var(--bg-subtle) 100%)",padding:"110px 0 90px"}}><div aria-hidden style={{position:"absolute",right:-40,top:20}}><Slashes size="min(34vw,390px)" color="rgba(124,58,237,.09)"/></div><div className="container-wide" style={{position:"relative",zIndex:1,maxWidth:1280}}><h1 className="reveal" style={{fontSize:"clamp(52px,8vw,112px)",lineHeight:.96,letterSpacing:"-.04em",margin:"0 0 24px",maxWidth:1050}}>{lang === "fr" ? <>Ce que nous avons <span style={{color:"var(--brand)"}}>construit, lancé et réuni</span>.</> : <>What we have <span style={{color:"var(--brand)"}}>built, launched, and convened</span>.</>}</h1><p className="lead reveal" style={{maxWidth:760}}>{lang === "fr" ? "Découvrez nos formations, communautés, consultations et collaborations à travers leurs temps forts." : "Explore our training, communities, consultations, and collaborations through project highlights."}</p></div></section>
    <section style={{padding:"110px 0",background:"white"}}><div className="container-wide"><div className="work-grid" style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:26}}>{work.map((it,i)=><article key={it.title} className="reveal" role={it.route?"link":undefined} tabIndex={it.route?0:undefined} onClick={()=>it.route&&navigate(it.route)} onKeyDown={(e)=>{if(it.route&&(e.key==="Enter"||e.key===" "))navigate(it.route)}} style={{border:"1px solid var(--line-1)",borderRadius:"var(--radius-2xl)",overflow:"hidden",background:"white",cursor:it.route?"pointer":"default","--reveal-delay":`${(i%2)*80}ms`}}><PhotoPH src={it.image} alt={it.title} ratio="16/9" style={{borderRadius:0}}/><div style={{padding:"28px 30px 32px"}}><div style={{display:"flex",justifyContent:"space-between",gap:16,alignItems:"center",marginBottom:14}}><span className="chip">{it.tag}</span><span style={{fontSize:12,color:"var(--fg-3)"}}>{it.meta}</span></div><h2 style={{fontSize:32,margin:"0 0 10px"}}>{it.title}</h2><p style={{fontSize:16,lineHeight:1.55,color:"var(--fg-2)",margin:"0 0 18px"}}>{it.text}</p>{it.route&&<span className="link-arrow">{lang === "fr" ? "Voir le projet" : "View project"}<Icon name="arrow-right" size={14}/></span>}</div></article>)}</div></div><style>{`@media(max-width:880px){.work-grid{grid-template-columns:1fr!important}}`}</style></section>
  </main>;
}

function CommunityCasePage({ lang, navigate }) {
  const ref = useReveal();
  const groups = lang === "fr" ? ["Professionnels", "Développeurs", "Entrepreneurs", "Étudiants", "Journalistes", "Créateurs"] : ["Professionals", "Developers", "Entrepreneurs", "Students", "Journalists", "Creators"];
  return <main ref={ref} data-screen-label="CommunityCase">
    <section style={{position:"relative",overflow:"hidden",background:"linear-gradient(180deg,#0E0E13 0%,#1B1B22 100%)",color:"white",padding:"90px 0 100px"}} className="bg-grain"><div aria-hidden style={{position:"absolute",right:-30,top:-50}}><Slashes size="min(42vw,500px)" color="rgba(196,181,253,.11)"/></div><div className="container-wide" style={{position:"relative",zIndex:2}}><a href="#event" onClick={(e)=>{e.preventDefault();navigate("event")}} style={{display:"inline-flex",alignItems:"center",gap:8,color:"rgba(255,255,255,.65)",borderBottom:"none",marginBottom:30}}><Icon name="chevron-right" size={14} style={{transform:"rotate(180deg)"}}/>{lang === "fr" ? "Toutes les réalisations" : "All work"}</a><h1 className="reveal" style={{fontSize:"clamp(48px,7.5vw,108px)",lineHeight:.96,letterSpacing:"-.04em",color:"white",margin:"0 0 24px",maxWidth:1120}}>Bamako Claude Community&nbsp;: <span style={{color:"#A78BFA"}}>{lang === "fr" ? "apprendre ensemble, à partir d'usages réels" : "learning together through real use cases"}</span>.</h1><p className="reveal" style={{fontSize:"clamp(18px,1.5vw,22px)",lineHeight:1.55,color:"rgba(255,255,255,.78)",maxWidth:780,margin:0}}>{lang === "fr" ? "Une communauté locale pour celles et ceux qui veulent mieux utiliser Claude, partager ce qu'ils apprennent et progresser avec d'autres." : "A local community for people who want to use Claude better, share what they learn, and improve alongside others."}</p><div className="case-facts reveal" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:28,paddingTop:28,borderTop:"1px solid rgba(255,255,255,.18)",marginTop:34,maxWidth:980}}>{[["calendar",lang==="fr"?"Date":"Date",lang==="fr"?"12 juin 2026":"June 12, 2026"],["map-pin",lang==="fr"?"Lieu":"Location","ImmersIA · Sotuba"],["globe","Format",lang==="fr"?"Présentiel + en ligne":"In person + online"],["users",lang==="fr"?"Participation":"Participation",lang==="fr"?"Salle pleine":"Full room"]].map(([icon,l,v])=><div key={l} style={{display:"flex",gap:12,alignItems:"center"}}><div style={{width:38,height:38,borderRadius:10,background:"rgba(167,139,250,.18)",color:"#C4B5FD",display:"flex",alignItems:"center",justifyContent:"center"}}><Icon name={icon} size={18}/></div><div><div style={{fontSize:11,letterSpacing:".12em",textTransform:"uppercase",color:"rgba(255,255,255,.55)"}}>{l}</div><strong style={{fontSize:15}}>{v}</strong></div></div>)}</div></div></section>
    <section style={{padding:"80px 0",background:"var(--bg-canvas)"}}><div className="container-wide community-photo-strip" style={{display:"grid",gridTemplateColumns:"2fr 1fr 1fr",gap:16}}><PhotoPH src="assets/photos/claude-community-audience.jpg" alt={lang === "fr" ? "Public au lancement de Bamako Claude Community" : "Audience at the Bamako Claude Community launch"} ratio="16/10" caption={lang === "fr" ? "Une salle pleine à Sotuba" : "A full room in Sotuba"}/><PhotoPH src="assets/photos/claude-community-speaker.jpg" alt={lang === "fr" ? "Présentation pendant le lancement" : "Presentation during the launch"} ratio="1/1" caption={lang === "fr" ? "Des cas d'usage expliqués par la pratique" : "Use cases explained through practice"}/><PhotoPH src="assets/photos/claude-community-discussion.jpg" alt={lang === "fr" ? "Échanges entre participants" : "Discussion among participants"} ratio="1/1" caption={lang === "fr" ? "Questions, méthodes et retours d'expérience" : "Questions, methods, and lessons"}/></div></section>
    <section style={{padding:"100px 0 120px",background:"white"}}><div className="container-wide community-story-grid" style={{display:"grid",gridTemplateColumns:"1.35fr 1fr",gap:80}}><article className="reveal"><h2 style={{margin:0}}>{lang === "fr" ? "Pourquoi les participants se sont réunis." : "Why participants came together."}</h2><p style={{fontSize:18,lineHeight:1.65,color:"var(--fg-2)"}}>{lang === "fr" ? "Le lancement du 12 juin a réuni des profils différents autour d'un même besoin : ne pas rester seuls face aux nouveaux outils. La rencontre a porté sur des cas d'usage concrets, des méthodes de travail et l'apprentissage entre pairs." : "The June 12 launch brought different profiles together around one shared need: not being left alone with new tools. The gathering focused on practical use cases, working methods, and peer learning."}</p><p style={{fontSize:18,lineHeight:1.65,color:"var(--fg-2)"}}>{lang === "fr" ? "La participation en ligne depuis plusieurs pays a donné à cette communauté bamakoise une ouverture plus large, tout en gardant un ancrage local à Sotuba." : "Online participation from several countries gave this Bamako-based community a wider reach while keeping a strong local home in Sotuba."}</p><blockquote style={{margin:"36px 0",padding:"26px 30px",borderLeft:"4px solid var(--brand)",background:"var(--bg-tinted)",fontFamily:"var(--font-display)",fontSize:23,fontWeight:600,lineHeight:1.4}}>{lang === "fr" ? "« Ensemble, nous irons plus loin. »" : "“Together, we will go further.”"}<footer style={{fontSize:13,color:"var(--fg-3)",marginTop:12}}>— {lang === "fr" ? "Participant anonyme · enquête BCC" : "Anonymous participant · BCC survey"}</footer></blockquote></article><aside className="reveal"><div style={{position:"sticky",top:100,background:"var(--bg-subtle)",borderRadius:"var(--radius-xl)",padding:30}}><div style={{fontSize:11,fontWeight:700,letterSpacing:".14em",textTransform:"uppercase",color:"var(--tagline)",marginBottom:18}}>{lang === "fr" ? "Pour qui ?" : "Who is it for?"}</div><div style={{display:"flex",flexWrap:"wrap",gap:8,marginBottom:24}}>{groups.map(g=><span className="chip" key={g}>{g}</span>)}</div><p style={{color:"var(--fg-2)",lineHeight:1.55}}>{lang === "fr" ? "La communauté est ouverte aux utilisateurs de Claude qui veulent échanger des pratiques, apprendre et contribuer." : "The community is open to Claude users who want to share practices, learn, and contribute."}</p><a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact")}} className="btn btn-primary">{lang === "fr" ? "Rejoindre la conversation" : "Join the conversation"}<Icon name="arrow-right" size={15}/></a></div></aside></div></section>
    <style>{`@media(max-width:900px){.community-photo-strip,.community-story-grid{grid-template-columns:1fr!important}.case-facts{grid-template-columns:1fr 1fr!important}}`}</style>
  </main>;
}

function AboutPage({ lang, navigate }) {
  const ref = useReveal();
  const areas = lang === "fr" ? [
    ["01", "Former par la pratique", "Vibe Coding, build sprints et masterclasses à Bamako et en ligne pour des builders à travers l'Afrique."],
    ["02", "Faire vivre des communautés", "Des espaces comme Bamako Claude Community pour apprendre, partager et progresser entre pairs."],
    ["03", "Contribuer au dialogue public", "Des consultations sectorielles et nationales pour une IA responsable, inclusive et adaptée au Mali."],
    ["04", "Développer des partenariats", "Des collaborations autour de la technologie, du travail, de l'entrepreneuriat, de la créativité et du leadership."],
  ] : [
    ["01", "Train through practice", "Vibe Coding, build sprints, and masterclasses in Bamako and online for builders across Africa."],
    ["02", "Grow communities", "Spaces such as Bamako Claude Community for learning, sharing, and improving with peers."],
    ["03", "Contribute to public dialogue", "Sector and national consultations for AI that is responsible, inclusive, and grounded in Mali."],
    ["04", "Build partnerships", "Collaborations spanning technology, work, entrepreneurship, creativity, and leadership."],
  ];
  return <main ref={ref} data-screen-label="About"><section style={{padding:"120px 0 100px",background:"linear-gradient(180deg,var(--bg-subtle),white)"}}><div className="container-wide about-hero-grid" style={{display:"grid",gridTemplateColumns:"1.2fr 1fr",gap:64,alignItems:"center"}}><div><h1 className="reveal" style={{fontSize:"clamp(52px,7.5vw,108px)",lineHeight:.96,letterSpacing:"-.04em",margin:"0 0 24px"}}>{lang === "fr" ? <>Rendre l'IA <span style={{color:"var(--brand)"}}>accessible, utile et responsable</span>.</> : <>Making AI <span style={{color:"var(--brand)"}}>accessible, useful, and responsible</span>.</>}</h1><p className="lead reveal">{lang === "fr" ? "Basée au Mali, ImmersIA forme des builders à travers l'Afrique, anime des communautés d'apprentissage, contribue au dialogue public et travaille avec des organisations partenaires." : "Based in Mali, ImmersIA trains builders across Africa, runs learning communities, contributes to public dialogue, and works with partner organizations."}</p></div><div className="reveal"><PhotoPH src="assets/photos/alx-africa-builders-01.jpg" alt={lang === "fr" ? "Builders africains réunis pour une activité ImmersIA" : "African builders gathered for an ImmersIA session"} ratio="4/3" caption={lang === "fr" ? "Depuis le Mali, avec des builders à travers l'Afrique" : "From Mali, with builders across Africa"}/></div></div></section><section style={{padding:"110px 0",background:"white"}}><div className="container-wide"><div style={{maxWidth:760,marginBottom:48}}><h2 className="reveal" style={{margin:0}}>{lang === "fr" ? "Nos quatre domaines d'action." : "Our four areas of work."}</h2></div><div className="about-areas" style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",borderTop:"1px solid var(--line-1)"}}>{areas.map(([n,title,text],i)=><article className="reveal" key={n} style={{padding:"34px 30px",borderBottom:"1px solid var(--line-1)",borderRight:i%2===0?"1px solid var(--line-1)":"none"}}><div style={{fontSize:13,fontWeight:800,color:"var(--brand)",marginBottom:12}}>{n}</div><h3 style={{fontSize:28,margin:"0 0 10px"}}>{title}</h3><p style={{fontSize:16,lineHeight:1.55,color:"var(--fg-2)",margin:0}}>{text}</p></article>)}</div><div style={{marginTop:48,display:"flex",gap:14,flexWrap:"wrap"}}><a href="#event" onClick={(e)=>{e.preventDefault();navigate("event")}} className="btn btn-primary">{lang === "fr" ? "Voir nos réalisations" : "See our work"}<Icon name="arrow-right" size={15}/></a><a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact")}} className="btn btn-ghost">{lang === "fr" ? "Travailler avec nous" : "Work with us"}</a></div></div></section><style>{`@media(max-width:900px){.about-hero-grid,.about-areas{grid-template-columns:1fr!important}.about-areas article{border-right:none!important}}`}</style></main>;
}

function MediaPage({ lang, navigate }) {
  const ref = useReveal();
  const photos = lang === "fr" ? [
    ["assets/photos/vibe-coding-2025-cover.jpg", "Vibe Coding", "Voix d'un participant de l'édition 2025"],
    ["assets/photos/vibe-coding-certificates.jpg", "Vibe Coding", "Clôture et remise de certificats"],
    ["assets/photos/claude-community-audience.jpg", "Bamako Claude Community", "Une salle pleine au lancement · juin 2026"],
    ["assets/photos/claude-community-speaker.jpg", "Bamako Claude Community", "Présentation de cas d'usage concrets"],
    ["assets/photos/claude-community-group.jpg", "Bamako Claude Community", "La communauté réunie à Sotuba"],
    ["assets/photos/idia-consultation-room.jpg", "IDIA Mali", "Consultation nationale à l'APDP · février 2026"],
    ["assets/photos/idia-sector-voice.jpg", "IDIA Santé", "Contribution lors d'une consultation sectorielle"],
    ["assets/photos/repat-exchange.jpg", "Collaborations", "Échange sur l'IA et la transformation du travail avec REPAT Mali"],
    ["assets/photos/bamako-ai-participation.jpg", "Collaborations", "Participation au lancement de Bamako.ai Saison 3"],
    ["assets/photos/alx-africa-builders-02.jpg", "Builders à travers l'Afrique", "Session MVP avec ALX Ventures · plus de 130 entrepreneurs"],
    ["assets/photos/del-academy-group.jpg", "Programme DEL", "Numérique, anglais et leadership pour les jeunes femmes"],
  ] : [
    ["assets/photos/vibe-coding-2025-cover.jpg", "Vibe Coding", "A participant voice from the 2025 edition"],
    ["assets/photos/vibe-coding-certificates.jpg", "Vibe Coding", "Closing and certificate presentation"],
    ["assets/photos/claude-community-audience.jpg", "Bamako Claude Community", "A full room at the launch · June 2026"],
    ["assets/photos/claude-community-speaker.jpg", "Bamako Claude Community", "Presentation of practical use cases"],
    ["assets/photos/claude-community-group.jpg", "Bamako Claude Community", "The community gathered in Sotuba"],
    ["assets/photos/idia-consultation-room.jpg", "IDIA Mali", "National consultation at APDP · February 2026"],
    ["assets/photos/idia-sector-voice.jpg", "IDIA Health", "Contribution during an industry consultation"],
    ["assets/photos/repat-exchange.jpg", "Collaborations", "Exchange on AI and workplace transformation with REPAT Mali"],
    ["assets/photos/bamako-ai-participation.jpg", "Collaborations", "Participation in the Bamako.ai Season 3 launch"],
    ["assets/photos/alx-africa-builders-02.jpg", "Builders across Africa", "MVP session with ALX Ventures · 130+ entrepreneurs"],
    ["assets/photos/del-academy-group.jpg", "DEL Program", "Digital, English, and leadership for young women"],
  ];
  return <main ref={ref} data-screen-label="Media">
    <section style={{padding:"110px 0 80px",background:"var(--bg-subtle)"}}><div className="container-wide"><h1 className="reveal" style={{fontSize:"clamp(54px,8vw,112px)",lineHeight:.96,letterSpacing:"-.04em",margin:"0 0 22px",maxWidth:1000}}>{lang === "fr" ? <>Nos activités, <span style={{color:"var(--brand)"}}>en images</span>.</> : <>Our work, <span style={{color:"var(--brand)"}}>in pictures</span>.</>}</h1><p className="lead reveal" style={{maxWidth:720}}>{lang === "fr" ? "Des moments de nos formations, rencontres communautaires, consultations et collaborations." : "Moments from our training, community gatherings, consultations, and collaborations."}</p></div></section>
    <section style={{padding:"90px 0 120px",background:"white"}}><div className="container-wide"><div className="media-gallery" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>{photos.map(([src,title,caption],i)=><figure className="reveal" key={src} style={{margin:0,"--reveal-delay":`${(i%3)*60}ms`}}><PhotoPH src={src} alt={`${title} — ${caption}`} ratio={i%4===0?"4/5":"4/3"} caption={caption}/><figcaption style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:15,marginTop:10,color:"var(--fg-1)"}}>{title}</figcaption></figure>)}</div><div style={{marginTop:54}}><a href="#event" onClick={(e)=>{e.preventDefault();navigate("event")}} className="btn btn-primary">{lang === "fr" ? "Lire les histoires derrière les images" : "Read the stories behind the images"}<Icon name="arrow-right" size={15}/></a></div></div><style>{`@media(max-width:900px){.media-gallery{grid-template-columns:1fr 1fr!important}}@media(max-width:580px){.media-gallery{grid-template-columns:1fr!important}}`}</style></section>
  </main>;
}

Object.assign(window, { WorkPage, CommunityCasePage, AboutPage, MediaPage });