/* Waka — Opérations clients pilotées par IA · 10 slides */

const TOTAL_SLIDES = 11;

/* ═══ S01 — COVER ════════════════════════════════════════════════════ */
const SlideCover = () => {
    const cfg = window.DECK_CONFIG;
    return <>
        {/* Vidéo de fond — boucle muette, dégradée pour lisibilité */}
        <video
            autoPlay loop muted playsInline
            poster="assets/cover-poster.jpg"
            onError={(e) => { e.currentTarget.style.display = 'none'; }}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', zIndex: 0, opacity: .35, filter: 'saturate(1.1) contrast(1.05)' }}
        >
            <source src="assets/cover-bg.mp4" type="video/mp4" />
            <source src="assets/cover-bg.webm" type="video/webm" />
        </video>
        {/* Voile dégradé pour assurer la lisibilité par-dessus la vidéo */}
        <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'radial-gradient(ellipse at 30% 50%, rgba(15,15,18,.55) 0%, rgba(15,15,18,.85) 60%, rgba(15,15,18,.95) 100%)' }}></div>
        <div className="grid-bg" style={{ zIndex: 1, opacity: .35 }}></div>
        <div style={{ position: 'absolute', inset: 0, padding: '72px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', zIndex: 2 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                    <img src="assets/waka-logo.jpg" alt="Waka" style={{ width: 72, height: 72, borderRadius: 14, objectFit: 'cover', filter: 'drop-shadow(0 6px 18px rgba(232,131,42,.45))' }} />
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <div style={{ fontSize: 28, fontWeight: 800, color: 'var(--waka-orange)', letterSpacing: 1, lineHeight: 1 }}>{cfg.brand.name}</div>
                        <div style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 3, textTransform: 'uppercase' }}>{cfg.legalName}</div>
                    </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span className="tag">CONFIDENTIEL</span>
                    <span className="tag orange">RÉUNION INTERNE</span>
                    <div style={{ borderLeft: '1px solid var(--orbit-border-strong)', paddingLeft: 20, fontSize: 12, color: 'var(--orbit-text-3)', textTransform: 'uppercase', letterSpacing: 2 }}>{cfg.date}</div>
                </div>
            </div>

            <div style={{ flex: 1, display: 'flex', alignItems: 'center', marginTop: 40 }}>
                <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 4, color: 'var(--waka-orange)', textTransform: 'uppercase', marginBottom: 24, display: 'flex', alignItems: 'center', gap: 18 }}>
                        <span style={{ width: 48, height: 1, background: 'var(--waka-orange)' }}></span>
                        Plateforme d'opérations clients
                    </div>
                    <div style={{ fontSize: 120, fontWeight: 800, lineHeight: 0.9, letterSpacing: -5, color: 'var(--orbit-text-1)' }}>
                        Industrialiser<br />
                        la <span style={{ color: 'var(--waka-orange)' }}>relation client</span><br />
                        avec des <span style={{ color: 'var(--red-green)' }}>agents IA</span>.
                    </div>
                    <div className="subtitle" style={{ marginTop: 32, maxWidth: 1100 }}>
                        Inbound · Outbound · Vente · Fidélisation · Recouvrement — multimodal, multicanal, à coût maîtrisé.
                    </div>
                </div>
            </div>

            <div className="strip" style={{ justifyContent: 'space-between' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Voix · WhatsApp · Telegram · Messenger · Instagram · TikTok · X · LinkedIn · Email · SMS</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> 14 microservices · 400+ voix · 140+ langues</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Azure · ISO 27001 · RGPD</span>
            </div>
        </div>
    </>;
};

/* ═══ S02 — CONSTAT (limites des call centers humains) ═══════════════ */
const Slide02_Constat = () => <>
    <ChromeTop section="CONSTAT" slideNum={2} total={TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">01</span>LE CONSTAT<span className="bar"></span></div>
        <h1 className="title-l" style={{ maxWidth: 1600 }}>
            Les centres d'appels classiques ont <span style={{ color: 'var(--red-green)' }}>atteint leur limite</span>.
        </h1>
        <p className="subtitle" style={{ marginTop: 16, maxWidth: 1300 }}>
            Empilement de plateaux humains, scripts figés, qualité erratique. Le modèle ne tient plus sous la pression du volume, de la personnalisation et des coûts.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, marginTop: 36, flex: 1 }}>
            {[
                { k: '#01', t: 'Reproductibilité impossible', d: "Deux conseillers, deux discours. Le même client vit deux marques différentes." },
                { k: '#02', t: 'Performance instable', d: "Absence, fatigue, turnover. La qualité oscille de 40 à 90 % d'un jour à l'autre." },
                { k: '#03', t: 'Gestion lourde', d: "Recrutement, formation, planning, supervision. Le coût RH écrase la marge avant même d'opérer." },
                { k: '#04', t: 'Personnalisation manuelle', d: "À l'échelle, on retombe sur des scripts. La personnalisation reste un slogan." }
            ].map(c => (
                <div key={c.k} className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>{c.k}</div>
                    <div className="title-m" style={{ fontSize: 26, lineHeight: 1.15 }}>{c.t}</div>
                    <div className="body-m" style={{ fontSize: 16 }}>{c.d}</div>
                </div>
            ))}
        </div>
    </div>
    <ChromeBottom chapter="Constat" />
</>;

/* ═══ S03 — ORBIT LAUNCH (prise en charge 100% native) ════════════════ */
const Slide03_OrbitLaunch = () => {
    const pillars = [
        { i: 'bi-diagram-3-fill', t: 'Orchestration', s: 'de campagne', d: 'Pilotage end-to-end : briefing, scénarios, étapes, retries, escalades, conformité — un seul chef d\'orchestre.', c: 'var(--waka-orange)', n: '01' },
        { i: 'bi-broadcast-pin',  t: 'Canaux de comm', s: 'unifiés', d: 'Voix · SIP · SMS · WhatsApp · Email · Chat · Réseaux sociaux — séquencés et orchestrés depuis le même brief.', c: 'var(--waka-cyan)', n: '02' },
        { i: 'bi-telephone-plus-fill', t: 'Provisionning', s: 'téléphonie', d: 'Numéros ACS, SIP trunks, agents IA clonés, voix de marque, contacts importés — provisionnés en < 2 min.', c: 'var(--waka-orange)', n: '03' },
        { i: 'bi-graph-up-arrow', t: 'Reporting', s: 'opérationnel', d: 'KPI temps réel, taux de succès par canal, sentiment, coût/interaction, exports comptables, alertes & SLA.', c: 'var(--red-green)', n: '04' },
        { i: 'bi-people-fill',    t: 'Analyse', s: 'des contacts', d: 'Speech & text 100 % : intentions, motivations, bloquants, voix client — base CRM enrichie automatiquement.', c: 'var(--waka-cyan)', n: '05' }
    ];
    return <>
        <ChromeTop section="ORBIT LAUNCH" slideNum={3} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24 }}>
                <div>
                    <div className="eyebrow"><span className="num">02</span>ORBIT LAUNCH · LA PRISE EN CHARGE 100 %<span className="bar"></span></div>
                    <h1 className="title-l" style={{ fontSize: 42, lineHeight: 1.05, marginTop: 6 }}>
                        Toute votre opération <span style={{ color: 'var(--waka-orange)' }}>nativement</span> — <span style={{ color: 'var(--red-green)' }}>1 outil</span>, <span style={{ color: 'var(--waka-cyan)' }}>1 interface</span>.
                    </h1>
                    <p className="subtitle" style={{ marginTop: 6, fontSize: 14, maxWidth: 880 }}>
                        Orchestration, canaux, téléphonie, reporting, analyse — tout est embarqué et déployé dans un environnement <strong style={{ color: 'var(--orbit-text-1)' }}>Azure isolé par client / par opération</strong>. Aucun assemblage de briques tierces.
                    </p>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
                    <span className="tag" style={{ fontSize: 10, borderColor: 'var(--waka-orange)', color: 'var(--waka-orange)' }}>● 100 % NATIF</span>
                    <span className="tag" style={{ fontSize: 10, borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>● 1 SEUL OUTIL</span>
                    <span className="tag" style={{ fontSize: 10, borderColor: 'var(--waka-cyan)', color: 'var(--waka-cyan)' }}>● TENANT AZURE ISOLÉ</span>
                </div>
            </div>

            {/* Wrapper Azure isolé — encadre tout le bloc des 5 piliers */}
            <div style={{ marginTop: 16, flex: 1, position: 'relative', borderRadius: 16, padding: '32px 22px 22px', border: '1.5px dashed rgba(35,181,201,.55)', background: 'linear-gradient(135deg, rgba(35,181,201,.04), rgba(232,131,42,.03))', display: 'flex', flexDirection: 'column' }}>
                {/* Bandeau Azure tenant */}
                <div style={{ position: 'absolute', top: -12, left: 22, padding: '4px 12px', background: 'var(--orbit-bg)', display: 'flex', alignItems: 'center', gap: 8, fontSize: 10, letterSpacing: 2, fontWeight: 800, color: 'var(--waka-cyan)' }}>
                    <i className="bi bi-cloud-fill" style={{ fontSize: 14 }}></i>
                    AZURE TENANT — ISOLÉ PAR CLIENT / OPÉRATION
                </div>
                <div style={{ position: 'absolute', top: -12, right: 22, padding: '4px 12px', background: 'var(--orbit-bg)', display: 'flex', alignItems: 'center', gap: 12, fontSize: 9, letterSpacing: 1.5, fontWeight: 700, color: 'var(--orbit-text-3)' }}>
                    <span><i className="bi bi-shield-check" style={{ color: 'var(--red-green)', marginRight: 4 }}></i>RGPD</span>
                    <span><i className="bi bi-key-fill" style={{ color: 'var(--waka-orange)', marginRight: 4 }}></i>KEY VAULT</span>
                    <span><i className="bi bi-database-lock" style={{ color: 'var(--waka-cyan)', marginRight: 4 }}></i>DATA EU</span>
                    <span><i className="bi bi-fingerprint" style={{ color: 'var(--red-green)', marginRight: 4 }}></i>RBAC</span>
                </div>

                {/* HUB central + 5 piliers */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr', gap: 14, alignItems: 'stretch', flex: 1 }}>
                    {pillars.map(p => (
                        <div key={p.t} className="card" style={{ padding: '16px 14px', display: 'flex', flexDirection: 'column', gap: 8, position: 'relative', borderTop: `3px solid ${p.c}`, background: 'linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18))' }}>
                            <div style={{ position: 'absolute', top: 10, right: 12, fontSize: 10, fontWeight: 800, color: p.c, opacity: .55, letterSpacing: 1 }}>{p.n}</div>
                            <div style={{ width: 44, height: 44, borderRadius: 10, background: `linear-gradient(135deg, ${p.c}, rgba(0,0,0,.4))`, display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: `0 6px 16px ${p.c}40` }}>
                                <i className={`bi ${p.i}`} style={{ fontSize: 22, color: '#fff' }}></i>
                            </div>
                            <div>
                                <div style={{ fontSize: 16, fontWeight: 800, color: 'var(--orbit-text-1)', lineHeight: 1.15 }}>{p.t}</div>
                                <div style={{ fontSize: 12, fontWeight: 700, color: p.c, lineHeight: 1.15 }}>{p.s}</div>
                            </div>
                            <div style={{ fontSize: 11.5, color: 'var(--orbit-text-2)', lineHeight: 1.45, flex: 1 }}>{p.d}</div>
                            <div style={{ marginTop: 4, paddingTop: 8, borderTop: '1px dashed var(--orbit-border-strong)', fontSize: 9, letterSpacing: 1.5, color: 'var(--orbit-text-3)', fontWeight: 700, display: 'flex', justifyContent: 'space-between' }}>
                                <span>NATIF</span>
                                <span style={{ color: p.c }}><i className="bi bi-check-circle-fill" style={{ marginRight: 3 }}></i>EMBARQUÉ</span>
                            </div>
                        </div>
                    ))}
                </div>

                {/* Socle Orbit Brain — un seul chef d'orchestre */}
                <div style={{ marginTop: 14, padding: '12px 18px', borderRadius: 10, background: 'linear-gradient(90deg, rgba(232,131,42,.18), rgba(35,181,201,.10), rgba(45,190,96,.12))', border: '1px solid rgba(232,131,42,.45)', display: 'flex', alignItems: 'center', gap: 16 }}>
                    <div style={{ width: 42, height: 42, borderRadius: '50%', background: 'radial-gradient(circle at 35% 30%, var(--waka-orange-bright), var(--waka-orange) 60%, #b85a16)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 0 18px rgba(232,131,42,.55)' }}>
                        <i className="bi bi-cpu-fill" style={{ fontSize: 20, color: '#fff' }}></i>
                    </div>
                    <div style={{ flex: 1 }}>
                        <div style={{ fontSize: 10, letterSpacing: 2, color: 'var(--waka-orange)', fontWeight: 800 }}>ORBIT BRAIN · LE SOCLE</div>
                        <div style={{ fontSize: 14, color: 'var(--orbit-text-1)', fontWeight: 600, lineHeight: 1.35 }}>
                            Une seule instance de plateforme par opération. Aucune dépendance externe. Vous décrivez l&apos;opération en langage naturel — Orbit provisionne, exécute, mesure et ré-optimise <strong style={{ color: 'var(--red-green)' }}>en continu</strong>.
                        </div>
                    </div>
                    <div style={{ display: 'flex', gap: 18, paddingLeft: 16, borderLeft: '1px solid var(--orbit-border-strong)' }}>
                        <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--waka-orange)', lineHeight: 1 }}>&lt; 2&apos;</div>
                            <div style={{ fontSize: 9, color: 'var(--orbit-text-3)', letterSpacing: 1.2 }}>PROVISIONNING</div>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--waka-cyan)', lineHeight: 1 }}>1</div>
                            <div style={{ fontSize: 9, color: 'var(--orbit-text-3)', letterSpacing: 1.2 }}>INTERFACE</div>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                            <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--red-green)', lineHeight: 1 }}>100 %</div>
                            <div style={{ fontSize: 9, color: 'var(--orbit-text-3)', letterSpacing: 1.2 }}>NATIF</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Orbit Launch" />
    </>;
};
/* ═══ S04 — SERVICES WAKA (14 microservices) ═══════════════════════ */
const Slide05_Services = () => {
    const services = [
        { t: 'BRAIN',    s: 'Orchestration agentique',      d: 'Cerveau central : choisit l\'agent, le canal, l\'outil et le moment. Routes les conversations selon l\'intention.', i: 'bi-cpu-fill',           c: 'var(--waka-orange)' },
        { t: 'VOICE',    s: 'Synthèse & ASR temps réel',    d: 'Voix de marque clonée + reconnaissance live. Latence < 500 ms, 400+ voix premium, multilingue.', i: 'bi-soundwave',          c: 'var(--waka-orange)' },
        { t: 'CREW',     s: 'Agents spécialisés & rules',   d: 'Bibliothèque d\'agents métiers : vente, support, recouvrement. Personnalité, garde-fous, scénarios.', i: 'bi-people-fill',        c: 'var(--waka-orange)' },
        { t: 'COMMS',    s: 'Bus multi-canal unifié',       d: 'Une seule conversation, tous les canaux : voix, WhatsApp, SMS, email, chat web, réseaux sociaux.', i: 'bi-broadcast',          c: 'var(--waka-cyan)' },
        { t: 'ECHO',     s: 'Transcription & résumé',       d: 'Enregistre, transcrit, résume chaque interaction. Verbatims, points clés, actions à suivre.', i: 'bi-mic-fill',           c: 'var(--waka-cyan)' },
        { t: 'LINGO',    s: '140+ langues & dialectes',     d: 'Détection auto, traduction temps réel, accents régionaux. Un client = sa langue, partout.', i: 'bi-translate',          c: 'var(--waka-cyan)' },
        { t: 'ATLAS',    s: 'Knowledge & RAG par marque',   d: 'Base de connaissance vectorielle : FAQ, contrats, procédures. L\'agent cite vos documents, isolé par client.', i: 'bi-bookmark-star-fill', c: 'var(--red-green)' },
        { t: 'BRIDGE',   s: 'Connecteurs CRM/ERP/Billing',  d: 'MCP vers Salesforce, HubSpot, SAP, Stripe… L\'agent lit & écrit dans vos systèmes en direct.', i: 'bi-plug-fill',          c: 'var(--red-green)' },
        { t: 'FORGE',    s: 'Fine-tuning & playbooks',      d: 'Studio d\'entraînement : conversations annotées, playbooks de campagne, A/B des prompts.', i: 'bi-hammer',             c: 'var(--red-green)' },
        { t: 'PULSE',    s: 'Supervision & KPI live',       d: 'Tableau de bord temps réel : volumes, taux de succès, sentiment, alertes & SLA.', i: 'bi-activity',           c: 'var(--waka-orange)' },
        { t: 'SENTINEL', s: 'Conformité, PII, garde-fous',  d: 'Détection PII, redaction auto, opt-in, blackout horaires, audit trail RGPD/ISO 27001.', i: 'bi-shield-lock-fill',   c: 'var(--waka-cyan)' },
        { t: 'VAULT',    s: 'Secrets & data residency',     d: 'Key Vault par client, données isolées en EU. Vos clés, vos données, vos certificats.', i: 'bi-safe-fill',          c: 'var(--red-green)' },
        { t: 'COMPASS',  s: 'Routing & intent dispatch',    d: 'Détecte l\'intention en 1 tour, route vers le bon agent ou escalade humaine si besoin.', i: 'bi-compass-fill',       c: 'var(--waka-orange)' },
        { t: 'MINT',     s: 'Billing à l\u2019acte & reporting', d: 'Facturation à l\'interaction réussie. Reporting client, exports comptables, marges nettes.', i: 'bi-cash-coin',     c: 'var(--red-green)' }
    ];
    return <>
        <ChromeTop section="SERVICES" slideNum={4} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24 }}>
                <div>
                    <div className="eyebrow"><span className="num">03</span>LES SERVICES WAKA<span className="bar"></span></div>
                    <h1 className="title-l" style={{ fontSize: 48, lineHeight: 1.05 }}>14 microservices, <span style={{ color: 'var(--waka-orange)' }}>une seule plateforme</span>.</h1>
                    <p className="subtitle" style={{ marginTop: 8, fontSize: 16 }}>Chaque brique est spécialisée, scalable, observée — assemblées à la demande pour chaque opération.</p>
                </div>
                <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end', maxWidth: 480 }}>
                    <span className="tag" style={{ fontSize: 10, borderColor: 'var(--waka-orange)', color: 'var(--waka-orange)' }}>● Conversation</span>
                    <span className="tag" style={{ fontSize: 10, borderColor: 'var(--waka-cyan)', color: 'var(--waka-cyan)' }}>● Canaux & langues</span>
                    <span className="tag" style={{ fontSize: 10, borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>● Données & intégrations</span>
                </div>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 10, marginTop: 22, flex: 1 }}>
                {services.map(sv => (
                    <div key={sv.t} className="card" style={{ padding: '14px 12px', display: 'flex', flexDirection: 'column', gap: 6, borderTop: `2px solid ${sv.c}`, position: 'relative' }}>
                        <i className={`bi ${sv.i}`} style={{ fontSize: 24, color: sv.c }}></i>
                        <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--orbit-text-1)', letterSpacing: 1 }}>{sv.t}</div>
                        <div style={{ fontSize: 10, color: sv.c, fontWeight: 700, letterSpacing: 0.5, lineHeight: 1.2 }}>{sv.s}</div>
                        <div style={{ fontSize: 10.5, color: 'var(--orbit-text-2)', lineHeight: 1.4, marginTop: 2 }}>{sv.d}</div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 16, justifyContent: 'space-around' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Conversation</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Canaux & langues</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Données & intégrations</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Pilotage</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Confiance & conformité</span>
            </div>
        </div>
        <ChromeBottom chapter="Services" />
    </>;
};

/* ═══ S06 — MCP : CONNECTEURS & OUTILS SUR MESURE ══════════ */
const Slide06_MCP = () => {
    const categories = [
        {
            i: 'bi-database-fill-gear', c: 'var(--red-green)', t: 'Outils internes du client',
            d: 'CRM, ERP, billing, stock, agenda — l\u2019agent lit & agit en direct.',
            ex: 'Salesforce · HubSpot · SAP · Odoo · Zendesk · Microsoft 365'
        },
        {
            i: 'bi-cloud-arrow-down-fill', c: 'var(--waka-cyan)', t: 'APIs tierces (3rd party)',
            d: 'Connecteurs prêts à l\u2019emploi vers les services SaaS du marché.',
            ex: 'Stripe · Google Maps · Twilio · DHL · Météo · OpenWeather · Calendly · DocuSign · Slack'
        },
        {
            i: 'bi-database-fill-lock', c: 'var(--waka-orange)', t: 'Bases dédiées Waka (Azure)',
            d: 'Outils sur mesure adossés à une DB isolée par client, hébergée chez nous.',
            ex: 'Cosmos DB · Postgres Flex · Blob Storage · Key Vault · Tenant unique par client'
        },
        {
            i: 'bi-journal-richtext', c: 'var(--waka-orange)', t: 'RAG · base de connaissances',
            d: 'L\u2019agent cite vos documents : FAQ, procédures, contrats, fiches produit.',
            ex: 'PDF · Word · Notion · SharePoint · Confluence · sites web · transcripts'
        }
    ];
    return <>
        <ChromeTop section="CONNECTEURS" slideNum={5} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">04</span>SERVEURS MCP · OUTILS & CONNAISSANCES<span className="bar"></span></div>
            <h1 className="title-l">L&apos;agent utilise <span style={{ color: 'var(--waka-orange)' }}>vos outils</span> et <span style={{ color: 'var(--waka-cyan)' }}>vos connaissances</span>.</h1>
            <p className="subtitle">Grâce au protocole MCP + RAG, chaque agent se branche à vos systèmes, à des APIs tierces, et cite vos documents — en sécurité, isolé par client.</p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 20, marginTop: 20, flex: 1 }}>
                {/* Schéma */}
                <div className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>SCHÉMA D&apos;INTÉGRATION</div>

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1.15fr', alignItems: 'center', gap: 10 }}>
                        <div style={{ padding: '14px 10px', borderRadius: 12, border: '2px solid var(--waka-orange)', background: 'rgba(232,131,42,.10)', textAlign: 'center' }}>
                            <i className="bi bi-stars" style={{ fontSize: 26, color: 'var(--waka-orange)' }}></i>
                            <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--orbit-text-1)', marginTop: 4 }}>Agent IA</div>
                            <div style={{ fontSize: 9, color: 'var(--orbit-text-3)', letterSpacing: 1 }}>WAKA</div>
                        </div>
                        <i className="bi bi-arrow-right" style={{ fontSize: 18, color: 'var(--orbit-text-3)' }}></i>
                        <div style={{ padding: '14px 8px', borderRadius: 12, border: '2px solid var(--waka-cyan)', background: 'rgba(0,188,212,.10)', textAlign: 'center' }}>
                            <i className="bi bi-diagram-3-fill" style={{ fontSize: 26, color: 'var(--waka-cyan)' }}></i>
                            <div style={{ fontSize: 13, fontWeight: 800, color: 'var(--orbit-text-1)', marginTop: 4 }}>Serveur MCP</div>
                            <div style={{ fontSize: 9, color: 'var(--orbit-text-3)', letterSpacing: 1 }}>+ RAG</div>
                        </div>
                        <i className="bi bi-arrow-right" style={{ fontSize: 18, color: 'var(--orbit-text-3)' }}></i>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                            {categories.map(c => (
                                <div key={c.t} style={{ padding: '6px 9px', borderRadius: 8, border: `1px solid ${c.c}`, background: 'rgba(255,255,255,.02)', display: 'flex', alignItems: 'center', gap: 6 }}>
                                    <i className={`bi ${c.i}`} style={{ fontSize: 14, color: c.c }}></i>
                                    <div style={{ fontSize: 10, color: 'var(--orbit-text-1)', fontWeight: 600 }}>{c.t}</div>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div style={{ padding: '12px 14px', borderRadius: 10, background: 'rgba(255,255,255,.03)', border: '1px solid var(--orbit-border-strong)' }}>
                        <div className="label" style={{ color: 'var(--waka-cyan)' }}>EN CLAIR</div>
                        <div style={{ fontSize: 13, color: 'var(--orbit-text-2)', marginTop: 4, lineHeight: 1.45 }}>
                            <strong style={{ color: 'var(--orbit-text-1)' }}>MCP</strong> = la prise universelle entre l&apos;IA et vos logiciels. <strong style={{ color: 'var(--orbit-text-1)' }}>RAG</strong> = la mémoire documentaire de l&apos;agent. Branchés une fois, l&apos;agent <em>lit, écrit, agit, cite</em> — comme un employé formé.
                        </div>
                    </div>

                    <div style={{ padding: 12, borderRadius: 10, background: 'rgba(45,190,96,.06)', border: '1px solid var(--red-green)' }}>
                        <div className="label" style={{ color: 'var(--red-green)' }}>ISOLATION & SOUVERAINETÉ</div>
                        <div style={{ fontSize: 12, color: 'var(--orbit-text-2)', marginTop: 4, lineHeight: 1.45 }}>
                            Chaque client a <strong style={{ color: 'var(--orbit-text-1)' }}>son environnement Azure</strong> (DB, secrets, index RAG, logs). Aucune donnée ne franchit la frontière d&apos;un autre client.
                        </div>
                    </div>
                </div>

                {/* Catégories détaillées */}
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                    {categories.map(c => (
                        <div key={c.t} className="card" style={{ padding: 14, display: 'flex', gap: 12, alignItems: 'flex-start', borderLeft: `3px solid ${c.c}` }}>
                            <i className={`bi ${c.i}`} style={{ fontSize: 26, color: c.c, flexShrink: 0, marginTop: 2 }}></i>
                            <div style={{ flex: 1 }}>
                                <div className="title-m" style={{ fontSize: 15, marginBottom: 2 }}>{c.t}</div>
                                <div className="body-m" style={{ fontSize: 12, lineHeight: 1.4, marginBottom: 4 }}>{c.d}</div>
                                <div style={{ fontSize: 10, color: 'var(--orbit-text-3)', letterSpacing: .5, fontWeight: 600 }}>EX. : {c.ex}</div>
                            </div>
                        </div>
                    ))}

                    <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 2 }}>
                        <span className="tag orange">DELIVERY EN J+5</span>
                        <span className="tag">OUTILS SUR MESURE</span>
                        <span className="tag">RAG MULTI-SOURCES</span>
                        <span className="tag" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>AZURE FRANCECENTRAL</span>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Connecteurs MCP & RAG" />
    </>;
};

/* ═══ S07 — MULTIMODAL / MULTICANAL ═════════════════════════════════ */
const Slide07_MultiModal = () => {
    const channels = [
        { i: 'bi-telephone-fill',  t: 'Voix',          d: 'Inbound + outbound, < 800 ms, 400+ voix.',           c: 'var(--waka-orange)' },
        { i: 'bi-whatsapp',        t: 'WhatsApp',      d: 'Asynchrone, templates certifiés, riche.',            c: 'var(--red-green)' },
        { i: 'bi-telegram',        t: 'Telegram',      d: 'Bots conversationnels, paiement, fichiers.',         c: 'var(--waka-cyan)' },
        { i: 'bi-messenger',       t: 'Messenger',     d: 'Pages Facebook → conversations 1:1 à l\u2019échelle.', c: 'var(--waka-cyan)' },
        { i: 'bi-instagram',       t: 'Instagram DM',  d: 'DM, stories, mentions, comments.',                   c: 'var(--waka-orange)' },
        { i: 'bi-tiktok',          t: 'TikTok',        d: 'DM & commentaires, audience la plus jeune.',         c: 'var(--orbit-text-1)' },
        { i: 'bi-twitter-x',       t: 'X / Twitter',   d: 'DM, mentions, support social public.',               c: 'var(--orbit-text-1)' },
        { i: 'bi-linkedin',        t: 'LinkedIn',      d: 'B2B, prospection, recrutement assisté.',             c: 'var(--waka-cyan)' },
        { i: 'bi-chat-dots-fill',  t: 'Chat web',      d: 'Widget intégrable, handoff humain, contexte.',       c: 'var(--waka-orange)' },
        { i: 'bi-envelope-paper',  t: 'Email',         d: "Personnalisé à l'unité, réponse, relance.",          c: 'var(--red-green)' },
        { i: 'bi-phone-vibrate',   t: 'SMS / RCS',     d: 'Notifications, paiements, parcours rich media.',     c: 'var(--waka-orange)' },
        { i: 'bi-camera-video',    t: 'Vidéo / Avatar', d: 'Présentation, onboarding, démo personnalisée.',     c: 'var(--red-green)' }
    ];
    const modalities = [
        { t: 'Texte', c: 'var(--orbit-text-1)' },
        { t: 'Voix naturelle', c: 'var(--waka-orange)' },
        { t: 'Image / OCR', c: 'var(--waka-cyan)' },
        { t: 'Vidéo / avatar', c: 'var(--red-green)' },
        { t: 'Documents', c: 'var(--orbit-text-1)' },
        { t: 'Données structurées', c: 'var(--waka-cyan)' }
    ];
    return <>
        <ChromeTop section="MULTIMODAL" slideNum={6} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">05</span>MULTIMODAL · MULTICANAL<span className="bar"></span></div>
            <h1 className="title-l">Une seule conversation, <span style={{ color: 'var(--waka-orange)' }}>tous les canaux</span>.</h1>
            <p className="subtitle">Téléphonie, messageries, réseaux sociaux — l'agent suit le client partout, dans la modalité qui lui convient.</p>

            <div style={{ display: 'grid', gridTemplateColumns: '1.55fr 1fr', gap: 24, marginTop: 24, flex: 1 }}>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
                    {channels.map(c => (
                        <div key={c.t} className="card" style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 6 }}>
                            <i className={`bi ${c.i}`} style={{ fontSize: 24, color: c.c }}></i>
                            <div className="title-m" style={{ fontSize: 17 }}>{c.t}</div>
                            <div className="body-m" style={{ fontSize: 11, lineHeight: 1.35 }}>{c.d}</div>
                        </div>
                    ))}
                </div>

                <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="label" style={{ color: 'var(--waka-cyan)' }}>MODALITÉS NATIVES</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                        {modalities.map(m => (
                            <span key={m.t} style={{
                                fontSize: 13, padding: '6px 12px', borderRadius: 999,
                                border: `1px solid ${m.c}`, color: m.c, fontWeight: 700, letterSpacing: 1
                            }}>{m.t}</span>
                        ))}
                    </div>
                    <div style={{ height: 1, background: 'var(--orbit-border-strong)', margin: '4px 0' }}></div>
                    <div className="label" style={{ color: 'var(--red-green)' }}>UN MÊME CONTEXTE</div>
                    <div className="body-m" style={{ fontSize: 14 }}>
                        Le client commence sur Instagram, continue sur WhatsApp, finit au téléphone — l'agent garde l'historique, l'intention, la relation.
                    </div>
                    <div className="kpi" style={{ marginTop: 'auto' }}>
                        <div className="val orange" style={{ fontSize: 52 }}>140+</div>
                        <div className="label">langues & dialectes pris en charge</div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Multimodal" />
    </>;
};

/* ═══ S06 — INDUSTRIALISER LA PERSONNALISATION ══════════════════════ */
const Slide08_Personnalisation = () => {
    const layers = [
        { t: 'Voix de marque', d: "Ton, vocabulaire, valeurs, interdits — l'agent parle comme la marque, pas comme un bot générique.", c: 'var(--waka-orange)', i: 'bi-mic-fill' },
        { t: 'Catalogue & nouveautés', d: "Offres, promos, conditions, ruptures — l'agent connaît le produit du jour, pas celui d'il y a 3 mois.", c: 'var(--waka-cyan)', i: 'bi-box-seam' },
        { t: "Playbooks d'action", d: 'Les bonnes actions au bon moment : objection, upsell, escalade, rétention. Codifié et mesuré.', c: 'var(--red-green)', i: 'bi-diagram-3' },
        { t: 'Outils métier', d: "CRM, billing, stock, paiement, KYC — l'agent utilise les outils du client, pas un substitut générique.", c: 'var(--waka-orange)', i: 'bi-tools' }
    ];
    return <>
        <ChromeTop section="PERSONNALISATION" slideNum={7} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">06</span>INDUSTRIALISER LA PERSONNALISATION<span className="bar"></span></div>
            <h1 className="title-l">Un agent qui <span style={{ color: 'var(--waka-orange)' }}>parle la voix</span> de chaque marque.</h1>
            <p className="subtitle">La personnalisation n'est pas un prompt : c'est un produit, livré et mis à jour comme un logiciel.</p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 24, flex: 1 }}>
                {/* Schéma agent au centre des 4 couches */}
                <div className="card" style={{ padding: 28, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 480 }}>
                    <div className="orbit-ring" style={{ position: 'absolute', width: 380, height: 380 }}></div>
                    <div style={{
                        width: 220, height: 220, borderRadius: '50%',
                        background: 'radial-gradient(circle, rgba(232,131,42,0.25) 0%, rgba(15,15,18,0) 70%)',
                        border: '2px solid var(--waka-orange)',
                        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 6, zIndex: 2
                    }}>
                        <i className="bi bi-stars" style={{ fontSize: 44, color: 'var(--waka-orange)' }}></i>
                        <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--orbit-text-1)' }}>Agent IA</div>
                        <div style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 2, textAlign: 'center' }}>VOIX DE LA MARQUE</div>
                    </div>
                    {[
                        { x: '6%', y: '10%', t: 'Voix de marque', c: 'var(--waka-orange)' },
                        { x: '62%', y: '10%', t: 'Catalogue', c: 'var(--waka-cyan)' },
                        { x: '6%', y: '82%', t: 'Playbooks', c: 'var(--red-green)' },
                        { x: '62%', y: '82%', t: 'Outils métier', c: 'var(--waka-orange)' }
                    ].map(b => (
                        <div key={b.t} style={{
                            position: 'absolute', left: b.x, top: b.y,
                            padding: '8px 14px', borderRadius: 10,
                            border: `1px solid ${b.c}`, color: b.c,
                            fontSize: 13, fontWeight: 700, letterSpacing: 1,
                            background: 'rgba(15,15,18,0.85)', zIndex: 3
                        }}>{b.t}</div>
                    ))}
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                    {layers.map(l => (
                        <div key={l.t} className="card" style={{ padding: '16px 22px', display: 'flex', gap: 16, alignItems: 'flex-start' }}>
                            <i className={`bi ${l.i}`} style={{ fontSize: 28, color: l.c, flexShrink: 0, marginTop: 2 }}></i>
                            <div>
                                <div className="title-m" style={{ fontSize: 22, marginBottom: 4 }}>{l.t}</div>
                                <div className="body-m" style={{ fontSize: 14 }}>{l.d}</div>
                            </div>
                        </div>
                    ))}
                    <div style={{ padding: '14px 18px', borderRadius: 12, background: 'rgba(255,140,0,.08)', border: '1px solid var(--waka-orange)' }}>
                        <div className="label" style={{ color: 'var(--waka-orange)' }}>RÉSULTAT</div>
                        <div style={{ fontSize: 16, color: 'var(--orbit-text-1)', marginTop: 6, lineHeight: 1.4 }}>
                            Un même socle, <strong>autant d'agents que de marques</strong> — chacun avec sa voix, ses produits, ses gestes, ses outils.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Personnalisation" />
    </>;
};

/* ═══ S07 — INBOUND ══════════════════════════════════════════════════ */
const Slide09_Inbound = () => {
    const usecases = [
        { t: 'Support N1 / N2', d: 'Résolution autonome ou pré-qualifiée avant escalade humaine.', tag: 'SUPPORT' },
        { t: 'Qualification entrante', d: 'Filtrage, scoring, routage vers la bonne équipe ou le bon agent.', tag: 'QUALIF' },
        { t: 'Self-care augmenté', d: "Suivi commande, factures, changement d'offre, paiement, KYC.", tag: 'SELF-CARE' },
        { t: 'Information & avant-vente', d: 'Réponses produit, comparaison, prise de RDV, devis.', tag: 'AVANT-VENTE' }
    ];
    return <>
        <ChromeTop section="INBOUND" slideNum={8} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">07</span>OPÉRATIONS ENTRANTES<span className="bar"></span></div>
            <h1 className="title-l">Décrocher <span style={{ color: 'var(--waka-orange)' }}>chaque appel</span>, traiter chaque demande.</h1>
            <p className="subtitle">Plus d'attente, plus de tickets perdus. L'agent IA prend la main 24/7 et n'escalade que quand c'est utile.</p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 28, flex: 1 }}>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    {usecases.map(u => (
                        <div key={u.t} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 10 }}>
                            <span className="tag orange">{u.tag}</span>
                            <div className="title-m" style={{ fontSize: 22 }}>{u.t}</div>
                            <div className="body-m" style={{ fontSize: 14 }}>{u.d}</div>
                        </div>
                    ))}
                </div>

                <div className="card" style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <div className="label" style={{ color: 'var(--waka-cyan)' }}>CE QUE ÇA CHANGE</div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                        <div className="kpi"><div className="val orange" style={{ fontSize: 56 }}>0s</div><div className="label">temps d'attente</div></div>
                        <div className="kpi"><div className="val cyan" style={{ fontSize: 56 }}>24/7</div><div className="label">disponibilité</div></div>
                        <div className="kpi"><div className="val green" style={{ fontSize: 56 }}>+35%</div><div className="label">taux de résolution N1</div></div>
                        <div className="kpi"><div className="val orange" style={{ fontSize: 56 }}>−50%</div><div className="label">coût par ticket</div></div>
                    </div>
                    <div style={{ height: 1, background: 'var(--orbit-border-strong)', margin: '4px 0' }}></div>
                    <div className="body-m" style={{ fontSize: 14 }}>L'agent humain reprend la main sur les cas à forte valeur ou émotion — il n'est plus noyé dans le N1 répétitif.</div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Inbound" />
    </>;
};

/* ═══ S08 — OUTBOUND ════════════════════════════════════════════════ */
const Slide10_Outbound = () => {
    const campaigns = [
        { t: 'Acquisition / Vente', d: 'Détection de signaux, pitch personnalisé, closing assisté.', i: 'bi-cart-plus', c: 'var(--waka-orange)' },
        { t: 'Fidélisation', d: 'Renouvellement, upgrade, NPS, anti-churn proactif.', i: 'bi-heart-fill', c: 'var(--red-green)' },
        { t: 'Recouvrement amiable', d: "Relance graduée, négociation d'échéancier, paiement guidé.", i: 'bi-cash-coin', c: 'var(--waka-cyan)' },
        { t: 'Réactivation dormants', d: 'Re-engagement, offre ciblée, reprise du parcours abandonné.', i: 'bi-arrow-clockwise', c: 'var(--waka-orange)' },
        { t: 'Enquêtes & feedback', d: 'NPS, CSAT, études qualitatives à grande échelle.', i: 'bi-clipboard-data', c: 'var(--waka-cyan)' },
        { t: 'Notifications transactionnelles', d: 'Confirmations, rappels RDV, alertes paiement.', i: 'bi-bell-fill', c: 'var(--red-green)' }
    ];
    return <>
        <ChromeTop section="OUTBOUND" slideNum={9} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">08</span>OPÉRATIONS SORTANTES<span className="bar"></span></div>
            <h1 className="title-l">Des campagnes <span style={{ color: 'var(--waka-orange)' }}>industrialisées</span>, pas un dialer aveugle.</h1>
            <p className="subtitle">Chaque contact est ciblé, daté, scénarisé. Chaque résultat alimente la campagne suivante.</p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 28, flex: 1 }}>
                {campaigns.map(c => (
                    <div key={c.t} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 12 }}>
                        <i className={`bi ${c.i}`} style={{ fontSize: 32, color: c.c }}></i>
                        <div className="title-m" style={{ fontSize: 24 }}>{c.t}</div>
                        <div className="body-m" style={{ fontSize: 14 }}>{c.d}</div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 24, justifyContent: 'space-around' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Ciblage signal-based</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> A/B continu sur scripts & voix</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Pricing à la performance possible</span>
            </div>
        </div>
        <ChromeBottom chapter="Outbound" />
    </>;
};

/* ═══ S10 — MAÎTRISE & ÉCONOMIE ═══════════════════════ */
const Slide11_Maitrise = () => <>
    <ChromeTop section="MAÎTRISE" slideNum={10} total={TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">09</span>MAÎTRISE & ÉCONOMIE<span className="bar"></span></div>
        <h1 className="title-l">Une plateforme <span style={{ color: 'var(--waka-orange)' }}>industrielle</span>, pas un prototype.</h1>
        <p className="subtitle">14 microservices spécialisés, observabilité bout-en-bout, conformité native — pour opérer en production, pas en démo.</p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, marginTop: 28 }}>
            <div className="card" style={{ padding: 24 }}>
                <div className="kpi"><div className="val orange" style={{ fontSize: 64 }}>14</div><div className="label">microservices</div></div>
                <div className="body-m" style={{ fontSize: 13, marginTop: 12 }}>Brain, Voice, Crew, Comms, Sentinel, Echo, Pulse…</div>
            </div>
            <div className="card" style={{ padding: 24 }}>
                <div className="kpi"><div className="val cyan" style={{ fontSize: 64 }}>400+</div><div className="label">voix synthétiques</div></div>
                <div className="body-m" style={{ fontSize: 13, marginTop: 12 }}>Sélection par marché, accent, persona.</div>
            </div>
            <div className="card" style={{ padding: 24 }}>
                <div className="kpi"><div className="val green" style={{ fontSize: 64 }}>140+</div><div className="label">langues & dialectes</div></div>
                <div className="body-m" style={{ fontSize: 13, marginTop: 12 }}>Y compris langues africaines et arabes locales.</div>
            </div>
            <div className="card" style={{ padding: 24 }}>
                <div className="kpi"><div className="val orange" style={{ fontSize: 64 }}>&lt;800<span style={{ fontSize: 28 }}>ms</span></div><div className="label">latence voix bout-en-bout</div></div>
                <div className="body-m" style={{ fontSize: 13, marginTop: 12 }}>Conversation naturelle, sans coupure perçue.</div>
            </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 24, marginTop: 24, flex: 1 }}>
            <div className="card" style={{ padding: 28 }}>
                <div className="label" style={{ color: 'var(--waka-cyan)' }}>CONFIANCE & CONFORMITÉ</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginTop: 14 }}>
                    {['Microsoft Partner', 'Azure FranceCentral', 'ISO 27001 (en cours)', 'ISO 9001 (en cours)', 'RGPD natif', 'Audit logs', 'Enregistrement & consentement', 'PII redaction'].map(t => (
                        <span key={t} className="tag">{t}</span>
                    ))}
                </div>
                <div className="body-m" style={{ fontSize: 14, marginTop: 18 }}>
                    Chaque conversation est tracée, ré-écoutable, scorée. Le donneur d'ordre garde la main sur ses données et ses garde-fous.
                </div>
            </div>
            <div className="card" style={{ padding: 28, background: 'rgba(45,190,96,.06)', borderColor: 'var(--red-green)' }}>
                <div className="label" style={{ color: 'var(--red-green)' }}>L'ÉCONOMIE</div>
                <div style={{ fontSize: 22, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 12, lineHeight: 1.3 }}>
                    Coût <strong>à l'acte</strong>, prévisible, qui <strong style={{ color: 'var(--red-green)' }}>baisse avec le volume</strong>.
                </div>
                <div className="body-m" style={{ fontSize: 14, marginTop: 14 }}>
                    Là où le call center humain voit ses coûts grimper avec l'absentéisme, la formation et le turnover, Waka voit son coût marginal tendre vers zéro.
                </div>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Maîtrise" />
</>;

/* ═══ S11 — NEXT STEPS · MODÈLE APPORTEUR D'AFFAIRES ═══════════ */
const Slide12_Next = () => <>
    <ChromeTop section="NEXT STEPS" slideNum={TOTAL_SLIDES} total={TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">→</span>MODÈLE DE COLLABORATION<span className="bar"></span></div>
        <h1 className="title-l">Vous <span style={{ color: 'var(--waka-orange)' }}>apportez</span>. Nous <span style={{ color: 'var(--red-green)' }}>opérons</span>. Vous <span style={{ color: 'var(--waka-cyan)' }}>touchez</span>.</h1>
        <p className="subtitle">Modèle d'apporteur d'affaires : commission récurrente tant que le client reste opéré chez Waka Orbit.</p>

        {/* Schéma 3 acteurs */}
        <div style={{
            marginTop: 28, flex: 1, position: 'relative',
            display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, alignItems: 'stretch'
        }}>
            {/* APPORTEUR */}
            <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="label" style={{ color: 'var(--waka-orange)' }}>① APPORTEUR D'AFFAIRES</div>
                <i className="bi bi-person-arms-up" style={{ fontSize: 52, color: 'var(--waka-orange)' }}></i>
                <div className="title-m" style={{ fontSize: 24 }}>Détecte & introduit</div>
                <ul style={{ fontSize: 14, color: 'var(--orbit-text-2)', lineHeight: 1.6, paddingLeft: 18, margin: 0 }}>
                    <li>Identifie un besoin client</li>
                    <li>Présente Waka Orbit</li>
                    <li>Facilite le premier contact</li>
                </ul>
                <div style={{ marginTop: 'auto', padding: '10px 14px', borderRadius: 10, background: 'rgba(255,140,0,.10)', border: '1px solid var(--waka-orange)', fontSize: 13, color: 'var(--orbit-text-1)' }}>
                    <strong style={{ color: 'var(--waka-orange)' }}>Effort :</strong> mise en relation
                </div>
            </div>

            {/* WAKA ORBIT */}
            <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 12, background: 'rgba(45,190,96,.06)', borderColor: 'var(--red-green)' }}>
                <div className="label" style={{ color: 'var(--red-green)' }}>② WAKA ORBIT</div>
                <i className="bi bi-cpu-fill" style={{ fontSize: 52, color: 'var(--red-green)' }}></i>
                <div className="title-m" style={{ fontSize: 24 }}>Opère avec excellence</div>
                <ul style={{ fontSize: 14, color: 'var(--orbit-text-2)', lineHeight: 1.6, paddingLeft: 18, margin: 0 }}>
                    <li>Conçoit l'opération sur mesure</li>
                    <li>Industrialise les agents IA</li>
                    <li>Exécute, supervise, optimise</li>
                    <li>Garantit conformité & SLA</li>
                </ul>
                <div style={{ marginTop: 'auto', padding: '10px 14px', borderRadius: 10, background: 'rgba(45,190,96,.12)', border: '1px solid var(--red-green)', fontSize: 13, color: 'var(--orbit-text-1)' }}>
                    <strong style={{ color: 'var(--red-green)' }}>Engagement :</strong> performance & qualité
                </div>
            </div>

            {/* CLIENT */}
            <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 12 }}>
                <div className="label" style={{ color: 'var(--waka-cyan)' }}>③ CLIENT FINAL</div>
                <i className="bi bi-building-fill-check" style={{ fontSize: 52, color: 'var(--waka-cyan)' }}></i>
                <div className="title-m" style={{ fontSize: 24 }}>Consomme & paie</div>
                <ul style={{ fontSize: 14, color: 'var(--orbit-text-2)', lineHeight: 1.6, paddingLeft: 18, margin: 0 }}>
                    <li>Confie ses opérations à Waka</li>
                    <li>Paie à l'usage / forfait mensuel</li>
                    <li>Reste tant que la valeur est là</li>
                </ul>
                <div style={{ marginTop: 'auto', padding: '10px 14px', borderRadius: 10, background: 'rgba(0,188,212,.10)', border: '1px solid var(--waka-cyan)', fontSize: 13, color: 'var(--orbit-text-1)' }}>
                    <strong style={{ color: 'var(--waka-cyan)' }}>Bénéfice :</strong> ROI mesurable
                </div>
            </div>

            {/* Flèches entre cartes */}
            <div style={{
                position: 'absolute', left: 'calc(33.33% - 22px)', top: '50%', transform: 'translateY(-50%)',
                width: 44, height: 44, borderRadius: '50%', background: 'var(--orbit-bg)',
                border: '1px solid var(--orbit-border-strong)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 5
            }}>
                <i className="bi bi-arrow-right" style={{ fontSize: 22, color: 'var(--waka-orange)' }}></i>
            </div>
            <div style={{
                position: 'absolute', left: 'calc(66.66% - 22px)', top: '50%', transform: 'translateY(-50%)',
                width: 44, height: 44, borderRadius: '50%', background: 'var(--orbit-bg)',
                border: '1px solid var(--orbit-border-strong)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 5
            }}>
                <i className="bi bi-arrow-right" style={{ fontSize: 22, color: 'var(--red-green)' }}></i>
            </div>
        </div>

        {/* Bandeau commission */}
        <div style={{
            marginTop: 24, padding: '18px 28px', borderRadius: 14,
            background: 'linear-gradient(90deg, rgba(255,140,0,.10) 0%, rgba(0,188,212,.10) 100%)',
            border: '1px solid var(--waka-orange)',
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24
        }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <i className="bi bi-cash-stack" style={{ fontSize: 36, color: 'var(--waka-orange)' }}></i>
                <div>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>FLUX DE COMMISSION</div>
                    <div style={{ fontSize: 18, color: 'var(--orbit-text-1)', fontWeight: 600, marginTop: 4 }}>
                        Commission récurrente versée à l'apporteur — <strong style={{ color: 'var(--waka-orange)' }}>tant que le client est opéré chez Waka Orbit</strong>.
                    </div>
                </div>
            </div>
            <div style={{ display: 'flex', gap: 10, flexShrink: 0 }}>
                <span className="tag orange">% RÉCURRENT</span>
                <span className="tag">VIE DU CLIENT</span>
                <span className="tag" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>SANS PLAFOND</span>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Next steps" />
</>;

Object.assign(window, {
    SlideCover,
    Slide02_Constat,
    Slide03_OrbitLaunch,
    Slide05_Services,
    Slide06_MCP,
    Slide07_MultiModal,
    Slide08_Personnalisation,
    Slide09_Inbound,
    Slide10_Outbound,
    Slide11_Maitrise,
    Slide12_Next
});