// SoMum — À propos / About page

function PageAbout({ lang = 'fr', accent = 'teal' }) {
  const T = SOMUM_TOKENS;
  const a = _accentTriple(accent);
  const fr = lang === 'fr';

  const content = fr ? {
    eyebrow: 'À propos',
    kicker: 'Une voix posée,',
    title: 'une présence engagée.',
    lede: "Coach certifiée, formée aux neurosciences relationnelles, je travaille depuis plusieurs années au plus près des familles, des écoles et des institutions du Luxembourg et de la Grande Région.",
    sectionStory: 'L\'histoire',
    storyTitle: 'Devenir mère m\'a appris l\'inverse de ce que je pensais savoir.',
    storyP1: "Je m'appelle Jennifer. J'ai grandi à Bruxelles, étudié la sociologie à Bruxelles, puis travaillé une dizaine d'années dans les ressources humaines, persuadée que je connaissais l'humain. Devenir mère, en 2012 et 2015, a tout remis en question.",
    storyP2: "J'ai cherché ce qui n'existait pas — un accompagnement structuré, sans dogme, qui prenne au sérieux la complexité de la parentalité moderne. Quand je ne l'ai pas trouvé, je me suis formée pour le construire.",
    storyP3: "Aujourd'hui, j'accompagne des parents en cabinet et en ligne, et j'interviens dans des écoles, des entreprises et des institutions européennes. Mon approche tient en une phrase : la parentalité, ça ne s'improvise pas, ça se travaille.",
    valuesKicker: 'Ce qui guide ma pratique',
    valuesTitle: 'Quatre principes, jamais négociés.',
    values: [
      { n: '01', t: 'Sans jugement', d: "Aucun parent ne vient dans mon cabinet par hasard. Mon rôle est de comprendre, pas d'évaluer." },
      { n: '02', t: 'Concret avant tout', d: "Pas de théorie qui ne se traduise pas en outil utilisable lundi matin, dans la cuisine, à 7h30." },
      { n: '03', t: 'Confidentialité totale', d: "Ce qui se dit en séance reste en séance. Y compris vis-à-vis de votre conjoint, si c'est ce que vous souhaitez." },
      { n: '04', t: 'Au rythme juste', d: "On va vite quand vous êtes prête, lentement quand il le faut. Vous fixez le tempo, je tiens le cadre." },
    ],
    pathKicker: 'Parcours',
    pathTitle: 'Formation et certifications.',
    timeline: [
      { y: 'Déc. 2024', t: 'Certifiée Leadership encourageant', d: 'Association de Discipline Positive France — module leadership.' },
      { y: 'Oct. 2023', t: 'Discipline Positive · classes & collectivités', d: 'Association de Discipline Positive France — facilitatrice qualifiée pour les écoles et institutions.' },
      { y: 'Août 2023', t: 'Burnout parental', d: 'Training Institute for Psychology and Health — comprendre, diagnostiquer et accompagner.' },
      { y: 'Sept. 2022', t: 'Discipline Positive · parents', d: 'Association de Discipline Positive France — facilitatrice qualifiée pour les parents.' },
      { y: '2021', t: 'Master Coach certifiée', d: 'École Internationale de Coaching — spécialisations coach de vie et gestion du stress.' },
      { y: '2009', t: 'Master Management Institutions de Soins', d: 'Approfondissement gestion d\'organisations et accompagnement humain.' },
      { y: '2005', t: 'DES en Gestion des Ressources Humaines', d: 'Spécialisation Dynamique des Organisations — Bruxelles.' },
      { y: '1999', t: 'Études de Sociologie', d: 'Le point de départ : comprendre les relations humaines.' },
    ],
    methodKicker: 'Approche',
    methodTitle: 'Quatre courants, un seul fil.',
    methodSub: "Je n'invente rien. Je tisse ensemble ce que les meilleures écoles ont prouvé.",
    methods: [
      { t: 'Neurosciences', d: "Comprendre comment le cerveau de l'enfant — et le vôtre — fonctionnent vraiment, avant d'agir." },
      { t: 'CNV', d: "Communication non-violente : exprimer un besoin sans attaquer, entendre un refus sans s'effondrer." },
      { t: 'Systémique', d: "Une famille n'est pas une somme d'individus. C'est un système où chaque mouvement déplace tout le reste." },
      { t: 'Coaching ICF', d: "Cadre éthique, déontologique, focalisé sur l'autonomie. Vous repartez avec vos propres réponses." },
    ],
    pressKicker: 'Dans les médias',
    pressTitle: 'Quelques interventions récentes.',
    press: [
      { src: 'RTL Luxembourg', d: 'Mars 2026', t: '« Comment l\'école peut soutenir les familles bilingues. »' },
      { src: 'Paperjam', d: 'Janvier 2026', t: '« Parentalité et travail : sortir du faux dilemme. »' },
      { src: 'Le Quotidien', d: 'Octobre 2025', t: '« Adolescence : le pari de la confiance. »' },
      { src: 'Eltereblat', d: 'Juin 2025', t: '« Limites, écrans, conflits — le b.a.-ba. »' },
    ],
    ctaTitle: 'Travaillons ensemble.',
    ctaSub: 'Le premier appel est gratuit, sans engagement. Trente minutes pour vérifier que nous sommes alignés.',
    ctaBtn: 'Réserver l\'appel',
  } : {
    eyebrow: 'About',
    kicker: 'A grounded voice,',
    title: 'a committed presence.',
    lede: 'Certified coach trained in relational neuroscience. For over ten years, I have worked closely with families, schools and institutions in Luxembourg and the Greater Region.',
    sectionStory: 'The story',
    storyTitle: 'Becoming a mother taught me the opposite of what I thought I knew.',
    storyP1: "My name is Jennifer. I grew up in Brussels, studied sociology in Brussels, then worked ten years in human resources — convinced I understood people. Becoming a mother in 2012 and 2015 turned that on its head.",
    storyP2: "I went looking for the support that didn't exist: structured, undogmatic, taking modern parenthood seriously. When I couldn't find it, I trained to build it myself.",
    storyP3: "Today I work with parents in person and online, and I run programmes for schools, companies and European institutions. My approach in one line: parenthood is not improvised, it is practised.",
    valuesKicker: 'What guides my practice',
    valuesTitle: 'Four principles, never compromised.',
    values: [
      { n: '01', t: 'No judgment', d: 'No parent walks into my office by chance. My role is to understand, not to evaluate.' },
      { n: '02', t: 'Concrete first', d: "No theory that doesn't translate into a tool you can use Monday at 7:30 in the kitchen." },
      { n: '03', t: 'Full confidentiality', d: "What is said in session stays in session — including from your partner, if that's what you need." },
      { n: '04', t: 'The right pace', d: "We move fast when you are ready, slowly when we must. You set the tempo, I hold the frame." },
    ],
    pathKicker: 'Path',
    pathTitle: 'Training and certifications.',
    timeline: [
      { y: 'Dec. 2024', t: 'Encouraging Leadership certified', d: 'Association de Discipline Positive France — leadership module.' },
      { y: 'Oct. 2023', t: 'Positive Discipline · classrooms & institutions', d: 'Association de Discipline Positive France — qualified facilitator for schools.' },
      { y: 'Aug. 2023', t: 'Parental burnout', d: 'Training Institute for Psychology and Health — understand, diagnose, accompany.' },
      { y: 'Sept. 2022', t: 'Positive Discipline · parents', d: 'Association de Discipline Positive France — qualified facilitator for parents.' },
      { y: '2021', t: 'Certified Master Coach', d: 'École Internationale de Coaching — life coaching & stress management.' },
      { y: '2009', t: 'Master in Healthcare Institutions Management', d: 'Organisations and human accompaniment.' },
      { y: '2005', t: 'Postgraduate diploma in HR', d: 'Organisational Dynamics specialisation — Brussels.' },
      { y: '1999', t: 'Sociology studies', d: 'The starting point: understanding human relationships.' },
    ],
    methodKicker: 'Approach',
    methodTitle: 'Four schools of thought, one thread.',
    methodSub: 'I did not invent anything. I weave together what the best schools have proven.',
    methods: [
      { t: 'Neuroscience', d: "Understand how a child's brain — and yours — actually work, before acting." },
      { t: 'NVC', d: 'Non-violent communication: voice a need without attacking, hear a no without collapsing.' },
      { t: 'Systemic', d: 'A family is not a sum of individuals. It is a system where every move shifts the whole.' },
      { t: 'ICF coaching', d: 'Ethical, professional frame, focused on autonomy. You leave with your own answers.' },
    ],
    pressKicker: 'In the press',
    pressTitle: 'Recent appearances.',
    press: [
      { src: 'RTL Luxembourg', d: 'March 2026', t: '"How schools can support bilingual families."' },
      { src: 'Paperjam', d: 'January 2026', t: '"Parenthood and work: out of the false dilemma."' },
      { src: 'Le Quotidien', d: 'October 2025', t: '"Adolescence: the gamble of trust."' },
      { src: 'Eltereblat', d: 'June 2025', t: '"Limits, screens, conflict — back to basics."' },
    ],
    ctaTitle: "Let's work together.",
    ctaSub: 'First call is free, no commitment. Thirty minutes to check we are aligned.',
    ctaBtn: 'Book the call',
  };

  const isMobile = useIsMobile();

  return (
    <SitePage lang={lang} accent={accent} activePage="about">
      {/* HERO — portrait + intro */}
      <section style={{ background: T.cream, padding: isMobile ? '48px 20px 56px' : '64px 48px 100px' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '6fr 5fr', gap: isMobile ? 0 : 80, alignItems: 'center' }}>
          <div>
            <div className="v1-eyebrow" style={{ marginBottom: 28 }}><span className="v1-rule"></span>{content.eyebrow}</div>
            <h1 className="v1-serif" style={{ fontSize: isMobile ? 36 : 76, lineHeight: 1.05, letterSpacing: '-0.025em', fontWeight: 500, margin: '0 0 24px', textWrap: 'balance' }}>
              {content.kicker}<br/>
              <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>{content.title}</em>
            </h1>
            <p style={{ fontSize: isMobile ? 16 : 19, lineHeight: 1.6, color: T.inkSoft, maxWidth: 540, margin: '0 0 36px', textWrap: 'pretty' }}>{content.lede}</p>
            <div style={{ display: 'flex', gap: isMobile ? 24 : 32, paddingTop: 24, borderTop: `1px solid ${T.outline}50` }}>
              {[
                { n: '12', l: fr ? "Années d'expérience" : 'Years of practice' },
                { n: '500+', l: fr ? 'Familles accompagnées' : 'Families supported' },
                { n: '40+', l: fr ? 'Conférences' : 'Talks' },
              ].map((s, i) => (
                <div key={i}>
                  <div className="v1-serif" style={{ fontSize: isMobile ? 28 : 36, fontWeight: 500, lineHeight: 1, color: a.color }}>{s.n}</div>
                  <div className="v1-mono" style={{ fontSize: 10, letterSpacing: '0.12em', textTransform: 'uppercase', color: T.inkSoft, marginTop: 8 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
          {!isMobile && (
            <div style={{ position: 'relative' }}>
              <div style={{ borderRadius: 8, overflow: 'hidden', border: '8px solid white', boxShadow: '0 30px 60px -30px rgba(0,103,103,0.3)' }}>
                <img src={STOCK.portrait} alt="Jennifer" style={{ width: '100%', display: 'block', aspectRatio: '4/5', objectFit: 'cover' }} />
              </div>
              <div style={{ position: 'absolute', bottom: -28, left: -28, background: 'white', padding: '18px 22px', borderRadius: 12, boxShadow: '0 20px 40px -20px rgba(0,103,103,0.25)', display: 'flex', alignItems: 'center', gap: 14, maxWidth: 280 }}>
                <div style={{ width: 40, height: 40, borderRadius: 999, background: a.soft, color: a.color, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>{Icons.spark(20)}</div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 600, lineHeight: 1.3 }}>{fr ? 'Certifiée ICF' : 'ICF Certified'}</div>
                  <div className="v1-mono" style={{ fontSize: 10, letterSpacing: '0.12em', color: T.inkSoft, textTransform: 'uppercase', marginTop: 2 }}>{fr ? 'Coach professionnelle' : 'Professional coach'}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* STORY — long-form */}
      <section style={{ background: T.creamSoft, padding: isMobile ? '56px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 32 : 96 }}>
          <div>
            <div className="v1-eyebrow" style={{ marginBottom: 16 }}><span className="v1-rule"></span>{content.sectionStory}</div>
          </div>
          <div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 48, lineHeight: 1.15, letterSpacing: '-0.02em', fontWeight: 500, margin: '0 0 40px', textWrap: 'balance' }}>{content.storyTitle}</h2>
            <div style={{ fontSize: isMobile ? 16 : 19, lineHeight: 1.7, color: T.inkSoft, display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 640 }}>
              <p style={{ margin: 0 }}>{content.storyP1}</p>
              <p style={{ margin: 0 }}>{content.storyP2}</p>
              <p style={{ margin: 0 }}>{content.storyP3}</p>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES — 4 numbered principles */}
      <section style={{ padding: isMobile ? '56px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div style={{ marginBottom: 64, maxWidth: 720 }}>
            <div className="v1-eyebrow" style={{ marginBottom: 20 }}><span className="v1-rule"></span>{content.valuesKicker}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 48, lineHeight: 1.1, letterSpacing: '-0.02em', fontWeight: 500, margin: 0 }}>{content.valuesTitle}</h2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 24 }}>
            {content.values.map((v, i) => (
              <div key={i} className="v1-card" style={{ padding: isMobile ? 24 : 36 }}>
                <div className="v1-mono" style={{ fontSize: 12, letterSpacing: '0.16em', color: a.color, marginBottom: 18 }}>{v.n}</div>
                <h3 className="v1-serif" style={{ fontSize: 28, fontWeight: 500, margin: '0 0 14px', letterSpacing: '-0.01em' }}>{v.t}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: T.inkSoft, margin: 0, textWrap: 'pretty' }}>{v.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TIMELINE — formation */}
      <section style={{ background: T.creamMed, padding: isMobile ? '56px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 2fr', gap: isMobile ? 32 : 96 }}>
          <div>
            <div className="v1-eyebrow" style={{ marginBottom: 20 }}><span className="v1-rule"></span>{content.pathKicker}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 44, lineHeight: 1.1, letterSpacing: '-0.02em', fontWeight: 500, margin: 0 }}>{content.pathTitle}</h2>
          </div>
          <div>
            <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column' }}>
              {content.timeline.map((row, i) => (
                <li key={i} style={{ display: 'grid', gridTemplateColumns: isMobile ? '72px 1fr' : '120px 1fr', gap: isMobile ? 16 : 32, padding: '28px 0', borderTop: `1px solid ${T.outline}60` }}>
                  <div className="v1-serif" style={{ fontSize: 24, fontWeight: 500, color: a.color, fontStyle: 'italic' }}>{row.y}</div>
                  <div>
                    <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 6 }}>{row.t}</div>
                    <div style={{ fontSize: 15, color: T.inkSoft, lineHeight: 1.55 }}>{row.d}</div>
                  </div>
                </li>
              ))}
            </ol>
          </div>
        </div>
      </section>

      {/* CERTIFICATIONS — banner */}
      <CertificationsBanner lang={lang} accent={accent} T={T} a={a} />

      {/* METHOD — 4 schools */}
      <section style={{ padding: isMobile ? '56px 20px' : '120px 48px' }}>
        <div style={{ maxWidth: 1240, margin: '0 auto' }}>
          <div style={{ marginBottom: 56, maxWidth: 720 }}>
            <div className="v1-eyebrow" style={{ marginBottom: 20 }}><span className="v1-rule"></span>{content.methodKicker}</div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 48, lineHeight: 1.1, letterSpacing: '-0.02em', fontWeight: 500, margin: '0 0 16px' }}>{content.methodTitle}</h2>
            <p style={{ fontSize: isMobile ? 16 : 18, color: T.inkSoft, lineHeight: 1.55, margin: 0 }}>{content.methodSub}</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 24 }}>
            {content.methods.map((m, i) => (
              <div key={i} style={{ background: 'white', borderRadius: 16, padding: 28, border: `1px solid ${T.outline}40` }}>
                <div className="v1-mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: a.color, marginBottom: 16, textTransform: 'uppercase' }}>0{i+1}</div>
                <h3 className="v1-serif" style={{ fontSize: 22, fontWeight: 500, margin: '0 0 12px' }}>{m.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.55, color: T.inkSoft, margin: 0 }}>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{ padding: isMobile ? '64px 20px' : '120px 48px', background: T.cream }}>
        <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
          <h2 className="v1-serif" style={{ fontSize: isMobile ? 36 : 64, lineHeight: 1.05, letterSpacing: '-0.025em', fontWeight: 500, margin: '0 0 24px' }}>
            <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>{content.ctaTitle}</em>
          </h2>
          <p style={{ fontSize: isMobile ? 16 : 19, color: T.inkSoft, lineHeight: 1.55, margin: '0 0 36px', maxWidth: 620, marginLeft: 'auto', marginRight: 'auto' }}>{content.ctaSub}</p>
          <a href={SOMUM_BOOKING_URL} target="_blank" rel="noopener" className="v1-btn-primary">{content.ctaBtn} {Icons.arrow(16)}</a>
        </div>
      </section>
    </SitePage>
  );
}

window.PageAbout = PageAbout;

// ─── CERTIFICATIONS BANNER ───────────────────────────────────────────────
// Affichage horizontal scrollable des certificats authentiques de Jennifer
function CertificationsBanner({ lang = 'fr', accent = 'teal', T, a }) {
  const fr = lang === 'fr';
  const isMobile = useIsMobile();
  const certs = [
    {
      img: 'assets/cert-dp-leadership.png',
      titleFr: 'Leadership Encourageant',
      titleEn: 'Encouraging Leadership',
      issuerFr: 'Positive Discipline Association',
      issuerEn: 'Positive Discipline Association',
      yearFr: 'Déc. 2024',
      yearEn: 'Dec. 2024',
      noteFr: 'Empowering People in the Workplace · 18h',
      noteEn: 'Empowering People in the Workplace · 18h',
    },
    {
      img: 'assets/cert-dp-classes.png',
      titleFr: 'Discipline Positive · Classe',
      titleEn: 'Positive Discipline · Classroom',
      issuerFr: 'Positive Discipline Association',
      issuerEn: 'Positive Discipline Association',
      yearFr: 'Oct. 2023',
      yearEn: 'Oct. 2023',
      noteFr: 'Qualifiée — Paris · 20h',
      noteEn: 'Qualified — Paris · 20h',
    },
    {
      img: 'assets/cert-burnout.png',
      titleFr: 'Burnout Parental',
      titleEn: 'Parental Burnout',
      issuerFr: 'Training Institute for Psychology & Health',
      issuerEn: 'Training Institute for Psychology & Health',
      yearFr: 'Août 2023',
      yearEn: 'Aug. 2023',
      noteFr: 'Comprendre · diagnostiquer · traiter',
      noteEn: 'Understand · diagnose · treat',
    },
    {
      img: 'assets/cert-dp-parents.png',
      titleFr: 'Discipline Positive · Parents',
      titleEn: 'Positive Discipline · Parents',
      issuerFr: 'Positive Discipline Association',
      issuerEn: 'Positive Discipline Association',
      yearFr: 'Sept. 2022',
      yearEn: 'Sept. 2022',
      noteFr: 'Facilitatrice qualifiée — La Hulpe · 18h',
      noteEn: 'Qualified facilitator — La Hulpe · 18h',
    },
    {
      img: 'assets/cert-master-coach.png',
      titleFr: 'Master Coach',
      titleEn: 'Master Coach',
      issuerFr: 'École Internationale de Coaching',
      issuerEn: 'International Coaching School',
      yearFr: 'Déc. 2021',
      yearEn: 'Dec. 2021',
      noteFr: 'Coach Professionnel & Personnel — Bruxelles',
      noteEn: 'Professional & Personal Coach — Brussels',
    },
  ];

  return (
    <section style={{ background: T.creamSoft, padding: isMobile ? '56px 20px' : '110px 48px', borderTop: `1px solid ${T.outline}40`, borderBottom: `1px solid ${T.outline}40` }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', marginBottom: 48, gap: 40, flexWrap: 'wrap' }}>
          <div style={{ maxWidth: 640 }}>
            <div className="v1-eyebrow" style={{ marginBottom: 20, color: a.color }}>
              <span className="v1-rule" style={{ background: a.color, opacity: 1 }}></span>
              {fr ? 'Certifications' : 'Certifications'}
            </div>
            <h2 className="v1-serif" style={{ fontSize: isMobile ? 28 : 44, lineHeight: 1.1, letterSpacing: '-0.022em', fontWeight: 500, margin: '0 0 16px', textWrap: 'balance' }}>
              {fr ? 'Une expertise ' : 'A verified '}
              <em style={{ fontStyle: 'italic', color: a.color, fontWeight: 400 }}>{fr ? 'vérifiable.' : 'expertise.'}</em>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: T.inkSoft, margin: 0 }}>
              {fr
                ? 'Cinq certifications obtenues auprès d\'organismes reconnus internationalement — Discipline Positive, neurosciences relationnelles, coaching professionnel.'
                : 'Five certifications from internationally recognised institutions — Positive Discipline, relational neuroscience, professional coaching.'}
            </p>
          </div>
          <div style={{ display: 'flex', gap: 28, alignItems: 'flex-end' }}>
            {[
              { n: '5', l: fr ? 'Certifications' : 'Certifications' },
              { n: '56h+', l: fr ? 'De formation' : 'Of training' },
              { n: '3', l: fr ? 'Organismes' : 'Bodies' },
            ].map((s, i) => (
              <div key={i}>
                <div className="v1-serif" style={{ fontSize: 38, fontWeight: 500, lineHeight: 1, color: a.color, fontStyle: 'italic' }}>{s.n}</div>
                <div className="v1-mono" style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: T.inkSoft, marginTop: 8 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Horizontal scroll banner */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: `repeat(${certs.length}, minmax(280px, 1fr))`,
          gap: 20,
          overflowX: 'auto',
          paddingBottom: 12,
          scrollbarWidth: 'thin',
        }}>
          {certs.map((c, i) => (
            <div key={i} style={{
              background: 'white',
              borderRadius: 18,
              overflow: 'hidden',
              border: `1px solid ${T.outline}40`,
              display: 'flex',
              flexDirection: 'column',
              boxShadow: '0 1px 0 rgba(9,93,111,0.04), 0 12px 32px -20px rgba(9,93,111,0.18)',
            }}>
              <div style={{
                aspectRatio: '4 / 3',
                background: T.creamMed,
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                padding: 14,
                borderBottom: `1px solid ${T.outline}30`,
              }}>
                <img
                  src={c.img}
                  alt={fr ? c.titleFr : c.titleEn}
                  style={{
                    maxWidth: '100%',
                    maxHeight: '100%',
                    width: 'auto',
                    height: 'auto',
                    objectFit: 'contain',
                    display: 'block',
                  }}
                />
              </div>
              <div style={{ padding: '22px 24px 24px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                <div className="v1-mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: a.color, fontWeight: 600 }}>
                  {fr ? c.yearFr : c.yearEn}
                </div>
                <div className="v1-serif" style={{ fontSize: 18, fontWeight: 500, lineHeight: 1.25, letterSpacing: '-0.01em', margin: 0 }}>
                  {fr ? c.titleFr : c.titleEn}
                </div>
                <div style={{ fontSize: 13, color: T.inkSoft, lineHeight: 1.45 }}>
                  {fr ? c.issuerFr : c.issuerEn}
                </div>
                <div className="v1-mono" style={{ fontSize: 10, letterSpacing: '0.1em', color: T.inkSoft, textTransform: 'uppercase', marginTop: 6, opacity: 0.8 }}>
                  {fr ? c.noteFr : c.noteEn}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.CertificationsBanner = CertificationsBanner;