const TOTAL_SLIDES = 20;

function Slide01_Cover() {
  return (
    <>
      <ChromeTop section="OUVERTURE" slideNum={1} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="grid-bg"></div>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%', gap: 34 }}>
          <div className="eyebrow">01 · Correction technique</div>
          <div className="title-xl" style={{ maxWidth: 1500 }}>
            Deck Waka × Bouygues Telecom
          </div>
          <div className="subtitle" style={{ maxWidth: 1180 }}>
            Proposition commerciale pour un pilote Back to School 2026 : agents IA, télévente et souscription autonome.
          </div>
          <div style={{ display: 'flex', gap: 18, marginTop: 18 }}>
            <span className="tag orange">Responsable télévente</span>
            <span className="tag green">Accord de principe</span>
            <span className="tag cyan">www.wakaorbit.com</span>
          </div>
          <div className="strip" style={{ marginTop: 34 }}>
            Acquisition réseaux sociaux · Appels sortants fichiers Bouygues · Appels sortants leads Waka · Toutes offres Bouygues
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Correction technique" />
    </>
  );
}

function Slide02_QuiEstWaka() {
  return (
    <>
      <ChromeTop section="WAKA ORBIT" slideNum={2} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">02 · Qui est Waka</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          Une plateforme multi-agents IA, pas un chatbot.
        </div>
        <div className="subtitle" style={{ maxWidth: 1240, marginTop: 20 }}>
          Waka Orbit orchestre une équipe d’agents qui planifie, exécute et rend des comptes.
        </div>
        <div className="bento" style={{ marginTop: 56 }}>
          <div className="card surface">
            <div className="label">Ce que font les agents</div>
            <div className="body-l" style={{ marginTop: 18 }}>Décomposer une demande, agir sur des outils, réessayer et tracer les décisions.</div>
          </div>
          <div className="card surface">
            <div className="label">Modes d’autonomie</div>
            <div className="body-l" style={{ marginTop: 18 }}>Autonomie totale, validation humaine ou copilotage selon les règles métier.</div>
          </div>
          <div className="card surface">
            <div className="label">Champs couverts</div>
            <div className="body-l" style={{ marginTop: 18 }}>Service client, marketing, ventes, prospection, support et processus sur mesure.</div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Waka Orbit" />
    </>
  );
}

function Slide03_AgentConcret() {
  return (
    <>
      <ChromeTop section="WAKA ORBIT" slideNum={3} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">03 · Agent IA concret</div>
        <div className="title-l" style={{ maxWidth: 1370 }}>
          Un agent IA avec outils observe, raisonne, agit et contrôle.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22, marginTop: 62 }}>
          <div className="card">
            <div className="step-num">1</div>
            <div className="title-m" style={{ marginTop: 22 }}>Observe</div>
            <div className="body-m" style={{ marginTop: 14 }}>Il travaille sur un périmètre et des signaux validés.</div>
          </div>
          <div className="card">
            <div className="step-num">2</div>
            <div className="title-m" style={{ marginTop: 22 }}>Raisonne</div>
            <div className="body-m" style={{ marginTop: 14 }}>Il interprète le contexte et choisit l’action adaptée.</div>
          </div>
          <div className="card">
            <div className="step-num">3</div>
            <div className="title-m" style={{ marginTop: 22 }}>Agit</div>
            <div className="body-m" style={{ marginTop: 14 }}>Il utilise les APIs, outils et canaux autorisés.</div>
          </div>
          <div className="card">
            <div className="step-num">4</div>
            <div className="title-m" style={{ marginTop: 22 }}>Rend compte</div>
            <div className="body-m" style={{ marginTop: 14 }}>Il trace les décisions, résultats et exceptions.</div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Waka Orbit" />
    </>
  );
}

function Slide04_ArchitectureGenerale() {
  return (
    <>
      <ChromeTop section="VISION PILOTE" slideNum={4} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">04 · Deux opérations distinctes</div>
        <div className="title-l" style={{ maxWidth: 1440 }}>
          Le pilote sépare clairement acquisition sociale et télévente sortante.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 58 }}>
          <div className="card surface">
            <span className="tag orange">Opération A</span>
            <div className="title-m" style={{ marginTop: 26 }}>Recrutement via réseaux sociaux</div>
            <div className="body-m" style={{ marginTop: 18 }}>
              Détection de signaux d’achat sur pages ou espaces autorisés, conversation, recommandation d’offre et souscription.
            </div>
          </div>
          <div className="card surface">
            <span className="tag cyan">Opération B</span>
            <div className="title-m" style={{ marginTop: 26 }}>Télévente sortante</div>
            <div className="body-m" style={{ marginTop: 18 }}>
              Appels sortants sur fichiers Bouygues, fichiers internes ou leads Waka avec dialer, rappels, skills, MCP et outils de souscription.
            </div>
          </div>
        </div>
        <div className="quote-block" style={{ marginTop: 42 }}>
          Le pilote doit démontrer une opération autonome, avec escalade uniquement si une règle métier ou une exception l’impose.
        </div>
      </div>
      <ChromeBottom chapter="Vision pilote" />
    </>
  );
}

function Slide05_CeQueWakaOpere() {
  return (
    <>
      <ChromeTop section="VISION PILOTE" slideNum={5} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">05 · Ce que Waka opère</div>
        <div className="title-l" style={{ maxWidth: 1330 }}>
          La souscription est réalisée de bout en bout par l’agent.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16, marginTop: 60 }}>
          {[
            ['1', 'Qualification'],
            ['2', 'Recommandation'],
            ['3', 'Recueil et validation'],
            ['4', 'Souscription'],
            ['5', 'Activation ou suivi'],
            ['6', 'Compte rendu et contrôle']
          ].map(([num, label]) => (
            <div className="card" key={num}>
              <div className="step-num">{num}</div>
              <div className="body-m" style={{ marginTop: 24, fontWeight: 700 }}>{label}</div>
            </div>
          ))}
        </div>
        <div className="subtitle" style={{ marginTop: 48, maxWidth: 1180 }}>
          L’objectif n’est pas de transmettre un prospect : l’agent qualifie, recommande, souscrit et actualise le dossier dans les outils autorisés.
        </div>
      </div>
      <ChromeBottom chapter="Vision pilote" />
    </>
  );
}

function Slide06_OperationAProposition() {
  return (
    <>
      <ChromeTop section="OPÉRATION A" slideNum={6} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">06 · Proposition nouvelle</div>
        <div className="title-l" style={{ maxWidth: 1340 }}>
          Acquisition Bouygues Telecom via signaux sociaux.
        </div>
        <div className="subtitle" style={{ maxWidth: 1260, marginTop: 20 }}>
          Une page désigne un espace social public ou autorisé où des utilisateurs publient posts et commentaires.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 58 }}>
          <div className="card surface">
            <div className="label">Périmètre</div>
            <div className="body-l" style={{ marginTop: 16 }}>Pages et espaces autorisés, validés avec Bouygues Telecom.</div>
          </div>
          <div className="card surface">
            <div className="label">Signaux</div>
            <div className="body-l" style={{ marginTop: 16 }}>Mots-clés, besoins, questions, insatisfactions ou intentions d’achat.</div>
          </div>
          <div className="card surface">
            <div className="label">Règles</div>
            <div className="body-l" style={{ marginTop: 16 }}>L’agent ne lit pas tout indistinctement : il suit un cadre validé.</div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Opération A" />
    </>
  );
}

function Slide07_DetectionInterpretation() {
  return (
    <>
      <ChromeTop section="OPÉRATION A" slideNum={7} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">07 · Détection et interprétation</div>
        <div className="title-l" style={{ maxWidth: 1380 }}>
          Deux agents transforment un signal social en contexte exploitable.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 64 }}>
          <div className="card surface">
            <span className="tag orange">Agent de détection</span>
            <div className="title-m" style={{ marginTop: 28 }}>Repère les signaux</div>
            <div className="body-m" style={{ marginTop: 18 }}>
              Il observe les pages autorisées et identifie les posts ou commentaires correspondant aux signaux validés.
            </div>
          </div>
          <div className="card surface">
            <span className="tag cyan">Agent d’interprétation</span>
            <div className="title-m" style={{ marginTop: 28 }}>Comprend le contexte</div>
            <div className="body-m" style={{ marginTop: 18 }}>
              Il distingue question, insatisfaction, besoin exprimé ou intention d’achat avant toute action.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Opération A" />
    </>
  );
}

function Slide08_ScoringDecision() {
  return (
    <>
      <ChromeTop section="OPÉRATION A" slideNum={8} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">08 · Scoring et décision</div>
        <div className="title-l" style={{ maxWidth: 1360 }}>
          L’intention est classée avant engagement commercial.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 64 }}>
          <div className="card">
            <div className="kpi">
              <div className="label">Type 1</div>
              <div className="val orange">Immédiate</div>
              <div className="delta">Invitation et proposition adaptées</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Type 2</div>
              <div className="val cyan">Possible</div>
              <div className="delta">Surveillance et scoring continu</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Type 3</div>
              <div className="val green">Non validée</div>
              <div className="delta">Pas d’action commerciale automatique</div>
            </div>
          </div>
        </div>
        <div className="quote-block" style={{ marginTop: 44 }}>
          Le scoring encadre le comportement de l’agent : engager, surveiller ou ne pas activer.
        </div>
      </div>
      <ChromeBottom chapter="Opération A" />
    </>
  );
}

function Slide09_ConversationSouscription() {
  return (
    <>
      <ChromeTop section="OPÉRATION A" slideNum={9} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">09 · Conversation et souscription</div>
        <div className="title-l" style={{ maxWidth: 1400 }}>
          L’agent engage, recommande et souscrit dans les outils autorisés.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 62 }}>
          {[
            ['1', 'Engagement selon les règles'],
            ['2', 'Recommandation de l’offre'],
            ['3', 'Validation des éléments'],
            ['4', 'Souscription'],
            ['5', 'Suivi d’activation']
          ].map(([num, label]) => (
            <div className="card surface" key={num}>
              <div className="step-num">{num}</div>
              <div className="body-m" style={{ marginTop: 24, fontWeight: 700 }}>{label}</div>
            </div>
          ))}
        </div>
        <div className="subtitle" style={{ marginTop: 48, maxWidth: 1200 }}>
          L’escalade intervient uniquement si une règle métier ou une exception l’impose.
        </div>
      </div>
      <ChromeBottom chapter="Opération A" />
    </>
  );
}

function Slide10_ExempleSignalSocial() {
  return (
    <>
      <ChromeTop section="OPÉRATION A" slideNum={10} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">10 · Exemple de signal social</div>
        <div className="title-l" style={{ maxWidth: 1420 }}>
          Un commentaire peut devenir une conversation qualifiée.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 64 }}>
          <div className="card">
            <div className="label">Entrée</div>
            <div className="body-l" style={{ marginTop: 18 }}>Post ou commentaire dans un espace autorisé.</div>
          </div>
          <div className="card">
            <div className="label">Analyse</div>
            <div className="body-l" style={{ marginTop: 18 }}>Question, insatisfaction, besoin ou intention.</div>
          </div>
          <div className="card">
            <div className="label">Décision</div>
            <div className="body-l" style={{ marginTop: 18 }}>Intention immédiate, possible ou non validée.</div>
          </div>
          <div className="card">
            <div className="label">Sortie</div>
            <div className="body-l" style={{ marginTop: 18 }}>Conversation, offre adaptée, souscription ou suivi.</div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Opération A" />
    </>
  );
}

function Slide11_ValeurConditionsA() {
  return (
    <>
      <ChromeTop section="OPÉRATION A" slideNum={11} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">11 · Valeur et conditions</div>
        <div className="title-l" style={{ maxWidth: 1350 }}>
          L’opération A ouvre un nouveau canal d’acquisition maîtrisé.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 62 }}>
          <div className="card surface">
            <div className="label">Objectif</div>
            <div className="body-l" style={{ marginTop: 18 }}>Détecter des intentions d’achat là où elles s’expriment.</div>
          </div>
          <div className="card surface">
            <div className="label">Contrôle</div>
            <div className="body-l" style={{ marginTop: 18 }}>Périmètre, signaux et règles validés avec Bouygues.</div>
          </div>
          <div className="card surface">
            <div className="label">Résultat</div>
            <div className="body-l" style={{ marginTop: 18 }}>Qualification, souscription, activation et compte rendu.</div>
          </div>
        </div>
        <div className="strip" style={{ marginTop: 52 }}>
          Une proposition nouvelle · pédagogique · mesurable · opérée par agents IA
        </div>
      </div>
      <ChromeBottom chapter="Opération A" />
    </>
  );
}

function Slide12_OperationBDifferente() {
  return (
    <>
      <ChromeTop section="OPÉRATION B" slideNum={12} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">12 · Une opération différente</div>
        <div className="title-l" style={{ maxWidth: 1400 }}>
          La télévente sortante repose sur dialer, rappels, skills et MCP.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 62 }}>
          <div className="card surface">
            <span className="tag orange">Fichiers Bouygues</span>
            <div className="body-l" style={{ marginTop: 22 }}>Appels sortants sur bases mises à disposition.</div>
          </div>
          <div className="card surface">
            <span className="tag cyan">Fichiers internes</span>
            <div className="body-l" style={{ marginTop: 22 }}>Campagnes encadrées par règles métier.</div>
          </div>
          <div className="card surface">
            <span className="tag green">Leads Waka</span>
            <div className="body-l" style={{ marginTop: 22 }}>Activation de leads détectés ou qualifiés.</div>
          </div>
        </div>
        <div className="subtitle" style={{ marginTop: 46 }}>
          Toutes les offres Bouygues Telecom sont concernées dans le périmètre pilote.
        </div>
      </div>
      <ChromeBottom chapter="Opération B" />
    </>
  );
}

function Slide13_ParcoursSortant() {
  return (
    <>
      <ChromeTop section="OPÉRATION B" slideNum={13} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">13 · Parcours sortant</div>
        <div className="title-l" style={{ maxWidth: 1340 }}>
          Un parcours télévente autonome, contrôlé par règles.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 64 }}>
          <div className="card">
            <div className="step-num">1</div>
            <div className="body-m" style={{ marginTop: 22, fontWeight: 700 }}>Dialer</div>
            <div className="body-s" style={{ marginTop: 10 }}>Règles d’appel et de rappel.</div>
          </div>
          <div className="card">
            <div className="step-num">2</div>
            <div className="body-m" style={{ marginTop: 22, fontWeight: 700 }}>Qualification</div>
            <div className="body-s" style={{ marginTop: 10 }}>Besoin, contexte et éligibilité.</div>
          </div>
          <div className="card">
            <div className="step-num">3</div>
            <div className="body-m" style={{ marginTop: 22, fontWeight: 700 }}>Offre</div>
            <div className="body-s" style={{ marginTop: 10 }}>Recommandation adaptée.</div>
          </div>
          <div className="card">
            <div className="step-num">4</div>
            <div className="body-m" style={{ marginTop: 22, fontWeight: 700 }}>Souscription</div>
            <div className="body-s" style={{ marginTop: 10 }}>Action dans les outils autorisés.</div>
          </div>
          <div className="card">
            <div className="step-num">5</div>
            <div className="body-m" style={{ marginTop: 22, fontWeight: 700 }}>Dossier</div>
            <div className="body-s" style={{ marginTop: 10 }}>Actualisation et compte rendu.</div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Opération B" />
    </>
  );
}

function Slide14_DiagrammeTechnique() {
  return (
    <>
      <ChromeTop section="OPÉRATION B" slideNum={14} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">14 · Diagramme technique</div>
        <div className="title-l" style={{ maxWidth: 1380 }}>
          Le LLM raisonne, le MCP orchestre, les outils Bouygues exécutent.
        </div>
        <div className="card surface" style={{ marginTop: 44, height: 520, position: 'relative', overflow: 'hidden' }}>
          <svg width="100%" height="100%" viewBox="0 0 1680 520" preserveAspectRatio="none">
            <defs>
              <marker id="arrow" markerWidth="10" markerHeight="10" refX="8" refY="3" orient="auto">
                <path d="M0,0 L0,6 L9,3 z" fill="var(--waka-orange)"></path>
              </marker>
            </defs>
            <rect x="40" y="55" width="290" height="130" rx="22" fill="var(--orbit-bg-surface)" stroke="var(--orbit-border-strong)"></rect>
            <text x="185" y="112" textAnchor="middle" fill="var(--orbit-text-1)" fontSize="30" fontWeight="800">LLM</text>
            <text x="185" y="150" textAnchor="middle" fill="var(--orbit-text-2)" fontSize="20">Raisonnement</text>

            <rect x="410" y="55" width="310" height="130" rx="22" fill="var(--orbit-bg-surface)" stroke="var(--orbit-border-strong)"></rect>
            <text x="565" y="108" textAnchor="middle" fill="var(--orbit-text-1)" fontSize="28" fontWeight="800">Skills métier</text>
            <text x="565" y="146" textAnchor="middle" fill="var(--orbit-text-2)" fontSize="19">Qualification · campagne</text>

            <rect x="800" y="55" width="310" height="130" rx="22" fill="var(--orbit-bg-surface)" stroke="var(--waka-orange)" strokeWidth="2"></rect>
            <text x="955" y="108" textAnchor="middle" fill="var(--orbit-text-1)" fontSize="28" fontWeight="800">Serveur MCP</text>
            <text x="955" y="146" textAnchor="middle" fill="var(--orbit-text-2)" fontSize="19">Orchestration outils</text>

            <rect x="1190" y="55" width="330" height="130" rx="22" fill="var(--orbit-bg-surface)" stroke="var(--orbit-border-strong)"></rect>
            <text x="1355" y="108" textAnchor="middle" fill="var(--orbit-text-1)" fontSize="28" fontWeight="800">Outils Bouygues</text>
            <text x="1355" y="146" textAnchor="middle" fill="var(--orbit-text-2)" fontSize="19">Souscription · dossier</text>

            <rect x="555" y="315" width="330" height="130" rx="22" fill="var(--orbit-bg-surface)" stroke="var(--orbit-border-strong)"></rect>
            <text x="720" y="368" textAnchor="middle" fill="var(--orbit-text-1)" fontSize="28" fontWeight="800">Dialer</text>
            <text x="720" y="406" textAnchor="middle" fill="var(--orbit-text-2)" fontSize="19">Appels et rappels</text>

            <rect x="965" y="315" width="330" height="130" rx="22" fill="var(--orbit-bg-surface)" stroke="var(--orbit-border-strong)"></rect>
            <text x="1130" y="368" textAnchor="middle" fill="var(--orbit-text-1)" fontSize="28" fontWeight="800">Exécution voix</text>
            <text x="1130" y="406" textAnchor="middle" fill="var(--orbit-text-2)" fontSize="19">Conversation sortante</text>

            <line x1="330" y1="120" x2="410" y2="120" stroke="var(--waka-orange)" strokeWidth="3" markerEnd="url(#arrow)"></line>
            <line x1="720" y1="120" x2="800" y2="120" stroke="var(--waka-orange)" strokeWidth="3" markerEnd="url(#arrow)"></line>
            <line x1="1110" y1="120" x2="1190" y2="120" stroke="var(--waka-orange)" strokeWidth="3" markerEnd="url(#arrow)"></line>
            <line x1="955" y1="185" x2="760" y2="315" stroke="var(--waka-orange)" strokeWidth="3" markerEnd="url(#arrow)"></line>
            <line x1="885" y1="380" x2="965" y2="380" stroke="var(--waka-orange)" strokeWidth="3" markerEnd="url(#arrow)"></line>
            <line x1="1130" y1="315" x2="1030" y2="185" stroke="var(--waka-orange)" strokeWidth="3" markerEnd="url(#arrow)"></line>
          </svg>
        </div>
      </div>
      <ChromeBottom chapter="Opération B" />
    </>
  );
}

function Slide15_SourcesExempleAppel() {
  return (
    <>
      <ChromeTop section="OPÉRATION B" slideNum={15} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">15 · Sources et appel</div>
        <div className="title-l" style={{ maxWidth: 1360 }}>
          Chaque appel part d’une source identifiée et d’une règle de campagne.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 60 }}>
          <div className="card surface">
            <div className="label">Sources pilote</div>
            <div className="body-l" style={{ marginTop: 18 }}>
              Fichiers Bouygues, fichiers internes et leads Waka issus d’opérations autorisées.
            </div>
          </div>
          <div className="card surface">
            <div className="label">Exemple d’appel</div>
            <div className="body-l" style={{ marginTop: 18 }}>
              Le dialer applique les règles de rappel ; les skills encadrent qualification, offre, souscription et dossier.
            </div>
          </div>
        </div>
        <div className="quote-block" style={{ marginTop: 46 }}>
          Le serveur MCP utilise les outils Bouygues autorisés pour souscrire et mettre à jour le dossier client ou prospect.
        </div>
      </div>
      <ChromeBottom chapter="Opération B" />
    </>
  );
}

function Slide16_WakaCentreAppel() {
  return (
    <>
      <ChromeTop section="MODÈLE" slideNum={16} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">16 · Waka versus centre d’appel</div>
        <div className="title-l" style={{ maxWidth: 1430 }}>
          La télévente IA retire les limites opérationnelles humaines.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 62 }}>
          <div className="card">
            <div className="kpi"><div className="label">Absentéisme</div><div className="val orange">0</div><div className="delta">continuité d’opération</div></div>
          </div>
          <div className="card">
            <div className="kpi"><div className="label">Attrition</div><div className="val orange">0</div><div className="delta">stabilité de capacité</div></div>
          </div>
          <div className="card">
            <div className="kpi"><div className="label">Adaptation</div><div className="val cyan">Illimitée</div><div className="delta">règles et offres</div></div>
          </div>
          <div className="card">
            <div className="kpi"><div className="label">Formation</div><div className="val green">Quasi nulle</div><div className="delta">mise à jour rapide</div></div>
          </div>
          <div className="card">
            <div className="kpi"><div className="label">Contrôle</div><div className="val cyan">100%</div><div className="delta">conversations évaluées</div></div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Modèle opérationnel" />
    </>
  );
}

function Slide17_ChiffresAnnonces() {
  return (
    <>
      <ChromeTop section="MODÈLE" slideNum={17} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">17 · Chiffres clés annoncés</div>
        <div className="title-l" style={{ maxWidth: 1320 }}>
          Les gains attendus combinent performance, joignabilité, satisfaction et coûts.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22, marginTop: 66 }}>
          <div className="card">
            <div className="kpi">
              <div className="label">Performance</div>
              <div className="val orange">+32%</div>
              <div className="delta">gain annoncé</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Joignabilité</div>
              <div className="val cyan">+12%</div>
              <div className="delta">gain annoncé</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Satisfaction</div>
              <div className="val green">+17%</div>
              <div className="delta">gain annoncé</div>
            </div>
          </div>
          <div className="card">
            <div className="kpi">
              <div className="label">Coûts</div>
              <div className="val orange">-17%</div>
              <div className="delta">baisse annoncée</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Modèle opérationnel" />
    </>
  );
}

function Slide18_ModeleReferences() {
  return (
    <>
      <ChromeTop section="MODÈLE" slideNum={18} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">18 · Modèle et références</div>
        <div className="title-l" style={{ maxWidth: 1380 }}>
          Un modèle facturé à la performance, adossé à des opérations déjà menées.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 56 }}>
          <div className="card surface">
            <span className="tag orange">100% commission sur succès</span>
            <div className="body-l" style={{ marginTop: 24 }}>
              0 setup, 0 formation, 0 coût horaire, 0 risque.
            </div>
          </div>
          <div className="card surface">
            <span className="tag green">Références</span>
            <div className="body-m" style={{ marginTop: 24 }}>
              Tomorrow University : funnel d’acquisition étudiants. Publica France : anti-churn et fidélisation. Bébé Maman : détection de leads et offres selon score.
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Modèle opérationnel" />
    </>
  );
}

function Slide19_PiloteBTS2026() {
  return (
    <>
      <ChromeTop section="PILOTE" slideNum={19} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="eyebrow">19 · Pilote Back to School 2026</div>
        <div className="title-l" style={{ maxWidth: 1420 }}>
          Le périmètre pilote couvre trois activations complémentaires.
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 62 }}>
          <div className="card surface">
            <div className="step-num">1</div>
            <div className="title-m" style={{ marginTop: 24 }}>Réseaux sociaux</div>
            <div className="body-m" style={{ marginTop: 14 }}>Détection et activation sur espaces autorisés.</div>
          </div>
          <div className="card surface">
            <div className="step-num">2</div>
            <div className="title-m" style={{ marginTop: 24 }}>Fichiers Bouygues</div>
            <div className="body-m" style={{ marginTop: 14 }}>Appels sortants encadrés par règles de campagne.</div>
          </div>
          <div className="card surface">
            <div className="step-num">3</div>
            <div className="title-m" style={{ marginTop: 24 }}>Leads Waka</div>
            <div className="body-m" style={{ marginTop: 14 }}>Télévente sortante sur leads qualifiés.</div>
          </div>
        </div>
        <div className="subtitle" style={{ marginTop: 48 }}>
          Décision attendue : accord de principe pour préparer le pilote.
        </div>
      </div>
      <ChromeBottom chapter="Pilote Back to School 2026" />
    </>
  );
}

function Slide20_ClosingDecisionnel() {
  return (
    <>
      <ChromeTop section="DÉCISION" slideNum={20} total={TOTAL_SLIDES} />
      <div className="slide-body">
        <div className="grid-bg"></div>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', height: '100%', gap: 34 }}>
          <div className="eyebrow">20 · Closing décisionnel</div>
          <div className="title-xl" style={{ maxWidth: 1420 }}>
            Valider le principe du pilote <span style={{ color: 'var(--waka-orange)' }}>BTS 2026</span>
          </div>
          <div className="subtitle" style={{ maxWidth: 1160 }}>
            Waka propose de démontrer une télévente IA autonome : acquisition sociale, appels sortants, souscription et suivi d’activation.
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24 }}>
            <div className="card surface">
              <div className="label">À valider</div>
              <div className="body-l" style={{ marginTop: 18 }}>Périmètre, règles métier, offres concernées et outils autorisés.</div>
            </div>
            <div className="card surface">
              <div className="label">Décision attendue</div>
              <div className="body-l" style={{ marginTop: 18 }}>Accord de principe du responsable télévente Bouygues Telecom.</div>
            </div>
          </div>
        </div>
      </div>
      <ChromeBottom chapter="Décision" />
    </>
  );
}

Object.assign(window, {
  Slide01_Cover,
  Slide02_QuiEstWaka,
  Slide03_AgentConcret,
  Slide04_ArchitectureGenerale,
  Slide05_CeQueWakaOpere,
  Slide06_OperationAProposition,
  Slide07_DetectionInterpretation,
  Slide08_ScoringDecision,
  Slide09_ConversationSouscription,
  Slide10_ExempleSignalSocial,
  Slide11_ValeurConditionsA,
  Slide12_OperationBDifferente,
  Slide13_ParcoursSortant,
  Slide14_DiagrammeTechnique,
  Slide15_SourcesExempleAppel,
  Slide16_WakaCentreAppel,
  Slide17_ChiffresAnnonces,
  Slide18_ModeleReferences,
  Slide19_PiloteBTS2026,
  Slide20_ClosingDecisionnel
});