// MEMORI — Cases (Réalisations) — Option C : Grille éditoriale
function Cases() {
  const cases = [
    {
      id: 'CASE 01',
      logo: 'uploads/logos-clients/Allison Pineau.png',
      name: 'Allison Pineau',
      tag: 'Ghostwriting · 2 mois',
      stats: [
        { num: '155 512', label: 'impressions en 2 mois' },
        { num: '4 850',   label: 'interactions' },
        { num: '+1 192',  label: 'abonnés' },
      ],
      posts: [
        { src: 'uploads/post-linkedin/Allison Pineau - 606 likes.png', likes: '606 likes' },
        { src: 'uploads/post-linkedin/Allison Pineau - 420 likes.png', likes: '420 likes' },
        { src: 'uploads/post-linkedin/Allison Pineau - 296 likes.png', likes: '296 likes' },
      ],
    },
    {
      id: 'CASE 02',
      logo: 'uploads/logos-clients/France-IX.svg',
      name: 'France-IX',
      tag: 'Growth + Ghostwriting · 3 mois',
      stats: [
        { num: '416',      label: 'contacts qualifiés en 3 mois' },
        { num: '175 380',  label: 'impressions' },
        { num: '10,30 €',  label: 'de CPL compte du président' },
      ],
      posts: [
        { src: 'uploads/post-linkedin/France-IX - 431 likes.png', likes: '431 likes' },
        { src: 'uploads/post-linkedin/France-IX - 226 likes.png', likes: '226 likes' },
        { src: 'uploads/post-linkedin/France-IX - 170 likes.png', likes: '170 likes' },
      ],
    },
    {
      id: 'CASE 03',
      logo: 'uploads/logos-clients/Biggie Group.png',
      name: 'Biggie Group',
      tag: 'Ghostwriting · 7 mois',
      stats: [
        { num: '303 468', label: 'impressions en 7 mois' },
        { num: '8 585',   label: 'interactions' },
        { num: '×25,5',   label: 'de croissance impressions' },
      ],
      posts: [
        { src: 'uploads/post-linkedin/Biggie Group - 281 likes.png', likes: '281 likes' },
        { src: 'uploads/post-linkedin/Biggie Group - 103 likes.png', likes: '103 likes' },
        { src: 'uploads/post-linkedin/Biggie Group - 219 likes.png', likes: '219 likes' },
      ],
    },
  ];

  return (
    <section className="section section-dark" id="realisations">
      <div className="wrap">
        <div className="s-head fade-up">
          <span className="eyebrow">§ 04 : Réalisations</span>
          <h2>Quelques <em>réalisations</em>.</h2>
          <p className="lede">
            Trois entreprises, trois trajectoires différentes, une même conviction :
            la marque personnelle, faite avec rigueur, est l'un des leviers de croissance
            les plus sous-estimés de la décennie.
          </p>
        </div>

        <div className="cases-editorial">
          {cases.map(c => (
            <article className="case-editorial fade-up" key={c.id}>

              {/* Colonne gauche — infos */}
              <div className="case-ed-left">
                <div className="case-ed-header">
                  <span className="case-ed-id">{c.id}</span>
                  <img className="case-ed-logo" src={c.logo} alt={c.name} />
                </div>
                <div className="case-ed-stats">
                  {c.stats.map((s, i) => (
                    <div className="case-stat-card" key={i}>
                      <span className="case-stat-card-num">{s.num}</span>
                      <span className="case-stat-card-label">{s.label}</span>
                    </div>
                  ))}
                </div>
                <span className="case-ed-tag">{c.tag}</span>
              </div>

              {/* Séparateur vertical */}
              <div className="case-ed-sep"></div>

              {/* Colonne droite — posts LinkedIn */}
              <div className="case-ed-right">
                {c.posts.map((p, i) => (
                  <div className="case-ed-post" key={i}>
                    <div className="case-ed-post-img-wrap">
                      <img src={p.src} alt={`Post LinkedIn ${c.name} — ${p.likes}`} />
                    </div>
                    <span className="case-ed-post-likes">♥ {p.likes}</span>
                  </div>
                ))}
              </div>

            </article>
          ))}
        </div>

        {/* CTA bas de section */}
        <div className="cases-cta-row fade-up">
          <div className="cases-cta-text">
            <span className="eyebrow no-rule">§ On démarre ensemble ?</span>
            <h3 className="cases-cta-h">La prochaine réussite, c'est <em>la vôtre.</em></h3>
          </div>
          <div className="cases-cta-actions">
            <a
              href="https://calendly.com/marlet-memori/decouverte"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-ruby"
            >
              Réserver un appel <span className="arrow">→</span>
            </a>
            <span className="cases-cta-meta">Sans engagement · Réponse sous 24h</span>
          </div>
        </div>

      </div>
    </section>
  );
}
Object.assign(window, { Cases });