// ATOM Center — Page: Blog
const BlogPage = ({ lang, navigate }) => {
  const [filter, setFilter] = useState("all");
  const tr = (k) => t(lang, "blog." + k);

  // Photos — Unsplash (free-to-use editorial). Each chosen for relevance to the post.
  const photos = [
    "https://images.unsplash.com/photo-1552581234-26160f608093?w=900&q=70&auto=format&fit=crop", // meeting / training
    "https://images.unsplash.com/photo-1518770660439-4636190af475?w=900&q=70&auto=format&fit=crop", // tech / circuit
    "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=900&q=70&auto=format&fit=crop", // analytics / reporting
    "https://images.unsplash.com/photo-1523805009345-7448845a9e53?w=900&q=70&auto=format&fit=crop", // africa map / globe
    "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=900&q=70&auto=format&fit=crop", // laptop / blended
    "https://images.unsplash.com/photo-1434030216411-0b793f4b4173?w=900&q=70&auto=format&fit=crop", // english books / study
  ];

  const posts = lang === "fr" ? [
    { cat: "method", catLabel: "Méthodologie", date: "12 mars 2026", title: "Comment structurer un plan de formation linguistique pour 50 collaborateurs", excerpt: "Cadrage RH, choix de référentiel, blended learning : retour d'expérience d'un déploiement TOEIC pour un groupe industriel.", color: "#1A3DA0", img: photos[0] },
    { cat: "cert", catLabel: "Certifications", date: "28 février 2026", title: "TOSA vs PCIE : quel standard choisir pour vos équipes ?", excerpt: "Comparatif honnête de deux référentiels bureautiques majeurs, avec recommandations selon le profil de l'entreprise.", color: "#F87808", img: photos[1] },
    { cat: "b2b", catLabel: "Entreprises", date: "15 février 2026", title: "Reporting RH : ce que la DRH attend vraiment d'un centre de formation", excerpt: "Au-delà du taux de réussite, quels indicateurs livrer pour mesurer l'impact réel d'un dispositif de formation.", color: "#6848A8", img: photos[2] },
    { cat: "afrique", catLabel: "Afrique", date: "30 janvier 2026", title: "Certifications internationales en Afrique centrale : l'état du marché 2026", excerpt: "Cartographie des centres agréés, des bassins de talents et des dispositifs publics dans la sous-région.", color: "#284838", img: photos[3] },
    { cat: "method", catLabel: "Méthodologie", date: "18 janvier 2026", title: "Le blended learning a-t-il tenu ses promesses pour les actifs en poste ?", excerpt: "Analyse de 3 ans de déploiement de parcours blended sur des populations professionnelles en activité.", color: "#1A3DA0", img: photos[4] },
    { cat: "cert", catLabel: "Certifications", date: "5 janvier 2026", title: "TOEIC 990 : pourquoi le score parfait n'est pas l'objectif de tout le monde", excerpt: "Lecture pragmatique du barème TOEIC selon les fonctions et les industries.", color: "#1A3DA0", img: photos[5] },
  ] : [
    { cat: "method", catLabel: "Methodology", date: "March 12, 2026", title: "How to structure a language training plan for 50 employees", excerpt: "HR framing, framework choice, blended learning: feedback from a TOEIC rollout for an industrial group.", color: "#1A3DA0", img: photos[0] },
    { cat: "cert", catLabel: "Certifications", date: "February 28, 2026", title: "TOSA vs PCIE: which standard for your teams?", excerpt: "Honest comparison of two major office certification frameworks, with recommendations by company profile.", color: "#F87808", img: photos[1] },
    { cat: "b2b", catLabel: "Enterprise", date: "February 15, 2026", title: "HR reporting: what direction really expects from a training center", excerpt: "Beyond success rate, which indicators to deliver to measure the real impact of a training program.", color: "#6848A8", img: photos[2] },
    { cat: "afrique", catLabel: "Africa", date: "January 30, 2026", title: "International certifications in Central Africa: 2026 market state", excerpt: "Mapping of accredited centers, talent pools and public programs in the sub-region.", color: "#284838", img: photos[3] },
    { cat: "method", catLabel: "Methodology", date: "January 18, 2026", title: "Has blended learning delivered for working professionals?", excerpt: "Analysis of 3 years of blended program deployment on active professional populations.", color: "#1A3DA0", img: photos[4] },
    { cat: "cert", catLabel: "Certifications", date: "January 5, 2026", title: "TOEIC 990: why the perfect score isn't everyone's target", excerpt: "Pragmatic reading of the TOEIC scale by function and industry.", color: "#1A3DA0", img: photos[5] },
  ];

  const filtered = filter === "all" ? posts : posts.filter(p => p.cat === filter);

  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">
          <div style={{display:"flex", gap:8, marginBottom:48, flexWrap:"wrap"}}>
            {[
              {id:"all", label:tr("filterAll")},
              {id:"method", label:tr("filterMethod")},
              {id:"cert", label:tr("filterCert")},
              {id:"b2b", label:tr("filterB2B")},
              {id:"afrique", label:tr("filterAfrique")},
            ].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="blog-grid">
            {filtered.map((p, i) => (
              <a key={i} href="#" onClick={(e)=>e.preventDefault()} className="blog-card">
                <div className="blog-img" style={{background: p.color}}>
                  <img src={p.img} alt={p.title} loading="lazy"
                       style={{width:"100%", height:"100%", objectFit:"cover", display:"block"}}/>
                  <span className="blog-img-cat" style={{background: p.color}}>{p.catLabel}</span>
                </div>
                <div className="blog-body">
                  <div className="blog-meta">
                    <span className="blog-cat">{p.catLabel}</span>
                    <span>·</span>
                    <span>{p.date}</span>
                  </div>
                  <h3>{p.title}</h3>
                  <p>{p.excerpt}</p>
                  <span className="card-link">{tr("readMore")} <Icon name="arrow-right" size={14}/></span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

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

window.BlogPage = BlogPage;