// ATOM Center — Page: Programs
const ProgramsPage = ({ lang, navigate }) => {
  const [filter, setFilter] = useState("all");
  const [openId, setOpenId] = useState(null);
  const tr = (k) => t(lang, "programsPage." + k);

  // Catalog of certifications with detail blocks (FR / EN).
  // Each program ships a `detail` object: formats, sessions, included, prereq, planning.
  const FR = [
    {
      id: "toeic", fam: "lang", code: "TOEIC", title: "Test of English for International Communication",
      vendor: "ETS Global", level: "Tous niveaux (A1 → C2)", duration: "30 → 60 h",
      description: "La référence mondiale pour évaluer l'anglais professionnel utilisé en entreprise. Score chiffré de 10 à 990, opposable dans tous les processus RH internationaux.",
      detail: {
        formats: [
          { tag: "Individuel", title: "Passage individuel TOEIC", body: "Préparation 1-à-1 avec un formateur dédié. Calibrage initial, plan de remédiation personnalisé, 2 examens blancs, passage officiel sur session ETS. Idéal pour cadres et expatriés." },
          { tag: "Collectif", title: "Session entreprise (8 → 16 pers.)", body: "Cohorte calibrée par niveau CECRL. Présentiel + plateforme digitale ETS, 2 examens blancs collectifs, passage officiel sur site." },
          { tag: "Express", title: "Boost 30 h — passage rapide", body: "Pour candidats déjà au niveau B2+. Révision ciblée Listening / Reading, 2 examens blancs, passage en moins de 6 semaines." },
        ],
        sessions: [
          { day: "Cycle court", value: "30 h sur 4 semaines · 2 séances de 3h30 / semaine + e-learning" },
          { day: "Cycle standard", value: "45 h sur 8 semaines · 1 séance de 3h / semaine + 30 min de pratique quotidienne" },
          { day: "Cycle intensif", value: "60 h sur 6 semaines · 5 séances de 2h / semaine + immersion digitale" },
        ],
        included: [
          "Test de positionnement initial calibré CECRL",
          "Manuel officiel ETS + accès plateforme e-learning (12 semaines)",
          "Deux examens blancs corrigés et débriefés individuellement",
          "Passage officiel sur session ETS Global accréditée ATOM Center",
          "Certificat officiel ETS sous 10 jours ouvrés",
          "Bilan individuel de progression remis au stagiaire et à la DRH",
        ],
        prereq: "Aucun prérequis formel. Test de positionnement obligatoire en amont (gratuit, 30 min).",
        location: "Présentiel à Brazzaville · digital pour cohortes hors RC · examen officiel sur site ATOM Center",
      },
    },
    {
      id: "tfi", fam: "lang", code: "TFI", title: "Test de Français International",
      vendor: "ETS Global", level: "Tous niveaux", duration: "30 → 60 h",
      description: "Évaluation du français professionnel pour les locuteurs non natifs en environnement de travail. Score chiffré de 10 à 990.",
      detail: {
        formats: [
          { tag: "Individuel", title: "Passage individuel TFI", body: "Coaching 1-à-1 sur les compétences cibles : compréhension orale, lecture professionnelle, vocabulaire métier." },
          { tag: "Collectif", title: "Session entreprise multilingue", body: "Cohortes pour expatriés et cadres internationaux opérant en zone francophone." },
        ],
        sessions: [
          { day: "Cycle standard", value: "40 h sur 8 semaines + plateforme digitale ETS" },
          { day: "Cycle intensif", value: "60 h sur 6 semaines · immersion en français" },
        ],
        included: [
          "Diagnostic linguistique initial",
          "Manuel ETS + accès plateforme",
          "Deux examens blancs",
          "Passage officiel sur site",
          "Certificat ETS sous 10 jours",
        ],
        prereq: "Niveau A2 minimum recommandé. Test de positionnement gratuit.",
        location: "Présentiel ATOM Center Brazzaville · examen officiel sur site",
      },
    },
    {
      id: "bulats", fam: "lang", code: "BULATS", title: "Business Language Testing Service",
      vendor: "Cambridge Assessment", level: "Tous niveaux", duration: "20 → 40 h",
      description: "Test linguistique conçu pour les entreprises et leurs équipes commerciales et techniques. Évaluation rapide, score CECRL.",
      detail: {
        formats: [
          { tag: "Diagnostic", title: "Test de calibrage RH", body: "Évaluation rapide (1h) pour cartographier les niveaux d'une équipe avant un plan de formation." },
          { tag: "Collectif", title: "Préparation entreprise", body: "20 à 40 h de préparation ciblée sur les compétences métiers identifiées au diagnostic." },
        ],
        sessions: [
          { day: "Diagnostic seul", value: "1 h · résultats sous 48 h" },
          { day: "Préparation + passage", value: "20 h sur 4 semaines · présentiel + digital" },
        ],
        included: [
          "Test informatisé Cambridge",
          "Rapport individuel et consolidé RH",
          "Préparation ciblée par compétence",
          "Certificat Cambridge",
        ],
        prereq: "Aucun. Test ouvert à tous niveaux.",
        location: "Présentiel ou en ligne sur poste sécurisé",
      },
    },
    {
      id: "tosa-office", fam: "office", code: "TOSA Office", title: "Word, Excel, PowerPoint, Outlook",
      vendor: "Isograd · TOSA", level: "Initial → Expert", duration: "12 → 40 h",
      description: "Score chiffré de 0 à 1000 sur la suite Microsoft Office, opposable sur le CV. Standard de référence pour évaluer la maîtrise bureautique.",
      detail: {
        formats: [
          { tag: "Individuel", title: "Passage individuel TOSA Excel", body: "Le plus demandé. Coaching ciblé sur fonctions avancées, tableaux croisés, Power Query, VBA selon objectif de score." },
          { tag: "Collectif", title: "Session équipe (Word + Excel)", body: "Cohortes 6 à 12 personnes, calibrage initial puis remédiation par groupe de niveau." },
          { tag: "Audit", title: "Diagnostic flash bureautique", body: "Test de positionnement TOSA pour cartographier les niveaux d'une équipe avant tout plan de formation." },
        ],
        sessions: [
          { day: "Niveau Initial → Opérationnel", value: "12 h sur 3 semaines · 4 séances de 3 h" },
          { day: "Niveau Opérationnel → Avancé", value: "20 h sur 5 semaines + 10 h e-learning" },
          { day: "Niveau Avancé → Expert", value: "40 h sur 8 semaines · projets pratiques + simulation TOSA" },
        ],
        included: [
          "Test de positionnement TOSA initial",
          "Accès plateforme TOSA Digital (8 semaines)",
          "Supports pédagogiques officiels Isograd",
          "Examen blanc en conditions réelles",
          "Passage officiel TOSA sur poste sécurisé ATOM Center",
          "Certificat opposable + score numérique 0-1000",
        ],
        prereq: "Aucun. Le test étant adaptatif, il s'adresse à tous niveaux.",
        location: "Présentiel ATOM Center · passage sur poste TOSA sécurisé",
      },
    },
    {
      id: "tosa-google", fam: "office", code: "TOSA Google", title: "Google Workspace (Docs, Sheets, Slides)",
      vendor: "Isograd · TOSA", level: "Initial → Expert", duration: "12 → 30 h",
      description: "Certification complète de l'environnement Google Workspace pour les équipes en cloud-first. Format identique au TOSA Office.",
      detail: {
        formats: [
          { tag: "Individuel", title: "Passage individuel TOSA Sheets", body: "Coaching sur formules avancées, App Script, intégration Looker Studio." },
          { tag: "Collectif", title: "Session équipe Workspace", body: "Onboarding cohorte sur Docs, Sheets, Slides, Gmail avancé, Drive." },
        ],
        sessions: [
          { day: "Onboarding équipe", value: "12 h sur 3 semaines" },
          { day: "Cycle complet", value: "30 h sur 6 semaines + projet final" },
        ],
        included: [
          "Test de positionnement TOSA",
          "Plateforme TOSA Digital",
          "Supports Isograd",
          "Examen blanc",
          "Passage officiel TOSA sur poste sécurisé",
          "Score 0-1000 opposable",
        ],
        prereq: "Aucun.",
        location: "Présentiel ATOM Center",
      },
    },
    {
      id: "tosa-adobe", fam: "office", code: "TOSA Adobe", title: "Photoshop, Illustrator, InDesign",
      vendor: "Isograd · TOSA", level: "Initial → Expert", duration: "20 → 60 h",
      description: "Certification créative pour designers, communicants et équipes marketing. Validation par logiciel ou parcours combiné.",
      detail: {
        formats: [
          { tag: "Individuel", title: "Passage individuel TOSA Photoshop / Illustrator / InDesign", body: "Un logiciel à la fois, coaching projet-based avec un formateur certifié." },
          { tag: "Combiné", title: "Parcours Designer (3 logiciels)", body: "60 h pour valider Photoshop + Illustrator + InDesign sur un cycle unique." },
        ],
        sessions: [
          { day: "Logiciel unique", value: "20 h sur 5 semaines" },
          { day: "Parcours Designer", value: "60 h sur 12 semaines + portfolio final" },
        ],
        included: [
          "Plateforme TOSA Digital",
          "Briefs créatifs réels (livrets, affiches, retouches)",
          "Examen blanc par logiciel",
          "Passage officiel sur poste sécurisé",
          "Score 0-1000 par logiciel",
        ],
        prereq: "Aucun pour le niveau initial. Niveau Avancé+ recommande une pratique préalable.",
        location: "Présentiel ATOM Center",
      },
    },
    {
      id: "tosa-cad", fam: "office", code: "TOSA AutoCAD / Revit", title: "Conception assistée par ordinateur",
      vendor: "Isograd · TOSA", level: "Avancé", duration: "30 → 60 h",
      description: "Certifications techniques pour architectes, BTP et bureaux d'études.",
      detail: {
        formats: [
          { tag: "Individuel", title: "Passage individuel AutoCAD ou Revit", body: "Coaching projet-based aligné sur les livrables métier (plans, coupes, BIM)." },
          { tag: "Bureau d'études", title: "Cohorte technique", body: "Préparation collective pour BET et cabinets d'architecture." },
        ],
        sessions: [
          { day: "AutoCAD avancé", value: "30 h sur 6 semaines" },
          { day: "Revit / BIM", value: "60 h sur 10 semaines" },
        ],
        included: [
          "Licences temporaires logiciels",
          "Projet métier réel à livrer",
          "Examen blanc",
          "Passage officiel TOSA sur poste sécurisé",
          "Certificat + score 0-1000",
        ],
        prereq: "Pratique antérieure recommandée. Test de positionnement obligatoire.",
        location: "Présentiel ATOM Center · poste équipé",
      },
    },
    {
      id: "leadership", fam: "mgmt", code: "Leadership", title: "Management d'équipe & projet",
      vendor: "LRMG · ATOM Center", level: "Cadres & managers", duration: "16 → 40 h",
      description: "Programme blended sur la posture managériale, la conduite de projet et la prise de décision.",
      detail: {
        formats: [
          { tag: "Individuel", title: "Coaching dirigeant", body: "Coaching 1-à-1 avec un partner LRMG senior, 8 séances de 90 min sur 4 mois." },
          { tag: "Collectif", title: "Académie managers", body: "Cohorte 8-15 personnes, blended learning sur 3 à 6 mois." },
        ],
        sessions: [
          { day: "Format court", value: "16 h sur 2 semaines · présentiel intensif" },
          { day: "Format académie", value: "40 h sur 12 semaines · blended + projet" },
        ],
        included: [
          "Diagnostic 360° en amont",
          "Modules LRMG officiels",
          "Études de cas africaines",
          "Coaching individuel mensuel",
          "Attestation ATOM Center · LRMG",
        ],
        prereq: "Posture managériale réelle ou imminente.",
        location: "Présentiel Brazzaville + digital",
      },
    },
    {
      id: "softskills", fam: "mgmt", code: "Soft Skills", title: "Communication, négociation, prise de parole",
      vendor: "SkillSoft · ATOM Center", level: "Tous niveaux", duration: "8 → 24 h",
      description: "Modules courts et intensifs pour transformer les pratiques relationnelles et commerciales.",
      detail: {
        formats: [
          { tag: "Atelier", title: "Atelier 1 jour", body: "Format flash sur une compétence ciblée (ex. pitch, négociation, gestion de conflit)." },
          { tag: "Parcours", title: "Parcours soft skills 24 h", body: "3 modules combinés sur 3 mois, coaching individuel inclus." },
        ],
        sessions: [
          { day: "Atelier", value: "8 h en 1 journée" },
          { day: "Parcours complet", value: "24 h sur 12 semaines + 2 séances coaching" },
        ],
        included: [
          "Plateforme SkillSoft",
          "Vidéos de mise en situation",
          "Coaching individuel",
          "Attestation ATOM Center",
        ],
        prereq: "Aucun.",
        location: "Présentiel ou digital",
      },
    },
    {
      id: "agile", fam: "mgmt", code: "Agile / IT PM", title: "Pilotage de projet IT",
      vendor: "ATOM Center", level: "Chefs de projet", duration: "20 → 40 h",
      description: "Méthodes agiles, gouvernance projet, outillage et reporting pour les équipes IT en transformation.",
      detail: {
        formats: [
          { tag: "Cohorte", title: "Académie IT PM", body: "Cohorte 8-12 personnes, scénarios projets réels, jeux de rôle gouvernance." },
          { tag: "Sur-mesure", title: "Programme entreprise", body: "Conçu sur la base de votre PMO existant, livrables alignés sur vos templates." },
        ],
        sessions: [
          { day: "Initiation Agile", value: "20 h sur 5 semaines" },
          { day: "Académie complète", value: "40 h sur 10 semaines + projet d'audit PMO" },
        ],
        included: [
          "Méthodes Scrum, Kanban, SAFe (overview)",
          "Outillage Jira, Asana, Notion",
          "Templates reporting projet",
          "Attestation ATOM Center",
        ],
        prereq: "Expérience projet d'au moins 12 mois.",
        location: "Présentiel + digital",
      },
    },
  ];

  // Lighter EN catalog (mirror keys, FR-only detail kept terse for EN)
  const EN = FR.map(p => ({
    ...p,
    title: ({
      "toeic": "Test of English for International Communication",
      "tfi": "Test de Français International",
      "bulats": "Business Language Testing Service",
      "tosa-office": "Word, Excel, PowerPoint, Outlook",
      "tosa-google": "Google Workspace (Docs, Sheets, Slides)",
      "tosa-adobe": "Photoshop, Illustrator, InDesign",
      "tosa-cad": "Computer-aided design",
      "leadership": "Team & project management",
      "softskills": "Communication, negotiation, public speaking",
      "agile": "IT project management",
    })[p.id],
    level: ({
      "toeic": "All levels (A1 → C2)", "tfi": "All levels", "bulats": "All levels",
      "tosa-office": "Beginner → Expert", "tosa-google": "Beginner → Expert",
      "tosa-adobe": "Beginner → Expert", "tosa-cad": "Advanced",
      "leadership": "Managers & executives", "softskills": "All levels", "agile": "Project managers",
    })[p.id],
  }));

  const programs = lang === "fr" ? FR : EN;
  const filtered = filter === "all" ? programs : programs.filter(p => p.fam === filter);
  const colors = { lang: "var(--center-blue)", office: "#F87808", mgmt: "#6848A8" };

  return (
    <>
      <header className="page-header">
        <div className="container">
          <div className="breadcrumb">{t(lang,"nav.home")} <span>/</span> {tr("breadcrumb")}</div>
          <h1>{tr("titleA")} <span className="accent">{tr("titleB")}</span> {tr("titleC")}</h1>
          <p className="page-sub">{tr("sub")}</p>
        </div>
      </header>

      <section>
        <div className="container">
          {/* Filter tabs */}
          <div style={{display:"flex", gap:8, marginBottom:48, flexWrap:"wrap"}}>
            {[
              {id:"all", label:tr("filterAll")},
              {id:"lang", label:tr("filterLang")},
              {id:"office", label:tr("filterOffice")},
              {id:"mgmt", label:tr("filterMgmt")},
            ].map(f => (
              <button key={f.id} onClick={() => setFilter(f.id)}
                className={"btn btn-sm " + (filter === f.id ? "btn-dark" : "btn-ghost")}>
                {f.label}
              </button>
            ))}
          </div>

          <div className="programs-grid" style={{gridTemplateColumns:"repeat(auto-fit, minmax(320px, 1fr))"}}>
            {filtered.map((p) => {
              const isOpen = openId === p.id;
              return (
                <div key={p.id} className={"program-card" + (isOpen ? " program-card-open" : "")}>
                  <div className="program-card-head" style={{background: colors[p.fam]}}>
                    <span className="program-badge">{p.code}</span>
                    <h3>{p.title}</h3>
                    <div className="program-vendor">{p.vendor}</div>
                  </div>
                  <div className="program-card-body">
                    <p style={{margin:0, fontSize:14, lineHeight:1.55, color:"var(--fg-2)"}}>{p.description}</p>
                  </div>
                  <div className="program-card-foot">
                    <div className="program-meta">
                      <span><Icon name="clock" size={13}/>{p.duration}</span>
                      <span><Icon name="award" size={13}/>{p.level}</span>
                    </div>
                    <button className="program-detail-toggle" onClick={() => setOpenId(isOpen ? null : p.id)}>
                      {isOpen
                        ? (lang === "fr" ? "Masquer le détail" : "Hide details")
                        : (lang === "fr" ? "Voir le détail" : "View details")}
                      <Icon name={isOpen ? "x" : "chevron-down"} size={13}/>
                    </button>
                  </div>
                </div>
              );
            })}
          </div>

          {/* Inline detail panel — shown below the grid for the open card */}
          {openId && (() => {
            const p = programs.find(x => x.id === openId);
            if (!p) return null;
            const accent = colors[p.fam];
            return (
              <div className="program-detail" style={{borderTop: `4px solid ${accent}`}}>
                <div className="program-detail-head">
                  <div>
                    <span className="program-detail-eyebrow" style={{color: accent}}>
                      {lang === "fr" ? "Détail du programme" : "Program detail"} · {p.code}
                    </span>
                    <h2 className="h-display-2" style={{margin:"8px 0 12px"}}>{p.title}</h2>
                    <p style={{maxWidth:"60ch", color:"var(--fg-2)", fontSize:16, lineHeight:1.55, margin:0}}>{p.description}</p>
                  </div>
                  <button className="btn btn-ghost btn-sm" onClick={() => setOpenId(null)}>
                    <Icon name="x" size={14}/> {lang === "fr" ? "Fermer" : "Close"}
                  </button>
                </div>

                {/* Formats */}
                <div className="program-detail-block">
                  <h4 className="program-detail-h4">
                    {lang === "fr" ? "Formats de passage" : "Session formats"}
                  </h4>
                  <div className="format-grid">
                    {p.detail.formats.map((f, i) => (
                      <div key={i} className="format-card">
                        <span className="format-tag" style={{color: accent, borderColor: accent}}>{f.tag}</span>
                        <h5>{f.title}</h5>
                        <p>{f.body}</p>
                      </div>
                    ))}
                  </div>
                </div>

                {/* Sessions table */}
                <div className="program-detail-block">
                  <h4 className="program-detail-h4">
                    {lang === "fr" ? "Cycles & cadences" : "Cycles & schedules"}
                  </h4>
                  <div className="cycles-table">
                    {p.detail.sessions.map((s, i) => (
                      <div key={i} className="cycles-row">
                        <div className="cycles-day">{s.day}</div>
                        <div className="cycles-value">{s.value}</div>
                      </div>
                    ))}
                  </div>
                </div>

                {/* What's included */}
                <div className="program-detail-grid">
                  <div className="program-detail-block">
                    <h4 className="program-detail-h4">
                      {lang === "fr" ? "Ce qui est inclus" : "What's included"}
                    </h4>
                    <ul className="included-list">
                      {p.detail.included.map((it, i) => (
                        <li key={i}>
                          <span className="included-tick" style={{color: accent}}><Icon name="check" size={14}/></span>
                          <span>{it}</span>
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div className="program-detail-block">
                    <h4 className="program-detail-h4">
                      {lang === "fr" ? "Modalités pratiques" : "Practical info"}
                    </h4>
                    <dl className="practical-dl">
                      <dt>{lang === "fr" ? "Prérequis" : "Prerequisites"}</dt>
                      <dd>{p.detail.prereq}</dd>
                      <dt>{lang === "fr" ? "Lieu & passage" : "Location & exam"}</dt>
                      <dd>{p.detail.location}</dd>
                      <dt>{lang === "fr" ? "Niveau" : "Level"}</dt>
                      <dd>{p.level}</dd>
                      <dt>{lang === "fr" ? "Durée" : "Duration"}</dt>
                      <dd>{p.duration}</dd>
                    </dl>
                  </div>
                </div>

                <div className="program-detail-cta">
                  <a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact");}}
                     className="btn btn-primary btn-lg">
                    {lang === "fr" ? "Demander un devis pour ce programme" : "Request a quote for this program"}
                    <Icon name="arrow-right" size={14}/>
                  </a>
                  <span style={{fontSize:13, color:"var(--fg-3)"}}>
                    {lang === "fr"
                      ? "Réponse sous 48 h ouvrées · pas de pricing public"
                      : "48h response · no public pricing"}
                  </span>
                </div>
              </div>
            );
          })()}

          <div style={{textAlign:"center", marginTop:64}}>
            <a href="#contact" onClick={(e)=>{e.preventDefault();navigate("contact");}} className="btn btn-primary btn-lg">
              <Icon name="download" size={14}/> {tr("ctaCatalog")}
            </a>
          </div>
        </div>
      </section>

      {/* SOFT SKILLS CATALOG */}
      <section className="softskills-section section-grey">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow eyebrow-blue">{t(lang, "softskills.eyebrow")}</span>
            <h2 className="h-display-2">{t(lang, "softskills.title")}</h2>
            <p className="lead">{t(lang, "softskills.sub")}</p>
          </div>
          <div className="softskills-grid">
            {t(lang, "softskills.cats").map((c, i) => (
              <div key={i} className="softskill-card">
                <div className="softskill-count">{c.count}</div>
                <h4>{c.title}</h4>
                <p>{c.body}</p>
              </div>
            ))}
          </div>
          <div className="softskill-cta">
            <p className="softskill-cta-text">{t(lang, "softskills.ctaText")}</p>
            <a href="#contact" onClick={(e) => { e.preventDefault(); navigate("contact"); }} className="btn btn-primary btn-lg">
              <Icon name="download" size={14}/> {t(lang, "softskills.cta")}
            </a>
          </div>
        </div>
      </section>

      <CtaSection lang={lang} navigate={navigate}/>
    </>
  );
};

window.ProgramsPage = ProgramsPage;