/* Use Cases listing page — same DA as homepage */

const USECASES_DATA = (lang) => window.SITE_TEXTS[lang].usecases_cards;

const UC_LOGOS = [
  { n: 'Cleaq',          d: 'cleaq.com' },
  { n: 'Delos',          d: 'delos.so' },
  { n: 'Review Collect', d: 'review-collect.com' },
  { n: 'Alteia',         d: 'alteia.com' },
  { n: 'Kalent',         d: 'kalent.ai' },
  { n: 'Hyperstack',     d: 'hyperstack.fr' },
  { n: 'Imagine Medias', d: 'imagine-medias.fr' },
  { n: 'Batoo Bike',     d: 'batoobike.ch' },
  { n: 'MakeTheGrade',   d: 'makethegrade.fr' },
  { n: 'Just Coaching',  d: 'just-coaching.fr' },
  { n: 'Bloon Paris',    d: 'bloon-paris.com' },
  { n: 'Plugheur',       d: 'plugheur.com' },
  { n: 'Travel by Suprem', d: 'travelbysuprem.com' }
];

const UseCasesLogosStrip = ({ lang }) => {
  const rowA = UC_LOGOS.filter((_, i) => i % 2 === 0);
  const rowB = UC_LOGOS.filter((_, i) => i % 2 === 1);
  const repeat = (arr) => [...arr, ...arr, ...arr];
  return (
    <div style={{ padding: '36px 0 0' }}>
      <style>{`
        @keyframes uc-ticker-l { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
        @keyframes uc-ticker-r { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
        .uc-logos-row {
          display: flex; gap: 32px; width: max-content; align-items: center;
        }
        .uc-logos-row-a { animation: uc-ticker-l 55s linear infinite; }
        .uc-logos-row-b { animation: uc-ticker-r 65s linear infinite; }
        .uc-logos-mask {
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          display: flex; flex-direction: column; gap: 16px;
        }
      `}</style>
      <div className="uc-logos-mask">
        <div className="uc-logos-row uc-logos-row-a">
          {repeat(rowA).map((c, i) => (
            <div key={`a${i}`} style={{ display: 'flex', alignItems: 'center', gap: 9, flexShrink: 0 }}>
              <img
                src={`https://img.logo.dev/${c.d}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`}
                alt={c.n} width="22" height="22"
                style={{ width: 22, height: 22, borderRadius: 5, objectFit: 'contain', flexShrink: 0 }}
                onError={(e) => { e.target.style.display = 'none'; }}
              />
              <span style={{ fontSize: 15, fontWeight: 600, fontFamily: 'var(--font-sans)', color: 'var(--ink)', whiteSpace: 'nowrap' }}>{c.n}</span>
            </div>
          ))}
        </div>
        <div className="uc-logos-row uc-logos-row-b">
          {repeat(rowB).map((c, i) => (
            <div key={`b${i}`} style={{ display: 'flex', alignItems: 'center', gap: 9, flexShrink: 0 }}>
              <img
                src={`https://img.logo.dev/${c.d}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`}
                alt={c.n} width="22" height="22"
                style={{ width: 22, height: 22, borderRadius: 5, objectFit: 'contain', flexShrink: 0 }}
                onError={(e) => { e.target.style.display = 'none'; }}
              />
              <span style={{ fontSize: 15, fontWeight: 600, fontFamily: 'var(--font-sans)', color: 'var(--ink)', whiteSpace: 'nowrap' }}>{c.n}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

const usecaseLogo = (d) => `https://img.logo.dev/${d}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`;

const UseCasesHero = ({ lang }) => {
  return (
    <section className="u-section" style={{
      paddingTop: 100, paddingBottom: 60,
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* Lime corner decoration */}
      <div style={{
        position: 'absolute', top: -80, right: -80,
        width: 380, height: 380,
        background: 'radial-gradient(circle, rgba(225,255,108,0.55) 0%, rgba(225,255,108,0) 70%)',
        pointerEvents: 'none'
      }}></div>

      <div className="u-container" style={{ position: 'relative' }}>
        <p className="u-eyebrow" style={{ marginBottom: 18 }}>
          — {window.SITE_TEXTS[lang].usecases_hero.eyebrow}
        </p>
        <h1 style={{
          fontSize: 76,
          letterSpacing: '-0.025em',
          lineHeight: 1.02,
          marginBottom: 24,
          maxWidth: 920
        }}>
          {window.SITE_TEXTS[lang].usecases_hero.h1a}{' '}
          <span style={{
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic',
            fontWeight: 400
          }}>{window.SITE_TEXTS[lang].usecases_hero.h1b}</span>.
        </h1>
        <p style={{
          fontSize: 18,
          lineHeight: 1.55,
          color: 'var(--gray-4)',
          maxWidth: 620,
          marginBottom: 40
        }}>
          {window.SITE_TEXTS[lang].usecases_hero.sub}
        </p>

        {/* KPI strip */}
        <div style={{
          display: 'flex',
          gap: 48,
          flexWrap: 'wrap',
          padding: '20px 0',
          borderTop: '1px solid var(--line)',
          borderBottom: '1px solid var(--line)'
        }}>
          {window.SITE_TEXTS[lang].usecases_hero.kpis.map(([v, l], i) => (
            <div key={i}>
              <p style={{
                fontFamily: 'var(--font-sans)',
                fontStyle: 'normal',
                fontWeight: 700,
                fontSize: 36,
                lineHeight: 1,
                marginBottom: 6,
                color: 'var(--ink)'
              }}>{v}</p>
              <p style={{
                fontSize: 12,
                fontFamily: 'var(--font-mono)',
                textTransform: 'uppercase',
                letterSpacing: '0.06em',
                color: 'var(--gray-3)'
              }}>{l}</p>
            </div>
          ))}
        </div>

        <UseCasesLogosStrip lang={lang} />
      </div>
    </section>
  );
};

const UseCaseCard = ({ c, lang, featured }) => {
  const Tag = c.published ? 'a' : 'article';
  const linkProps = c.published ? {
    href: `#/use-cases/${c.slug}`,
    onClick: (e) => {
      e.preventDefault();
      window.location.hash = `/use-cases/${c.slug}`;
      window.scrollTo({ top: 0, behavior: 'auto' });
    }
  } : {};
  return (
    <Tag {...linkProps} style={{
      background: 'var(--paper)',
      borderRadius: 22,
      overflow: 'hidden',
      border: '1px solid var(--line)',
      boxShadow: '0 1px 0 rgba(28,29,31,0.04), 0 14px 30px -16px rgba(28,29,31,0.10)',
      display: 'flex',
      flexDirection: 'column',
      transition: 'transform .25s ease, box-shadow .25s ease',
      cursor: c.published ? 'pointer' : 'default',
      textDecoration: 'none',
      color: 'inherit',
      opacity: c.published ? 1 : 0.96
    }}
    onMouseEnter={(e) => {
      if (!c.published) return;
      e.currentTarget.style.transform = 'translateY(-4px)';
      e.currentTarget.style.boxShadow = '0 1px 0 rgba(28,29,31,0.04), 0 26px 50px -22px rgba(28,29,31,0.16)';
    }}
    onMouseLeave={(e) => {
      if (!c.published) return;
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = '0 1px 0 rgba(28,29,31,0.04), 0 14px 30px -16px rgba(28,29,31,0.10)';
    }}>
      {/* Lime cover area */}
      <div style={{
        position: 'relative',
        background: `linear-gradient(135deg, ${c.accent} 0%, rgba(225,255,108,0.45) 100%)`,
        padding: '28px 24px 22px',
        minHeight: 160,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between'
      }}>
        {/* Soft grid */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: 'linear-gradient(rgba(28,29,31,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(28,29,31,0.05) 1px, transparent 1px)',
          backgroundSize: '24px 24px',
          opacity: 0.55,
          pointerEvents: 'none'
        }}></div>

        <span style={{
          position: 'relative',
          alignSelf: 'flex-start',
          fontFamily: 'var(--font-mono)',
          fontSize: 10,
          letterSpacing: '0.08em',
          textTransform: 'uppercase',
          padding: '4px 9px',
          borderRadius: 999,
          background: 'rgba(28,29,31,0.85)',
          color: 'var(--bg)'
        }}>
          {'Use Case'}
        </span>

        <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 14,
            background: 'var(--paper)',
            border: '1px solid rgba(28,29,31,0.08)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 10px rgba(28,29,31,0.08)',
            flexShrink: 0
          }}>
            <img
              src={usecaseLogo(c.d)}
              alt={c.co}
              style={{ width: 38, height: 38, objectFit: 'contain', borderRadius: 8 }}
              onError={(e) => { e.target.style.display = 'none'; }}
            />
          </div>
          <div>
            <p style={{
              fontSize: 24,
              fontWeight: 700,
              letterSpacing: '-0.02em',
              color: 'var(--ink)',
              lineHeight: 1.1
            }}>{c.co}</p>
            <p style={{ fontSize: 12, fontFamily: 'var(--font-mono)', color: 'var(--gray-4)', marginTop: 4 }}>
              {c.sector}
            </p>
          </div>
        </div>
      </div>

      {/* Body */}
      <div style={{
        padding: '24px 24px 22px',
        display: 'flex',
        flexDirection: 'column',
        flex: 1
      }}>
        <h3 style={{
          fontSize: 20,
          fontWeight: 600,
          lineHeight: 1.3,
          letterSpacing: '-0.01em',
          marginBottom: 18,
          color: 'var(--ink)'
        }}>{c.title}</h3>

        <hr className="u-divider" style={{ marginBottom: 18 }} />

        <p style={{
          fontSize: 14,
          lineHeight: 1.5,
          color: 'var(--ink-soft)',
          fontStyle: 'italic',
          marginBottom: 14,
          flex: 1
        }}>"{c.quote}"</p>

        <p style={{ fontSize: 12, color: 'var(--gray-3)', marginBottom: 22, fontFamily: 'var(--font-mono)' }}>
          — {c.name}, {c.role}
        </p>

        {c.published ? (
          <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            fontSize: 14,
            fontWeight: 500,
            color: 'var(--ink)',
            paddingTop: 14,
            borderTop: '1px solid var(--line)'
          }}>
            {lang === 'fr' ? "Lire l'étude" : 'Read the case'}
            <span style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              width: 26, height: 26, borderRadius: '50%',
              background: 'var(--accent)',
              color: 'var(--accent-on)',
              fontSize: 14
            }}>→</span>
          </span>
        ) : (
          <span style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 8,
            fontSize: 13,
            fontWeight: 500,
            color: 'var(--gray-3)',
            paddingTop: 14,
            borderTop: '1px solid var(--line)',
            fontFamily: 'var(--font-mono)',
            letterSpacing: '0.04em'
          }}>
            {lang === 'fr' ? 'Étude bientôt disponible' : 'Case coming soon'}
          </span>
        )}
      </div>
    </Tag>
  );
};

const UseCasesGrid = ({ lang }) => {
  const cases = USECASES_DATA(lang);
  return (
    <section className="u-section" style={{ paddingTop: 40, paddingBottom: 100 }}>
      <div className="u-container">
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 24
        }}>
          {cases.map((c, i) => (
            <UseCaseCard key={c.slug} c={c} lang={lang} />
          ))}
        </div>
      </div>
    </section>
  );
};

const UseCasesCta = ({ lang }) => {
  return (
    <section className="u-section" style={{ paddingTop: 60, paddingBottom: 120 }}>
      <div className="u-container">
        <div style={{
          background: 'var(--ink)',
          color: 'var(--bg)',
          borderRadius: 28,
          padding: '64px 56px',
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr',
          gap: 40,
          alignItems: 'center',
          position: 'relative',
          overflow: 'hidden'
        }}>
          {/* Lime decoration */}
          <div style={{
            position: 'absolute', top: -60, right: -60,
            width: 280, height: 280,
            background: 'radial-gradient(circle, rgba(225,255,108,0.35) 0%, rgba(225,255,108,0) 70%)',
            pointerEvents: 'none'
          }}></div>

          <div style={{ position: 'relative' }}>
            <p className="u-eyebrow" style={{ color: 'rgba(244,241,234,0.55)', marginBottom: 14 }}>
              — {lang === 'fr' ? 'Et vous ?' : 'And you?'}
            </p>
            <h2 style={{
              fontSize: 48,
              color: 'var(--bg)',
              letterSpacing: '-0.02em',
              lineHeight: 1.05,
              marginBottom: 16
            }}>
              {lang === 'fr' ? 'Prêt à devenir' : 'Ready to become'}{' '}
              <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>
                {lang === 'fr' ? 'le prochain ?' : 'the next one?'}
              </span>
            </h2>
            <p style={{
              fontSize: 16,
              lineHeight: 1.55,
              color: 'rgba(244,241,234,0.7)',
              maxWidth: 520
            }}>
              {lang === 'fr'
                ? "30 minutes avec Antoine pour auditer votre GTM et identifier les leviers à activer en priorité."
                : '30 minutes with Antoine to audit your GTM and identify the levers to prioritize.'}
            </p>
          </div>

          <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 12 }}>
            <a
              className="u-btn u-btn-accent"
              data-cal-link="antoineguine/appel-de-decouverte-website"
              data-cal-namespace="appel-de-decouverte-website"
              data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}'
              style={{
                padding: '14px 22px',
                fontSize: 16,
                justifyContent: 'center',
                cursor: 'pointer'
              }}
            >{lang === 'fr' ? 'Réserver 30 min' : 'Book 30 min'} →</a>
            <a
              className="u-btn u-btn-ghost"
              href="#/"
              style={{
                padding: '14px 22px',
                fontSize: 16,
                justifyContent: 'center',
                color: 'var(--bg)',
                borderColor: 'rgba(244,241,234,0.25)'
              }}
            >{lang === 'fr' ? "Retour à l'accueil" : 'Back to home'}</a>
          </div>
        </div>
      </div>
    </section>
  );
};

const UseCasesPage = ({ lang }) => {
  return (
    <>
      <UseCasesHero lang={lang} />
      <UseCasesGrid lang={lang} />
      <UseCasesCta lang={lang} />
    </>
  );
};

window.UseCasesPage = UseCasesPage;

/* =========================================================
   Case study detail pages
   ========================================================= */

const CASE_DETAIL_DATA = (lang) => ({
  cleaq: {
    co: 'Cleaq',
    d: 'cleaq.com',
    sector: 'SaaS · IT Asset Management',
    accent: '#E1FF6C',
    author: 'Antoine Guiné, Lorenzo Marangolo',
    authorRole: 'Fondateur @Upscale, GTM Engineer',
    teamMembers: [
      { name: 'Antoine Guiné',    avatar: 'https://lh3.googleusercontent.com/d/1oBYRUOMr9gC-FIzqlUI7Hu3g1NGfG0xH=s0' },
      { name: 'Lorenzo Marangolo', avatar: 'https://lh3.googleusercontent.com/d/1pFjdzby24KjBgDwLdcjjq-P-Pgal9fcY=s0' }
    ],
    date: 'Juin 2025',
    duration: '2 mois',
    eyebrow: 'Étude de cas · Cleaq',
    title: "3 mois pour changer l'acquisition de Cleaq.",
    lede: "Lorenzo, le responsable commercial de Cleaq, nous a contactés pour l'aider à mettre en place une sales machine complète et renforcer ses actions outbound.",
    metrics: [
      { v: '×3', l: 'RDV générés' },
      { v: '+10K', l: 'leads générés' }
    ],
    toolsHighlight: [
      { d: 'zapmail.ai', n: 'Zapmail' },
      { d: 'linkedin.com', n: 'LinkedIn' },
      { d: 'prontohq.com', n: 'Pronto' },
      { d: 'clay.com', n: 'Clay' },
      { d: 'lemlist.com', n: 'Lemlist' },
      { d: 'n8n.io', n: 'n8n' },
      { d: 'claude.ai', n: 'Claude' }
    ],
    contact: { name: 'Lorenzo M.', role: 'Responsable commercial · Cleaq' },
    sections: [
      {
        kind: 'paragraphs',
        eyebrow: '— Contexte initial',
        h2: 'Contexte initial',
        body: [
          "Lorenzo, le responsable commercial de Cleaq, nous a contactés pour l'aider à mettre en place une sales machine complète et renforcer ses actions outbound.",
          "Ses besoins :"
        ],
        bullets: [
          "Fournir suffisamment de leads qualifiés à ses commerciaux.",
          "Baser sa prospection sur de l'Intent Data et de la précision.",
          "Personnaliser ses campagnes à scale sans réduire la qualité.",
          "Connecter tous ses outils entre eux et les faire communiquer avec HubSpot."
        ]
      },
      {
        kind: 'paragraphs',
        eyebrow: "— L'objectif",
        h2: 'Pourquoi créer une sales machine ?',
        body: [
          "L'objectif de la Sales Machine pour Cleaq était de lui permettre d'augmenter son volume de prospection pour atteindre ses objectifs d'ici à la fin d'année tout en maintenant une qualité de prospection optimale.",
          "Le mot d'ordre : arrêter le volumique sans personnalisation, synonyme de faible performance."
        ]
      },
      {
        kind: 'deepDive',
        eyebrow: "— L'approche",
        h2: 'Les étapes de notre collaboration',
        intro: "Nous avons commencé par un call de kick-off afin de bien cerner les besoins de Cleaq et d'aborder les enjeux importants identifiés de notre côté. De cette rencontre a découlé une roadmap des points sur lesquels nous allions travailler :",
        roadmap: [
          'Les cibles de Cleaq.',
          'Les workflows de prospection.',
          'La stack technique nécessaire.',
          'Sourcing / enrichissement de la donnée.',
          'Copywriting personnalisé à scale.',
          'Scoring des leads et routage automatique.',
          'Interaction CRM et nurturing.'
        ],
        subSections: [
          {
            h3: 'Les workflows de prospection',
            body: [
              "Le tout premier axe de notre travail a été de déterminer les workflows pertinents à mettre en place pour Cleaq. L'objectif d'un workflow étant ici d'automatiser les étapes de sourcing, d'enrichissement, de copywriting et de diffusion.",
              "Au total, ce sont plus de 5 workflows spécifiques qui ont été imaginés et mis en place, allant de la détection d'entreprises en phase de recrutement au déclenchement de campagnes de nurturing spécifiques."
            ]
          },
          {
            h3: 'La stack technique',
            body: [
              "C'est un point essentiel à aborder. Avec les bons outils, on peut faire presque tout ce que l'on veut, tandis qu'une mauvaise stack peut ruiner votre sales machine.",
              "Nous avons donc abordé les meilleurs outils pour eux en fonction de leurs cibles, de leurs besoins en matière de données et, bien évidemment, de leur budget. Cela a mené à l'adoption d'outils de sourcing, d'enrichissement, d'IA, d'Intent Data et de diffusion."
            ]
          },
          {
            h3: 'Sourcing et enrichissement',
            body: [
              "D'une entreprise à l'autre, les besoins en matière de données ne sont pas les mêmes. Dans tous les cas, on recommande à l'ensemble de nos clients d'utiliser des données fraîches (= scrappées en temps réel) et basées sur l'intent (= basées sur un signal) pour ne pas contacter de faux positifs et optimiser les performances.",
              "Beaucoup d'entreprises perdent beaucoup de temps sur ces étapes avec des process old school. Aujourd'hui, Cleaq a complètement automatisé cette partie sans réduire la qualité des données dont elle dispose.",
              "Au contraire, maintenant ils arrivent à prospecter leurs cibles aux meilleurs moments."
            ]
          },
          {
            h3: 'Copywriting',
            body: [
              "La plupart des séquences de prospection sont fades, ce qui conduit à des performances rarement supérieures à 1% de prise de RDV.",
              "Le système que nous avons construit avec Cleaq va piocher parmi toutes les informations collectées pour identifier les meilleurs axes de prise de contact et créer un copywriting sur mesure.",
              "C'est réellement un game changer dans le sens où ils n'ont plus à passer des heures à adapter leurs messages manuellement. Chaque commercial prospecte en continu avec les bons messages sans écrire une seule ligne."
            ]
          },
          {
            h3: 'Scoring & Routing des leads automatique',
            body: [
              "Tous les leads n'ont pas la même valeur et il n'est donc pas intéressant de mettre autant d'efforts sur chacun. C'est pourquoi nous avons mis en place un scoring intelligent pour noter chaque lead qui entre dans sa sales machine.",
              "Pour Cleaq, plusieurs critères pouvaient impacter la note : des critères sur les entreprises et sur les personas.",
              "Voilà comment nous l'avons construit :",
              { kind: 'numbered', items: [
                "Lorenzo nous a donné les critères.",
                "Nous avons mis en place une méthode pour aller chercher les données correspondant à ces critères.",
                "Nous avons établi les points accordés par option sur ces critères.",
                "Nous avons utilisé le module de scoring de Clay pour calculer le score de chaque lead automatiquement."
              ]},
              { kind: 'callout', text: 'Un exemple de score possible — Critère → Localisation : France = 5 points · Île-de-France = 10 points · Paris = 30 points.' },
              "En fonction du score, des actions pouvaient être déclenchées automatiquement.",
              { kind: 'callout', text: 'Par exemple : SI le lead a un score supérieur à 70 ALORS enrichissement du numéro de téléphone + envoi aux SDRs. SI inférieur à 70, ALORS enrichissement du mail et envoi dans une séquence.' },
              "L'avantage de mettre ces règles en place est d'optimiser le parcours de chaque lead pour mettre le plus d'efforts sur les leads potentiellement plus rentables et ne pas s'éparpiller."
            ]
          },
          {
            h3: 'La partie CRM',
            body: [
              "Une sales machine qui ne communique pas avec le CRM n'en est pas une, donc nous avons naturellement travaillé ensemble sur les étapes d'intégration dans le CRM des leads générés par la sales machine."
            ],
            bullets: [
              "ID unique présent sur chaque fiche contact.",
              "Workflow d'enrichissement complémentaire.",
              "Workflow de vérification de données pluri-annuel.",
              "Intégration dans des boucles de nurturing sur la base de KO reasons issues des actions de prospection."
            ],
            after: [
              "Ce n'est qu'un échantillon de ce qui a été travaillé, mais il est ultra-important de comprendre l'intérêt que cela représente. Beaucoup d'entreprises n'ont pas de vision claire sur le cycle de vie de leurs leads et perdent un business fou à ne pas gérer leurs données correctement.",
              "Avec ce type de workflows, vous oubliez ces problématiques."
            ]
          }
        ]
      }
    ],
    video: {
      provider: 'vimeo',
      id: '1123611103',
      eyebrow: '— Le témoignage',
      title: 'Lorenzo le raconte mieux que nous.',
      caption: "Retour de Lorenzo (Cleaq) sur les 3 mois passés à construire la sales machine avec Upscale."
    }
  },
  delos: {
    co: 'Delos',
    d: 'delos.so',
    sector: 'SaaS · Suite bureautique IA',
    accent: '#E1FF6C',
    author: 'Antoine Guiné, Louis Paul-Petit',
    authorRole: 'Fondateur @Upscale, GTM Engineer',
    teamMembers: [
      { name: 'Antoine Guiné',    avatar: 'https://lh3.googleusercontent.com/d/1oBYRUOMr9gC-FIzqlUI7Hu3g1NGfG0xH=s0' },
      { name: 'Louis Paul-Petit', avatar: 'https://lh3.googleusercontent.com/d/1MZ3Tw-vtIP6A_9XiA45wjnASjAW0os6h=s0' }
    ],
    date: 'Octobre 2025',
    duration: '2 mois',
    eyebrow: 'Étude de cas · Delos',
    title: "La création d'une sales machine de A à Z",
    lede: "Quand Louis, le head of growth de Delos, a pris ses fonctions, il a vite identifié des chantiers clés pour fluidifier l'acquisition et renforcer leur force de vente — de la data CRM jusqu'aux workflows d'intent.",
    metrics: [
      { v: '+280%', l: 'leads identifiés' },
      { v: '+10K', l: 'records CRM nettoyés' }
    ],
    toolsHighlight: [
      { d: 'clay.com',      n: 'Clay' },
      { d: 'zapmail.ai',    n: 'Zapmail' },
      { d: 'prontohq.com',  n: 'ProntoHQ' },
      { d: 'reactin.io',    n: "React'in" },
      { d: 'linkedin.com',  n: 'LinkedIn' },
      { d: 'lemlist.com',   n: 'Lemlist' },
      { d: 'n8n.io',        n: 'n8n' },
      { d: 'koalify.io',    n: 'Koalify' }
    ],
    contact: { name: 'Louis', role: 'Head of Growth · Delos' },
    sections: [
      {
        kind: 'paragraphs',
        eyebrow: '— Contexte',
        h2: 'Contexte initial',
        body: [
          "Delos, c'est une start-up française ultra-prometteuse qui simplifie les tâches quotidiennes de milliers de salariés grâce à une suite bureautique 100 % française et sécurisée construite autour de l'IA.",
          "Quand Louis, le head of growth de Delos, a pris ses fonctions il y a quelques mois, il a vite détecté des éléments à mettre en place pour fluidifier l'acquisition et renforcer leur force de vente."
        ],
        bullets: [
          "Fournir des leads qualifiés en automatique à ses commerciaux.",
          "Lancer des campagnes de prospection multicanal spécifiques en fonction des intents détectés.",
          "Nettoyer les dizaines de milliers de records dans leur CRM (Hubspot).",
          "Mettre en place des séquences de nurturing centrées autour du produit.",
          "Garantir la bonne interaction entre les workflows d'acquisition/prospection et le CRM."
        ]
      },
      {
        kind: 'paragraphs',
        eyebrow: "— Phase d'audit",
        h2: "Tout a commencé par un audit approfondi",
        body: [
          "Avant de construire quoi que ce soit, plusieurs heures d'audit ont été nécessaires pour comprendre le fonctionnement interne de Delos et répondre à des questions essentielles :",
          { kind: 'bullets', items: [
            "Comment est gérée la prospection en interne ?",
            "Quelles sont les différentes sources de provenance des leads ?",
            "Comment les leads rentrent-ils dans le CRM ? Quels sont les IDs uniques utilisables ?",
            "Quelles sont les données essentielles à obtenir sur un lead ?",
            "Quels sont les signaux les plus pertinents pour déterminer si une entreprise est susceptible de devenir cliente ?"
          ]},
          "L'objectif : en savoir un maximum sur le fonctionnement interne, les besoins, les défis et les cibles de Delos — pour orienter la construction de la sales machine au bon endroit.",
          "Tout ça a permis de mettre en place un plan d'action en 2 parties : la partie CRM (nettoyage, workflows internes, nurturing) et la partie workflows d'acquisition (stack technique, détection des intents, enrichissements, scoring, routing).",
          { kind: 'image', src: 'https://lh3.googleusercontent.com/d/1Nof1-8ExvaN-H9gh8nVm5GOx7q__FSAy=s0', alt: "Plan d'action Delos — CRM et workflows d'acquisition" }
        ]
      },
      {
        kind: 'deepDive',
        eyebrow: '— La partie CRM',
        h2: 'Le travail sur la partie CRM',
        intro: "Delos avait une politique d'entrée CRM assez souple avec de multiples sources : actions marketing, auto-import depuis LinkedIn (Kaspr) ou simple création de contact à l'envoi d'un email. Résultat : des fiches hétérogènes, des doublons non détectés, et des leads mal associés aux bons stages de pipeline.",
        subSections: [
          {
            h3: "Règles d'entrée CRM et ID unique",
            body: [
              "C'est la base d'un CRM sain : savoir quand un contact ou une entreprise peut rentrer, et s'assurer qu'il dispose d'un ID unique pour éviter les doublons."
            ],
            bullets: [
              "Entreprises — TOP #1 : numéro SIRET · TOP #2 : company LinkedIn ID · TOP #3 : nom de domaine.",
              "Contacts — TOP #1 : ID LinkedIn · TOP #2 : email ou téléphone."
            ]
          },
          {
            h3: 'Nettoyage, dédoublonnage et enrichissement',
            body: [
              "Le premier gros chantier : nettoyer 100 % des données contacts et entreprises du HubSpot de Delos.",
              { kind: 'numbered', items: [
                "Import de l'ensemble des données sur Clay, sur deux tables distinctes : People et Company.",
                "Vérification des données existantes (email, téléphone, poste, secteur d'activité).",
                "Enrichissement des données manquantes (LinkedIn, JobTitle, Secteur, etc.)."
              ]},
              { kind: 'image', src: 'https://lh3.googleusercontent.com/d/18TI5vGBnCJRRDa4Xp8g3IOWqKzQgy2Q4=s0', alt: 'Enrichissement des données contacts et entreprises sur Clay' },
              "Pour la gestion des doublons, on a utilisé Koalify — un outil très bien intégré avec HubSpot, excellent rapport qualité-prix (5 €/mois pour 10K records).",
              { kind: 'callout', text: "Règle de dédoublonnage — Si Prénom + Nom + LinkedIn URL similaire → doublon. Si ID LinkedIn similaire → doublon." },
              { kind: 'image', src: 'https://lh3.googleusercontent.com/d/1uyrP7xqjSXpnW98R02X4ZMvS3XyuDhdx=s0', alt: 'Gestion des doublons avec Koalify sur HubSpot' }
            ]
          },
          {
            h3: 'Workflow interne de gestion de données',
            body: [
              "Après le nettoyage, on a construit un système capable de tracker l'ensemble des nouveaux contacts et entreprises entrants pour enrichir automatiquement les données manquantes.",
              "Un second workflow peut être actionné manuellement pour lancer une vérification de données de manière bi-annuelle — garantissant des fiches à jour même sur les anciennes."
            ]
          },
          {
            h3: 'Séquences de nurturing spécifiques',
            body: [
              "C'est Félix qui s'est chargé de construire des séquences spécifiques sur 3 triggers différents :"
            ],
            bullets: [
              "Lost lead — relance personnalisée en fonction de la raison du lost.",
              "Réactivation base dormante — relancer sur l'offre Trial Gratuit auprès des utilisateurs inactifs.",
              "Onboarding — séquences automatisées d'aide à la prise en main de la plateforme."
            ],
            after: [
              { kind: 'image', src: 'https://lh3.googleusercontent.com/d/18xdeLsaSw8f8WX9p6N_EWbuQlwz3tfam=s0', alt: "Séquence d'onboarding automatisée — Delos" },
              "Des sujets de nurturing, il y en a des centaines possibles pour un client comme Delos. On a commencé par ceux avec le plus fort impact business."
            ]
          }
        ]
      },
      {
        kind: 'deepDive',
        eyebrow: '— La partie prospection',
        h2: 'Le travail sur les workflows de prospection',
        intro: "Un gros enjeu de Delos : prospecter des leads déjà plus ou moins chauds. Pour ça, rien de mieux que l'intent data — des signaux qui laissent entendre qu'une entreprise pourrait être intéressée par votre service, au bon moment.",
        subSections: [
          {
            h3: 'Les workflows validés',
            body: [
              "On a validé 3 workflows basés sur des intents clés, et en parallèle des flows plus volumiques sans trigger d'intent :"
            ],
            bullets: [
              "Social Espion — capter toutes les interactions avec le contenu LinkedIn de Delos et de ses concurrents.",
              "New Hire — contacter une personne dès qu'elle prend un nouveau poste.",
              "Company Followers — identifier les personnes abonnées à des entreprises concurrentes."
            ]
          },
          {
            h3: 'Architecture commune de tous les flows',
            body: [
              "Chaque workflow suit la même structure reproductible :",
              { kind: 'numbered', items: [
                "Un déclencheur — manuel ou automatique.",
                "Des procédures d'agrégation de données — scraping et enrichissement pour obtenir contacts et informations pertinentes.",
                "Un scoring automatique basé sur les critères collectés et les expériences terrain de Delos.",
                "Un routage automatique des actions de prospection selon l'intent et le score.",
                "Une intégration CRM respectant les données existantes ou créant les fiches avec tous les éléments nécessaires."
              ]},
              { kind: 'image', src: 'https://lh3.googleusercontent.com/d/186TvNT4OXkieTie-cvMukGeIsjBtRaTl=s0', alt: 'Scoring automatique et routing des leads — workflow Delos', maxWidth: 360 },
              "Dans tous ces workflows, on vérifie les listes noires, on nettoie la donnée et on la met en forme pour optimiser la prise de contact et l'attribution."
            ]
          }
        ]
      },
      {
        kind: 'paragraphs',
        eyebrow: '— Test & Formation',
        h2: 'Protocole de test et formation',
        body: [
          "Une fois tous les workflows en place, on les a testés sur une masse de leads suffisante pour s'assurer que tous les cas d'usage sont couverts et que tout fonctionne comme prévu. Cette période a duré environ 2 jours pour l'intervention chez Delos.",
          "Dernière étape : la formation. On est persuadé que l'action la plus ROIste est d'internaliser sa sales machine — mais pour ça, il faut la comprendre et savoir la maîtriser.",
          { kind: 'bullets', items: [
            "Vidéos détaillées sur le fonctionnement de chaque workflow.",
            "SOPs au format PDF dynamique.",
            "Sessions de démonstration et Q&A pour s'assurer que tout est maîtrisé."
          ]},
          "Et voilà comment on a remis à plat l'acquisition de Delos et leur processus de gestion CRM, en renforçant toute leur machine de vente de A à Z."
        ]
      }
    ],
    testimonial: {
      text: "Super mission réalisée avec Antoine. Il a été à l'écoute de nos besoins, force de proposition, adaptable et rigoureux tout au long de la mission. Antoine nous a apporté une véritable expertise sur les stratégies Go-to-market et nous a aidé à co-construire une stratégie sur-mesure pour notre entreprise. La mission a été délivrée dans les délais et a apporté un impact concret et rapide sur nos stratégies de vente. Au plaisir de retravailler ensemble !",
      name: 'Louis Paul-Petit',
      role: 'Growth & RevOps Manager @Delos',
      date: '24 octobre 2025',
      source: 'linkedin',
      avatar: 'https://i.imgur.com/DGXiBkq.jpeg'
    }
  }
});

const CaseStudyHero = ({ data, lang }) => {
  return (
    <section className="u-section" style={{
      paddingTop: 80, paddingBottom: 56,
      position: 'relative',
      overflow: 'hidden'
    }}>
      {/* Lime corner halo */}
      <div style={{
        position: 'absolute', top: -100, right: -120,
        width: 460, height: 460,
        background: 'radial-gradient(circle, rgba(225,255,108,0.55) 0%, rgba(225,255,108,0) 70%)',
        pointerEvents: 'none'
      }}></div>

      <div className="u-container" style={{ position: 'relative' }}>
        {/* Back link */}
        <a
          href="#/use-cases"
          onClick={(e) => { e.preventDefault(); window.location.hash = '/use-cases'; window.scrollTo({ top: 0, behavior: 'auto' }); }}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: 13,
            fontFamily: 'var(--font-mono)',
            color: 'var(--gray-4)',
            marginBottom: 32,
            cursor: 'pointer'
          }}
        >
          <span style={{ fontSize: 14 }}>←</span>
          {lang === 'fr' ? 'Toutes les use cases' : 'All case studies'}
        </a>

        <p className="u-eyebrow" style={{ marginBottom: 18 }}>{data.eyebrow}</p>

        <h1 style={{
          fontSize: 64,
          letterSpacing: '-0.025em',
          lineHeight: 1.05,
          marginBottom: 24,
          maxWidth: 880
        }}>{data.title}</h1>

        <p style={{
          fontSize: 19,
          lineHeight: 1.55,
          color: 'var(--gray-4)',
          maxWidth: 720,
          marginBottom: 40
        }}>{data.lede}</p>

        {/* Meta strip */}
        <div style={{
          display: 'flex',
          flexWrap: 'wrap',
          gap: 28,
          padding: '20px 0',
          borderTop: '1px solid var(--line)',
          borderBottom: '1px solid var(--line)',
          alignItems: 'flex-start'
        }}>
          {/* Team — avec avatars si disponibles */}
          <div>
            <p style={{
              fontSize: 11,
              fontFamily: 'var(--font-mono)',
              textTransform: 'uppercase',
              letterSpacing: '0.06em',
              color: 'var(--gray-3)',
              marginBottom: 6
            }}>{lang === 'fr' ? 'Personnes sur la mission' : 'Team'}</p>
            {data.teamMembers ? (
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
                {data.teamMembers.map((m, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                    <img src={m.avatar} alt={m.name}
                      style={{
                        width: 26, height: 26, borderRadius: '50%',
                        objectFit: 'cover',
                        border: '2px solid var(--bg)',
                        boxShadow: '0 1px 3px rgba(28,29,31,0.12)',
                        flexShrink: 0
                      }}
                      onError={(e) => { e.target.style.display = 'none'; }}
                    />
                    <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{m.name}</span>
                  </div>
                ))}
              </div>
            ) : (
              <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{data.author}</p>
            )}
          </div>

          {/* Autres méta */}
          {[
            [lang === 'fr' ? 'Date de la mission' : 'Mission date', data.date],
            [lang === 'fr' ? 'Durée de la mission' : 'Duration', data.duration],
            [lang === 'fr' ? 'Secteur' : 'Sector', data.sector]
          ].map(([l, v], i) => (
            <div key={i}>
              <p style={{
                fontSize: 11,
                fontFamily: 'var(--font-mono)',
                textTransform: 'uppercase',
                letterSpacing: '0.06em',
                color: 'var(--gray-3)',
                marginBottom: 4
              }}>{l}</p>
              <p style={{ fontSize: 14, fontWeight: 500, color: 'var(--ink)' }}>{v}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const CaseStudyBigCard = ({ data, lang }) => {
  return (
    <section className="u-section" style={{ paddingTop: 0, paddingBottom: 60 }}>
      <div className="u-container">
        <div style={{
          background: 'var(--paper)',
          borderRadius: 24,
          border: '1px solid var(--line)',
          overflow: 'hidden',
          boxShadow: '0 1px 0 rgba(28,29,31,0.04), 0 18px 40px -22px rgba(28,29,31,0.14)'
        }}>
          {/* Lime cover */}
          <div className="u-cs-card-head" style={{
            position: 'relative',
            background: `linear-gradient(135deg, ${data.accent} 0%, rgba(225,255,108,0.4) 100%)`,
            padding: '40px 40px 32px',
            display: 'grid',
            gridTemplateColumns: '1fr auto',
            alignItems: 'flex-end',
            gap: 24
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: 'linear-gradient(rgba(28,29,31,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(28,29,31,0.05) 1px, transparent 1px)',
              backgroundSize: '32px 32px',
              opacity: 0.5,
              pointerEvents: 'none'
            }}></div>

            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 18 }}>
              <div style={{
                width: 72, height: 72, borderRadius: 18,
                background: 'var(--paper)',
                border: '1px solid rgba(28,29,31,0.08)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 6px 14px rgba(28,29,31,0.08)',
                flexShrink: 0
              }}>
                <img
                  src={usecaseLogo(data.d)}
                  alt={data.co}
                  style={{ width: 50, height: 50, objectFit: 'contain', borderRadius: 10 }}
                  onError={(e) => { e.target.style.display = 'none'; }}
                />
              </div>
              <div>
                <p style={{
                  fontSize: 32,
                  fontWeight: 700,
                  letterSpacing: '-0.02em',
                  color: 'var(--ink)',
                  lineHeight: 1.05
                }}>{data.co}</p>
                <p style={{ fontSize: 13, fontFamily: 'var(--font-mono)', color: 'var(--gray-4)', marginTop: 4 }}>
                  {data.sector}
                </p>
              </div>
            </div>

            <a
              href={`https://${data.d}`}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                position: 'relative',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '8px 14px',
                borderRadius: 999,
                background: 'rgba(28,29,31,0.85)',
                color: 'var(--bg)',
                fontSize: 12,
                fontFamily: 'var(--font-mono)',
                letterSpacing: '0.02em'
              }}
            >
              {data.d} <span style={{ fontSize: 11 }}>↗</span>
            </a>
          </div>

          {/* Metrics row */}
          <div className="u-cs-card-row" style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-between',
            padding: '32px 40px',
            gap: 32,
            flexWrap: 'wrap'
          }}>
            <div style={{
              display: 'grid',
              gridTemplateColumns: `repeat(${data.metrics.length}, auto)`,
              gap: 24,
              flexShrink: 0
            }}>
              {data.metrics.map((m, i) => (
                <div key={i} style={{
                  paddingLeft: i === 0 ? 0 : 24,
                  borderLeft: i === 0 ? 'none' : '1px solid var(--line)'
                }}>
                  <p style={{
                    fontFamily: 'var(--font-sans)',
                    fontStyle: 'normal',
                    fontWeight: 700,
                    fontSize: 44,
                    lineHeight: 1,
                    color: 'var(--ink)',
                    marginBottom: 8
                  }}>{m.v}</p>
                  <p style={{
                    fontSize: 11,
                    fontFamily: 'var(--font-mono)',
                    textTransform: 'uppercase',
                    letterSpacing: '0.06em',
                    color: 'var(--gray-3)'
                  }}>{m.l}</p>
                </div>
              ))}
            </div>

            {data.toolsHighlight && (
              <div style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'flex-end',
                gap: 10
              }}>
                <p style={{
                  fontSize: 11,
                  fontFamily: 'var(--font-mono)',
                  textTransform: 'uppercase',
                  letterSpacing: '0.06em',
                  color: 'var(--gray-3)'
                }}>GTM Stack utilisé</p>
                <div style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: 8,
                  flexWrap: 'wrap',
                  justifyContent: 'flex-end'
                }}>
                {data.toolsHighlight.map((t, j) => (
                  <span
                    key={j}
                    title={t.n}
                    style={{
                      display: 'inline-flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: 32,
                      height: 32,
                      borderRadius: 8,
                      background: 'var(--bg)',
                      border: '1px solid var(--line)'
                    }}
                  >
                    <img
                      src={`https://img.logo.dev/${t.d}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`}
                      alt={t.n}
                      width="20" height="20"
                      style={{
                        width: 20,
                        height: 20,
                        borderRadius: 4,
                        objectFit: 'contain'
                      }}
                      onError={(e) => { e.target.style.display = 'none'; }}
                    />
                  </span>
                ))}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

// --- Article body block renderers ---
const ArticleParagraph = ({ children }) => (
  <p style={{
    fontSize: 17,
    lineHeight: 1.65,
    color: 'var(--ink-soft)',
    marginBottom: 18
  }}>{children}</p>
);

const ArticleBullets = ({ items }) => (
  <ul style={{
    listStyle: 'none',
    margin: '4px 0 22px',
    padding: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: 10
  }}>
    {items.map((it, i) => (
      <li key={i} style={{
        display: 'grid',
        gridTemplateColumns: 'auto 1fr',
        gap: 12,
        fontSize: 16,
        lineHeight: 1.55,
        color: 'var(--ink-soft)'
      }}>
        <span style={{
          color: 'var(--accent-edge)',
          fontWeight: 700,
          fontFamily: 'var(--font-mono)',
          marginTop: 2
        }}>✱</span>
        <span>{it}</span>
      </li>
    ))}
  </ul>
);

const ArticleNumbered = ({ items }) => (
  <ol style={{
    margin: '6px 0 22px',
    padding: 0,
    listStyle: 'none',
    counterReset: 'art',
    display: 'flex',
    flexDirection: 'column',
    gap: 10
  }}>
    {items.map((it, i) => (
      <li key={i} style={{
        display: 'grid',
        gridTemplateColumns: 'auto 1fr',
        gap: 14,
        alignItems: 'flex-start',
        fontSize: 16,
        lineHeight: 1.55,
        color: 'var(--ink-soft)'
      }}>
        <span style={{
          width: 28, height: 28,
          borderRadius: 8,
          background: 'var(--accent)',
          border: '1px solid var(--accent-edge)',
          color: 'var(--accent-on)',
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontFamily: 'var(--font-mono)',
          fontSize: 13,
          fontWeight: 600,
          flexShrink: 0
        }}>{i + 1}</span>
        <span style={{ paddingTop: 3 }}>{it}</span>
      </li>
    ))}
  </ol>
);

const ArticleCallout = ({ text }) => (
  <div style={{
    margin: '6px 0 22px',
    padding: '14px 18px',
    background: 'var(--bg-2)',
    border: '1px solid var(--line)',
    borderLeft: '3px solid var(--accent-edge)',
    borderRadius: 10,
    fontSize: 15,
    lineHeight: 1.55,
    color: 'var(--ink-soft)',
    fontFamily: 'var(--font-sans)'
  }}>{text}</div>
);

const StackGrid = ({ groups }) => (
  <div style={{
    margin: '8px 0 22px',
    background: 'var(--paper)',
    border: '1px solid var(--line)',
    borderRadius: 18,
    padding: '20px 22px',
    boxShadow: '0 1px 0 rgba(28,29,31,0.03), 0 6px 16px -10px rgba(28,29,31,0.08)',
    position: 'relative',
    overflow: 'hidden'
  }}>
    {/* Lime corner accent */}
    <div style={{
      position: 'absolute', top: -28, right: -28,
      width: 140, height: 140,
      background: 'radial-gradient(circle, rgba(225,255,108,0.4) 0%, rgba(225,255,108,0) 70%)',
      pointerEvents: 'none'
    }}></div>

    {/* Header */}
    <div style={{ position: 'relative', display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
      <span style={{
        width: 28, height: 28,
        borderRadius: 8,
        background: 'var(--accent)',
        border: '1px solid var(--accent-edge)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        color: 'var(--ink)'
      }}>
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" />
          <path d="M12 12l8-4.5M12 12l-8-4.5M12 12v9" />
        </svg>
      </span>
      <p style={{
        fontSize: 11,
        fontFamily: 'var(--font-mono)',
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        color: 'var(--gray-3)'
      }}>Stack technique utilisée</p>
    </div>

    {/* Groups grid */}
    <div style={{
      position: 'relative',
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: '18px 28px'
    }}>
      {groups.map((g, i) => (
        <div key={i}>
          <p style={{
            fontSize: 11,
            fontFamily: 'var(--font-mono)',
            textTransform: 'uppercase',
            letterSpacing: '0.06em',
            color: 'var(--gray-3)',
            marginBottom: 8
          }}>{g.cat}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {g.tools.map((t, j) => (
              <span
                key={j}
                title={t.n}
                style={{
                  display: 'inline-flex',
                  alignItems: 'center',
                  gap: 7,
                  padding: '5px 10px 5px 5px',
                  borderRadius: 999,
                  background: 'var(--bg)',
                  border: '1px solid var(--line)',
                  fontSize: 13,
                  fontWeight: 500,
                  color: 'var(--ink)'
                }}
              >
                <img
                  src={`https://img.logo.dev/${t.d}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`}
                  alt={t.n}
                  width="20" height="20"
                  style={{
                    width: 20,
                    height: 20,
                    borderRadius: 5,
                    objectFit: 'contain',
                    background: 'var(--paper)'
                  }}
                  onError={(e) => { e.target.style.display = 'none'; }}
                />
                {t.n}
              </span>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const ArticleImage = ({ src, alt, caption, maxWidth }) => (
  <div style={{ margin: '10px 0 28px', maxWidth: maxWidth || '100%' }}>
    <div style={{
      borderRadius: 10,
      overflow: 'hidden',
      border: '1px solid var(--line)'
    }}>
      <img
        src={src}
        alt={alt || ''}
        style={{ display: 'block', width: '100%', height: 'auto' }}
      />
    </div>
    {caption && (
      <p style={{
        marginTop: 10,
        fontSize: 13,
        fontFamily: 'var(--font-mono)',
        color: 'var(--gray-3)',
        textAlign: 'center',
        letterSpacing: '0.02em'
      }}>{caption}</p>
    )}
  </div>
);

const ArticleBody = ({ items }) => (
  <>
    {items.map((it, i) => {
      if (typeof it === 'string') return <ArticleParagraph key={i}>{it}</ArticleParagraph>;
      if (it.kind === 'numbered') return <ArticleNumbered key={i} items={it.items} />;
      if (it.kind === 'callout') return <ArticleCallout key={i} text={it.text} />;
      if (it.kind === 'bullets') return <ArticleBullets key={i} items={it.items} />;
      if (it.kind === 'image') return <ArticleImage key={i} src={it.src} alt={it.alt} caption={it.caption} maxWidth={it.maxWidth} />;
      return null;
    })}
  </>
);

const CaseStudySection = ({ section, lang }) => {
  return (
    <section className="u-section" style={{ paddingTop: 24, paddingBottom: 24 }}>
      <div className="u-container">
        <div style={{ maxWidth: 760, margin: '0 auto' }}>
          {section.eyebrow && (
            <p className="u-eyebrow" style={{ marginBottom: 14, color: 'var(--gray-4)' }}>{section.eyebrow}</p>
          )}
          <h2 style={{
            fontSize: 36,
            letterSpacing: '-0.02em',
            lineHeight: 1.15,
            marginBottom: 24,
            color: 'var(--ink)'
          }}>{section.h2}</h2>

          {section.kind === 'paragraphs' && (
            <>
              {section.body && <ArticleBody items={section.body} />}
              {section.bullets && <ArticleBullets items={section.bullets} />}
            </>
          )}

          {section.kind === 'deepDive' && (
            <>
              {section.intro && <ArticleParagraph>{section.intro}</ArticleParagraph>}
              {section.roadmap && <ArticleNumbered items={section.roadmap} />}

              {section.subSections && section.subSections.map((sub, i) => (
                <div key={i} style={{ marginTop: 36 }}>
                  <h3 style={{
                    fontSize: 24,
                    fontWeight: 600,
                    letterSpacing: '-0.015em',
                    lineHeight: 1.2,
                    marginBottom: 16,
                    color: 'var(--ink)',
                    paddingTop: 14,
                    borderTop: '1px solid var(--line)'
                  }}>{sub.h3}</h3>
                  {sub.body && <ArticleBody items={sub.body} />}
                  {sub.stackGroups && <StackGrid groups={sub.stackGroups} />}
                  {sub.bullets && <ArticleBullets items={sub.bullets} />}
                  {sub.after && <ArticleBody items={sub.after} />}
                </div>
              ))}
            </>
          )}
        </div>
      </div>
    </section>
  );
};

const CaseStudyVideo = ({ video, lang }) => {
  if (!video) return null;
  const src = video.provider === 'vimeo'
    ? `https://player.vimeo.com/video/${video.id}?title=0&byline=0&portrait=0&dnt=1`
    : video.url;
  return (
    <section className="u-section" style={{ paddingTop: 60, paddingBottom: 20 }}>
      <div className="u-container">
        <div style={{ maxWidth: 960, margin: '0 auto' }}>
          <p className="u-eyebrow" style={{ marginBottom: 14, color: 'var(--gray-4)' }}>{video.eyebrow}</p>
          <h2 style={{
            fontSize: 36,
            letterSpacing: '-0.02em',
            lineHeight: 1.15,
            marginBottom: 14,
            color: 'var(--ink)'
          }}>{video.title}</h2>
          {video.caption && (
            <p style={{
              fontSize: 16,
              lineHeight: 1.55,
              color: 'var(--gray-4)',
              maxWidth: 680,
              marginBottom: 28
            }}>{video.caption}</p>
          )}

          {/* Player frame */}
          <div style={{
            position: 'relative',
            padding: 8,
            borderRadius: 24,
            background: 'var(--paper)',
            border: '1px solid var(--line)',
            boxShadow: '0 1px 0 rgba(28,29,31,0.04), 0 18px 40px -22px rgba(28,29,31,0.18)'
          }}>
            {/* Lime corner halo */}
            <div style={{
              position: 'absolute', top: -28, right: -28,
              width: 180, height: 180,
              background: 'radial-gradient(circle, rgba(225,255,108,0.55) 0%, rgba(225,255,108,0) 70%)',
              pointerEvents: 'none', zIndex: 0
            }}></div>

            <div style={{
              position: 'relative',
              paddingBottom: '56.25%',
              height: 0,
              overflow: 'hidden',
              borderRadius: 18,
              background: 'var(--ink)'
            }}>
              <iframe
                src={src}
                title={video.title}
                allow="autoplay; fullscreen; picture-in-picture; clipboard-write"
                allowFullScreen
                loading="lazy"
                style={{
                  position: 'absolute',
                  inset: 0,
                  width: '100%',
                  height: '100%',
                  border: 0,
                  display: 'block'
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CaseStudyQuote = ({ quote, lang }) => {
  return (
    <section className="u-section" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <div className="u-container">
        <div style={{
          maxWidth: 860,
          margin: '0 auto',
          background: 'var(--ink)',
          color: 'var(--bg)',
          borderRadius: 28,
          padding: '56px 48px',
          position: 'relative',
          overflow: 'hidden'
        }}>
          <div style={{
            position: 'absolute', top: -40, right: -40,
            width: 220, height: 220,
            background: 'radial-gradient(circle, rgba(225,255,108,0.4) 0%, rgba(225,255,108,0) 70%)',
            pointerEvents: 'none'
          }}></div>

          <span style={{
            position: 'absolute',
            top: 28, left: 40,
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic',
            fontSize: 96,
            lineHeight: 1,
            color: 'var(--accent)',
            opacity: 0.7,
            pointerEvents: 'none'
          }}>“</span>

          <p style={{
            position: 'relative',
            fontFamily: 'var(--font-display)',
            fontStyle: 'italic',
            fontWeight: 400,
            fontSize: 32,
            lineHeight: 1.25,
            color: 'var(--bg)',
            marginTop: 40,
            marginBottom: 28,
            letterSpacing: '-0.01em'
          }}>{quote.text}</p>

          <div style={{
            position: 'relative',
            display: 'flex', alignItems: 'center', gap: 12,
            paddingTop: 20,
            borderTop: '1px solid rgba(244,241,234,0.16)'
          }}>
            <span style={{
              width: 38, height: 38, borderRadius: '50%',
              background: 'linear-gradient(135deg, #ECFF8E 0%, #C9EE3A 100%)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              color: 'var(--ink)',
              fontWeight: 700,
              fontSize: 14
            }}>{quote.name.charAt(0)}</span>
            <div>
              <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--bg)' }}>{quote.name}</p>
              <p style={{ fontSize: 12, color: 'rgba(244,241,234,0.6)', fontFamily: 'var(--font-mono)', marginTop: 2 }}>{quote.role}</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CaseStudyTestimonial = ({ testimonial, lang }) => {
  return (
    <section className="u-section" style={{ paddingTop: 40, paddingBottom: 60 }}>
      <div className="u-container">
        <div style={{ maxWidth: 860, margin: '0 auto' }}>
          <p className="u-eyebrow" style={{ marginBottom: 14, color: 'var(--gray-4)' }}>
            — {lang === 'fr' ? 'Témoignage client' : 'Client testimonial'}
          </p>
          <h2 style={{
            fontSize: 36,
            letterSpacing: '-0.02em',
            lineHeight: 1.15,
            marginBottom: 28,
            color: 'var(--ink)'
          }}>
            {lang === 'fr' ? "Ce qu'en dit Louis." : 'What Louis says.'}
          </h2>

          <div style={{
            background: 'var(--paper)',
            border: '1px solid var(--line)',
            borderRadius: 24,
            padding: '40px 44px',
            position: 'relative',
            overflow: 'hidden',
            boxShadow: '0 1px 0 rgba(28,29,31,0.04), 0 14px 30px -16px rgba(28,29,31,0.10)'
          }}>
            {/* Lime halo */}
            <div style={{
              position: 'absolute', top: -50, left: -50,
              width: 200, height: 200,
              background: 'radial-gradient(circle, rgba(225,255,108,0.55) 0%, rgba(225,255,108,0) 70%)',
              pointerEvents: 'none'
            }}></div>

            {/* Opening quote mark */}
            <span style={{
              display: 'block',
              fontFamily: 'var(--font-display)',
              fontStyle: 'italic',
              fontSize: 88,
              lineHeight: 0.75,
              color: 'var(--accent)',
              marginBottom: 20,
              position: 'relative',
              userSelect: 'none'
            }}>"</span>

            {/* Quote body */}
            <p style={{
              position: 'relative',
              fontSize: 18,
              lineHeight: 1.7,
              color: 'var(--ink)',
              fontStyle: 'italic',
              marginBottom: 32,
              maxWidth: 700
            }}>{testimonial.text}</p>

            {/* Author row */}
            <div style={{
              position: 'relative',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'space-between',
              gap: 16,
              paddingTop: 20,
              borderTop: '1px solid var(--line)',
              flexWrap: 'wrap'
            }}>
              {/* Left: avatar + name */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                <div style={{
                  width: 46, height: 46, borderRadius: '50%',
                  background: 'linear-gradient(135deg, #ECFF8E 0%, #C9EE3A 100%)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--ink)',
                  fontWeight: 700,
                  fontSize: 17,
                  flexShrink: 0,
                  border: '2px solid rgba(28,29,31,0.08)',
                  overflow: 'hidden'
                }}>
                  {testimonial.avatar
                    ? <img src={testimonial.avatar} alt={testimonial.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                    : testimonial.name.charAt(0)
                  }
                </div>
                <div>
                  <p style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.2 }}>
                    {testimonial.name}
                  </p>
                  <p style={{ fontSize: 13, color: 'var(--gray-4)', marginTop: 3, lineHeight: 1.3 }}>
                    {testimonial.role}
                  </p>
                </div>
              </div>

              {/* Right: date + LinkedIn badge */}
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 7 }}>
                {testimonial.date && (
                  <p style={{
                    fontSize: 12,
                    fontFamily: 'var(--font-mono)',
                    color: 'var(--gray-3)',
                    letterSpacing: '0.03em'
                  }}>{testimonial.date}</p>
                )}
                {testimonial.source === 'linkedin' && (
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                    padding: '4px 10px',
                    borderRadius: 999,
                    background: '#EBF4FC',
                    border: '1px solid #C4DFF5'
                  }}>
                    <svg width="13" height="13" viewBox="0 0 24 24" fill="#0A66C2">
                      <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                    </svg>
                    <span style={{
                      fontSize: 11,
                      fontFamily: 'var(--font-mono)',
                      color: '#0A66C2',
                      letterSpacing: '0.03em'
                    }}>
                      {lang === 'fr' ? 'Recommandation LinkedIn' : 'LinkedIn Recommendation'}
                    </span>
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const CaseStudyRelated = ({ currentSlug, lang }) => {
  const others = USECASES_DATA(lang).filter(c => c.slug !== currentSlug);
  return (
    <section className="u-section" style={{ paddingTop: 60, paddingBottom: 100 }}>
      <div className="u-container">
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'flex-end',
          marginBottom: 32,
          flexWrap: 'wrap',
          gap: 16
        }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 12 }}>
              — {lang === 'fr' ? 'Aller plus loin' : 'Go further'}
            </p>
            <h2 style={{ fontSize: 36, letterSpacing: '-0.02em' }}>
              {lang === 'fr' ? 'Autres études de cas' : 'Other case studies'}
            </h2>
          </div>
          <a
            href="#/use-cases"
            onClick={(e) => { e.preventDefault(); window.location.hash = '/use-cases'; window.scrollTo({ top: 0, behavior: 'auto' }); }}
            className="u-btn u-btn-ghost"
            style={{ padding: '10px 18px', fontSize: 14 }}
          >{lang === 'fr' ? 'Toutes les use cases' : 'All case studies'} →</a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 24
        }}>
          {others.map(c => (
            <UseCaseCard key={c.slug} c={c} lang={lang} />
          ))}
        </div>
      </div>
    </section>
  );
};

const CASE_CTA_LOGOS = [
  'cleaq.com',
  'delos.so',
  'imagine-medias.fr',
  'batoobike.ch',
  'review-collect.com',
  'alteia.com',
  'kalent.ai',
  'hyperstack.fr',
  'just-coaching.fr',
  'bloon-paris.com'
];

const CaseStudyStickyCta = ({ lang }) => {
  const [dismissed, setDismissed] = useState(false);
  const [shown, setShown] = useState(false);
  const close = () => setDismissed(true);

  useEffect(() => {
    const id = setTimeout(() => setShown(true), 15000);
    return () => clearTimeout(id);
  }, []);

  if (dismissed || !shown) return null;

  // Doubled list for seamless marquee loop
  const marqueeLogos = [...CASE_CTA_LOGOS, ...CASE_CTA_LOGOS];

  return (
    <aside className="u-case-cta" aria-label={lang === 'fr' ? 'Prendre rendez-vous' : 'Book a meeting'}>
      {/* Header: avatar + close */}
      <div className="u-case-cta-header">
        <img
          className="u-case-cta-avatar"
          src="https://i.imgur.com/SFkDyJd.png"
          alt="Antoine Guiné"
          onError={(e) => { e.target.style.display = 'none'; }}
        />
        <button
          type="button"
          className="u-case-cta-close"
          onClick={close}
          aria-label={lang === 'fr' ? 'Fermer' : 'Close'}
        >
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M18 6 6 18M6 6l12 12" />
          </svg>
        </button>
      </div>

      <p className="u-case-cta-title">
        {lang === 'fr' ? 'Prêt à scaler ?' : 'Ready to scale?'}
      </p>
      <p className="u-case-cta-desc">
        {lang === 'fr'
          ? '30 minutes de workshop offertes pour challenger votre Go-to-market.'
          : '30 minutes of free workshop to challenge your Go-to-market.'}
      </p>

      <div className="u-case-cta-marquee" aria-hidden="true">
        <div className="u-case-cta-marquee-track">
          {marqueeLogos.map((d, i) => (
            <img
              key={`${d}-${i}`}
              src={`https://img.logo.dev/${d}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`}
              alt=""
              onError={(e) => { e.target.style.display = 'none'; }}
            />
          ))}
        </div>
      </div>

      <a
        className="u-btn u-btn-primary u-case-cta-btn"
        data-cal-link="antoineguine/appel-de-decouverte-website"
        data-cal-namespace="appel-de-decouverte-website"
        data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}'
      >{lang === 'fr' ? 'Réserver un créneau' : 'Book a slot'} →</a>
    </aside>
  );
};

const CaseStudyPage = ({ slug, lang }) => {
  const data = CASE_DETAIL_DATA(lang)[slug];
  if (!data) {
    return (
      <section className="u-section" style={{ paddingTop: 120, paddingBottom: 120 }}>
        <div className="u-container" style={{ textAlign: 'center' }}>
          <p className="u-eyebrow" style={{ marginBottom: 14 }}>404</p>
          <h1 style={{ fontSize: 48, marginBottom: 18 }}>
            {lang === 'fr' ? 'Étude introuvable' : 'Case study not found'}
          </h1>
          <a
            href="#/use-cases"
            onClick={(e) => { e.preventDefault(); window.location.hash = '/use-cases'; window.scrollTo({ top: 0 }); }}
            className="u-btn u-btn-primary"
            style={{ padding: '12px 22px', fontSize: 15, marginTop: 12 }}
          >{lang === 'fr' ? 'Voir toutes les études' : 'See all case studies'} →</a>
        </div>
      </section>
    );
  }
  return (
    <>
      <CaseStudyHero data={data} lang={lang} />
      <CaseStudyBigCard data={data} lang={lang} />
      {data.sections.map((s, i) => (
        <CaseStudySection key={i} section={s} lang={lang} />
      ))}
      {data.video && <CaseStudyVideo video={data.video} lang={lang} />}
      {data.quote && <CaseStudyQuote quote={data.quote} lang={lang} />}
      {data.testimonial && <CaseStudyTestimonial testimonial={data.testimonial} lang={lang} />}
      <CaseStudyRelated currentSlug={slug} lang={lang} />
      <CtaFinal lang={lang} />
      <CaseStudyStickyCta lang={lang} />
    </>
  );
};

window.CaseStudyPage = CaseStudyPage;