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

function EventCasePage({ lang, navigate }) {
  const ref = useReveal();
  const outcomes = lang === "fr" ? [
    "Des participants sans prérequis de programmation ont travaillé sur leurs propres idées.",
    "En 48 heures, ils ont réalisé des sites fonctionnels avec l'appui d'outils IA.",
    "La session a combiné pratique guidée, itération, entraide et présentation des résultats.",
  ] : [
    "Participants with no programming prerequisite worked on their own ideas.",
    "In 48 hours, they produced working websites with the help of AI tools.",
    "The session combined guided practice, iteration, peer support, and presentation of results.",
  ];
  const evidence = lang === "fr" ? [
    ["Première édition", "Des idées deviennent des prototypes concrets en 48 heures, dans une dynamique collective.", "2025"],
    ["Voix des participants", "ImmersIA publie le témoignage vidéo d'un participant et revient sur les résultats de cette première édition.", "Janvier 2026"],
    ["Édition suivante", "Une nouvelle cohorte réalise des sites fonctionnels en 48 heures et reçoit ses attestations.", "6–7 février 2026"],
  ] : [
    ["First edition", "Ideas become concrete prototypes in 48 hours through a collective, hands-on experience.", "2025"],
    ["Participant voices", "ImmersIA publishes a participant video and reflects on the results of that first edition.", "January 2026"],
    ["Next edition", "A new cohort produces working websites in 48 hours and receives certificates.", "February 6–7, 2026"],
  ];

  return <main ref={ref} data-screen-label="EventCase">
    <section style={{ position:"relative",overflow:"hidden",background:"linear-gradient(180deg,#0E0E13 0%,#1B1B22 100%)",color:"white",paddingTop:80,paddingBottom:96 }} className="bg-grain">
      <div aria-hidden style={{ position:"absolute",right:-40,top:-40 }}><Slashes size="min(40vw,480px)" color="rgba(196,181,253,.12)"/></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)",fontFamily:"var(--font-display)",fontSize:13,borderBottom:"none",marginBottom:32 }}><Icon name="chevron-right" size={14} style={{transform:"rotate(180deg)"}}/>{lang === "fr" ? "Toutes les réalisations" : "All work"}</a>
        <h1 className="reveal" style={{ fontFamily:"var(--font-display)",fontWeight:800,fontSize:"clamp(44px,6.5vw,96px)",lineHeight:.98,letterSpacing:"-.03em",margin:"0 0 24px",color:"white",textWrap:"balance",maxWidth:1100 }}>{lang === "fr" ? <>Vibe Coding&nbsp;: <span style={{color:"#A78BFA"}}>des idées aux sites fonctionnels en 48 heures</span>.</> : <>Vibe Coding: <span style={{color:"#A78BFA"}}>from ideas to working websites in 48 hours</span>.</>}</h1>
        <p className="reveal" style={{ fontFamily:"var(--font-display)",fontSize:"clamp(18px,1.3vw,22px)",lineHeight:1.5,color:"rgba(255,255,255,.78)",margin:"0 0 32px",maxWidth:760 }}>{lang === "fr" ? "ImmersIA a lancé Vibe Coding en 2025 : une expérience intensive où les participants apprennent l'IA en construisant un projet réel. Une nouvelle édition a suivi en février 2026." : "ImmersIA launched Vibe Coding in 2025: an intensive experience where participants learn AI by building a real project. A new edition followed in February 2026."}</p>
        <div className="case-facts reveal" style={{ display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:32,paddingTop:28,borderTop:"1px solid rgba(255,255,255,.18)",maxWidth:900 }}>{[
          ["calendar",lang === "fr" ? "Première édition" : "First edition","2025"],
          ["map-pin",lang === "fr" ? "Lieu" : "Location","ImmersIA · Sotuba"],
          ["calendar",lang === "fr" ? "Durée" : "Duration",lang === "fr" ? "2 jours" : "2 days"],
          ["sparkles",lang === "fr" ? "Prérequis" : "Prerequisite",lang === "fr" ? "Aucun" : "None"],
        ].map(([icon,l,v])=><div key={l} style={{display:"flex",gap:12,alignItems:"center"}}><div style={{width:36,height:36,borderRadius:10,background:"rgba(167,139,250,.18)",color:"#C4B5FD",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}><Icon name={icon} size={18}/></div><div><div style={{fontSize:11,fontFamily:"var(--font-display)",fontWeight:700,letterSpacing:".14em",textTransform:"uppercase",color:"rgba(255,255,255,.55)"}}>{l}</div><div style={{fontSize:16,fontFamily:"var(--font-display)",fontWeight:700,color:"white",marginTop:2}}>{v}</div></div></div>)}</div>
      </div>
    </section>

    <section style={{background:"var(--bg-canvas)",padding:"80px 0"}}><div className="container-wide photo-strip" style={{display:"grid",gridTemplateColumns:"1fr 2fr 1fr",gap:16}}><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" ? "Voix d'un participant · édition 2025" : "Participant voice · 2025 edition"}/></div><div className="reveal"><PhotoPH src="assets/photos/vibe-coding-workshop.jpg" alt={lang === "fr" ? "Participants au travail pendant l'édition suivante de Vibe Coding" : "Participants working during the following Vibe Coding edition"} ratio="16/10" caption={lang === "fr" ? "Édition suivante · février 2026" : "Following edition · February 2026"}/></div><div className="reveal"><PhotoPH src="assets/photos/vibe-coding-certificates.jpg" alt={lang === "fr" ? "Participants avec leurs certificats" : "Participants with their certificates"} ratio="1/1" caption={lang === "fr" ? "Clôture et attestations · 2026" : "Closing and certificates · 2026"}/></div></div></section>

    <section style={{padding:"80px 0 120px",background:"white"}}><div className="container-wide recap-grid" style={{display:"grid",gridTemplateColumns:"1.5fr 1fr",gap:80}}><article className="reveal"><span className="eyebrow-mark">{lang === "fr" ? "Étude de cas" : "Case study"}</span><h2 style={{marginTop:14}}>{lang === "fr" ? "Deux jours pour passer de l'idée à un site fonctionnel." : "Two days from idea to working website."}</h2><p style={{fontSize:18,lineHeight:1.6,color:"var(--fg-2)",marginTop:24}}>{lang === "fr" ? "La première édition de 2025 a posé les bases : partir des idées des participants, construire pendant deux journées et terminer avec des prototypes concrets. Les participants ont également cité l'apprentissage entre pairs parmi les points forts de l'atelier." : "The first edition in 2025 established the model: start from participants' ideas, build over two days, and finish with concrete prototypes. Participants also cited peer learning as one of the workshop's strengths."}</p><p style={{fontSize:18,lineHeight:1.6,color:"var(--fg-2)"}}>{lang === "fr" ? "L'édition des 6 et 7 février 2026 a repris ce format accessible sans prérequis de code. Les participants ont réalisé des sites fonctionnels en 48 heures avant de recevoir leurs attestations." : "The February 6–7, 2026 edition continued the same no-prerequisite format. Participants produced working websites in 48 hours before receiving their certificates."}</p><h3 style={{marginTop:40}}>{lang === "fr" ? "Ce que les participants accomplissent." : "What participants accomplish."}</h3><ul style={{listStyle:"none",padding:0,marginTop:24,display:"flex",flexDirection:"column",gap:18}}>{outcomes.map((p,i)=><li key={p} style={{display:"flex",gap:16,padding:"16px 20px",background:"var(--bg-subtle)",borderRadius:"var(--radius-lg)"}}><span style={{width:32,height:32,borderRadius:999,background:"var(--brand)",color:"white",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,fontWeight:800}}>{i+1}</span><span style={{fontFamily:"var(--font-display)",fontSize:16,lineHeight:1.5}}>{p}</span></li>)}</ul></article>
      <aside className="reveal"><div style={{position:"sticky",top:100,display:"flex",flexDirection:"column",gap:24}}><div style={{background:"white",border:"1px solid var(--line-1)",borderRadius:"var(--radius-xl)",padding:28}}><div style={{fontSize:11,fontFamily:"var(--font-display)",fontWeight:700,letterSpacing:".14em",textTransform:"uppercase",color:"var(--tagline)",marginBottom:22}}>{lang === "fr" ? "Format de l'atelier" : "Workshop format"}</div>{[["48h",lang === "fr" ? "pour produire des sites fonctionnels" : "to produce working websites"],["2",lang === "fr" ? "journées intensives" : "intensive days"],["0",lang === "fr" ? "prérequis de programmation" : "coding prerequisites"]].map(([n,l],i)=><div key={l} style={{display:"flex",alignItems:"flex-end",justifyContent:"space-between",padding:"14px 0",borderBottom:i<2?"1px solid var(--line-1)":"none"}}><span style={{fontSize:13,color:"var(--fg-2)",maxWidth:170}}>{l}</span><strong style={{fontSize:28,color:"var(--brand)"}}>{n}</strong></div>)}</div><div style={{background:"var(--brand)",color:"white",borderRadius:"var(--radius-xl)",padding:28}}><div style={{fontSize:11,fontFamily:"var(--font-display)",fontWeight:700,letterSpacing:".14em",textTransform:"uppercase",color:"rgba(255,255,255,.7)",marginBottom:14}}>{lang === "fr" ? "Pour votre communauté" : "For your community"}</div><p style={{lineHeight:1.5,color:"rgba(255,255,255,.85)"}}>{lang === "fr" ? "Ce format peut être adapté à une école, une équipe, une plateforme ou une communauté de builders." : "This format can be adapted for a school, team, platform, or builder community."}</p><a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact")}} className="btn btn-light btn-sm">{lang === "fr" ? "Nous contacter" : "Contact us"}</a></div></div></aside></div></section>

    <section style={{padding:"0 0 120px",background:"white"}}><div className="container-wide"><div style={{marginBottom:36,maxWidth:720}}><h2 className="reveal" style={{margin:0}}>{lang === "fr" ? "Vibe Coding, édition par édition." : "Vibe Coding, edition by edition."}</h2></div><div style={{display:"flex",flexDirection:"column"}}>{evidence.map(([label,text,date],i)=><div key={label} className="reveal press-row" style={{display:"grid",gridTemplateColumns:"180px 1fr 180px",gap:24,alignItems:"center",padding:"24px 0",borderTop:i===0?"1px solid var(--line-1)":"none",borderBottom:"1px solid var(--line-1)"}}><strong style={{fontSize:20,color:"var(--brand)"}}>{label}</strong><span style={{fontSize:17,lineHeight:1.4}}>{text}</span><span style={{fontSize:13,color:"var(--fg-3)"}}>{date}</span></div>)}</div></div></section>
    <style>{`@media(max-width:980px){.recap-grid{grid-template-columns:1fr!important}}@media(max-width:880px){.photo-strip{grid-template-columns:1fr!important}}@media(max-width:760px){.case-facts{grid-template-columns:1fr 1fr!important}.press-row{grid-template-columns:1fr!important}}`}</style>
  </main>;
}

Object.assign(window, { EventCasePage });
