/* Hi-fi — Sections: logos strip, problem, solution (3 modules), signals,
 * tools marquee, setup kanban, comparator, cases (logos+quotes), team, FAQ, CTA, footer
 */

const LOGO_TOKEN = 'pk_LbhDh0o7S7SEtCE7aOlL5Q';
const clientLogoUrl = (d) => `https://img.logo.dev/${d}?token=${LOGO_TOKEN}&retina=true`;
const CLIENT_LOGOS = [
{ n: 'Cleaq', d: 'cleaq.com', m: '×2 RDV', title: '×2 RDV Qualifié', desc: 'Mise en place d\'une machine de prospection sur des signaux d\'achats forts le tout connecté au CRM.' },
{ n: 'Delos', d: 'delos.so' },
{ n: 'Review Collect', d: 'review-collect.com' },
{ n: 'Alteia', d: 'alteia.com' },
{ n: 'Kalent', d: 'kalent.ai', m: 'Play PLG', title: 'Play PLG end-to-end activé', desc: 'Mise en place d\'un système PLG complet permettant de scorer et qualifier les nouveaux inscrits en automatique.' },
{ n: 'Hyperstack', d: 'hyperstack.fr' },
{ n: 'Imagine Medias', d: 'imagine-medias.fr', m: '+20K signé', title: '+20K signé le premier mois', desc: 'Mise en place d\'un système de prospection qui génère +5% de taux de réponse positif moyen (Plus de 300K de pipeline).' },
{ n: 'Batoo Bike', d: 'batoobike.ch', m: '+50 RDV', title: '+50 RDV qualifiés générés', desc: 'Avec des campagnes de prospection automatisée sur toute la Suisse.' },
{ n: 'MakeTheGrade', d: 'makethegrade.fr', m: '+10K leads', title: '+10K leads qualifiés/mois', desc: 'Mise en place d\'une machine d\'acquisition complète intent-based leur permettant de détecter des milliers de leads qualifiés chaque mois.' },
{ n: 'Gimmic', d: 'gimmic-design.com', m: '300K pipeline', title: '300K de pipeline créé', desc: '+24 campagnes lancées sur 12 mois pour plus de 300K de pipeline généré.' },
{ 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' }];


/* LogoChip — tooltip rendered via ReactDOM.createPortal so it escapes
   the mask-image stacking context and never gets clipped by sibling sections. */
const LogoChip = ({ c }) => {
  const hasTooltip = !!c.title;
  const chipRef = useRef(null);
  const [tipStyle, setTipStyle] = useState(null);

  const showTip = () => {
    if (!hasTooltip || !chipRef.current) return;
    const r = chipRef.current.getBoundingClientRect();
    const W = 300, GAP = 12;
    // Clamp horizontally so tooltip stays inside viewport
    let left = r.left + r.width / 2 - W / 2;
    left = Math.max(12, Math.min(left, window.innerWidth - W - 12));
    // Show above if enough room, else below
    const above = r.top > 240;
    setTipStyle(above
      ? { left, width: W, bottom: window.innerHeight - r.top + GAP, top: 'auto', placement: 'top' }
      : { left, width: W, top: r.bottom + GAP, bottom: 'auto', placement: 'bottom' });
  };

  const hideTip = () => setTipStyle(null);

  const portal = hasTooltip && tipStyle ? ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      left: tipStyle.left,
      top: tipStyle.top,
      bottom: tipStyle.bottom,
      width: tipStyle.width,
      padding: 16,
      background: 'var(--paper)',
      border: '1px solid var(--line)',
      borderRadius: 12,
      boxShadow: '0 18px 40px -16px rgba(28,29,31,0.28), 0 1px 0 rgba(28,29,31,0.04)',
      zIndex: 9999,
      pointerEvents: 'none',
      animation: 'tooltipIn .15s ease both',
    }}>
      <style>{`@keyframes tooltipIn { from { opacity:0; transform:translateY(${tipStyle.placement === 'top' ? '4' : '-4'}px) } to { opacity:1; transform:translateY(0) } }`}</style>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
        <img src={clientLogoUrl(c.d)} alt="" width="22" height="22"
          style={{ width: 22, height: 22, borderRadius: 5, objectFit: 'contain' }}
          onError={(e) => { e.target.style.display = 'none'; }} />
        <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{c.n}</span>
        {c.m && <span style={{ marginLeft: 'auto', fontSize: 10, fontFamily: 'var(--font-mono)', padding: '2px 7px', borderRadius: 999, background: 'var(--accent)', color: 'var(--ink)', fontWeight: 600 }}>{c.m}</span>}
      </div>
      <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.35, marginBottom: 8, letterSpacing: '-0.01em' }}>{c.title}</p>
      {c.desc && <p style={{ fontSize: 13, color: 'var(--gray-4)', lineHeight: 1.5 }}>{c.desc}</p>}
    </div>,
    document.body
  ) : null;

  return (
    <>
      <div
        ref={chipRef}
        onMouseEnter={showTip}
        onMouseLeave={hideTip}
        className="u-logo-chip"
        style={{ display: 'flex', alignItems: 'center', gap: 10, flexShrink: 0, cursor: hasTooltip ? 'default' : 'default' }}
      >
        <img src={clientLogoUrl(c.d)} alt={c.n} width="26" height="26"
          style={{ width: 26, height: 26, borderRadius: 6, objectFit: 'contain', flexShrink: 0 }}
          onError={(e) => { e.target.style.display = 'none'; }} />
        <span style={{ fontSize: 17, fontWeight: 600, fontFamily: 'var(--font-sans)', color: 'var(--ink)', whiteSpace: 'nowrap' }}>{c.n}</span>
        {c.m && <span style={{ fontSize: 11, fontFamily: 'var(--font-mono)', padding: '3px 8px', borderRadius: 999, background: 'var(--accent)', color: 'var(--ink)', whiteSpace: 'nowrap', letterSpacing: '-0.01em' }}>{c.m}</span>}
      </div>
      {portal}
    </>
  );
};


const LogosStrip = ({ lang }) => {
  // Interleave logos across the two rows so pills are mixed (not bunched in row A).
  // Order alternates: even-indexed logos → row A, odd-indexed → row B.
  const rowA = CLIENT_LOGOS.filter((_, i) => i % 2 === 0);
  const rowB = CLIENT_LOGOS.filter((_, i) => i % 2 === 1);
  // Repeat 3× so each row is always wider than any viewport — prevents the right-side gap
  // when the marquee starts mid-loop (translateX(-50%) on row B).
  const repeat = (arr) => [...arr, ...arr, ...arr];
  return (
    <section style={{ padding: '44px 0 36px', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <style>{`
        @keyframes ticker-l { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
        @keyframes ticker-r { from { transform: translateX(-33.3333%); } to { transform: translateX(0); } }
        .u-logos-row {
          display: flex; gap: 36px; width: max-content; align-items: center;
          position: relative; z-index: 1;
        }
        .u-logos-row-a { animation: ticker-l 55s linear infinite; }
        .u-logos-row-b { animation: ticker-r 65s linear infinite; }
        .u-logos-row:hover { animation-play-state: paused; }
        .u-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: 18px;
        }
      `}</style>
      <div className="u-container">
        <p className="u-eyebrow" style={{ marginBottom: 22, textAlign: 'center' }}>
          {lang === 'fr' ? '80+ équipes B2B nous font confiance' : 'Trusted by 80+ B2B teams'}
        </p>
      </div>
      <div className="u-logos-mask">
        <div className="u-logos-row u-logos-row-a">
          {repeat(rowA).map((c, i) => <LogoChip key={`a${i}`} c={c} />)}
        </div>
        <div className="u-logos-row u-logos-row-b">
          {repeat(rowB).map((c, i) => <LogoChip key={`b${i}`} c={c} />)}
        </div>
      </div>
    </section>);

};

const Metrics = ({ lang }) => {
  const t = COPY[lang];
  return (
    <section className="u-section" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="u-container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
          {t.metrics.map((m, i) =>
          <div key={i} style={{ borderLeft: i ? '1px solid var(--line)' : 'none', paddingLeft: i ? 32 : 0 }}>
              <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 64, lineHeight: 1, fontWeight: 400 }}>{m.v}</p>
              <p style={{ marginTop: 10, fontSize: 14, color: 'var(--gray-3)' }}>{m.l}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const ProblemSection = ({ lang }) => {
  const t = COPY[lang].problem;
  const items = lang === 'fr' ? [
  { h: 'Lead-gen', i: ['Délivrabilité fragile', 'Volume sans qualité', 'Spam folder'] },
  { h: 'Signaux', i: ['Aucun monitoring', 'Timing raté', 'Buyers manqués'] },
  { h: 'RevOps', i: ['CRM sale', 'Pas de scoring', 'Routing manuel'] },
  { h: 'Closing', i: ['SDR épuisés', 'Forecast cassé', 'Pipe instable'] }] :
  [
  { h: 'Lead-gen', i: ['Fragile deliverability', 'Volume without quality', 'Spam folders'] },
  { h: 'Signals', i: ['No monitoring', 'Wrong timing', 'Buyers missed'] },
  { h: 'RevOps', i: ['Dirty CRM', 'No scoring', 'Manual routing'] },
  { h: 'Closing', i: ['Burnt-out SDRs', 'Broken forecast', 'Unstable pipe'] }];


  return (
    <section className="u-section" style={{ paddingTop: 120, paddingBottom: 120 }}>
      <div className="u-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', marginBottom: 50 }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
            <h2 style={{ maxWidth: 560 }}>{t.h2}</h2>
          </div>
          <p style={{ fontSize: 17, color: 'var(--gray-4)', maxWidth: 420 }}>{t.sub}</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
          {items.map((b, i) =>
          <div key={i} className="u-card" style={{ padding: 22 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
                <h3 style={{ fontSize: 20 }}>{b.h}</h3>
                <span style={{ width: 24, height: 24, borderRadius: '50%', color: 'var(--warn)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, background: "rgba(237, 124, 73, 0.663)" }}>✕</span>
              </div>
              <ul style={{ margin: 0, paddingLeft: 0, listStyle: 'none' }}>
                {b.i.map((x, j) =>
              <li key={j} style={{ fontSize: 13, color: 'var(--gray-3)', padding: '6px 0', borderTop: j ? '1px solid var(--line)' : 'none' }}>— {x}</li>
              )}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const SolutionSection = ({ lang }) => {
  const t = COPY[lang].solution;
  const pillars = lang === 'fr' ? [
  {
    n: '01', title: 'Outbound',
    sub: 'On identifie vos prospects cibles pour générer rapidement des RDV.',
    setup: ['Infra Email', 'Matrice ICP', 'Cadrage TAM'],
    trunk: [
    { t: 'Sélection Play & Signaux', logos: ['getcargo.io', 'claude.ai'] },
    { t: 'Sourcing comptes & contacts', logos: ['getcargo.io', 'fullenrich.com', 'companyenrich.com'] },
    { t: 'Scoring & priorisation des leads', logos: ['getcargo.io', 'claude.ai'] }],
    branches: [
    { tier: 'Tier 1', tone: 'accent', mid: 'Forte intention', out: 'Omnicanal', outLogos: ['lemlist.com'] },
    { tier: 'Tier 2', tone: 'ink', mid: 'Basé signaux', out: 'Multicanal', outLogos: ['lemlist.com'] },
    { tier: 'Tier 3', tone: 'soft', mid: 'Personnalisé', out: 'Emailing', outLogos: ['instantly.ai'] }]
  },
  {
    n: '02', title: 'Inbound',
    sub: 'On boost votre visibilité et on capte les leads entrant.',
    setup: ['Matrice ICP', 'Stratégies', 'Assets créatifs'],
    trunk: [
    { t: 'Production de Contenu', logos: ['linkedin.com', 'youtube.com'] },
    { t: 'Capture des leads', logos: ['getcargo.io', 'fibbler.co'] },
    { t: 'Enrichissement & Qualification', logos: ['getcargo.io', 'companyenrich.com', 'fullenrich.com'] }],
    branches: [
    { tier: 'Ads Amplification', tone: 'accent' },
    { tier: 'Influence B2B', tone: 'ink' }],
    converge: [
    { t: 'Demande entrante', logos: ['linkedin.com'] },
    { t: 'Setting', logos: ['lemlist.com'] }]
  },
  {
    n: '03', title: 'Revops',
    sub: 'On structure votre data et réactive les leads dormants.',
    setup: ['Audit CRM', 'Structure CRM', 'Scoring CRM'],
    trunk: [
    { t: 'Événement CRM', logos: ['hubspot.com', 'attio.com'] },
    { t: 'Déduplication & Association', logos: ['getcargo.io'] },
    { t: 'Enrichissement & Qualification', logos: ['fullenrich.com', 'companyenrich.com', 'getcargo.io'] },
    { t: 'Refresh CRM', logos: ['hubspot.com', 'attio.com'] }],
    branches: [],
    final: [
    { t: 'Si score > 80 → Sales Action', logos: ['slack.com'] },
    { t: 'Si score 60–80 → Automatisation', logos: ['instantly.ai'] }]
  }] :
  [
  {
    n: '01', title: 'Outbound',
    sub: 'We identify your target prospects to quickly generate meetings.',
    setup: ['Email Infra', 'ICP Matrix', 'TAM Scoping'],
    trunk: [
    { t: 'Play & Signals Selection', logos: ['getcargo.io', 'claude.ai'] },
    { t: 'Company & Contact Sourcing', logos: ['getcargo.io', 'fullenrich.com', 'companyenrich.com'] },
    { t: 'Lead Scoring & Tiering', logos: ['getcargo.io', 'claude.ai'] }],
    branches: [
    { tier: 'Tier 1', tone: 'accent', mid: 'High-Intent', out: 'Omnichannel', outLogos: ['lemlist.com'] },
    { tier: 'Tier 2', tone: 'ink', mid: 'Signal-Based', out: 'Multichannel', outLogos: ['lemlist.com'] },
    { tier: 'Tier 3', tone: 'soft', mid: 'Personalized', out: 'Email Only', outLogos: ['instantly.ai'] }]
  },
  {
    n: '02', title: 'Inbound',
    sub: 'We boost your visibility and capture inbound leads.',
    setup: ['ICP Matrix', 'Strategies', 'Creative Assets'],
    trunk: [
    { t: 'Content & Ads Production', logos: ['linkedin.com', 'youtube.com'] },
    { t: 'Lead Capture', logos: ['getcargo.io', 'fibbler.co'] },
    { t: 'Enrichment & Qualification', logos: ['getcargo.io', 'companyenrich.com', 'fullenrich.com'] }],
    branches: [
    { tier: 'Ads Amplification', tone: 'accent' },
    { tier: 'B2B Influence', tone: 'ink' }],
    converge: [
    { t: 'Inbound Demand', logos: ['linkedin.com'] },
    { t: 'Setting', logos: ['lemlist.com'] }]
  },
  {
    n: '03', title: 'Revops',
    sub: 'We structure your data and reactivate dormant leads.',
    setup: ['CRM Audit', 'CRM Structuring', 'CRM Scoring'],
    trunk: [
    { t: 'CRM Event', logos: ['hubspot.com', 'attio.com'] },
    { t: 'Deduplication & Association', logos: ['getcargo.io'] },
    { t: 'Enrichment & Qualification', logos: ['fullenrich.com', 'companyenrich.com', 'getcargo.io'] },
    { t: 'CRM Refresh', logos: ['hubspot.com', 'attio.com'] }],
    branches: [],
    final: [
    { t: 'If score > 80 → Sales Action', logos: ['slack.com'] },
    { t: 'If score 60–80 → Automation', logos: ['instantly.ai'] }]
  }];


  return (
    <section className="u-section" style={{ paddingTop: 100, paddingBottom: 100, position: 'relative', overflow: 'hidden' }}>
      {/* faint grid bg */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        opacity: 0.5,
        pointerEvents: 'none'
      }}></div>
      <div className="u-container" style={{ position: 'relative' }}>
        <p className="u-eyebrow" style={{ marginBottom: 18, display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent-edge)' }}></span>
          {lang === 'fr' ? 'LA SOLUTION' : 'THE SOLUTION'}
        </p>
        <h2 style={{ marginBottom: 56, maxWidth: 880 }}>
          {lang === 'fr' ? 'Nos 3 piliers pour activer votre acquisition :' : 'Our 3 pillars to activate your acquisition:'}
        </h2>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {pillars.map((p, i) => <Pillar key={i} p={p} lang={lang} />)}
        </div>

        <p className="rdv-note" style={{ marginTop: 16, fontSize: 13, fontStyle: 'italic', color: 'var(--gray-3)' }}>
          * {lang === 'fr' ? 'Chaque pilier peut être activé indépendamment' : 'Each pillar can be activated independently'}
        </p>

        {/* Connector arrows — 3 pillars → central meeting card */}
        {/* Lines SVG: preserveAspectRatio="none" to span full width. Arrowhead is a
            separate non-distorted SVG so it keeps its true triangle shape. */}
        <div className="u-desktop-only" style={{ position: 'relative', width: '100%', height: 60, marginTop: 8 }}>
          <svg aria-hidden="true" viewBox="0 0 100 100" preserveAspectRatio="none"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
            {/* Left pillar (≈ 1/6 of container) → center */}
            <path d="M 16.7,0 C 16.7,55 50,42 50,86"
              stroke="var(--gray-3)" strokeWidth="1.5" fill="none"
              opacity="0.2" vectorEffect="non-scaling-stroke" />
            {/* Center pillar → center */}
            <line x1="50" y1="0" x2="50" y2="86"
              stroke="var(--gray-3)" strokeWidth="1.5"
              opacity="0.2" vectorEffect="non-scaling-stroke" />
            {/* Right pillar (≈ 5/6 of container) → center */}
            <path d="M 83.3,0 C 83.3,55 50,42 50,86"
              stroke="var(--gray-3)" strokeWidth="1.5" fill="none"
              opacity="0.2" vectorEffect="non-scaling-stroke" />
          </svg>
          {/* Arrowhead: standalone fixed-size SVG at convergence point — never distorted */}
          <svg aria-hidden="true" width="14" height="9" viewBox="0 0 14 9"
            style={{ position: 'absolute', bottom: 0, left: '50%', transform: 'translateX(-50%)', display: 'block', opacity: 0.2 }}>
            <path d="M0,0 L14,0 L7,9 Z" fill="var(--gray-3)" />
          </svg>
        </div>

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

};

const OSConverger = ({ lang }) => {
  const meetings = lang === 'fr' ? [
  { name: 'Camille Laurent', role: 'Head of Sales', co: 'Norélio', tag: 'NEW BIZ', when: 'Jeu · 14:00', dur: '30 min', source: 'Linkedin · Out', meet: 'meet.google.com/yqz-rfvm-ksb' },
  { name: 'Julien Mercier', role: 'COO', co: 'Galvane', tag: 'NEW BIZ', when: 'Ven · 10:30', dur: '30 min', source: 'Lead Magnet', meet: 'meet.google.com/dxh-pktw-mns' },
  { name: 'Sophie Lefèvre', role: 'VP Revenue', co: 'Atelio', tag: 'NEW BIZ', when: 'Ven · 15:00', dur: '45 min', source: 'CRM · Reactivation', meet: 'meet.google.com/jvr-bcat-pwq' }] :
  [
  { name: 'Camille Laurent', role: 'Head of Sales', co: 'Norélio', tag: 'NEW BIZ', when: 'Thu · 14:00', dur: '30 min', source: 'Linkedin · Out', meet: 'meet.google.com/yqz-rfvm-ksb' },
  { name: 'Julien Mercier', role: 'COO', co: 'Galvane', tag: 'NEW BIZ', when: 'Fri · 10:30', dur: '30 min', source: 'Lead Magnet', meet: 'meet.google.com/dxh-pktw-mns' },
  { name: 'Sophie Lefèvre', role: 'VP Revenue', co: 'Atelio', tag: 'NEW BIZ', when: 'Fri · 15:00', dur: '45 min', source: 'CRM · Reactivation', meet: 'meet.google.com/jvr-bcat-pwq' }];

  // Horizontal fan: 3 cards at same vertical level, offset left, overlapping
  const positions = [
    { top: 12, left: 0,   width: 300, rotate: -4,  z: 1, delay: 0   },
    { top: 0,  left: 155, width: 300, rotate: 0.5, z: 3, delay: 0.4 },
    { top: 10, left: 310, width: 300, rotate: 4,   z: 2, delay: 0.8 },
  ];

  return (
    <div className="rdv-converger" style={{ marginTop: 8, paddingBottom: 40 }}>
      {/* Horizontal fan */}
      <div style={{
        position: 'relative',
        height: 220,
        maxWidth: 620,
        margin: '0 auto',
        perspective: 1200,
      }}>
        {meetings.map((m, i) => {
          const p = positions[i];
          return (
            <div
              key={i}
              className={i > 0 ? 'u-cta-mobile-hide' : 'rdv-lead-card'}
              style={{
                position: 'absolute',
                top: p.top,
                left: p.left,
                width: p.width,
                zIndex: p.z,
                animation: `ctaCardEnter 0.7s cubic-bezier(0.22, 0.9, 0.32, 1) ${p.delay}s both, ctaCardFloat 6s ease-in-out ${0.7 + p.delay + i * 0.4}s infinite`,
                '--ctaR': `${p.rotate}deg`,
                transformOrigin: 'center center',
              }}
            >
              <MeetingCard m={m} index={i} lang={lang} />
              {i === 0 && (
                <span className="u-mobile-only" style={{
                  position: 'absolute', top: -8, right: -8,
                  minWidth: 28, height: 28, borderRadius: 999,
                  background: '#E53935', color: '#fff',
                  fontSize: 11, fontWeight: 700,
                  fontFamily: 'var(--font-sans)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  boxShadow: '0 0 0 2px var(--bg)',
                  padding: '0 6px', zIndex: 10,
                }}>+45</span>
              )}
            </div>
          );
        })}
      </div>

      {/* Caption with cal.com signature */}
      <div className="rdv-caption" style={{
        marginTop: 36,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12
      }}>
        <p style={{
          fontSize: 14, color: 'var(--gray-4)', textAlign: 'center', maxWidth: 560
        }}>
          {lang === 'fr' ?
          'Nos systèmes vous génèrent des rendez-vous auprès de vos prospects cibles.' :
          'Our systems generate meetings with your target prospects.'}
        </p>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em',
          color: 'var(--gray-4)'
        }}>
          <span style={{ color: 'var(--ink)', fontWeight: 600 }}>+1,5K</span>
          {lang === 'fr' ? 'RDV générés pour' : 'meetings generated for'}
          <span style={{ display: 'inline-flex', alignItems: 'center' }}>
            {[
              { d: 'imagine-medias.fr', n: 'Imagine Medias' },
              { d: 'review-collect.com', n: 'Review Collect' },
              { d: 'cleaq.com', n: 'Cleaq' },
              { d: 'delos.so', n: 'Delos' }
            ].map((l, i) => (
              <img
                key={l.d}
                src={`https://img.logo.dev/${l.d}?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true`}
                alt={l.n}
                title={l.n}
                style={{
                  width: 22, height: 22, borderRadius: '50%',
                  border: '1.5px solid var(--paper)',
                  background: 'var(--paper)',
                  objectFit: 'cover',
                  marginLeft: i === 0 ? 0 : -6,
                  boxShadow: '0 2px 6px rgba(28,29,31,0.12)'
                }} />
            ))}
          </span>
        </span>
      </div>
    </div>);

};

const OrbitLabel = ({ angle, radius, text, highlight, delay = 0 }) => {
  // place label on circle around (170,170) center within the 340x340 orb
  const rad = angle * Math.PI / 180;
  const x = 170 + Math.cos(rad) * radius;
  const y = 170 + Math.sin(rad) * radius;
  return (
    <div style={{
      position: 'absolute', left: x, top: y, transform: 'translate(-50%, -50%)',
      pointerEvents: 'none',
      animation: `labelFloat 3.6s ease-in-out ${delay}s infinite`
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 6,
        padding: '4px 9px', borderRadius: 999,
        background: highlight ? 'rgba(225,255,108,0.2)' : 'rgba(28,29,31,0.85)',
        border: `1px solid ${highlight ? 'rgba(225,255,108,0.6)' : 'rgba(28,29,31,0.4)'}`,
        backdropFilter: 'blur(6px)',
        fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.04em',
        color: highlight ? '#1c1d1f' : 'rgba(245,240,225,0.95)',
        whiteSpace: 'nowrap',
        boxShadow: highlight ? '0 0 16px rgba(225,255,108,0.4)' : '0 4px 12px rgba(0,0,0,0.15)',
        fontWeight: highlight ? 600 : 400
      }}>
        <span style={{
          width: 4, height: 4, borderRadius: '50%',
          background: highlight ? '#1c1d1f' : 'var(--accent)',
          boxShadow: highlight ? 'none' : '0 0 6px var(--accent)'
        }}></span>
        {text}
      </div>
    </div>);

};

const MeetingCard = ({ m, index = 0, lang = 'fr', offset }) => {
  const sourceLabel = lang === 'fr' ?
  m.source.replace('Out', 'Outbound').replace('In', 'Inbound').replace('Reactivation', 'Réactivation') :
  m.source.replace('Out', 'Outbound').replace('In', 'Inbound');

  const floatStyle = offset ? {
    '--baseY': `${offset.y}px`,
    '--baseR': `${offset.r}deg`,
    animation: `cardFloat 6s ease-in-out ${index * 0.6}s infinite`,
    transform: `translateY(${offset.y}px) rotate(${offset.r}deg)`
  } : {};

  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--line)',
      borderRadius: 16,
      padding: 18,
      boxShadow: offset ?
        '0 24px 48px -20px rgba(28,29,31,0.28), 0 8px 18px -10px rgba(28,29,31,0.18)' :
        '0 10px 28px -16px rgba(0,0,0,0.18)',
      display: 'flex', flexDirection: 'column', gap: 14,
      position: 'relative',
      transition: 'box-shadow 0.2s',
      ...floatStyle
    }}>
      {/* Cal.com logo top-left */}
      <span style={{
        position: 'absolute', top: 12, left: 14,
        display: 'flex', alignItems: 'center', gap: 6,
        fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.06em',
        color: 'var(--gray-3)'
      }}>
        <img
          src="https://img.logo.dev/cal.com?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true"
          alt="cal.com"
          style={{ width: 14, height: 14, borderRadius: 3, objectFit: 'contain' }} />
        cal.com
      </span>

      {/* Confirmed badge top-right */}
      <span style={{
        position: 'absolute', top: 14, right: 14,
        display: 'flex', alignItems: 'center', gap: 5,
        fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.1em',
        color: 'var(--positive, #2d7d46)',
        textTransform: 'uppercase'
      }}>
        <span style={{
          width: 6, height: 6, borderRadius: '50%',
          background: 'var(--positive, #2d7d46)'
        }}></span>
        {lang === 'fr' ? 'Confirmé' : 'Confirmed'}
      </span>

      {/* Header: name + role/co */}
      <div style={{ paddingRight: 60, marginTop: 22 }}>
        <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.2 }}>{m.name}</p>
        <p style={{ fontSize: 11, color: 'var(--gray-3)', marginTop: 3 }}>
          {m.role} · <span style={{ color: 'var(--gray-4)', fontWeight: 500 }}>{m.co}</span>
        </p>
      </div>

      {/* When + duration row */}
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10,
        padding: '10px 12px',
        background: 'var(--bg-2)',
        borderRadius: 8,
        border: '1px solid var(--line)'
      }}>
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="var(--gray-4)" strokeWidth="1.4">
          <rect x="2" y="3" width="10" height="9" rx="1.5" />
          <path d="M2 5.5h10M5 1.5v3M9 1.5v3" />
        </svg>
        <span style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500, fontFamily: 'var(--font-mono)' }}>
          {m.when}
        </span>
        <span style={{ width: 1, height: 12, background: 'var(--line)' }}></span>
        <span style={{ fontSize: 11, color: 'var(--gray-3)', fontFamily: 'var(--font-mono)' }}>{m.dur}</span>
      </div>

      {/* Google Meet link row */}
      <a
        href="#"
        onClick={(e) => e.preventDefault()}
        style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '8px 12px',
          background: 'var(--paper)',
          border: '1px solid var(--line)',
          borderRadius: 8,
          textDecoration: 'none',
          transition: 'background 0.15s'
        }}>
        <svg width="14" height="14" viewBox="0 0 87 72" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0 }}>
          <path d="M49.5 36l8.53 9.75 11.47 7.33 2-17.02-2-16.64-11.69 6.44L49.5 36z" fill="#00832d"/>
          <path d="M0 51.5V66c0 3.315 2.685 6 6 6h14.5l3-10.96-3-9.54-9.95-3-10.55 3z" fill="#0066da"/>
          <path d="M20.5 0L0 20.5l10.55 3 9.95-3 2.95-9.41L20.5 0z" fill="#e94235"/>
          <path d="M20.5 20.5H0v31h20.5v-31z" fill="#2684fc"/>
          <path d="M82.6 8.68L69.5 19.42v33.66L82.66 63.87c1.97 1.54 4.84.135 4.84-2.36V11c0-2.525-2.945-3.925-4.9-2.32zM49.5 36v15.5h-29V72h43c3.315 0 6-2.685 6-6V53.08L49.5 36z" fill="#00ac47"/>
          <path d="M63.5 0h-43v20.5h29V36l20-16.57V6c0-3.315-2.685-6-6-6z" fill="#ffba00"/>
        </svg>
        <span style={{
          fontSize: 11, color: 'var(--gray-4)', fontFamily: 'var(--font-mono)',
          textDecoration: 'underline', textDecorationColor: 'var(--line)', textUnderlineOffset: 2,
          overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'
        }}>
          {m.meet}
        </span>
      </a>

      {/* Footer: tag + source */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
        <span style={{
          padding: '3px 9px', borderRadius: 6,
          background: 'var(--accent)', color: 'var(--accent-on)',
          fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 700, letterSpacing: '0.06em'
        }}>{m.tag}</span>
        <span style={{ fontSize: 10, color: 'var(--gray-3)', fontFamily: 'var(--font-mono)', letterSpacing: '0.04em' }}>
          {sourceLabel}
        </span>
      </div>
    </div>);

};

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

  const Logos = ({ logos, size = 16 }) => (logos && logos.length > 0) ? (
    <div style={{ display: 'flex', gap: 4, justifyContent: 'center', marginTop: 6 }}>
      {logos.map((d, j) =>
        <span key={j} style={{
          width: size + 9, height: size + 9, borderRadius: 6, background: 'var(--paper)',
          border: '1px solid var(--line)',
          display: 'flex', alignItems: 'center', justifyContent: 'center'
        }}>
          <img src={tokenLogo(d)} alt="" width={size} height={size}
            style={{ width: size, height: size, objectFit: 'contain' }}
            onError={(e) => { e.target.style.display = 'none'; }} />
        </span>
      )}
    </div>
  ) : null;

  const VLine = ({ h = 16 }) => (
    <div style={{ width: 0, height: h, borderLeft: '1.5px dashed var(--gray-2)', margin: '0 auto' }} />
  );

  // Dashed bracket: 'merge' = n top anchors → 1 bottom ; 'split' = 1 top → n bottom anchors
  const Bracket = ({ n, dir }) => {
    const W = 300, H = 30, midY = H / 2;
    const xs = Array.from({ length: n }, (_, i) => W * (i + 0.5) / n);
    const cx = W / 2;
    const L = (key, x1, y1, x2, y2) => (
      <line key={key} x1={x1} y1={y1} x2={x2} y2={y2}
        stroke="var(--gray-2)" strokeWidth="1.5" strokeDasharray="3,3"
        vectorEffect="non-scaling-stroke" />
    );
    const lines = [];
    if (dir === 'merge') {
      xs.forEach((x, i) => lines.push(L('t' + i, x, 0, x, midY)));
      lines.push(L('h', xs[0], midY, xs[xs.length - 1], midY));
      lines.push(L('c', cx, midY, cx, H));
    } else {
      lines.push(L('c', cx, 0, cx, midY));
      lines.push(L('h', xs[0], midY, xs[xs.length - 1], midY));
      xs.forEach((x, i) => lines.push(L('b' + i, x, midY, x, H)));
    }
    return (
      <svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="none" style={{ display: 'block' }}>
        {lines}
      </svg>
    );
  };

  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--line)',
      borderRadius: 16,
      padding: 24,
      boxShadow: 'var(--shadow-soft)'
    }}>
      {/* Header */}
      <p className="u-eyebrow" style={{ fontSize: 11, marginBottom: 8 }}>
        {lang === 'fr' ? 'PILIER' : 'PILLAR'} {p.n}
      </p>
      <h3 style={{ fontSize: 26, fontWeight: 600, marginBottom: 10 }}>{p.title}</h3>
      <p style={{ fontSize: 14, color: 'var(--gray-4)', lineHeight: 1.5, marginBottom: 18, minHeight: 63 }}>{p.sub}</p>

      {/* Setup chips */}
      <div style={{ display: 'flex', gap: 6 }}>
        {p.setup.map((c, i) =>
          <div key={i} style={{
            flex: 1, textAlign: 'center', fontSize: 11, fontWeight: 500,
            color: 'var(--gray-4)', padding: '8px 4px', borderRadius: 8,
            border: '1px solid var(--line)', background: 'var(--bg)'
          }}>{c}</div>
        )}
      </div>

      {/* merge bracket */}
      <Bracket n={p.setup.length} dir="merge" />

      {/* Common trunk */}
      {p.trunk.map((s, i) =>
        <React.Fragment key={i}>
          <div style={{
            borderRadius: 10, border: '1px solid var(--line)',
            background: 'var(--bg)', padding: '11px 10px', textAlign: 'center'
          }}>
            <p style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{s.t}</p>
            <Logos logos={s.logos} size={15} />
          </div>
          {i < p.trunk.length - 1 && <VLine h={16} />}
        </React.Fragment>
      )}

      {/* split bracket + branches (only if the pillar has branches) */}
      {p.branches.length > 0 && (() => {
        const convergeArr = Array.isArray(p.converge) ? p.converge : (p.converge ? [p.converge] : null);
        const limeBox = (item, key, fontSize = 12) => (
          <div key={key} style={{
            flex: 1, textAlign: 'center', fontSize, fontWeight: 700,
            color: 'var(--accent-on)', background: 'var(--accent)',
            border: '1px solid var(--accent-edge)',
            borderRadius: 8, padding: '11px 6px'
          }}>
            {item.t}
            <Logos logos={item.logos} size={13} />
          </div>
        );
        return <>
          <Bracket n={p.branches.length} dir="split" />

          <div style={{ display: 'flex', gap: 6 }}>
            {p.branches.map((b, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
                <div style={{
                  textAlign: 'center', fontSize: 11.5, fontWeight: 700,
                  color: 'var(--ink)', background: 'var(--bg)',
                  border: '1px solid var(--line)',
                  borderRadius: 8, padding: '7px 4px'
                }}>{b.tier}</div>
                {!convergeArr && <>
                  <VLine h={12} />
                  <div style={{
                    textAlign: 'center', fontSize: 11, fontWeight: 500, color: 'var(--ink)',
                    background: 'var(--bg)', border: '1px solid var(--line)',
                    borderRadius: 8, padding: '8px 4px'
                  }}>{b.mid}</div>
                  <VLine h={12} />
                  {limeBox({ t: b.out, logos: b.outLogos }, 'out')}
                </>}
              </div>
            ))}
          </div>

          {/* Converge: branches merge then (optionally) split into multiple deliverables */}
          {convergeArr && <>
            <Bracket n={p.branches.length} dir="merge" />
            {convergeArr.length > 1 && <Bracket n={convergeArr.length} dir="split" />}
            <div style={{ display: 'flex', gap: 6 }}>
              {convergeArr.map((c, i) => limeBox(c, i, convergeArr.length === 1 ? 12.5 : 12))}
            </div>
          </>}
        </>;
      })()}

      {/* Linear final step (no branches) — supports array for multiple boxes */}
      {p.final && <>
        <VLine h={16} />
        <div style={{ display: 'flex', gap: 6 }}>
          {(Array.isArray(p.final) ? p.final : [p.final]).map((f, i) => (
            <div key={i} style={{
              flex: 1, textAlign: 'center', fontSize: 12.5, fontWeight: 700,
              color: 'var(--accent-on)', background: 'var(--accent)',
              border: '1px solid var(--accent-edge)', borderRadius: 8, padding: '11px 6px'
            }}>
              {f.t}
              <Logos logos={f.logos} size={14} />
            </div>
          ))}
        </div>
      </>}
    </div>);

};

// ----------------- Signals: animated grid + filter
const SIGNAL_DEFS = [
['Levée de fonds', 'Signal'], ['Recrutement', 'Signal'], ['Prise de poste récente', 'Signal'], ['Lancement d\'un nouveau produit', 'Signal'],
['Utilisation d\'une techno. spécifique', 'Signal'], ['Changement d\'entreprise d\'un ancien client', 'Signal'], ['Mauvais avis', 'Signal'], ['Interaction avec un concurrent', 'Signal'],
['Like sur un post LinkedIn', 'Intent'], ['Visite du site web', 'Intent'], ['Téléchargement lead magnet', 'Intent'], ['Visite de profil LinkedIn', 'Intent']];


const SignalsSection = ({ lang }) => {
  const t = COPY[lang].signals;
  const filters = ['Tous', 'Signal', 'Intent'];
  const [active, setActive] = useState(0);

  return (
    <section className="u-section" style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="u-container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'flex-end', marginBottom: 40 }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
            <h2>
              {t.h2a} <span className="u-mark">{t.h2mark}</span>{t.h2b}
            </h2>
          </div>
          <p style={{ fontSize: 17, color: 'var(--gray-4)', maxWidth: 460 }}>{t.sub}</p>
        </div>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 28 }}>
          {filters.map((f, i) =>
          <button key={i} onClick={() => setActive(i)} style={{
            border: 'none', cursor: 'pointer',
            padding: '8px 16px', borderRadius: 999,
            background: active === i ? 'var(--ink)' : 'var(--paper)',
            color: active === i ? 'var(--bg)' : 'var(--ink)',
            fontSize: 13, fontFamily: 'var(--font-sans)', fontWeight: 500,
            border: '1px solid var(--line)'
          }}>{f}</button>
          )}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
          {SIGNAL_DEFS.map(([s, cat], i) => {
            const dim = active > 0 && filters[active] !== cat;
            return (
              <div key={i} className="u-card" style={{
                padding: 16,
                opacity: dim ? 0.35 : 1,
                transition: 'opacity 0.25s, transform 0.25s',
                transform: dim ? 'scale(0.98)' : 'scale(1)'
              }}>
                <p className="u-eyebrow" style={{ fontSize: 10, marginBottom: 6 }}>{cat}</p>
                <p style={{ fontSize: 14, fontWeight: 600, fontFamily: 'var(--font-mono)', marginBottom: 10 }}>{s}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <span className="u-dot u-dot-live"></span>
                  <span style={{ fontSize: 11, color: 'var(--gray-3)', fontFamily: 'var(--font-mono)' }}>conv. ~{i * 3 % 18 + 6}%</span>
                </div>
              </div>);

          })}
        </div>
        <p style={{ marginTop: 22, fontSize: 13, color: 'var(--gray-3)', textAlign: 'center' }}>
          {lang === 'fr' ? '+ 48 autres signaux disponibles dans la bibliothèque complète →' : '+ 48 more signals in the full library →'}
        </p>
      </div>
    </section>);

};

// ----------------- Tools hub — schematic technique
const logoUrl = (d) => `https://img.logo.dev/${d}?token=${LOGO_TOKEN}&retina=true`;

// 16 tools positioned around the dual-engine center (Cargo + Claude)
// Layout: 4 columns × 4 rows arranged as a perimeter with the engines in the middle band
const PERIMETER_TOOLS = [
// top row (4)
{ n: 'LinkedIn', d: 'linkedin.com', cat: 'Source' },
{ n: 'Apollo', d: 'apollo.io', cat: 'Source' },
{ n: 'Sales Nav', d: 'salesnavigator.com', cat: 'Source' },
{ n: 'BuiltWith', d: 'builtwith.com', cat: 'Source' },
// mid-left + mid-right (4 — flanking the engines)
{ n: 'Apify', d: 'apify.com', cat: 'Enrich' },
{ n: 'Clay', d: 'clay.com', cat: 'Enrich' },
{ n: 'Pronto', d: 'prontohq.com', cat: 'Enrich' },
{ n: 'Vayne', d: 'vayne.io', cat: 'Enrich' },
// mid-mid row (under engines, 4)
{ n: 'Lemlist', d: 'lemlist.com', cat: 'Outreach' },
{ n: 'Instantly', d: 'instantly.ai', cat: 'Outreach' },
{ n: 'HeyReach', d: 'reactin.io', cat: 'Outreach' },
{ n: 'Smartlead', d: 'smartlead.ai', cat: 'Outreach' },
// bottom row (4)
{ n: 'HubSpot', d: 'hubspot.com', cat: 'Activate' },
{ n: 'Attio', d: 'attio.com', cat: 'Activate' },
{ n: 'Cal.com', d: 'cal.com', cat: 'Activate' },
{ n: 'Slack', d: 'slack.com', cat: 'Activate' },
// additional tools (marquee only — schematic takes first 12)
{ n: 'Salesforce', d: 'salesforce.com', cat: 'Activate' },
{ n: 'Pipedrive', d: 'pipedrive.com', cat: 'Activate' },
{ n: 'Cargo', d: 'getcargo.io', cat: 'Enrich' },
{ n: 'Fullenrich', d: 'fullenrich.com', cat: 'Enrich' },
{ n: 'Pappers', d: 'pappers.fr', cat: 'Source' },
{ n: 'Pharow', d: 'pharow.com', cat: 'Source' },
{ n: 'Theirstack', d: 'theirstack.com', cat: 'Source' },
{ n: 'Teams', d: 'microsoft.com', cat: 'Activate' },
{ n: 'n8n', d: 'n8n.io', cat: 'Enrich' },
{ n: 'Claude', d: 'claude.ai', cat: 'Enrich' }];


// Live event log entries that scroll through (these change, not the logos themselves)
const LIVE_EVENTS_FR = [
{ t: 'cargo.run', s: 'enrich → 124 prospects', tag: 'CARGO' },
{ t: 'claude.score', s: 'ICP fit · 87/100', tag: 'CLAUDE' },
{ t: 'cargo.route', s: 'AE: Camille', tag: 'CARGO' },
{ t: 'claude.draft', s: 'opener · v3', tag: 'CLAUDE' },
{ t: 'cargo.sync', s: 'HubSpot ✓', tag: 'CARGO' },
{ t: 'claude.qualify', s: 'champion · funding', tag: 'CLAUDE' },
{ t: 'cargo.dedup', s: '38 dupes merged', tag: 'CARGO' },
{ t: 'claude.summarize', s: '12 calls processed', tag: 'CLAUDE' }];

const LIVE_EVENTS_EN = [
{ t: 'cargo.run', s: 'enrich → 124 prospects', tag: 'CARGO' },
{ t: 'claude.score', s: 'ICP fit · 87/100', tag: 'CLAUDE' },
{ t: 'cargo.route', s: 'AE: Camille', tag: 'CARGO' },
{ t: 'claude.draft', s: 'opener · v3', tag: 'CLAUDE' },
{ t: 'cargo.sync', s: 'HubSpot ✓', tag: 'CARGO' },
{ t: 'claude.qualify', s: 'champion · funding', tag: 'CLAUDE' },
{ t: 'cargo.dedup', s: '38 dupes merged', tag: 'CARGO' },
{ t: 'claude.summarize', s: '12 calls processed', tag: 'CLAUDE' }];


const ToolsSection = ({ lang }) => {
  const t = COPY[lang].tools;
  const events = lang === 'fr' ? LIVE_EVENTS_FR : LIVE_EVENTS_EN;
  const [eventIdx, setEventIdx] = React.useState(0);
  const [activeTool, setActiveTool] = React.useState(0);

  React.useEffect(() => {
    const ev = setInterval(() => setEventIdx((i) => (i + 1) % events.length), 1800);
    const tl = setInterval(() => setActiveTool((i) => (i + 1) % 16), 900);
    return () => {clearInterval(ev);clearInterval(tl);};
  }, []);

  return (
    <section className="u-section" style={{ paddingTop: 80, paddingBottom: 80, background: 'var(--bg-2)', position: 'relative', overflow: 'hidden' }}>
      {/* schematic grid background */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
        backgroundSize: '32px 32px',
        opacity: 0.5,
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)'
      }}></div>

      <div className="u-container" style={{ position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
          <h2 style={{ fontSize: 48, maxWidth: 760, margin: '0 auto' }}>
            {t.h2a} <span className="u-mark">{t.h2mark}</span>{t.h2b}
          </h2>
        </div>

        <ToolsSchematic
          tools={PERIMETER_TOOLS}
          events={events}
          eventIdx={eventIdx}
          activeTool={activeTool}
          lang={lang} />
        
      </div>
    </section>);

};

// Schematic: dual engine (Cargo + Claude) in center, 12 tools arranged on the perimeter
// (3 columns × 2 rows on each side), with a live event console attached.
const ToolsSchematic = ({ tools, events, eventIdx, activeTool, lang }) => {
  // viewBox: 1200×640. Tile size: 120×64. Engine frame: 360×220 centered.
  const TILE_W = 120,TILE_H = 64;
  // 12 tiles total: 6 left column (3 stacked × 2 cols), 6 right column
  // Use the first 12 tools from the input.
  const usedTools = tools.slice(0, 12);

  // Layout positions (top-left of each tile)
  // Left side: 2 columns × 3 rows
  // Right side: 2 columns × 3 rows
  // Center: engine frame
  const positions = [
  // LEFT cluster (cols at x=40 and x=180; rows at y=60, 220, 380)
  { x: 40, y: 60 }, { x: 180, y: 60 },
  { x: 40, y: 220 }, { x: 180, y: 220 },
  { x: 40, y: 380 }, { x: 180, y: 380 },
  // RIGHT cluster (cols at x=900 and x=1040)
  { x: 900, y: 60 }, { x: 1040, y: 60 },
  { x: 900, y: 220 }, { x: 1040, y: 220 },
  { x: 900, y: 380 }, { x: 1040, y: 380 }];


  // Engine frame coordinates
  const FRAME = { x: 380, y: 180, w: 440, h: 220 };
  const cargoX = 480,claudeX = 720,engineY = 270;

  // Vertical bus rails on the inner edge of each cluster
  const LEFT_BUS_X = 320; // inner edge of left cluster
  const RIGHT_BUS_X = 880; // inner edge of right cluster

  // Active tile index normalized to 0..11
  const liveIdx = activeTool % 12;

  return (
    <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
      <svg viewBox="0 0 1200 640" style={{ width: '100%', display: 'block', overflow: 'visible' }}>
        <defs>
          <linearGradient id="wirePulse" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%" stopColor="var(--accent-edge)" stopOpacity="0" />
            <stop offset="50%" stopColor="var(--accent-edge)" stopOpacity="1" />
            <stop offset="100%" stopColor="var(--accent-edge)" stopOpacity="0" />
          </linearGradient>
        </defs>

        {/* Vertical bus rails (the spine each cluster's tiles connect to) */}
        <line x1={LEFT_BUS_X} y1="80" x2={LEFT_BUS_X} y2="412" stroke="var(--gray-2)" strokeWidth="1" strokeDasharray="2 3" opacity="0.7" />
        <line x1={RIGHT_BUS_X} y1="80" x2={RIGHT_BUS_X} y2="412" stroke="var(--gray-2)" strokeWidth="1" strokeDasharray="2 3" opacity="0.7" />

        {/* Tile-to-bus stubs (short horizontal lines) — one per tile */}
        {positions.map((p, i) => {
          const isLeft = i < 6;
          const tileRightX = p.x + TILE_W;
          const tileLeftX = p.x;
          const tileMidY = p.y + TILE_H / 2;
          const isActive = i === liveIdx;
          // Horizontal stub from tile to bus
          const stubFrom = isLeft ? tileRightX : tileLeftX;
          const stubTo = isLeft ? LEFT_BUS_X : RIGHT_BUS_X;
          return (
            <g key={`stub-${i}`}>
              <line
                x1={stubFrom} y1={tileMidY} x2={stubTo} y2={tileMidY}
                stroke={isActive ? 'var(--accent-edge)' : 'var(--gray-2)'}
                strokeWidth={isActive ? 1.6 : 1}
                opacity={isActive ? 1 : 0.7} />
              
              <circle cx={stubTo} cy={tileMidY} r="2.5" fill={isActive ? 'var(--accent-edge)' : 'var(--gray-3)'} />
            </g>);

        })}

        {/* Bus → engine frame (one path per side, entering the frame edge) */}
        <path d={`M ${LEFT_BUS_X} 80 L ${LEFT_BUS_X} 240 L ${FRAME.x} 240`} stroke="var(--ink)" strokeWidth="1.2" fill="none" opacity="0.55" />
        <path d={`M ${LEFT_BUS_X} 412 L ${LEFT_BUS_X} 340 L ${FRAME.x} 340`} stroke="var(--ink)" strokeWidth="1.2" fill="none" opacity="0.55" />
        <path d={`M ${RIGHT_BUS_X} 80 L ${RIGHT_BUS_X} 240 L ${FRAME.x + FRAME.w} 240`} stroke="var(--ink)" strokeWidth="1.2" fill="none" opacity="0.55" />
        <path d={`M ${RIGHT_BUS_X} 412 L ${RIGHT_BUS_X} 340 L ${FRAME.x + FRAME.w} 340`} stroke="var(--ink)" strokeWidth="1.2" fill="none" opacity="0.55" />

        {/* traveling pulse on the active tile's wire (one short segment) */}
        {(() => {
          const i = liveIdx;
          const p = positions[i];
          const isLeft = i < 6;
          const stubFrom = isLeft ? p.x + TILE_W : p.x;
          const stubTo = isLeft ? LEFT_BUS_X : RIGHT_BUS_X;
          const midY = p.y + TILE_H / 2;
          const path = `M ${stubFrom} ${midY} L ${stubTo} ${midY}`;
          return (
            <circle r="3.5" fill="var(--accent-edge)" key={`pulse-${i}-${activeTool}`}>
              <animateMotion dur="0.7s" repeatCount="1" path={path} />
            </circle>);

        })()}

        {/* ENGINE FRAME — large central card */}
        <rect
          x={FRAME.x} y={FRAME.y} width={FRAME.w} height={FRAME.h} rx="16"
          fill="var(--paper)" stroke="var(--ink)" strokeWidth="1.6" />
        
        <rect
          x={FRAME.x + 4} y={FRAME.y + 4} width={FRAME.w - 8} height={FRAME.h - 8} rx="13"
          fill="none" stroke="var(--accent-edge)" strokeWidth="1" strokeDasharray="3 4" opacity="0.4" />
        

        {/* Frame header bar */}
        <rect x={FRAME.x} y={FRAME.y} width={FRAME.w} height="32" rx="16" fill="var(--bg-2)" />
        <rect x={FRAME.x} y={FRAME.y + 16} width={FRAME.w} height="16" fill="var(--bg-2)" />
        <line x1={FRAME.x} y1={FRAME.y + 32} x2={FRAME.x + FRAME.w} y2={FRAME.y + 32} stroke="var(--line)" strokeWidth="1" />
        <text x={FRAME.x + 16} y={FRAME.y + 21} fontFamily="JetBrains Mono, monospace" fontSize="10" fill="var(--gray-4)" letterSpacing="2.5">
          ORCHESTRATION ENGINE
        </text>
        <g>
          <circle cx={FRAME.x + FRAME.w - 22} cy={FRAME.y + 16} r="3" fill="#8fbc7a" />
          <text x={FRAME.x + FRAME.w - 32} y={FRAME.y + 20} textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--gray-4)" letterSpacing="1.5">
            ACTIVE
          </text>
        </g>

        {/* Engine bus connecting Cargo and Claude */}
        <line x1={cargoX + 60} y1={engineY} x2={claudeX - 60} y2={engineY} stroke="var(--accent-edge)" strokeWidth="1.4" strokeDasharray="2 3" />

        {/* CARGO engine block */}
        <foreignObject x={cargoX - 65} y={engineY - 50} width="130" height="100" style={{ overflow: 'visible' }}>
          <div xmlns="http://www.w3.org/1999/xhtml" style={{
            width: 130, height: 100,
            background: 'var(--ink)', borderRadius: 12,
            padding: '12px 14px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            color: 'var(--paper)',
            boxShadow: '0 12px 28px -8px rgba(28,29,31,0.35)',
            fontFamily: 'inherit',
            boxSizing: 'border-box'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <img src={logoUrl('getcargo.io')} alt="Cargo" width="22" height="22" style={{ width: 22, height: 22, borderRadius: 5, objectFit: 'contain', background: '#fff', padding: 2 }} onError={(e) => {e.target.style.visibility = 'hidden';}} />
              <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.02em' }}>Cargo</span>
            </div>
            <div>
              <p style={{ margin: 0, fontSize: 9, color: 'rgba(245,240,225,0.55)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>WORKFLOWS · DATA</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#a4d896', display: 'inline-block' }}></span>
                <span style={{ fontSize: 10, color: 'rgba(245,240,225,0.85)', fontFamily: 'JetBrains Mono, monospace' }}>RUNNING</span>
              </div>
            </div>
          </div>
        </foreignObject>

        {/* CLAUDE engine block */}
        <foreignObject x={claudeX - 65} y={engineY - 50} width="130" height="100" style={{ overflow: 'visible' }}>
          <div xmlns="http://www.w3.org/1999/xhtml" style={{
            width: 130, height: 100,
            background: 'var(--ink)', borderRadius: 12,
            padding: '12px 14px',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            color: 'var(--paper)',
            boxShadow: '0 12px 28px -8px rgba(28,29,31,0.35)',
            fontFamily: 'inherit',
            boxSizing: 'border-box'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <img src={logoUrl('claude.ai')} alt="Claude" width="22" height="22" style={{ width: 22, height: 22, borderRadius: 5, objectFit: 'contain', background: '#fff', padding: 2 }} onError={(e) => {e.target.style.visibility = 'hidden';}} />
              <span style={{ fontSize: 13, fontWeight: 600, letterSpacing: '0.02em' }}>Claude</span>
            </div>
            <div>
              <p style={{ margin: 0, fontSize: 9, color: 'rgba(245,240,225,0.55)', fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.1em' }}>REASONING · COPY</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#a4d896', display: 'inline-block' }}></span>
                <span style={{ fontSize: 10, color: 'rgba(245,240,225,0.85)', fontFamily: 'JetBrains Mono, monospace' }}>THINKING</span>
              </div>
            </div>
          </div>
        </foreignObject>

        {/* live event console + stats — inside the engine frame, below engines */}
        <foreignObject x={FRAME.x + 16} y={FRAME.y + 130} width={FRAME.w - 32} height="74">
          <div xmlns="http://www.w3.org/1999/xhtml" style={{
            display: 'flex', flexDirection: 'column', gap: 8,
            fontFamily: 'inherit',
            height: 74, boxSizing: 'border-box'
          }}>
            {/* event console */}
            <div style={{
              background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 6,
              padding: '6px 10px',
              display: 'flex', alignItems: 'center', gap: 10,
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              height: 30, boxSizing: 'border-box',
              overflow: 'hidden'
            }}>
              <span style={{
                padding: '2px 6px', borderRadius: 3,
                background: events[eventIdx].tag === 'CARGO' ? 'var(--ink)' : 'var(--accent)',
                color: events[eventIdx].tag === 'CARGO' ? 'var(--paper)' : 'var(--accent-on)',
                fontSize: 9, fontWeight: 700, letterSpacing: '0.08em', flexShrink: 0
              }}>{events[eventIdx].tag}</span>
              <span style={{ color: 'var(--ink)', fontWeight: 600, flexShrink: 0 }}>{events[eventIdx].t}</span>
              <span style={{ color: 'var(--gray-4)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{events[eventIdx].s}</span>
            </div>

            {/* stat strip — runs / msgs / connections */}
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 6,
              fontFamily: 'JetBrains Mono, monospace',
              flex: 1
            }}>
              {[
              { k: 'RUNS / 24H', v: '8,432' },
              { k: 'TOOLS LIVE', v: '12 / 12' },
              { k: 'UPTIME', v: '99.97%' }].
              map((s, i) =>
              <div key={i} style={{
                background: 'var(--bg-2)', border: '1px solid var(--line)', borderRadius: 6,
                padding: '5px 8px',
                display: 'flex', flexDirection: 'column', justifyContent: 'center'
              }}>
                  <span style={{ fontSize: 8, color: 'var(--gray-3)', letterSpacing: '0.12em' }}>{s.k}</span>
                  <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--ink)', marginTop: 1 }}>{s.v}</span>
                </div>
              )}
            </div>
          </div>
        </foreignObject>

        {/* TILES — rendered last so they sit on top of any wire artifacts near edges */}
        {positions.map((p, i) => {
          const tool = usedTools[i];
          const isActive = i === liveIdx;
          return (
            <foreignObject key={`tile-${i}`} x={p.x} y={p.y} width={TILE_W} height={TILE_H} style={{ overflow: 'visible' }}>
              <div xmlns="http://www.w3.org/1999/xhtml" style={{
                background: 'var(--paper)',
                border: `1.4px solid ${isActive ? 'var(--accent-edge)' : 'var(--line)'}`,
                borderRadius: 10,
                padding: '8px 10px',
                display: 'flex', alignItems: 'center', gap: 9,
                width: TILE_W, height: TILE_H,
                boxSizing: 'border-box',
                boxShadow: isActive ? '0 0 0 3px rgba(225,255,108,0.35)' : '0 2px 4px rgba(0,0,0,0.04)',
                transition: 'all 0.2s',
                fontFamily: 'inherit'
              }}>
                <img src={logoUrl(tool.d)} alt={tool.n} width="28" height="28" style={{ width: 28, height: 28, borderRadius: 5, objectFit: 'contain', flexShrink: 0 }} onError={(e) => {e.target.style.visibility = 'hidden';}} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <p style={{ fontSize: 11.5, fontWeight: 600, color: 'var(--ink)', margin: 0, lineHeight: 1.15, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{tool.n}</p>
                  <p style={{ fontSize: 8.5, color: 'var(--gray-3)', margin: 0, marginTop: 1, fontFamily: 'JetBrains Mono, monospace', letterSpacing: '0.08em', textTransform: 'uppercase' }}>{tool.cat}</p>
                </div>
              </div>
            </foreignObject>);

        })}

        {/* Side rail labels */}
        <text x="40" y="44" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--gray-4)" letterSpacing="2">
          {lang === 'fr' ? 'INPUT · SOURCING' : 'INPUT · SOURCING'}
        </text>
        <text x="1160" y="44" textAnchor="end" fontFamily="JetBrains Mono, monospace" fontSize="9" fill="var(--gray-4)" letterSpacing="2">
          {lang === 'fr' ? 'OUTPUT · ACTIVATION' : 'OUTPUT · ACTIVATION'}
        </text>

        {/* corner registers */}
        <g stroke="var(--gray-3)" strokeWidth="1" fill="none" opacity="0.6">
          <path d="M 20 60 L 20 20 L 60 20" />
          <path d="M 1180 60 L 1180 20 L 1140 20" />
          <path d="M 20 580 L 20 620 L 60 620" />
          <path d="M 1180 580 L 1180 620 L 1140 620" />
        </g>
      </svg>

      <p style={{
        textAlign: 'center', marginTop: 28, fontSize: 14, color: 'var(--gray-4)', maxWidth: 640,
        marginLeft: 'auto', marginRight: 'auto'
      }}>
        {lang === 'fr' ?
        'On choisit, branche et opère 40+ outils — Cargo orchestre les workflows, Claude raisonne sur la donnée.' :
        'We pick, plug, and operate 40+ tools — Cargo orchestrates workflows, Claude reasons on data.'}
      </p>
    </div>);

};

const ToolTile = ({ t, delay = 0 }) => {
  return (
    <div style={{
      background: 'var(--paper)',
      border: '1px solid var(--line)',
      borderRadius: 14,
      padding: 18,
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
      boxShadow: '0 2px 6px rgba(0,0,0,0.03)',
      animation: `tileEnter 0.5s ease ${delay}ms both`,
      minHeight: 90
    }}>
      <img
        src={logoUrl(t.d)}
        alt={t.n}
        width="28"
        height="28"
        style={{ width: 28, height: 28, borderRadius: 6, objectFit: 'contain' }}
        onError={(e) => {e.target.style.visibility = 'hidden';}} />
      
      <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{t.n}</span>
    </div>);

};

// ----------------- Comparator
const CompareSection = ({ lang }) => {
  const t = COPY[lang].compare;
  const headers = lang === 'fr' ?
  ['', 'Upscale', 'Agence lead-gen', 'SaaS outbound', 'SDR in-house'] :
  ['', 'Upscale', 'Lead-gen agency', 'Outbound SaaS', 'In-house SDR'];
  const rows = lang === 'fr' ? [
  ['Setup en 4 semaines', '✓', '~', '✓', '✕'],
  ['Outbound signal-based', '✓', '✕', 'partiel', '✕'],
  ['CRM enrichi en continu', '✓', '✕', '✕', 'manuel'],
  ['Reporting pipeline only', '✓', 'vanity', 'vanity', 'manuel'],
  ['Opéré pour vous', '✓', '✓', '✕', '—'],
  ['Pas de lock-in long', '3 mois', '12 mois', 'annuel', '12 mois+']] :
  [
  ['4-week setup', '✓', '~', '✓', '✕'],
  ['Signal-based outbound', '✓', '✕', 'partial', '✕'],
  ['Live CRM enrichment', '✓', '✕', '✕', 'manual'],
  ['Pipeline-only reporting', '✓', 'vanity', 'vanity', 'manual'],
  ['Operated for you', '✓', '✓', '✕', '—'],
  ['No long lock-in', '3 mo', '12 mo', 'yearly', '12 mo+']];


  return (
    <section className="u-section" style={{ paddingTop: 100, paddingBottom: 100 }}>
      <div className="u-container">
        <div style={{ marginBottom: 50 }}>
          <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
          <h2>{t.h2} <span className="u-mark">{t.mark}</span></h2>
        </div>
        <div className="u-card" style={{ overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr 1fr', borderBottom: '1px solid var(--line-strong)' }}>
            {headers.map((h, i) =>
            <div key={i} style={{
              padding: '18px 16px',
              fontSize: 13, fontWeight: 600,
              background: i === 1 ? 'var(--accent)' : 'transparent',
              color: i === 1 ? 'var(--accent-on)' : i > 1 ? 'var(--gray-3)' : 'var(--ink)',
              textAlign: i ? 'center' : 'left',
              fontFamily: i === 1 ? 'var(--font-sans)' : 'var(--font-mono)',
              textTransform: i > 1 ? 'uppercase' : 'none',
              letterSpacing: i > 1 ? '0.06em' : '0'
            }}>{h}</div>
            )}
          </div>
          {rows.map((row, i) =>
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr 1fr', borderBottom: i < rows.length - 1 ? '1px solid var(--line)' : 'none' }}>
              {row.map((cell, j) =>
            <div key={j} style={{
              padding: '16px',
              fontSize: 14,
              textAlign: j ? 'center' : 'left',
              background: j === 1 ? 'rgba(225,255,108,0.12)' : 'transparent',
              color: cell === '✕' ? 'var(--gray-2)' : j === 1 ? 'var(--ink)' : 'var(--ink)',
              fontWeight: j === 1 ? 600 : 400
            }}>{cell}</div>
            )}
            </div>
          )}
        </div>
      </div>
    </section>);

};

// ----------------- IntentFlow: 3-tier vertical schema (PREVIEW)
const INTENT_POOL = [
  { s: 'Levée de fonds', cat: 'Signal', conv: '14%' },
  { s: 'Recrutement', cat: 'Signal', conv: '11%' },
  { s: 'Prise de poste récente', cat: 'Signal', conv: '18%' },
  { s: 'Lancement d\'un nouveau produit', cat: 'Signal', conv: '13%' },
  { s: 'Utilisation d\'une techno. spécifique', cat: 'Signal', conv: '9%' },
  { s: 'Changement d\'entreprise d\'un ancien client', cat: 'Signal', conv: '15%' },
  { s: 'Mauvais avis', cat: 'Signal', conv: '12%' },
  { s: 'Interaction avec un concurrent', cat: 'Signal', conv: '17%' },
  { s: 'Like sur un post LinkedIn', cat: 'Intent', conv: '8%' },
  { s: 'Visite du site web', cat: 'Intent', conv: '10%' },
  { s: 'Téléchargement lead magnet', cat: 'Intent', conv: '16%' },
  { s: 'Visite de profil LinkedIn', cat: 'Intent', conv: '7%' }
];

// ----------------- SetupAnimatedSection: 4-step kanban with sequential reveal (PREVIEW)
const SetupAnimatedSection = ({ lang }) => {
  const t = COPY[lang].setup;

  const PILLARS = [
    { k: 'out', label: 'Outbound' },
    { k: 'in', label: 'Inbound' },
    { k: 'rev', label: 'Revops' }
  ];
  const [active, setActive] = useState({ out: true, in: false, rev: false });
  const toggle = (k) => setActive(prev => {
    const next = { ...prev, [k]: !prev[k] };
    if (!next.out && !next.in && !next.rev) return prev; // keep at least one active
    return next;
  });

  const tagStyle = (p) => p === 'out'
    ? { color: 'var(--accent-on)', background: 'var(--accent)', border: '1px solid var(--accent-edge)' }
    : p === 'in'
    ? { color: 'var(--bg)', background: 'var(--ink)', border: '1px solid var(--ink)' }
    : { color: 'var(--gray-4)', background: 'var(--paper)', border: '1px solid var(--line-strong)' };
  const tagLabel = lang === 'fr'
    ? { out: 'Out', in: 'In', rev: 'Rev' }
    : { out: 'Out', in: 'In', rev: 'Rev' };

  const cols = lang === 'fr' ? [
    { w: 'Semaine 1', t: 'Audit', items: [
      { x: 'Audit + compte rendu stratégique', p: 'all' },
      { x: 'Définition de la stack technique', p: 'all' },
      { x: 'Cadrage TAM & ICP', p: 'out' },
      { x: 'Définition ICP & piliers de contenu', p: 'in' },
      { x: 'Audit CRM & règles de scoring', p: 'rev' }
    ]},
    { w: 'Semaine 2', t: 'Build', items: [
      { x: 'Gestion infrastructure mail', p: 'out' },
      { x: 'Création BDD (TAM)', p: 'out' },
      { x: '3-5 séquences Outreach', p: 'out' },
      { x: 'Setup tracking & lead capture', p: 'in' },
      { x: 'Production contenu & ads', p: 'in' },
      { x: 'Structuration CRM & déduplication', p: 'rev' },
      { x: 'Enrichissement & scoring', p: 'rev' }
    ]},
    { w: 'Semaine 3-4', t: 'Lancement', items: [
      { x: 'Lancement LinkedIn', p: 'out' },
      { x: 'Lancement emailing', p: 'out' },
      { x: 'Lancement campagnes Ads', p: 'in' },
      { x: 'Publication contenu & influence', p: 'in' },
      { x: 'Routing & alertes Sales', p: 'rev' },
      { x: 'Réactivation leads dormants', p: 'rev' }
    ]},
    { w: 'Toutes les 2 semaines', t: 'Itération & Scale', items: [
      { x: 'Reporting', p: 'all' },
      { x: 'Itération campagnes', p: 'out' },
      { x: 'Ajout des leads', p: 'out' },
      { x: 'Itération créa & contenu', p: 'in' },
      { x: 'Refresh CRM & data', p: 'rev' }
    ]}
  ] : [
    { w: 'Week 1', t: 'Audit', items: [
      { x: 'Audit + strategic debrief', p: 'all' },
      { x: 'Tech stack definition', p: 'all' },
      { x: 'TAM & ICP scoping', p: 'out' },
      { x: 'ICP & content pillars', p: 'in' },
      { x: 'CRM audit & scoring rules', p: 'rev' }
    ]},
    { w: 'Week 2', t: 'Build', items: [
      { x: 'Mail infrastructure setup', p: 'out' },
      { x: 'TAM database creation', p: 'out' },
      { x: '3-5 Outreach sequences', p: 'out' },
      { x: 'Tracking & lead capture setup', p: 'in' },
      { x: 'Content & ads production', p: 'in' },
      { x: 'CRM structuring & dedup', p: 'rev' },
      { x: 'Enrichment & scoring', p: 'rev' }
    ]},
    { w: 'Week 3-4', t: 'Launch', items: [
      { x: 'LinkedIn launch', p: 'out' },
      { x: 'Email launch', p: 'out' },
      { x: 'Ads campaigns launch', p: 'in' },
      { x: 'Content & influence publishing', p: 'in' },
      { x: 'Routing & sales alerts', p: 'rev' },
      { x: 'Dormant leads reactivation', p: 'rev' }
    ]},
    { w: 'Every 2 weeks', t: 'Iteration & Scale', items: [
      { x: 'Reporting', p: 'all' },
      { x: 'Campaign iteration', p: 'out' },
      { x: 'Lead additions', p: 'out' },
      { x: 'Creative & content iteration', p: 'in' },
      { x: 'CRM & data refresh', p: 'rev' }
    ]}
  ];

  const isOn = (p) => p === 'all' || active[p];

  const sectionRef = useRef(null);
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    if (!sectionRef.current) return;
    const obs = new IntersectionObserver(
      ([e]) => {
        if (e.isIntersecting) {
          setVisible(true);
          obs.disconnect();
        }
      },
      { threshold: 0.25 }
    );
    obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  const COL_DELAY = 350;
  const ITEM_DELAY = 90;

  return (
    <section ref={sectionRef} className="u-section" style={{ paddingTop: 100, paddingBottom: 100, position: 'relative', overflow: 'hidden' }}>
      <div className="u-container" style={{ position: 'relative' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'flex-end', marginBottom: 50 }}>
          <div>
            <p className="u-eyebrow" style={{ marginBottom: 14 }}>— {t.eyebrow}</p>
            <h2>{t.h2a || t.h2}<br className="u-mobile-only" /><span className="u-mark">{t.h2mark}</span>{t.h2b}</h2>
          </div>
          <p style={{ fontSize: 17, color: 'var(--gray-4)', maxWidth: 380 }}>{t.sub}</p>
        </div>

        {/* Pillar selector — choose which pillars are activated */}
        <div style={{ marginBottom: 30 }}>
          <span style={{ display: 'block', fontSize: 12, color: 'var(--gray-3)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10 }}>
            {lang === 'fr' ? 'Piliers activés :' : 'Active pillars:'}
          </span>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'nowrap', maxWidth: 480 }}>
            {PILLARS.map(pl => {
              const on = active[pl.k];
              const st = tagStyle(pl.k);
              return (
                <button key={pl.k} type="button" onClick={() => toggle(pl.k)} style={{
                  flex: 1, minWidth: 0, cursor: 'pointer',
                  padding: '9px 8px', borderRadius: 999,
                  fontSize: 13, fontWeight: 600, outline: 'none', whiteSpace: 'nowrap',
                  border: on ? st.border : '1px solid var(--line-strong)',
                  background: on ? st.background : 'transparent',
                  color: on ? st.color : 'var(--gray-3)',
                  transition: 'background .15s ease, color .15s ease, border-color .15s ease'
                }}>{pl.label}</button>
              );
            })}
          </div>
        </div>

        {/* Progress timeline drawn behind the columns */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', top: 38, left: '6%', right: '6%',
            height: 2, background: 'var(--line)',
            zIndex: 0
          }}>
            <div style={{
              position: 'absolute', inset: 0,
              background: 'linear-gradient(90deg, var(--accent-edge), var(--accent))',
              transformOrigin: 'left center',
              transform: visible ? 'scaleX(1)' : 'scaleX(0)',
              transition: 'transform 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.1s'
            }}></div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, position: 'relative', zIndex: 1 }}>
            {cols.map((s, i) => (
              <div key={i} style={{
                padding: 22, borderRadius: 14,
                background: i === 0 ? 'var(--paper)' : 'var(--bg-2)',
                border: '1px solid var(--line)',
                opacity: visible ? 1 : 0,
                transform: visible ? 'translateY(0)' : 'translateY(20px)',
                filter: visible ? 'blur(0)' : 'blur(4px)',
                transition: `opacity 0.55s ease-out ${i * COL_DELAY}ms, transform 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) ${i * COL_DELAY}ms, filter 0.55s ease-out ${i * COL_DELAY}ms`,
                position: 'relative'
              }}>
                {/* Step dot on the timeline */}
                <span style={{
                  position: 'absolute', top: -7, left: 22,
                  width: 14, height: 14, borderRadius: '50%',
                  background: 'var(--accent)',
                  border: '3px solid var(--bg)',
                  boxShadow: visible ? '0 0 0 0 rgba(225,255,108,0.55)' : 'none',
                  animation: visible ? `pulseRing 2s ease-out ${i * COL_DELAY}ms 1` : 'none'
                }}></span>

                <p style={{ fontSize: 11, color: 'var(--accent-edge)', fontFamily: 'var(--font-mono)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{s.w}</p>
                <h3 style={{ marginBottom: 16 }}>{s.t}</h3>
                {s.items.filter(it => isOn(it.p)).map((it, j) => {
                  const itemDelay = i * COL_DELAY + 200 + j * ITEM_DELAY;
                  return (
                    <div key={it.x} style={{
                      display: 'flex', gap: 9, alignItems: 'center', padding: '6px 0', fontSize: 13,
                      opacity: visible ? 1 : 0,
                      transform: visible ? 'translateX(0)' : 'translateX(-8px)',
                      transition: `opacity 0.4s ease-out ${itemDelay}ms, transform 0.4s ease-out ${itemDelay}ms`
                    }}>
                      <span style={{
                        width: 16, height: 16, borderRadius: 4, background: 'var(--accent)',
                        color: 'var(--ink)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 10,
                        flexShrink: 0
                      }}>✓</span>
                      <span style={{ flex: 1, minWidth: 0 }}>{it.x}</span>
                      {it.p !== 'all' && (
                        <span style={{
                          ...tagStyle(it.p),
                          fontSize: 9.5, fontWeight: 700, textTransform: 'uppercase',
                          letterSpacing: '0.03em', padding: '2px 6px', borderRadius: 999,
                          flexShrink: 0, lineHeight: 1.5
                        }}>{tagLabel[it.p]}</span>
                      )}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.SetupAnimatedSection = SetupAnimatedSection;

// ----------------- AgentsHeroSection: 5×4 grid with central dark card (PREVIEW)
const AgentIcon = ({ name }) => {
  const p = { viewBox: '0 0 24 24', width: '100%', height: '100%', fill: 'none', stroke: 'currentColor', strokeWidth: 1.6, strokeLinecap: 'round', strokeLinejoin: 'round', overflow: 'visible' };
  if (name === 'icp') return (
    <svg {...p} style={{ animation: 'iconPulse 2.2s ease-in-out infinite', transformOrigin: 'center' }}>
      <circle cx="12" cy="12" r="8" />
      <circle cx="12" cy="12" r="4" />
      <circle cx="12" cy="12" r="1.2" fill="currentColor" />
      <path d="M12 2v3" /><path d="M12 19v3" /><path d="M2 12h3" /><path d="M19 12h3" />
    </svg>);
  if (name === 'search') return (
    <svg {...p} style={{ animation: 'iconSearch 2.6s ease-in-out infinite', transformOrigin: 'center' }}>
      <circle cx="10.5" cy="10.5" r="6.5" />
      <path d="M15.5 15.5L21 21" />
    </svg>);
  if (name === 'pen') return (
    <svg {...p} style={{ animation: 'iconWrite 1.9s ease-in-out infinite', transformOrigin: 'center' }}>
      <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
      <path d="m15 5 4 4" />
    </svg>);
  if (name === 'trending') return (
    <svg {...p} style={{ animation: 'iconTrend 1.8s ease-in-out infinite', transformOrigin: 'center' }}>
      <path d="M22 7l-8.5 8.5-5-5L2 17" />
      <path d="M16 7h6v6" />
    </svg>);
  if (name === 'loading') return (
    <svg {...p} style={{ animation: 'orbSpin 1.4s linear infinite', transformOrigin: 'center' }}>
      <circle cx="12" cy="12" r="9" strokeDasharray="46 10" strokeWidth="2" strokeLinecap="round" />
    </svg>);
  return null;
};

const AgentsCore = ({ lang }) => {
  const labels = lang === 'fr' ? {
    '3,1': { icon: 'icp', text: ['Recherche', 'ICP'] },
    '5,1': { icon: 'pen', text: ['Copywriting', 'des messages'] },
    '2,3': { icon: 'search', text: ['Enrichisse-', 'ment'] },
    '6,3': { icon: 'trending', text: ['Analyse des', 'performances'] },
    '4,5': { icon: 'loading', text: ['Sync', 'CRM'] }
  } : {
    '3,1': { icon: 'icp', text: ['Recherche', 'ICP'] },
    '5,1': { icon: 'pen', text: ['Message', 'Copywriting'] },
    '2,3': { icon: 'search', text: ['Data', 'Enrichment'] },
    '6,3': { icon: 'trending', text: ['Performance', 'Analysis'] },
    '4,5': { icon: 'loading', text: ['CRM', 'Sync'] }
  };

  const COLS = 7, ROWS = 5;
  // Hero spans cols 3..5, rows 2..4
  const heroCells = new Set();
  for (let r = 2; r <= 4; r++) for (let c = 3; c <= 5; c++) heroCells.add(`${c},${r}`);

  const cells = [];
  for (let r = 1; r <= ROWS; r++) {
    for (let c = 1; c <= COLS; c++) {
      const key = `${c},${r}`;
      if (heroCells.has(key)) continue;
      cells.push({ c, r, key, label: labels[key] });
    }
  }

  return (
    <div style={{
      position: 'relative',
      display: 'grid',
      gridTemplateColumns: `repeat(${COLS}, 1fr)`,
      gridTemplateRows: `repeat(${ROWS}, 1fr)`,
      gap: 'clamp(4px, 1.4vw, 10px)',
      aspectRatio: '7 / 5',
      maxWidth: 700,
      margin: '0 auto'
    }}>
      {cells.map(({ c, r, label }) => {
        const isLabel = !!label;
        return (
          <div key={`${c},${r}`} style={{
            gridColumn: c,
            gridRow: r,
            position: 'relative',
            borderRadius: 'clamp(8px, 2.4vw, 18px)',
            background: isLabel ? '#F4F2EE' : 'transparent',
            boxShadow: isLabel ?
              '0 0 0 1px rgba(28,29,31,0.06), 0 1px 2px rgba(95,74,46,0.05), 0 4px 10px rgba(95,74,46,0.04)' :
              '0 0 0 1px rgba(28,29,31,0.025)',
            overflow: 'hidden',
            display: isLabel ? 'flex' : 'block',
            flexDirection: isLabel ? 'column' : undefined,
            alignItems: isLabel ? 'center' : undefined,
            justifyContent: isLabel ? 'center' : undefined,
            textAlign: isLabel ? 'center' : undefined,
            padding: isLabel ? 'clamp(4px, 1.1vw, 12px) clamp(2px, 0.7vw, 8px)' : 0,
            color: 'var(--ink)'
          }}>
            {isLabel ? (
              <>
                <div style={{ width: 'clamp(11px,2vw,18px)', height: 'clamp(11px,2vw,18px)', marginBottom: 'clamp(8px,1.2vw,14px)', color: 'var(--ink)', flexShrink: 0 }}>
                  <AgentIcon name={label.icon} />
                </div>
                <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 500, fontSize: 'clamp(7px,1.2vw,10px)', lineHeight: 1.2, letterSpacing: '-0.01em', color: 'var(--ink)' }}>
                  {label.text[0]}<br />{label.text[1]}
                </div>
              </>
            ) : (
              <div style={{
                position: 'absolute', inset: 0, borderRadius: 'inherit',
                backgroundImage: 'repeating-linear-gradient(135deg, transparent 0, transparent 8px, rgba(28,29,31,0.025) 8px, rgba(28,29,31,0.025) 9px)'
              }}></div>
            )}
          </div>
        );
      })}

      {/* Hero card — lime gradient */}
      <div style={{
        gridColumn: '3 / span 3',
        gridRow: '2 / span 3',
        margin: 'clamp(4px,1.4vw,10px)',
        position: 'relative',
        borderRadius: 'clamp(8px, 2.4vw, 18px)',
        overflow: 'hidden',
        padding: 'clamp(8px,2vw,16px) clamp(8px,2vw,16px) clamp(5px,1.4vw,12px)',
        boxSizing: 'border-box',
        background: 'radial-gradient(120% 120% at 100% 100%, #ECFF8E 0%, #E1FF6C 45%, #C9EE3A 100%)',
        boxShadow: '0 0 0 1px var(--accent-edge), 0 14px 36px rgba(169,199,48,0.28), 0 4px 10px rgba(95,74,46,0.10), inset 0 1px 0 rgba(255,255,255,0.55)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        color: 'var(--ink)',
        zIndex: 2
      }}>
        {/* shine highlight */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: 'radial-gradient(60% 80% at 25% 0%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 60%), radial-gradient(40% 50% at 80% 30%, rgba(245,255,205,0.5) 0%, rgba(255,255,255,0) 60%)'
        }}></div>
        {/* bottom shading */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: 'linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(28,29,31,0.06) 100%)'
        }}></div>
        <div style={{
          position: 'relative', zIndex: 1,
          fontFamily: 'var(--font-sans)',
          fontWeight: 800,
          fontSize: 'clamp(13px, 4.5vw, 32px)',
          lineHeight: 0.95,
          letterSpacing: '-0.025em',
          color: 'var(--ink)',
          textTransform: 'uppercase',
          fontStretch: 'condensed'
        }}>
          {lang === 'fr' ? 'Méthode Upscale' : 'Méthode Upscale'}
          <span style={{
            display: 'block',
            marginTop: 'clamp(3px,0.9vw,8px)',
            fontSize: 'clamp(8px, 2.2vw, 14px)',
            fontWeight: 700,
            letterSpacing: '-0.01em',
            lineHeight: 1.05,
            color: 'var(--ink)',
            opacity: 0.78
          }}>
            {lang === 'fr' ? 'Nos systèmes combinent IA et stratégies humaines.' : 'Our systems combine AI and human strategies.'}
          </span>
        </div>
        {/* Arrow logo — absolute center of card */}
        <svg style={{ position: 'absolute', top: '57%', left: '50%', transform: 'translate(-50%, -50%)', zIndex: 1, width: 'clamp(24px,5vw,52px)', height: 'clamp(24px,5vw,52px)' }} viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.117188 0.00109863H40.8415V15.1706H15.2867C6.90881 15.1706 0.117188 8.37899 0.117188 0.00109863Z" fill="#171817"/>
          <path d="M40.8407 40.7244C32.4628 40.7244 25.6711 33.9327 25.6711 25.5548L25.6711 4.19617e-05L40.8407 4.12986e-05L40.8407 40.7244Z" fill="#171817"/>
          <path d="M0 25.6722H15.1695V40.8418C6.79162 40.8418 0 34.0501 0 25.6722Z" fill="#171817"/>
        </svg>
        {/* Avatars — bottom right */}
        <div style={{ position: 'relative', zIndex: 1, alignSelf: 'flex-end', display: 'flex' }}>
          {[
            { src: 'https://i.imgur.com/TPtCImM.png', alt: 'Antoine' },
            { src: 'https://i.imgur.com/pe5rlwP.jpeg', alt: 'Vincent' }
          ].map((p, i) => (
            <div key={i} style={{
              width: 'clamp(16px,3.2vw,28px)', height: 'clamp(16px,3.2vw,28px)', borderRadius: '50%',
              background: '#FFFCF5',
              boxShadow: '0 0 0 2px #FFFCF5, 0 3px 8px rgba(0,0,0,0.16)',
              border: '1px solid rgba(0,0,0,0.06)',
              overflow: 'hidden',
              marginLeft: i === 0 ? 0 : 'clamp(-5px,-1.1vw,-8px)'
            }}>
              <img src={p.src} alt={p.alt} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </div>
          ))}
        </div>
      </div>
    </div>);
};

const AgentsHeroSection = ({ lang }) => {
  const intervals = [4800, 5200, 5000, 5400];
  // INTENT_POOL: indices 0-7 = Signals, indices 8-11 = Intents
  // All 4 cards cycle through Signals only
  const [indices, setIndices] = useState([0, 1, 2, 5]);
  const [bumps, setBumps] = useState([0, 0, 0, 0]);

  useEffect(() => {
    const timers = intervals.map((ms, cardIdx) =>
      setInterval(() => {
        setIndices((prev) => {
          const next = [...prev];
          // cycle only through signal slots (0–7), step by 3 for variety
          next[cardIdx] = (next[cardIdx] + 3) % 8;
          return next;
        });
        setBumps((prev) => {
          const next = [...prev];
          next[cardIdx] = next[cardIdx] + 1;
          return next;
        });
      }, ms));
    return () => timers.forEach(clearInterval);
  }, []);

  const tools = PERIMETER_TOOLS;
  const tools2x = [...tools, ...tools];

  return (
    <section className="u-section" style={{
      paddingTop: 100, paddingBottom: 100,
      background: 'var(--bg)',
      position: 'relative', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)',
        backgroundSize: '48px 48px',
        opacity: 0.35,
        maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 80%)',
        pointerEvents: 'none'
      }}></div>

      <div className="u-container" style={{ position: 'relative' }}>
        <div className="u-agents-hero-header" style={{ textAlign: 'center', marginBottom: 48 }}>
          <p className="u-eyebrow" style={{ marginBottom: 14, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent-edge)' }}></span>
            {lang === 'fr' ? 'LE SYSTÈME' : 'THE SYSTEM'}
          </p>
          <h2 style={{ maxWidth: 760, margin: '0 auto' }}>
            {lang === 'fr' ? 'Scaler n\'est pas un hasard. ' : 'Scaling isn\'t luck. '}
            <span style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 400 }}>
              {lang === 'fr' ? 'C\'est un système.' : 'It\'s a system.'}
            </span>
          </h2>
        </div>

        {/* Tier 1: 4 intent cards */}
        <div className="u-intent-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
          maxWidth: 980, marginLeft: 'auto', marginRight: 'auto'
        }}>
          {indices.map((sigIdx, cardIdx) => {
            const sig = INTENT_POOL[sigIdx];
            return (
              <div
                key={`${cardIdx}-${bumps[cardIdx]}`}
                className={`u-card${cardIdx >= 2 ? ' u-desktop-only' : ''}`}
                style={{ padding: 'clamp(10px,2vw,16px)', animation: 'intentSwap 0.5s ease-out' }}>
                <p className="u-eyebrow" style={{ fontSize: 10, marginBottom: 6 }}>{sig.cat}</p>
                <p style={{ fontSize: 'clamp(12px,1.8vw,14px)', fontWeight: 600, fontFamily: 'var(--font-mono)', marginBottom: 10, color: 'var(--ink)' }}>{sig.s}</p>
              </div>);
          })}
        </div>

        {/* Connector: 4 smooth bezier curves converging to a glowing node — desktop only */}
        <div className="u-desktop-only" style={{ position: 'relative', height: 76, maxWidth: 980, marginLeft: 'auto', marginRight: 'auto' }}>
          <svg viewBox="0 0 980 76" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', overflow: 'visible' }}>
            <defs>
              <linearGradient id="connFlow" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(28,29,31,0.16)" />
                <stop offset="60%" stopColor="rgba(169,199,48,0.55)" />
                <stop offset="100%" stopColor="var(--accent-edge)" />
              </linearGradient>
            </defs>
            {[122, 367, 612, 857].map((x, i) => (
              <path
                key={i}
                d={`M ${x} 0 C ${x} 30, 490 36, 490 64`}
                stroke="url(#connFlow)"
                strokeWidth="1.5"
                fill="none"
                strokeLinecap="round" />
            ))}
            {/* Convergence node */}
            <circle cx="490" cy="66" r="3.5" fill="var(--accent)" stroke="var(--accent-edge)" strokeWidth="1"
              style={{ filter: 'drop-shadow(0 0 8px rgba(225,255,108,0.7))', animation: 'pulseDot 1.8s ease-in-out infinite' }} />
          </svg>
        </div>

        {/* AgentsCore grid — all screens, scales via clamp() */}
        <div className="agents-core-spacer">
          <AgentsCore lang={lang} />
        </div>

        {/* Caption to logos marquee */}
        <div style={{ height: 56, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em',
            color: 'var(--gray-4)'
          }}>
            {lang === 'fr' ? 'Les outils que l\'on utilise :' : 'Tools we use:'}
          </span>
        </div>

        {/* Tier 3: marquee */}
        <div style={{
          position: 'relative',
          maxWidth: 1100,
          marginLeft: 'auto', marginRight: 'auto',
          padding: '20px 0',
          maskImage: 'linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%)'
        }}>
          <div style={{
            display: 'flex',
            gap: 14,
            width: 'max-content',
            animation: 'hubScrollRight 36s linear infinite'
          }}>
            {tools2x.map((tool, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '10px 16px',
                background: 'var(--paper)',
                border: '1px solid var(--line)',
                borderRadius: 10,
                flexShrink: 0,
                boxShadow: '0 2px 8px rgba(28,29,31,0.06)'
              }}>
                <img src={logoUrl(tool.d)} alt={tool.n} style={{ width: 18, height: 18, borderRadius: 4, objectFit: 'contain' }} onError={(e) => { e.target.style.display = 'none'; }} />
                <span style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500, fontFamily: 'var(--font-mono)' }}>{tool.n}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>);
};

window.AgentsHeroSection = AgentsHeroSection;

// ----------------- TeamCollectifSection: founders + collectif (PREVIEW)
const TeamCollectifSection = ({ lang }) => {
  const founders = lang === 'fr' ? [
    {
      name: 'Antoine Guiné',
      photo: 'https://i.imgur.com/SFkDyJd.png',
      bio: 'GTM Engineer & RevOps spécialisé dans les systèmes d\'acquisition B2B, je gère toute la partie opérationnelle de nos clients.'
    },
    {
      name: 'Vincent Wattez',
      photo: 'https://i.imgur.com/Pa04ENS.png',
      bio: 'Fondateur et Head of Sales de 2 start-up, +20 commerciaux managés. Je gère votre stratégie (audit), copywriting, CRM, formation des Sales.'
    }
  ] : [
    {
      name: 'Antoine Guiné',
      photo: 'https://i.imgur.com/SFkDyJd.png',
      bio: 'GTM Engineer & RevOps specialized in B2B sales machines. I run the operational side for our clients with the collective.'
    },
    {
      name: 'Vincent Wattez',
      photo: 'https://i.imgur.com/Pa04ENS.png',
      bio: 'Founder and Head of Sales for 2 start-ups, +20 reps managed. I cover your strategy (audit), copywriting, CRM, sales training.'
    }
  ];

  return (
    <section className="u-section" style={{
      paddingTop: 100, paddingBottom: 100,
      position: 'relative',
      overflow: 'hidden',
      background: 'var(--bg)'
    }}>
      {/* Lime decoration top-right (rounded shape) */}
      <div style={{
        position: 'absolute', top: -40, right: -60,
        width: 360, height: 280,
        background: 'var(--accent)',
        borderRadius: '0 0 0 200px',
        opacity: 0.85,
        pointerEvents: 'none',
        zIndex: 0
      }}></div>
      {/* Lime band at bottom */}
      <div style={{
        position: 'absolute', bottom: -20, left: -40, right: '40%',
        height: 100,
        background: 'var(--accent)',
        borderRadius: '0 100px 0 0',
        opacity: 0.9,
        pointerEvents: 'none',
        zIndex: 0
      }}></div>

      <div className="u-container" style={{ position: 'relative', zIndex: 1 }}>
        <p className="u-eyebrow" style={{ marginBottom: 14, color: 'var(--gray-4)' }}>
          — {lang === 'fr' ? 'ÉQUIPE' : 'TEAM'}
        </p>

        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr',
          gap: 80,
          alignItems: 'center'
        }}>
          {/* LEFT: Title + pill */}
          <div>
            <h2 style={{ marginBottom: 28, maxWidth: 380, lineHeight: 1.05 }}>
              {lang === 'fr' ? 'Une équipe experte en Acquisition' : 'A GTM-expert team'}
            </h2>

            {/* Collectif pill (dark) */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '8px 14px',
              borderRadius: 999,
              background: 'var(--ink)',
              color: 'var(--bg)',
              marginBottom: 18,
              fontSize: 13, fontWeight: 500
            }}>
              <span>L'équipe</span>
              <img
                src="https://img.logo.dev/up-scale.fr?token=pk_LbhDh0o7S7SEtCE7aOlL5Q&retina=true"
                alt=""
                style={{ width: 18, height: 18, borderRadius: 4, objectFit: 'contain' }} />
              <span style={{ fontWeight: 600 }}>Upscale</span>
            </div>

            <p style={{
              fontSize: 15, color: 'var(--gray-4)',
              maxWidth: 360, lineHeight: 1.55
            }}>
              {lang === 'fr'
                ? "+10 ans d'expérience cumulés dans le growth et la prospection B2B. En travaillant avec Upscale, vous travaillerez en direct avec nous, pas d'intermédiaire !"
                : "+10 years of combined experience in growth and B2B prospecting. When you work with Upscale, you work directly with us — no middleman!"}
            </p>
          </div>

          {/* RIGHT: 2 founder cards */}
          <div className="u-founders-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {founders.map((f, i) => (
              <div key={i} style={{
                background: 'var(--paper)',
                borderRadius: 18,
                padding: 14,
                boxShadow: '0 0 0 1px rgba(227,225,222,0.5), 0 4px 12px rgba(95,74,46,0.06), 0 18px 30px -12px rgba(95,74,46,0.10)',
                display: 'flex', flexDirection: 'column'
              }}>
                <div className="u-founder-photo-wrap" style={{
                  width: '100%', aspectRatio: '4/3.5',
                  borderRadius: 12,
                  overflow: 'hidden',
                  background: 'var(--bg-2)',
                  marginBottom: 14
                }}>
                  <img
                    src={f.photo}
                    alt={f.name}
                    style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%', display: 'block' }} />
                </div>
                <h3 style={{
                  fontSize: 20, fontWeight: 700,
                  marginBottom: 8,
                  color: 'var(--ink)',
                  letterSpacing: '-0.02em'
                }}>{f.name}</h3>
                <p style={{ fontSize: 13, color: 'var(--gray-4)', lineHeight: 1.55 }}>{f.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.TeamCollectifSection = TeamCollectifSection;

window.LogosStrip = LogosStrip;
window.Metrics = Metrics;
window.ProblemSection = ProblemSection;
window.SolutionSection = SolutionSection;
window.SignalsSection = SignalsSection;
window.ToolsSection = ToolsSection;
window.CompareSection = CompareSection;