const TOTAL_SLIDES = 23;

function Slide01_Cover() {
  return <>
    <ChromeTop section="Présentation" slideNum={1} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="grid-bg"></div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 72 }}>
        <div style={{ display: 'flex', gap: 12 }}>
          <span className="tag orange">Proposition commerciale</span>
          <span className="tag green">Bouygues Telecom</span>
          <span className="tag">Back to School 2026</span>
        </div>
        <div className="label">www.wakaorbit.com</div>
      </div>

      <div style={{ maxWidth: 1420 }}>
        <div className="eyebrow">01 · Télévente IA réseaux sociaux</div>
        <div className="title-xl" style={{ marginTop: 30 }}>
          Transformer les signaux d’achat sociaux en ventes Bouygues
        </div>
        <div className="subtitle" style={{ marginTop: 34, maxWidth: 1100 }}>
          Une équipe d’agents IA détecte, qualifie et active les intentions d’achat exprimées sur les réseaux sociaux.
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 64 }}>
        <div className="card">
          <div className="label">Modèle</div>
          <div className="body-l" style={{ marginTop: 14 }}>100% commission sur succès</div>
        </div>
        <div className="card">
          <div className="label">Risque</div>
          <div className="body-l" style={{ marginTop: 14 }}>0 setup · 0 formation · 0 coût horaire</div>
        </div>
        <div className="card">
          <div className="label">Ambition</div>
          <div className="body-l" style={{ marginTop: 14 }}>Pilote Back to School 2026</div>
        </div>
      </div>

      <div className="strip" style={{ marginTop: 56 }}>
        <span>IA commerciale</span>
        <span>Détection d’intention</span>
        <span>Scoring</span>
        <span>Télévente augmentée</span>
        <span>Performance mesurée</span>
      </div>
    </div>
    <ChromeBottom chapter="Présentation" />
  </>;
}

function Slide02_QuiEstWaka() {
  return <>
    <ChromeTop section="Présenter Waka" slideNum={2} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">02 · Qui est Waka Orbit</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1250 }}>
        Waka Orbit conçoit des agents IA orientés performance commerciale
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1180 }}>
        L’objectif : remplacer les frictions opérationnelles par une capacité de prospection continue, mesurable et adaptable.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28, marginTop: 58 }}>
        <div className="card">
          <div className="card-header">
            <span className="step-num">1</span>
            <span>Détection</span>
          </div>
          <div className="body-m" style={{ marginTop: 24 }}>
            Identifier les signaux d’achat dans les conversations sociales et les pages de mécontents.
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <span className="step-num">2</span>
            <span>Qualification</span>
          </div>
          <div className="body-m" style={{ marginTop: 24 }}>
            Classer chaque intention en immédiate, possible ou non validée avant toute activation.
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <span className="step-num">3</span>
            <span>Activation</span>
          </div>
          <div className="body-m" style={{ marginTop: 24 }}>
            Déclencher le bon comportement : invitation, proposition, surveillance ou scoring.
          </div>
        </div>
      </div>

      <div className="quote-block" style={{ marginTop: 56 }}>
        Une télévente IA ne dort pas, ne s’absente pas et évalue 100% des conversations.
      </div>
    </div>
    <ChromeBottom chapter="Partie 1 · Présenter Waka" />
  </>;
}

function Slide03_EquipeMultiAgents() {
  return <>
    <ChromeTop section="Présenter Waka" slideNum={3} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">03 · Équipe multi-agents IA</div>
      <div className="title-l" style={{ marginTop: 24 }}>
        Plusieurs agents spécialisés, une seule mission : générer des ventes qualifiées
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1160 }}>
        Chaque agent prend en charge une étape précise du cycle : écouter, comprendre, prioriser, engager.
      </div>

      <div className="bento" style={{ marginTop: 58 }}>
        <div className="card surface">
          <span className="tag orange">Agent écoute</span>
          <div className="title-m" style={{ marginTop: 24 }}>Signaux sociaux</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Repère les conversations exprimant une insatisfaction, une recherche d’offre ou une ouverture au changement.
          </div>
        </div>
        <div className="card surface">
          <span className="tag cyan">Agent scoring</span>
          <div className="title-m" style={{ marginTop: 24 }}>Priorisation</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Classe l’intention selon son niveau de maturité et son potentiel d’activation commerciale.
          </div>
        </div>
        <div className="card surface">
          <span className="tag green">Agent action</span>
          <div className="title-m" style={{ marginTop: 24 }}>Comportement adapté</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Invite, propose, surveille ou enrichit le score selon le type d’intention détecté.
          </div>
        </div>
        <div className="card surface">
          <span className="tag">Agent contrôle</span>
          <div className="title-m" style={{ marginTop: 24 }}>Évaluation continue</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Applique une logique de performance : toutes les conversations sont évaluées.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 1 · Présenter Waka" />
  </>;
}

function Slide04_ModelePerformance() {
  return <>
    <ChromeTop section="Présenter Waka" slideNum={4} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">04 · Modèle économique</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1220 }}>
        Un modèle 100% aligné sur la performance réelle
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1120 }}>
        Waka prend le risque opérationnel : Bouygues Telecom rémunère uniquement le succès.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 62 }}>
        <div className="card">
          <div className="kpi">
            <div className="label">Setup</div>
            <div className="val orange">0</div>
            <div className="body-s">aucun coût initial</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Formation</div>
            <div className="val green">0</div>
            <div className="body-s">formation quasi nulle</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Coût horaire</div>
            <div className="val cyan">0</div>
            <div className="body-s">pas de plateau facturé</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Risque</div>
            <div className="val orange">0</div>
            <div className="body-s">commission au succès</div>
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 46 }}>
        <div className="card surface">
          <div className="title-m">Pour Bouygues Telecom</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Une capacité commerciale activable sans coût fixe, sans formation lourde et sans dépendance aux heures disponibles.
          </div>
        </div>
        <div className="card surface">
          <div className="title-m">Pour Waka</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Une rémunération corrélée à la performance mesurée et aux résultats effectivement générés.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 1 · Présenter Waka" />
  </>;
}

function Slide05_ArchitectureMCP() {
  return <>
    <ChromeTop section="Présenter Waka" slideNum={5} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">05 · Architecture technique</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1250 }}>
        Le serveur MCP orchestre les consignes, les skills et le LLM
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1180 }}>
        Il agit comme une couche de contrôle entre l’intention métier et l’exécution par l’agent IA.
      </div>

      <div style={{ position: 'relative', height: 520, marginTop: 58 }}>
        <div className="card" style={{ position: 'absolute', left: 0, top: 120, width: 340 }}>
          <span className="tag orange">Instruction</span>
          <div className="title-m" style={{ marginTop: 22 }}>Objectif</div>
          <div className="body-s" style={{ marginTop: 14 }}>
            Détecter un signal d’achat, classifier l’intention, choisir le comportement.
          </div>
        </div>

        <div style={{ position: 'absolute', left: 368, top: 244, width: 120, height: 2, background: 'var(--waka-orange)' }}></div>

        <div className="card" style={{ position: 'absolute', left: 500, top: 40, width: 360 }}>
          <span className="tag cyan">Skill</span>
          <div className="title-m" style={{ marginTop: 22 }}>Capacité</div>
          <div className="body-s" style={{ marginTop: 14 }}>
            Écoute sociale, scoring, invitation, proposition, surveillance.
          </div>
        </div>

        <div className="card surface" style={{ position: 'absolute', left: 910, top: 120, width: 420, borderColor: 'var(--waka-orange)' }}>
          <span className="tag orange">Serveur MCP</span>
          <div className="title-m" style={{ marginTop: 22 }}>Orchestration</div>
          <div className="body-m" style={{ marginTop: 14 }}>
            Point de passage qui relie consigne métier, skills disponibles et modèle de langage.
          </div>
          <div className="body-s" style={{ marginTop: 18 }}>
            Il cadre l’action : quelle capacité appeler, avec quel contexte, pour quel résultat attendu.
          </div>
        </div>

        <div style={{ position: 'absolute', left: 858, top: 144, width: 44, height: 2, background: 'var(--orbit-border-strong)' }}></div>
        <div style={{ position: 'absolute', left: 858, top: 346, width: 44, height: 2, background: 'var(--orbit-border-strong)' }}></div>

        <div className="card" style={{ position: 'absolute', left: 500, top: 318, width: 360 }}>
          <span className="tag green">Données d’action</span>
          <div className="title-m" style={{ marginTop: 22 }}>Contexte</div>
          <div className="body-s" style={{ marginTop: 14 }}>
            Intention détectée, score, comportement à appliquer, statut de suivi.
          </div>
        </div>

        <div style={{ position: 'absolute', left: 1338, top: 244, width: 118, height: 2, background: 'var(--waka-orange)' }}></div>

        <div className="card" style={{ position: 'absolute', right: 0, top: 120, width: 340 }}>
          <span className="tag">LLM</span>
          <div className="title-m" style={{ marginTop: 22 }}>Raisonnement</div>
          <div className="body-s" style={{ marginTop: 14 }}>
            Génère l’analyse et l’action conversationnelle dans le cadre défini.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 1 · Présenter Waka" />
  </>;
}

function Slide06_SectionProposition() {
  return <SectionDivider
    num="02"
    label="La proposition Bouygues"
    kicker="Du signal social à l’opportunité commerciale"
    title="Activer les intentions au bon moment"
    slideNum={6}
    total={TOTAL_SLIDES}
    totalSections={6}
  />;
}

function Slide07_ProblemeSignauxAchat() {
  return <>
    <ChromeTop section="La proposition Bouygues" slideNum={7} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">07 · Problème identifié</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1260 }}>
        Les signaux d’achat existent déjà, mais ils restent dispersés sur les réseaux sociaux
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1120 }}>
        Les pages de mécontents concentrent des moments de frustration, de comparaison et de changement potentiel.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28, marginTop: 62 }}>
        <div className="card">
          <div className="card-header">
            <span className="step-num">1</span>
            <span>Volume invisible</span>
          </div>
          <div className="body-m" style={{ marginTop: 24 }}>
            Les intentions sont exprimées dans des commentaires, réponses et discussions difficiles à exploiter manuellement.
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <span className="step-num">2</span>
            <span>Fenêtre courte</span>
          </div>
          <div className="body-m" style={{ marginTop: 24 }}>
            Un signal chaud perd sa valeur si personne ne répond avec pertinence au bon moment.
          </div>
        </div>
        <div className="card">
          <div className="card-header">
            <span className="step-num">3</span>
            <span>Qualification nécessaire</span>
          </div>
          <div className="body-m" style={{ marginTop: 24 }}>
            Toutes les frustrations ne sont pas des ventes : l’agent doit distinguer intention immédiate, possible ou non validée.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 2 · La proposition Bouygues" />
  </>;
}

function Slide08_SolutionAgentIA() {
  return <>
    <ChromeTop section="La proposition Bouygues" slideNum={8} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">08 · Solution Agent IA Bouygues</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1320 }}>
        Un agent IA dédié détecte, classe et active les opportunités sur réseaux sociaux
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1120 }}>
        La mécanique proposée transforme une conversation sociale en séquence de télévente pilotée par la donnée.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 20, marginTop: 64, alignItems: 'stretch' }}>
        <div className="card">
          <div className="step-num">1</div>
          <div className="title-m" style={{ marginTop: 20 }}>Écouter</div>
          <div className="body-s" style={{ marginTop: 12 }}>Surveiller les espaces où s’expriment les mécontents.</div>
        </div>
        <div className="card">
          <div className="step-num">2</div>
          <div className="title-m" style={{ marginTop: 20 }}>Détecter</div>
          <div className="body-s" style={{ marginTop: 12 }}>Repérer les signaux d’achat ou de changement.</div>
        </div>
        <div className="card">
          <div className="step-num">3</div>
          <div className="title-m" style={{ marginTop: 20 }}>Classer</div>
          <div className="body-s" style={{ marginTop: 12 }}>Qualifier en intention immédiate, possible ou non validée.</div>
        </div>
        <div className="card">
          <div className="step-num">4</div>
          <div className="title-m" style={{ marginTop: 20 }}>Agir</div>
          <div className="body-s" style={{ marginTop: 12 }}>Appliquer invitation, proposition ou surveillance.</div>
        </div>
        <div className="card">
          <div className="step-num">5</div>
          <div className="title-m" style={{ marginTop: 20 }}>Évaluer</div>
          <div className="body-s" style={{ marginTop: 12 }}>Mesurer 100% des conversations traitées.</div>
        </div>
      </div>

      <div className="quote-block" style={{ marginTop: 54 }}>
        La valeur n’est pas seulement dans la réponse : elle est dans la capacité à choisir la bonne action selon l’intention.
      </div>
    </div>
    <ChromeBottom chapter="Partie 2 · La proposition Bouygues" />
  </>;
}

function Slide09_TroisTypesIntention() {
  return <>
    <ChromeTop section="La proposition Bouygues" slideNum={9} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">09 · Classification</div>
      <div className="title-l" style={{ marginTop: 24 }}>
        Trois niveaux d’intention pour éviter les actions inutiles
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1140 }}>
        L’agent IA sépare les opportunités exploitables immédiatement des signaux à surveiller.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28, marginTop: 62 }}>
        <div className="card surface">
          <span className="tag orange">Intention immédiate</span>
          <div className="title-m" style={{ marginTop: 24 }}>Signal chaud</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            La personne exprime un besoin ou une ouverture au changement qui justifie une action directe.
          </div>
        </div>
        <div className="card surface">
          <span className="tag cyan">Intention possible</span>
          <div className="title-m" style={{ marginTop: 24 }}>Signal à nourrir</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Le contexte laisse apparaître un potentiel, mais la maturité commerciale doit être confirmée.
          </div>
        </div>
        <div className="card surface">
          <span className="tag">Non validée</span>
          <div className="title-m" style={{ marginTop: 24 }}>Signal faible</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Le commentaire ne permet pas encore d’engager une proposition commerciale pertinente.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 2 · La proposition Bouygues" />
  </>;
}

function Slide10_ComportementsAdaptes() {
  return <>
    <ChromeTop section="La proposition Bouygues" slideNum={10} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">10 · Comportements adaptés</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1240 }}>
        À chaque intention, un comportement commercial différent
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1160 }}>
        Le pilotage par intention évite l’approche uniforme des centres d’appels et améliore la pertinence des prises de contact.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 62 }}>
        <div className="card">
          <span className="tag orange">Immédiate</span>
          <div className="title-m" style={{ marginTop: 24 }}>Invitation + proposition</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            L’agent invite l’utilisateur à considérer une offre Bouygues Telecom et formule une proposition adaptée au contexte.
          </div>
        </div>
        <div className="card">
          <span className="tag cyan">Possible</span>
          <div className="title-m" style={{ marginTop: 24 }}>Surveillance + scoring</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            L’agent suit l’évolution du signal, enrichit le score et attend le bon moment pour engager.
          </div>
        </div>
        <div className="card">
          <span className="tag">Non validée</span>
          <div className="title-m" style={{ marginTop: 24 }}>Pas de sollicitation inutile</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Le signal reste observé, sans action commerciale prématurée ni pression conversationnelle.
          </div>
        </div>
        <div className="card surface">
          <span className="tag green">Toutes conversations</span>
          <div className="title-m" style={{ marginTop: 24 }}>Évaluation systématique</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            100% des échanges sont évalués pour piloter la performance et ajuster les comportements.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 2 · La proposition Bouygues" />
  </>;
}

function Slide11_FluxOperationnel() {
  return <>
    <ChromeTop section="La proposition Bouygues" slideNum={11} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">11 · Flux opérationnel</div>
      <div className="title-l" style={{ marginTop: 24 }}>
        Un flux simple : capter, qualifier, engager, mesurer
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1120 }}>
        Le pilote Back to School 2026 peut être structuré comme une chaîne d’activation mesurable.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, marginTop: 72 }}>
        <div className="card">
          <div className="step-num">1</div>
          <div className="label" style={{ marginTop: 22 }}>Sources sociales</div>
          <div className="body-s" style={{ marginTop: 14 }}>Pages et conversations de mécontents.</div>
        </div>
        <div className="card">
          <div className="step-num">2</div>
          <div className="label" style={{ marginTop: 22 }}>Détection IA</div>
          <div className="body-s" style={{ marginTop: 14 }}>Extraction des signaux d’achat.</div>
        </div>
        <div className="card">
          <div className="step-num">3</div>
          <div className="label" style={{ marginTop: 22 }}>Classification</div>
          <div className="body-s" style={{ marginTop: 14 }}>Immédiate, possible, non validée.</div>
        </div>
        <div className="card">
          <div className="step-num">4</div>
          <div className="label" style={{ marginTop: 22 }}>Action</div>
          <div className="body-s" style={{ marginTop: 14 }}>Invitation, proposition ou scoring.</div>
        </div>
        <div className="card">
          <div className="step-num">5</div>
          <div className="label" style={{ marginTop: 22 }}>Mesure</div>
          <div className="body-s" style={{ marginTop: 14 }}>Évaluation de 100% des conversations.</div>
        </div>
      </div>

      <div style={{ display: 'flex', gap: 12, marginTop: 54 }}>
        <span className="tag orange">0 absentéisme</span>
        <span className="tag green">0 attrition</span>
        <span className="tag cyan">Adaptation illimitée</span>
        <span className="tag">Formation quasi nulle</span>
      </div>
    </div>
    <ChromeBottom chapter="Partie 2 · La proposition Bouygues" />
  </>;
}

function Slide12_SectionAvantages() {
  return <SectionDivider
    num="03"
    label="Avantages vs centres d’appels"
    kicker="Changer l’équation opérationnelle"
    title="Une télévente sans contraintes humaines"
    slideNum={12}
    total={TOTAL_SLIDES}
    totalSections={6}
  />;
}

function Slide13_ComparatifWakaHumain() {
  return <>
    <ChromeTop section="Avantages vs centres d’appels" slideNum={13} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">13 · Comparatif opérationnel</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1260 }}>
        Waka supprime les limites structurelles des centres d’appels humains
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 34, marginTop: 58 }}>
        <div className="card">
          <span className="tag">Centre d’appels humain</span>
          <div style={{ display: 'grid', gap: 18, marginTop: 30 }}>
            <div className="body-m">Absentéisme à absorber dans la planification.</div>
            <div className="body-m">Attrition qui impose recrutement et formation.</div>
            <div className="body-m">Adaptation limitée par les scripts et la disponibilité.</div>
            <div className="body-m">Évaluation partielle des conversations.</div>
          </div>
        </div>
        <div className="card surface">
          <span className="tag orange">Waka Orbit</span>
          <div style={{ display: 'grid', gap: 18, marginTop: 30 }}>
            <div className="body-m">0 absentéisme : capacité active en continu.</div>
            <div className="body-m">0 attrition : pas de perte d’expertise opérateur.</div>
            <div className="body-m">Adaptation illimitée aux règles et comportements.</div>
            <div className="body-m">100% des conversations évaluées.</div>
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 3 · Avantages vs centres d’appels" />
  </>;
}

function Slide14_ChiffresCles() {
  return <>
    <ChromeTop section="Avantages vs centres d’appels" slideNum={14} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">14 · Chiffres clés</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1220 }}>
        Les indicateurs attendus cadrent l’intérêt du pilote
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1040 }}>
        Performance, joignabilité, satisfaction et coût : les quatre axes de décision.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 70 }}>
        <div className="card">
          <div className="kpi">
            <div className="label">Performance</div>
            <div className="val orange">+32%</div>
            <div className="body-s">amélioration visée</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Joignabilité</div>
            <div className="val cyan">+12%</div>
            <div className="body-s">meilleure activation</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Satisfaction</div>
            <div className="val green">+17%</div>
            <div className="body-s">conversation plus pertinente</div>
          </div>
        </div>
        <div className="card">
          <div className="kpi">
            <div className="label">Coûts</div>
            <div className="val orange">-17%</div>
            <div className="body-s">réduction attendue</div>
          </div>
        </div>
      </div>

      <div className="quote-block" style={{ marginTop: 58 }}>
        Le pilote doit valider la performance commerciale sans exposer Bouygues Telecom à un coût fixe.
      </div>
    </div>
    <ChromeBottom chapter="Partie 3 · Avantages vs centres d’appels" />
  </>;
}

function Slide15_ZeroRisque() {
  return <>
    <ChromeTop section="Avantages vs centres d’appels" slideNum={15} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">15 · Modèle zéro risque</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1280 }}>
        Une expérimentation commerciale sans setup, sans formation, sans coût horaire
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1100 }}>
        Le pilote Back to School 2026 teste le potentiel avant tout engagement structurel.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 32, marginTop: 62 }}>
        <div className="card surface">
          <div className="title-m">Principe d’engagement</div>
          <div className="body-l" style={{ marginTop: 22 }}>
            Bouygues Telecom ne finance pas une capacité. Bouygues Telecom rémunère un résultat.
          </div>
          <div style={{ display: 'flex', gap: 12, marginTop: 34, flexWrap: 'wrap' }}>
            <span className="tag orange">100% commission</span>
            <span className="tag">0 setup</span>
            <span className="tag">0 formation</span>
            <span className="tag">0 coût horaire</span>
          </div>
        </div>
        <div className="card">
          <div className="title-m">Effet pour la décision</div>
          <div className="body-m" style={{ marginTop: 22 }}>
            Le modèle réduit la barrière d’entrée et permet de concentrer la discussion sur la performance réelle du dispositif.
          </div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Si les signaux sociaux convertissent, le partenariat s’étend sur une base mesurée.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 3 · Avantages vs centres d’appels" />
  </>;
}

function Slide16_SectionReferences() {
  return <SectionDivider
    num="04"
    label="Références"
    kicker="Preuves et actifs mobilisables"
    title="Waka a déjà des références à présenter"
    slideNum={16}
    total={TOTAL_SLIDES}
    totalSections={6}
  />;
}

function Slide17_TomorrowUniversity() {
  return <>
    <ChromeTop section="Références" slideNum={17} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">17 · Référence</div>
      <div className="title-l" style={{ marginTop: 24 }}>
        Tomorrow University
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1100 }}>
        Une référence Waka mobilisable pour illustrer la mise en œuvre d’agents IA orientés performance.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28, marginTop: 66 }}>
        <div className="card">
          <span className="tag orange">Référence client</span>
          <div className="title-m" style={{ marginTop: 24 }}>Tomorrow University</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Exemple à présenter dans le cadre de l’échange commercial Bouygues Telecom.
          </div>
        </div>
        <div className="card">
          <span className="tag cyan">Actif Waka</span>
          <div className="title-m" style={{ marginTop: 24 }}>Approche agentique</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Démonstration de la capacité à structurer des workflows IA mesurables.
          </div>
        </div>
        <div className="card">
          <span className="tag green">Transposition</span>
          <div className="title-m" style={{ marginTop: 24 }}>Pilote Bouygues</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Même logique : objectif clair, comportement contrôlé, performance évaluée.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 4 · Références" />
  </>;
}

function Slide18_PublicaFrance() {
  return <>
    <ChromeTop section="Références" slideNum={18} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">18 · Référence</div>
      <div className="title-l" style={{ marginTop: 24 }}>
        Publica France
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1100 }}>
        Une référence Waka pour soutenir la crédibilité d’une approche IA pilotée par objectifs.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 66 }}>
        <div className="card surface">
          <span className="tag orange">Enjeu commun</span>
          <div className="title-m" style={{ marginTop: 24 }}>Passer de l’intuition à la mesure</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Le dispositif Waka se pilote par signaux, décisions et résultats observables.
          </div>
        </div>
        <div className="card">
          <span className="tag green">Apport pour Bouygues</span>
          <div className="title-m" style={{ marginTop: 24 }}>Sécuriser le pilote</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            La référence permet d’échanger sur la méthode, les garde-fous et le pilotage opérationnel.
          </div>
        </div>
      </div>

      <div className="strip" style={{ marginTop: 58 }}>
        <span>Publica France</span>
        <span>Agents IA</span>
        <span>Objectifs mesurés</span>
        <span>Pilotage performance</span>
      </div>
    </div>
    <ChromeBottom chapter="Partie 4 · Références" />
  </>;
}

function Slide19_BebeMaman() {
  return <>
    <ChromeTop section="Références" slideNum={19} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">19 · Référence</div>
      <div className="title-l" style={{ marginTop: 24 }}>
        Bébé Maman
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1100 }}>
        Une référence Waka complémentaire pour démontrer l’adaptabilité des agents IA à des contextes différents.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28, marginTop: 66 }}>
        <div className="card">
          <div className="step-num">1</div>
          <div className="title-m" style={{ marginTop: 24 }}>Comprendre</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Lire un contexte conversationnel avant d’appliquer un comportement.
          </div>
        </div>
        <div className="card">
          <div className="step-num">2</div>
          <div className="title-m" style={{ marginTop: 24 }}>Adapter</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Ajuster le ton, la séquence et l’action selon l’intention détectée.
          </div>
        </div>
        <div className="card">
          <div className="step-num">3</div>
          <div className="title-m" style={{ marginTop: 24 }}>Mesurer</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Évaluer systématiquement les conversations pour améliorer la performance.
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 4 · Références" />
  </>;
}

function Slide20_SyntheseReferences() {
  return <>
    <ChromeTop section="Références" slideNum={20} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">20 · Synthèse</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1260 }}>
        Trois références, un même principe : des agents IA au service d’un résultat
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28, marginTop: 70 }}>
        <div className="card surface">
          <span className="tag orange">Tomorrow University</span>
          <div className="body-l" style={{ marginTop: 26 }}>
            Référence mobilisable pour présenter la méthode Waka.
          </div>
        </div>
        <div className="card surface">
          <span className="tag cyan">Publica France</span>
          <div className="body-l" style={{ marginTop: 26 }}>
            Référence mobilisable pour discuter pilotage et objectifs.
          </div>
        </div>
        <div className="card surface">
          <span className="tag green">Bébé Maman</span>
          <div className="body-l" style={{ marginTop: 26 }}>
            Référence mobilisable pour illustrer l’adaptation conversationnelle.
          </div>
        </div>
      </div>

      <div className="quote-block" style={{ marginTop: 60 }}>
        Pour Bouygues Telecom, l’enjeu est de transposer cette logique à la télévente sur signaux sociaux.
      </div>
    </div>
    <ChromeBottom chapter="Partie 4 · Références" />
  </>;
}

function Slide21_SecuriteRGPD() {
  return <>
    <ChromeTop section="Sécurité & RGPD" slideNum={21} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">21 · Sécurité & conformité</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1280 }}>
        Un cadre technique aligné avec les exigences de sécurité et de souveraineté
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1120 }}>
        Le pilote est conçu pour fonctionner dans un environnement dédié, isolé par client, sur Azure.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 66 }}>
        <div className="card">
          <span className="tag orange">Azure 100%</span>
          <div className="title-m" style={{ marginTop: 24 }}>Infrastructure</div>
          <div className="body-s" style={{ marginTop: 16 }}>
            Déploiement prévu sur un socle Azure.
          </div>
        </div>
        <div className="card">
          <span className="tag cyan">Isolation client</span>
          <div className="title-m" style={{ marginTop: 24 }}>Séparation</div>
          <div className="body-s" style={{ marginTop: 16 }}>
            Isolation par client pour cloisonner les environnements.
          </div>
        </div>
        <div className="card">
          <span className="tag green">Environnement dédié</span>
          <div className="title-m" style={{ marginTop: 24 }}>Contrôle</div>
          <div className="body-s" style={{ marginTop: 16 }}>
            Espace spécifique pour le pilote Bouygues Telecom.
          </div>
        </div>
        <div className="card">
          <span className="tag">RGPD</span>
          <div className="title-m" style={{ marginTop: 24 }}>Conformité</div>
          <div className="body-s" style={{ marginTop: 16 }}>
            Souveraineté des données et conformité RGPD comme exigences de base.
          </div>
        </div>
      </div>

      <div className="quote-block" style={{ marginTop: 58 }}>
        La sécurité n’est pas un add-on : elle conditionne l’industrialisation du pilote.
      </div>
    </div>
    <ChromeBottom chapter="Partie 5 · Sécurité & RGPD" />
  </>;
}

function Slide22_PropositionPilote() {
  return <>
    <ChromeTop section="Proposition & Closing" slideNum={22} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="eyebrow">22 · Proposition pilote</div>
      <div className="title-l" style={{ marginTop: 24, maxWidth: 1280 }}>
        Lancer un pilote Back to School 2026 sur les signaux sociaux à forte intention
      </div>
      <div className="subtitle" style={{ marginTop: 22, maxWidth: 1120 }}>
        Objectif : valider la capacité d’une télévente IA à générer des conversions sans coût fixe.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 28, marginTop: 62 }}>
        <div className="card surface">
          <span className="tag orange">Périmètre</span>
          <div className="title-m" style={{ marginTop: 24 }}>Réseaux sociaux</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Détection des signaux d’achat dans les pages et conversations de mécontents.
          </div>
        </div>
        <div className="card surface">
          <span className="tag cyan">Mécanique</span>
          <div className="title-m" style={{ marginTop: 24 }}>Agent IA dédié</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Classification en trois intentions et comportement adapté à chaque signal.
          </div>
        </div>
        <div className="card surface">
          <span className="tag green">Engagement</span>
          <div className="title-m" style={{ marginTop: 24 }}>Commission sur succès</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            0 setup, 0 formation, 0 coût horaire, 0 risque pour Bouygues Telecom.
          </div>
        </div>
      </div>

      <div className="strip" style={{ marginTop: 56 }}>
        <span>Back to School 2026</span>
        <span>+32% performance</span>
        <span>+12% joignabilité</span>
        <span>+17% satisfaction</span>
        <span>-17% coûts</span>
      </div>
    </div>
    <ChromeBottom chapter="Partie 6 · Proposition & Closing" />
  </>;
}

function Slide23_Closing() {
  return <>
    <ChromeTop section="Proposition & Closing" slideNum={23} total={TOTAL_SLIDES} />
    <div className="slide-body">
      <div className="grid-bg"></div>
      <div className="eyebrow">23 · Closing</div>

      <div className="title-xl" style={{ marginTop: 36, maxWidth: 1420 }}>
        Décider vite.<br />
        Tester sans risque.<br />
        Mesurer la <span style={{ color: 'var(--waka-orange)' }}>vente.</span>
      </div>

      <div className="subtitle" style={{ marginTop: 34, maxWidth: 1060 }}>
        Waka propose à Bouygues Telecom un pilote Back to School 2026 en télévente IA réseaux sociaux, rémunéré uniquement au succès.
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 62 }}>
        <div className="card surface">
          <span className="tag orange">Décision attendue</span>
          <div className="title-m" style={{ marginTop: 24 }}>Accord de principe pilote</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            Valider le lancement d’une opération encadrée sur les signaux d’achat sociaux.
          </div>
        </div>
        <div className="card surface">
          <span className="tag green">Contact</span>
          <div className="title-m" style={{ marginTop: 24 }}>Waka Orbit</div>
          <div className="body-m" style={{ marginTop: 18 }}>
            www.wakaorbit.com
          </div>
        </div>
      </div>
    </div>
    <ChromeBottom chapter="Partie 6 · Proposition & Closing" />
  </>;
}

Object.assign(window, {
  Slide01_Cover,
  Slide02_QuiEstWaka,
  Slide03_EquipeMultiAgents,
  Slide04_ModelePerformance,
  Slide05_ArchitectureMCP,
  Slide06_SectionProposition,
  Slide07_ProblemeSignauxAchat,
  Slide08_SolutionAgentIA,
  Slide09_TroisTypesIntention,
  Slide10_ComportementsAdaptes,
  Slide11_FluxOperationnel,
  Slide12_SectionAvantages,
  Slide13_ComparatifWakaHumain,
  Slide14_ChiffresCles,
  Slide15_ZeroRisque,
  Slide16_SectionReferences,
  Slide17_TomorrowUniversity,
  Slide18_PublicaFrance,
  Slide19_BebeMaman,
  Slide20_SyntheseReferences,
  Slide21_SecuriteRGPD,
  Slide22_PropositionPilote,
  Slide23_Closing
});