const Slide13 = () => (
    <SectionDivider
        num="03"
        label="L’intégration"
        kicker="Faisabilité pilote"
        title="Une API simple, un pilote rapide"
        slideNum={13}
        total={window.TOTAL_SLIDES}
        totalSections={5}
    />
);

const Slide14 = () => {
    const principles = [
        {
            i: 'bi-plug-fill',
            c: 'var(--waka-orange)',
            t: 'API unique',
            d: 'Une passerelle de statut de ligne suffit pour déclencher le ciblage.'
        },
        {
            i: 'bi-toggle-on',
            c: 'var(--waka-cyan)',
            t: 'Réponse binaire',
            d: 'Client / Non-client, Actif / Inactif : uniquement le signal utile.'
        },
        {
            i: 'bi-shield-lock-fill',
            c: 'var(--red-green)',
            t: 'Accès sécurisé',
            d: 'Échange cadré pour le pilote, sans développement lourd Core Banking.'
        }
    ];

    return <>
        <ChromeTop section="L’INTÉGRATION" slideNum={14} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">14</span>INTÉGRATION TECHNIQUE LÉGÈRE<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Une passerelle de statut, <span style={{ color: 'var(--waka-orange)' }}>pas un chantier Core Banking</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 14, maxWidth: 1280 }}>
                Waka requiert une API simple, binaire et sécurisée pour valider l’éligibilité avant engagement omnicanal.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 18, marginTop: 34 }}>
                {principles.map(p => (
                    <div key={p.t} className="card" style={{ padding: 28, display: 'flex', flexDirection: 'column', gap: 14, borderTop: `3px solid ${p.c}` }}>
                        <i className={`bi ${p.i}`} style={{ fontSize: 38, color: p.c }}></i>
                        <div className="title-m" style={{ fontSize: 28 }}>{p.t}</div>
                        <div className="body-m" style={{ fontSize: 18, lineHeight: 1.45 }}>{p.d}</div>
                    </div>
                ))}
            </div>

            <div className="card" style={{ marginTop: 28, padding: 30, flex: 1, display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1fr', gap: 20, alignItems: 'center' }}>
                <div style={{ textAlign: 'center', padding: 22, borderRadius: 14, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.03)' }}>
                    <i className="bi bi-phone-fill" style={{ fontSize: 44, color: 'var(--waka-orange)' }}></i>
                    <div className="label" style={{ color: 'var(--waka-orange)', marginTop: 12 }}>MOOV AFRICA</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>Numéro soumis au contrôle d’éligibilité</div>
                </div>

                <i className="bi bi-arrow-right" style={{ fontSize: 32, color: 'var(--orbit-text-3)' }}></i>

                <div style={{ textAlign: 'center', padding: 22, borderRadius: 14, border: '2px solid var(--waka-cyan)', background: 'rgba(0,188,212,.08)' }}>
                    <i className="bi bi-diagram-3-fill" style={{ fontSize: 44, color: 'var(--waka-cyan)' }}></i>
                    <div className="label" style={{ color: 'var(--waka-cyan)', marginTop: 12 }}>API BINAIRE</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>Client / Non-client · Actif / Inactif</div>
                </div>

                <i className="bi bi-arrow-right" style={{ fontSize: 32, color: 'var(--orbit-text-3)' }}></i>

                <div style={{ textAlign: 'center', padding: 22, borderRadius: 14, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.03)' }}>
                    <i className="bi bi-stars" style={{ fontSize: 44, color: 'var(--red-green)' }}></i>
                    <div className="label" style={{ color: 'var(--red-green)', marginTop: 12 }}>WAKA</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>Ciblage IA et engagement immédiat</div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Intégration technique" />
    </>;
};

const Slide15 = () => {
    const steps = [
        {
            n: '01',
            t: 'Envoi sécurisé',
            d: 'Moov transmet le numéro à contrôler via la passerelle.'
        },
        {
            n: '02',
            t: 'Réponse binaire',
            d: 'Retour Client / Non-client et Actif / Inactif.'
        },
        {
            n: '03',
            t: 'Engagement Waka',
            d: 'Ciblage IA puis activation par agents vocaux Waka.'
        }
    ];

    return <>
        <ChromeTop section="PARCOURS API" slideNum={15} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">15</span>PARCOURS MOMO EN 3 ÉTAPES<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1480 }}>
                Le contrôle d’éligibilité <span style={{ color: 'var(--waka-orange)' }}>alimente l’action immédiate</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 14, maxWidth: 1220 }}>
                Un parcours volontairement court : vérifier, qualifier, engager.
            </p>

            <div style={{ position: 'relative', marginTop: 70, flex: 1, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 34, alignItems: 'stretch' }}>
                <div style={{ position: 'absolute', left: '16%', right: '16%', top: 55, height: 2, background: 'var(--orbit-border-strong)', zIndex: 0 }}></div>
                {steps.map((s, idx) => (
                    <div key={s.n} className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 18, position: 'relative', zIndex: 1 }}>
                        <div className="step-num" style={{ width: 110, height: 110, fontSize: 34, background: idx === 1 ? 'var(--waka-cyan)' : idx === 2 ? 'var(--red-green)' : 'var(--waka-orange)' }}>
                            {s.n}
                        </div>
                        <div className="title-m" style={{ fontSize: 34 }}>{s.t}</div>
                        <div className="body-l" style={{ fontSize: 24, maxWidth: 410 }}>{s.d}</div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 28, justifyContent: 'center' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> MoMo</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> API binaire sécurisée</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Agents vocaux Waka</span>
            </div>
        </div>
        <ChromeBottom chapter="Parcours API MoMo" />
    </>;
};

const Slide16 = () => {
    const phases = [
        {
            n: '01',
            days: 'JOURS 1–3',
            t: 'Cadrage test',
            d: 'Échantillon test MoMo et ciblage géographique FTTH.',
            c: 'var(--waka-orange)'
        },
        {
            n: '02',
            days: 'JOURS 4–6',
            t: 'Préparation campagne',
            d: 'Scripts IA, voix agents et landing pages.',
            c: 'var(--waka-cyan)'
        },
        {
            n: '03',
            days: 'JOUR 7',
            t: 'Validation',
            d: 'Ping API MoMo et format fichiers FTTH.',
            c: 'var(--red-green)'
        },
        {
            n: '04',
            days: 'JOURS 8–15',
            t: 'Go-Live pilote',
            d: 'Lancement et transmission quotidienne des leads.',
            c: 'var(--waka-orange)'
        }
    ];

    return <>
        <ChromeTop section="PILOTE" slideNum={16} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">16</span>ROADMAP PROJET ÉCLAIR<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Un pilote opérationnel en <span style={{ color: 'var(--waka-orange)' }}>15 jours</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 14, maxWidth: 1220 }}>
                Une séquence courte pour tester MoMo, FTTH et l’intégration légère dans le même mouvement.
            </p>

            <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18, flex: 1 }}>
                {phases.map(p => (
                    <div key={p.n} className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 16, borderTop: `3px solid ${p.c}` }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <div className="step-num" style={{ width: 58, height: 58, fontSize: 20, background: p.c }}>{p.n}</div>
                            <span className="tag" style={{ borderColor: p.c, color: p.c }}>{p.days}</span>
                        </div>
                        <div className="title-m" style={{ fontSize: 28, lineHeight: 1.1 }}>{p.t}</div>
                        <div className="body-m" style={{ fontSize: 19, lineHeight: 1.45 }}>{p.d}</div>
                    </div>
                ))}
            </div>

            <div style={{ marginTop: 26, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                <div className="card" style={{ padding: 24, background: 'rgba(232,131,42,.06)', borderColor: 'var(--waka-orange)' }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>MOOV MONEY</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>
                        Échantillon test, validation de statut, ciblage et engagement omnicanal.
                    </div>
                </div>
                <div className="card" style={{ padding: 24, background: 'rgba(0,188,212,.06)', borderColor: 'var(--waka-cyan)' }}>
                    <div className="label" style={{ color: 'var(--waka-cyan)' }}>FIBRE FTTH</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>
                        Ciblage géographique, landing pages et transmission quotidienne des leads.
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Roadmap pilote" />
    </>;
};

Object.assign(window, {
    Slide13,
    Slide14,
    Slide15,
    Slide16
});