const Slide16_FluxMarketplace = () => {
    const steps = [
        { n: '01', t: 'Visite marketplace', d: 'La maman arrive et explore les vendeurs, offres et services.', i: 'bi-shop', c: 'var(--waka-orange)' },
        { n: '02', t: 'Contexte gardé', d: 'Son agent personnel conserve les besoins, préférences et échanges.', i: 'bi-person-heart', c: 'var(--red-green)' },
        { n: '03', t: 'Agent d’offre', d: 'L’offre visitée répond, argumente et traite les objections.', i: 'bi-chat-square-text-fill', c: 'var(--waka-cyan)' },
        { n: '04', t: 'Profil enrichi', d: 'Intérêts, hésitations et attentes deviennent des signaux utiles.', i: 'bi-clipboard-data-fill', c: 'var(--red-green)' },
        { n: '05', t: 'Relance possible', d: 'Si le moment est bon, la relation continue via le bon canal.', i: 'bi-send-fill', c: 'var(--waka-orange)' }
    ];

    return <>
        <ChromeTop section="FLUX 1 · VISITE MARKETPLACE" slideNum={16} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">16</span>FLUX 1 · VISITE MARKETPLACE<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Quand une maman visite une offre, <span style={{ color: 'var(--waka-orange)' }}>la marketplace apprend</span>.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1300 }}>
                L’agent retient l’intérêt, apporte l’information utile, affine le profil puis prépare la bonne suite relationnelle.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 14, marginTop: 34, flex: 1, position: 'relative' }}>
                {steps.map((s, idx) => (
                    <div key={s.n} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 14, position: 'relative', borderTop: `3px solid ${s.c}` }}>
                        {idx < steps.length - 1 && (
                            <div style={{ position: 'absolute', right: -20, top: 90, zIndex: 3, width: 40, height: 40, borderRadius: '50%', background: 'var(--orbit-bg)', border: '1px solid var(--orbit-border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <i className="bi bi-arrow-right" style={{ color: s.c, fontSize: 20 }}></i>
                            </div>
                        )}
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <span className="step-num" style={{ borderColor: s.c, color: s.c }}>{s.n}</span>
                            <i className={`bi ${s.i}`} style={{ fontSize: 34, color: s.c }}></i>
                        </div>
                        <div className="title-m" style={{ fontSize: 24, lineHeight: 1.1 }}>{s.t}</div>
                        <div className="body-m" style={{ fontSize: 15, lineHeight: 1.45 }}>{s.d}</div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 24, justifyContent: 'space-around' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Vendeurs & offres visibles</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Agent d’offre disponible</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Profil enrichi par l’échange</span>
            </div>
        </div>
        <ChromeBottom chapter="Flux marketplace" />
    </>;
};

const Slide17_FluxSalleVente = () => {
    const left = [
        { t: 'Besoin exprimé', d: 'La maman décrit ce qu’elle cherche ou ce qui l’inquiète.' },
        { t: 'Reformulation', d: 'L’agent clarifie la demande et vérifie la situation.' },
        { t: 'Signaux détectés', d: 'Intention, crainte, contrainte et urgence sont identifiées.' }
    ];
    const right = [
        { t: 'Recherche d’offres', d: 'L’agent interroge les offres et agents d’offre pertinents.' },
        { t: 'Produit adapté', d: 'La recommandation est expliquée dans le contexte de la maman.' },
        { t: 'Conversion', d: 'L’agent répond aux objections et accompagne la décision.' }
    ];

    return <>
        <ChromeTop section="FLUX 2 · SALLE DE VENTE" slideNum={17} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">17</span>FLUX 2 · RÉACTIF<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1450 }}>
                La maman exprime un besoin : <span style={{ color: 'var(--red-green)' }}>l’agent transforme la demande</span> en recommandation.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1250 }}>
                La salle de vente n’est pas un catalogue : c’est un espace d’aide, de qualification et de conviction.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px 1fr', gap: 20, marginTop: 32, flex: 1, alignItems: 'stretch' }}>
                <div className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>CÔTÉ MAMAN</div>
                    {left.map((s, idx) => (
                        <div key={s.t} style={{ display: 'grid', gridTemplateColumns: '54px 1fr', gap: 14, alignItems: 'start' }}>
                            <span className="step-num">{idx + 1}</span>
                            <div>
                                <div className="title-m" style={{ fontSize: 24, lineHeight: 1.1 }}>{s.t}</div>
                                <div className="body-m" style={{ fontSize: 16, marginTop: 4 }}>{s.d}</div>
                            </div>
                        </div>
                    ))}
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
                    <div style={{ width: 86, height: 86, borderRadius: '50%', border: '2px solid var(--waka-orange)', background: 'rgba(232,131,42,.10)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <i className="bi bi-person-heart" style={{ fontSize: 42, color: 'var(--waka-orange)' }}></i>
                    </div>
                    <i className="bi bi-arrow-right" style={{ fontSize: 42, color: 'var(--orbit-text-3)' }}></i>
                    <div className="tag orange">AGENT MAMAN</div>
                </div>

                <div className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 16, borderColor: 'var(--red-green)', background: 'rgba(45,190,96,.05)' }}>
                    <div className="label" style={{ color: 'var(--red-green)' }}>CÔTÉ MARKETPLACE</div>
                    {right.map((s, idx) => (
                        <div key={s.t} style={{ display: 'grid', gridTemplateColumns: '54px 1fr', gap: 14, alignItems: 'start' }}>
                            <span className="step-num" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>{idx + 4}</span>
                            <div>
                                <div className="title-m" style={{ fontSize: 24, lineHeight: 1.1 }}>{s.t}</div>
                                <div className="body-m" style={{ fontSize: 16, marginTop: 4 }}>{s.d}</div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Flux réactif" />
    </>;
};

const Slide18_FluxProactif = () => {
    const signals = [
        { t: 'Historique', i: 'bi-clock-history', c: 'var(--waka-orange)' },
        { t: 'Données classiques', i: 'bi-database-fill', c: 'var(--waka-cyan)' },
        { t: 'Signaux conversationnels', i: 'bi-chat-heart-fill', c: 'var(--red-green)' }
    ];
    const channels = [
        { t: 'Email', i: 'bi-envelope-paper', c: 'var(--waka-cyan)' },
        { t: 'SMS', i: 'bi-phone-vibrate', c: 'var(--waka-orange)' },
        { t: 'WhatsApp', i: 'bi-whatsapp', c: 'var(--red-green)' }
    ];

    return <>
        <ChromeTop section="FLUX 3 · RELANCE PROACTIVE" slideNum={18} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">18</span>FLUX 3 · PROACTIF<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Le bon moment est détecté, puis <span style={{ color: 'var(--waka-orange)' }}>la conversation reprend</span>.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1250 }}>
                La relance ne pousse pas une campagne froide : elle ramène la maman vers son agent, qui convainc dans le contexte.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.8fr 1fr 0.9fr', gap: 18, marginTop: 34, flex: 1, alignItems: 'stretch' }}>
                <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="label" style={{ color: 'var(--waka-cyan)' }}>1 · SOURCES</div>
                    {signals.map(s => (
                        <div key={s.t} style={{ padding: 14, borderRadius: 12, border: `1px solid ${s.c}`, display: 'flex', alignItems: 'center', gap: 12, background: 'rgba(255,255,255,.02)' }}>
                            <i className={`bi ${s.i}`} style={{ color: s.c, fontSize: 24 }}></i>
                            <div className="title-m" style={{ fontSize: 20 }}>{s.t}</div>
                        </div>
                    ))}
                </div>

                <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 18, borderColor: 'var(--waka-orange)', background: 'rgba(232,131,42,.06)' }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>2 · DÉTECTION</div>
                    <div className="kpi">
                        <div className="val orange" style={{ fontSize: 46, lineHeight: 1 }}>Moment</div>
                        <div className="label">d’appétence</div>
                    </div>
                    <div className="body-m" style={{ fontSize: 16 }}>
                        L’agent repère une fenêtre de décision pour une offre ou une liste cadeau.
                    </div>
                </div>

                <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="label" style={{ color: 'var(--red-green)' }}>3 · PING CANAL</div>
                    {channels.map(c => (
                        <div key={c.t} style={{ padding: 14, borderRadius: 12, border: `1px solid ${c.c}`, display: 'flex', alignItems: 'center', gap: 12, background: 'rgba(255,255,255,.02)' }}>
                            <i className={`bi ${c.i}`} style={{ color: c.c, fontSize: 24 }}></i>
                            <div className="title-m" style={{ fontSize: 20 }}>{c.t}</div>
                        </div>
                    ))}
                </div>

                <div className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 18, borderColor: 'var(--red-green)', background: 'rgba(45,190,96,.05)' }}>
                    <div className="label" style={{ color: 'var(--red-green)' }}>4 · RETOUR AGENT</div>
                    <i className="bi bi-chat-dots-fill" style={{ color: 'var(--red-green)', fontSize: 52 }}></i>
                    <div className="title-m" style={{ fontSize: 28, lineHeight: 1.1 }}>Conviction puis conversion</div>
                    <div className="body-m" style={{ fontSize: 16 }}>
                        Tous les canaux ramènent vers l’agent personnel pour expliquer, rassurer et conclure.
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Flux proactif" />
    </>;
};

const Slide19_WakaPartenariat = () => {
    const agents = [
        { t: 'Agents maman', d: 'Accompagnent, rassurent, mémorisent le contexte.', i: 'bi-person-heart', c: 'var(--waka-orange)' },
        { t: 'Agents d’offres', d: 'Présentent, défendent et répondent aux objections.', i: 'bi-bag-heart-fill', c: 'var(--red-green)' },
        { t: 'Agents campagnes', d: 'Orchestrent les pings et les retours vers l’agent.', i: 'bi-broadcast-pin', c: 'var(--waka-cyan)' }
    ];
    const modes = [
        { t: 'Autonome', d: 'Sans intervention sur les scénarios validés.' },
        { t: 'Supervisé', d: 'Validation humaine pour les actions sensibles.' },
        { t: 'Copilote', d: 'Assistance côte à côte des équipes.' }
    ];

    return <>
        <ChromeTop section="WAKA ORBIT · PARTENARIAT" slideNum={19} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">19</span>PLATEFORME MULTI-AGENTS<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Waka Orbit apporte <span style={{ color: 'var(--waka-orange)' }}>l’équipe IA</span> derrière la marketplace Optimom.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1250 }}>
                Pas un chatbot isolé : des agents qui agissent sur les canaux, les outils, les offres et les validations métier.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr 0.9fr', gap: 22, marginTop: 28, flex: 1 }}>
                <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>ÉQUIPE IA MARKETPLACE</div>
                    {agents.map(a => (
                        <div key={a.t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start', padding: 14, borderRadius: 12, border: `1px solid ${a.c}`, background: 'rgba(255,255,255,.02)' }}>
                            <i className={`bi ${a.i}`} style={{ color: a.c, fontSize: 28, flexShrink: 0 }}></i>
                            <div>
                                <div className="title-m" style={{ fontSize: 22, lineHeight: 1.1 }}>{a.t}</div>
                                <div className="body-m" style={{ fontSize: 14, marginTop: 3 }}>{a.d}</div>
                            </div>
                        </div>
                    ))}
                </div>

                <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 14 }}>
                    <div className="label" style={{ color: 'var(--waka-cyan)' }}>OUTILS & CANAUX</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                        {['MCP / API', 'WhatsApp', 'Salesforce', 'Teams', 'Voice / WebRTC', 'Traçabilité', 'Auditabilité', 'Validations métier'].map(t => (
                            <span key={t} className="tag">{t}</span>
                        ))}
                    </div>
                    <div style={{ height: 1, background: 'var(--orbit-border-strong)', margin: '8px 0' }}></div>
                    <div className="label" style={{ color: 'var(--red-green)' }}>CURSEUR D’AUTONOMIE</div>
                    {modes.map(m => (
                        <div key={m.t} style={{ padding: '10px 12px', borderRadius: 10, background: 'rgba(255,255,255,.03)', border: '1px solid var(--orbit-border-strong)' }}>
                            <div className="title-m" style={{ fontSize: 19 }}>{m.t}</div>
                            <div className="body-m" style={{ fontSize: 13 }}>{m.d}</div>
                        </div>
                    ))}
                    <div className="body-m" style={{ fontSize: 13, color: 'var(--orbit-text-3)' }}>
                        Le curseur est choisi par agent, scénario ou client, et reste réversible.
                    </div>
                </div>

                <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 16, borderColor: 'var(--red-green)', background: 'rgba(45,190,96,.05)' }}>
                    <div className="label" style={{ color: 'var(--red-green)' }}>MODÈLES À CADRER</div>
                    <div className="kpi">
                        <div className="val green" style={{ fontSize: 42 }}>Revenue share</div>
                        <div className="label">alignement sur la conversion</div>
                    </div>
                    <div className="kpi">
                        <div className="val orange" style={{ fontSize: 42 }}>Licence</div>
                        <div className="label">actif marketplace Optimom</div>
                    </div>
                    <div className="kpi">
                        <div className="val cyan" style={{ fontSize: 42 }}>Hybride</div>
                        <div className="label">socle + variable</div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Waka Orbit & partenariat" />
    </>;
};

const Slide20_Closing = () => {
    const next = [
        { t: 'Cartographier', d: 'Offres, vendeurs et moments de vie prioritaires.', i: 'bi-map-fill', c: 'var(--waka-orange)' },
        { t: 'Définir', d: 'Outils de l’agent maman et règles de validation.', i: 'bi-sliders', c: 'var(--waka-cyan)' },
        { t: 'Concevoir', d: 'Liste cadeaux, flux pilote et parcours de relance.', i: 'bi-gift-fill', c: 'var(--red-green)' },
        { t: 'Cadrer', d: 'Canaux, modèle économique et gouvernance du pilote.', i: 'bi-handshake-fill', c: 'var(--waka-orange)' }
    ];

    return <>
        <ChromeTop section="CLOSING" slideNum={20} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">→</span>PROCHAINES ÉTAPES<span className="bar"></span></div>
            <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 34, alignItems: 'center' }}>
                <div>
                    <div style={{ fontSize: 104, fontWeight: 800, lineHeight: .92, letterSpacing: -4, color: 'var(--orbit-text-1)' }}>
                        Cadrons<br />
                        l’actif<br />
                        <span style={{ color: 'var(--waka-orange)' }}>Optimom × Waka Orbit</span>.
                    </div>
                    <p className="subtitle" style={{ marginTop: 32, maxWidth: 820 }}>
                        L’enjeu : passer d’une logique de campagnes à une marketplace relationnelle, utile pour les mamans et performante pour les offres.
                    </p>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    {next.map(n => (
                        <div key={n.t} className="card" style={{ padding: 22, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 210, borderTop: `3px solid ${n.c}` }}>
                            <i className={`bi ${n.i}`} style={{ fontSize: 34, color: n.c }}></i>
                            <div className="title-m" style={{ fontSize: 26, lineHeight: 1.1 }}>{n.t}</div>
                            <div className="body-m" style={{ fontSize: 15, lineHeight: 1.45 }}>{n.d}</div>
                        </div>
                    ))}
                </div>
            </div>

            <div className="strip" style={{ justifyContent: 'space-around' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Flux pilote</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Canaux email · SMS · WhatsApp</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Modèle revenue share · licence · hybride</span>
            </div>
        </div>
        <ChromeBottom chapter="Closing" />
    </>;
};

Object.assign(window, {
    Slide16_FluxMarketplace,
    Slide17_FluxSalleVente,
    Slide18_FluxProactif,
    Slide19_WakaPartenariat,
    Slide20_Closing
});