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

function ProgramPage({ lang, navigate }) {
  const ref = useReveal();
  const practices = lang === "fr" ? [
    { n: "01", t: "Partir d'un besoin réel", d: "Choisir une idée utile, clarifier à qui elle sert et définir une première version réalisable." },
    { n: "02", t: "Construire avec l'IA", d: "Transformer l'idée en site, application, automatisation ou outil en guidant les assistants IA." },
    { n: "03", t: "Tester et corriger", d: "Faire fonctionner le produit, résoudre les erreurs et améliorer l'expérience à partir de retours concrets." },
    { n: "04", t: "Mettre en ligne", d: "Publier une version utilisable et apprendre à continuer après la session." },
  ] : [
    { n: "01", t: "Start with a real need", d: "Choose a useful idea, clarify who it serves, and define a first version that can be built." },
    { n: "02", t: "Build with AI", d: "Turn the idea into a website, app, automation, or tool by directing AI assistants." },
    { n: "03", t: "Test and improve", d: "Make the product work, resolve errors, and improve the experience through real feedback." },
    { n: "04", t: "Ship it", d: "Publish a usable version and learn how to keep building after the session." },
  ];

  const formats = lang === "fr" ? [
    { icon: "sparkles", title: "Vibe Coding", text: "Un format de deux jours lancé en 2025. Les participants transforment leurs idées en prototypes et sites fonctionnels en 48 heures, sans prérequis de code." },
    { icon: "rocket", title: "Build Sprints", text: "Des sessions concentrées pour créer et déployer. Le Replit Build Sprint du 31 juillet 2026 porte sur une app, un site ou un outil construit dans l'après-midi." },
    { icon: "globe", title: "Masterclasses pratiques", text: "Des formats en ligne sur la création d'applications IA, NotebookLM et Zapier + IA. La session du 25 juin a réuni environ 50 personnes pendant plus d'une heure." },
  ] : [
    { icon: "sparkles", title: "Vibe Coding", text: "A two-day format launched in 2025. Participants turn their ideas into prototypes and working websites in 48 hours, with no coding prerequisite." },
    { icon: "rocket", title: "Build Sprints", text: "Focused sessions for building and deploying. The July 31, 2026 Replit Build Sprint centers on creating an app, site, or tool in one afternoon." },
    { icon: "globe", title: "Practical masterclasses", text: "Online formats covering AI app building, NotebookLM, and Zapier + AI. The June 25 session brought together about 50 people for more than an hour." },
  ];

  return (
    <main ref={ref} data-screen-label="Program">
      <section style={{ position: "relative", overflow: "hidden", background: "linear-gradient(180deg,#fff 0%,var(--bg-subtle) 100%)", paddingTop: 80, paddingBottom: 96 }}>
        <div aria-hidden style={{ position: "absolute", right: -40, top: 40 }}><Slashes size="min(36vw, 380px)" color="rgba(124,58,237,0.10)"/></div>
        <div className="container-wide" style={{ position: "relative", zIndex: 2 }}>
          <div className="prog-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <h1 className="reveal" style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(48px,7vw,104px)", lineHeight: .95, letterSpacing: "-.04em", margin: "0 0 24px", color: "var(--fg-1)", textWrap: "balance" }}>
                {lang === "fr" ? <>Apprendre l'IA en <span style={{ color: "var(--brand)" }}>construisant</span>.</> : <>Learn AI by <span style={{ color: "var(--brand)" }}>building</span>.</>}
              </h1>
              <p className="reveal lead" style={{ maxWidth: 600, marginBottom: 32 }}>{lang === "fr" ? "À Bamako et en ligne à travers l'Afrique, nos formations font passer les participants de l'idée à quelque chose qui fonctionne. Vibe Coding, build sprints et masterclasses : moins de théorie, plus de pratique guidée." : "In Bamako and online across Africa, our programs move participants from an idea to something that works. Vibe Coding, build sprints, and masterclasses: less theory, more guided practice."}</p>
              <div className="reveal" style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
                <a href="#vibe" onClick={(e)=>{e.preventDefault();navigate("vibe")}} className="btn btn-primary">{lang === "fr" ? "Voir le cas Vibe Coding" : "See the Vibe Coding case"}<Icon name="arrow-right" size={16} className="arrow"/></a>
                <a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact")}} className="btn btn-ghost">{lang === "fr" ? "Former une équipe" : "Train a team"}</a>
              </div>
            </div>
            <div className="reveal"><PhotoPH src="assets/photos/vibe-coding-2025-cover.jpg" alt={lang === "fr" ? "Participant témoignant après la première édition Vibe Coding" : "Participant sharing his experience after the first Vibe Coding edition"} ratio="4/5" position="center top" caption={lang === "fr" ? "Vibe Coding · première édition 2025" : "Vibe Coding · first edition, 2025"}/></div>
          </div>
          <div className="prog-facts reveal" style={{ marginTop: 64, display: "grid", gridTemplateColumns: "repeat(4,1fr)", border: "1px solid var(--line-1)", borderRadius: "var(--radius-xl)", background: "white", overflow: "hidden" }}>
            {[
              ["calendar", lang === "fr" ? "Première édition" : "First edition", "2025"],
              ["calendar", lang === "fr" ? "Format Vibe Coding" : "Vibe Coding format", lang === "fr" ? "2 jours · 9h–16h" : "2 days · 9am–4pm"],
              ["map-pin", lang === "fr" ? "Lieu" : "Location", "Sotuba ACI · Bamako"],
              ["sparkles", lang === "fr" ? "Prérequis" : "Prerequisite", lang === "fr" ? "Aucun code requis" : "No coding required"],
            ].map(([icon,l,v],i)=><div key={l} style={{ padding: 24, borderRight: i<3 ? "1px solid var(--line-1)" : "none", display: "flex", alignItems: "center", gap: 14 }}><div style={{ width:40,height:40,borderRadius:10,background:"var(--purple-50)",color:"var(--brand)",display:"flex",alignItems:"center",justifyContent:"center" }}><Icon name={icon} size={18}/></div><div><div style={{ fontSize:11,fontFamily:"var(--font-display)",fontWeight:700,letterSpacing:".12em",textTransform:"uppercase",color:"var(--fg-3)" }}>{l}</div><div style={{ fontSize:16,fontFamily:"var(--font-display)",fontWeight:700,color:"var(--fg-1)",marginTop:2 }}>{v}</div></div></div>)}
          </div>
        </div>
      </section>

      <section style={{ padding:"120px 0",background:"#111118",color:"white" }}><div className="container-wide program-africa-grid" style={{ display:"grid",gridTemplateColumns:"1.05fr 1fr",gap:70,alignItems:"center" }}><div><h2 className="reveal" style={{ color:"white",margin:"0 0 22px" }}>{lang === "fr" ? "De Bamako aux builders de toute l'Afrique." : "From Bamako to builders across Africa."}</h2><p className="reveal lead" style={{ color:"rgba(255,255,255,.78)",marginBottom:22 }}>{lang === "fr" ? "Avec ALX Ventures, ImmersIA a animé une session sur la création de MVP sans code, en low-code et avec l'IA pour plus de 130 entrepreneurs à travers le continent." : "With ALX Ventures, ImmersIA delivered a session on no-code, low-code, and AI-powered MVP building for more than 130 entrepreneurs across the continent."}</p><p className="reveal" style={{ fontSize:17,lineHeight:1.65,color:"rgba(255,255,255,.7)",marginBottom:30 }}>{lang === "fr" ? "ImmersIA a également animé « Making AI Work With Your Data » pour de jeunes leaders, entrepreneurs et fondateurs réunis par One Young World. Ces formats montrent comment nous adaptons l'apprentissage pratique à des publics répartis dans plusieurs pays." : "ImmersIA also delivered ‘Making AI Work With Your Data’ for young leaders, entrepreneurs, and startup founders convened by One Young World. These formats show how we adapt practical learning for audiences spanning multiple countries."}</p><a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact")}} className="btn btn-light reveal">{lang === "fr" ? "Former une communauté" : "Train a community"}<Icon name="arrow-right" size={16}/></a></div><div className="reveal" style={{ display:"grid",gridTemplateColumns:"1.15fr .85fr",gap:14,alignItems:"end" }}><PhotoPH src="assets/photos/alx-africa-builders-01.jpg" alt={lang === "fr" ? "Participants africains à une formation en ligne sur les MVP" : "African participants in an online MVP-building session"} ratio="4/3" caption={lang === "fr" ? "ALX Ventures · plus de 130 entrepreneurs" : "ALX Ventures · 130+ entrepreneurs"}/><PhotoPH src="assets/photos/alx-africa-builders-04.jpg" alt={lang === "fr" ? "Cadre de réussite d'un MVP présenté aux builders" : "MVP success framework presented to builders"} ratio="4/5" caption={lang === "fr" ? "Problème, produit, personnes et progression" : "Problem, product, people, and progress"}/></div></div></section>

      <section style={{ padding: "120px 0", background: "white" }}><div className="container-wide"><div style={{ marginBottom:48,maxWidth:720 }}><h2 className="reveal" style={{ margin:0 }}>{lang === "fr" ? "Quatre étapes, de l'idée à la mise en ligne." : "Four steps from idea to launch."}</h2></div><div className="curr-grid" style={{ display:"grid",gridTemplateColumns:"1fr 2fr",borderTop:"1px solid var(--line-1)" }}>{practices.map((m,i)=><React.Fragment key={m.n}><div className="reveal" style={{ padding:"32px 24px 32px 0",borderBottom:"1px solid var(--line-1)" }}><div style={{ fontFamily:"var(--font-display)",fontWeight:800,fontSize:56,color:"var(--purple-200)",lineHeight:1 }}>{m.n}</div></div><div className="reveal" style={{ padding:"32px 0",borderBottom:"1px solid var(--line-1)" }}><h3 style={{ fontSize:24,margin:"0 0 8px" }}>{m.t}</h3><p style={{ fontSize:16,color:"var(--fg-2)",lineHeight:1.5,margin:0,maxWidth:720 }}>{m.d}</p></div></React.Fragment>)}</div></div></section>

      <section style={{ padding: "120px 0", background: "var(--bg-subtle)" }}><div className="container-wide"><div style={{ marginBottom:48,maxWidth:760 }}><span className="eyebrow-mark reveal">{lang === "fr" ? "Formats" : "Formats"}</span><h2 className="reveal" style={{ marginTop:14 }}>{lang === "fr" ? "Du premier essai au produit déployé." : "From first attempt to deployed product."}</h2></div><div className="fac-grid" style={{ display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:20 }}>{formats.map((f,i)=><article key={f.title} className="reveal" style={{ background:"white",border:"1px solid var(--line-1)",borderRadius:"var(--radius-xl)",padding:28 }}><div style={{ width:52,height:52,borderRadius:999,background:"var(--brand)",color:"white",display:"flex",alignItems:"center",justifyContent:"center",marginBottom:20 }}><Icon name={f.icon} size={22}/></div><h3 style={{ margin:"0 0 10px",fontSize:22 }}>{f.title}</h3><p style={{ margin:0,color:"var(--fg-2)",lineHeight:1.55 }}>{f.text}</p></article>)}</div></div></section>

      <section style={{ padding:"100px 0",background:"white" }}><div className="container-wide"><div className="reveal" style={{ display:"grid",gridTemplateColumns:"1fr 1fr",gap:24 }}><PhotoPH src="assets/photos/vibe-coding-facilitator.jpg" alt={lang === "fr" ? "Session de facilitation Vibe Coding" : "Vibe Coding facilitation session"} ratio="16/10" caption={lang === "fr" ? "Accompagnement pratique pendant la session" : "Hands-on guidance during the session"}/><PhotoPH src="assets/photos/vibe-coding-certificates.jpg" alt={lang === "fr" ? "Participants tenant leurs certificats Vibe Coding" : "Participants holding their Vibe Coding certificates"} ratio="16/10" caption={lang === "fr" ? "Clôture et certificats · février 2026" : "Closing and certificates · February 2026"}/></div></div></section>

      <section style={{ position:"relative",overflow:"hidden",background:"linear-gradient(135deg,#2E1065 0%,#5B21B6 60%,#7C3AED 100%)",color:"white",padding:"110px 0" }} className="bg-grain"><div className="container-wide" style={{ position:"relative",zIndex:2,display:"flex",justifyContent:"space-between",alignItems:"center",gap:40,flexWrap:"wrap" }}><div className="reveal" style={{ maxWidth:720 }}><span className="eyebrow-mark on-purple">{lang === "fr" ? "Partenariats de formation" : "Training partnerships"}</span><h2 style={{ color:"white",margin:"14px 0 16px" }}>{lang === "fr" ? "Vous avez des builders à faire progresser ?" : "Have builders you want to develop?"}</h2><p style={{ color:"rgba(255,255,255,.82)",fontSize:18,margin:0 }}>{lang === "fr" ? "Nous adaptons ces formats aux communautés, écoles, équipes et plateformes qui veulent apprendre en construisant." : "We adapt these formats for communities, schools, teams, and platforms that want to learn by building."}</p></div><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}/></a></div></section>
      <style>{`@media(max-width:980px){.prog-hero-grid,.program-africa-grid{grid-template-columns:1fr!important}.prog-facts{grid-template-columns:1fr 1fr!important}.fac-grid{grid-template-columns:1fr!important}}@media(max-width:620px){.prog-facts,.curr-grid{grid-template-columns:1fr!important}.prog-facts>div{border-right:none!important;border-bottom:1px solid var(--line-1)}}`}</style>
    </main>
  );
}

Object.assign(window, { ProgramPage });
