const Slide17_PiloteProuver = () => {
    const proofs = [
        {
            i: 'bi-arrow-repeat',
            c: 'var(--waka-orange)',
            t: 'Réactiver MoMo',
            d: 'Démontrer la capacité à réveiller des comptes dormants par un engagement ciblé et omnicanal.',
            tag: 'Moov Money'
        },
        {
            i: 'bi-house-check-fill',
            c: 'var(--waka-cyan)',
            t: 'Qualifier FTTH',
            d: 'Produire des leads résidentiels exploitables, avec coordonnées et adresses précises.',
            tag: 'Fibre FTTH'
        },
        {
            i: 'bi-plug-fill',
            c: 'var(--red-green)',
            t: 'Opérer léger',
            d: 'Lancer deux campagnes indépendantes avec une intégration simple, binaire et sécurisée.',
            tag: 'Pilote'
        }
    ];

    return <>
        <ChromeTop section="DÉCISION PILOTE" slideNum={17} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">17</span>CE QUE LE PILOTE DOIT PROUVER<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Trois preuves simples pour décider du <span style={{ color: 'var(--waka-orange)' }}>passage à l’échelle</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 16, maxWidth: 1260 }}>
                Le pilote ne cherche pas à tout démontrer : il valide la traction, la qualité des leads et la légèreté d’intégration.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 44, flex: 1 }}>
                {proofs.map((p, idx) => (
                    <div key={p.t} className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 18, borderTop: `3px solid ${p.c}` }}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <div style={{ width: 64, height: 64, borderRadius: 16, background: 'rgba(255,255,255,.04)', border: `1px solid ${p.c}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <i className={`bi ${p.i}`} style={{ fontSize: 32, color: p.c }}></i>
                            </div>
                            <span className="tag" style={{ borderColor: p.c, color: p.c }}>{p.tag}</span>
                        </div>
                        <div className="label" style={{ color: p.c }}>PREUVE {String(idx + 1).padStart(2, '0')}</div>
                        <div className="title-m" style={{ fontSize: 34, lineHeight: 1.05 }}>{p.t}</div>
                        <div className="body-l" style={{ fontSize: 24, lineHeight: 1.35 }}>{p.d}</div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 28, justifyContent: 'space-between' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Réactivation ciblée</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Leads FTTH qualifiés</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Intégration légère</span>
            </div>
        </div>
        <ChromeBottom chapter="Décision pilote" />
    </>;
};

const Slide18_CeQueMoovRecoit = () => {
    const columns = [
        {
            title: 'MoMo',
            accent: 'var(--waka-orange)',
            icon: 'bi-phone-fill',
            label: 'RÉACTIVATION MOOV MONEY',
            items: [
                'Statut d’éligibilité exploitable',
                'Engagement omnicanal des comptes ciblés',
                'Réactivation personnalisée du parc dormant'
            ],
            footer: 'Objectif : réveiller l’usage Moov Money.'
        },
        {
            title: 'FTTH',
            accent: 'var(--waka-cyan)',
            icon: 'bi-router-fill',
            label: 'CONQUÊTE FIBRE',
            items: [
                'Fiches prospects complètes',
                'Coordonnées et adresses précises',
                'Transmission quotidienne pendant le pilote'
            ],
            footer: 'Objectif : alimenter la conquête résidentielle.'
        }
    ];

    return <>
        <ChromeTop section="LIVRABLES" slideNum={18} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">18</span>CE QUE MOOV REÇOIT<span className="bar"></span></div>
            <h1 className="title-l">
                Deux flux opérationnels, <span style={{ color: 'var(--red-green)' }}>un pilotage clair</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 16, maxWidth: 1240 }}>
                Moov garde une lecture simple : ce qui est activé côté MoMo, ce qui est qualifié côté FTTH.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 44, flex: 1 }}>
                {columns.map(col => (
                    <div key={col.title} className="card" style={{ padding: 38, display: 'flex', flexDirection: 'column', gap: 22, borderTop: `4px solid ${col.accent}` }}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <div>
                                <div className="label" style={{ color: col.accent }}>{col.label}</div>
                                <div className="title-m" style={{ fontSize: 54, marginTop: 8 }}>{col.title}</div>
                            </div>
                            <div style={{ width: 78, height: 78, borderRadius: 18, border: `1px solid ${col.accent}`, background: 'rgba(255,255,255,.04)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <i className={`bi ${col.icon}`} style={{ fontSize: 40, color: col.accent }}></i>
                            </div>
                        </div>

                        <div style={{ height: 1, background: 'var(--orbit-border-strong)' }}></div>

                        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                            {col.items.map((item, idx) => (
                                <div key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                                    <span className="step-num" style={{ width: 34, height: 34, fontSize: 14, flexShrink: 0 }}>{idx + 1}</span>
                                    <div className="body-l" style={{ fontSize: 26, lineHeight: 1.25 }}>{item}</div>
                                </div>
                            ))}
                        </div>

                        <div style={{ marginTop: 'auto', padding: '18px 22px', borderRadius: 14, border: `1px solid ${col.accent}`, background: 'rgba(255,255,255,.03)' }}>
                            <div className="body-m" style={{ color: 'var(--orbit-text-1)' }}>{col.footer}</div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
        <ChromeBottom chapter="Livrables pilote" />
    </>;
};

const Slide19_PourquoiMaintenant = () => <>
    <ChromeTop section="POURQUOI MAINTENANT" slideNum={19} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">19</span>POURQUOI MAINTENANT<span className="bar"></span></div>
        <h1 className="title-l" style={{ maxWidth: 1450 }}>
            Transformer les comptes dormants en <span style={{ color: 'var(--waka-orange)' }}>premier levier de croissance</span>.
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr .8fr', gap: 32, marginTop: 54, flex: 1 }}>
            <div className="quote-block" style={{ padding: '42px 48px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <div style={{ fontSize: 44, lineHeight: 1.22, fontStyle: 'italic', color: 'var(--orbit-text-1)', fontWeight: 600 }}>
                    « Un projet No-Brainer : activer le parc existant, qualifier la demande FTTH, et lancer un pilote sans complexité lourde. »
                </div>
                <div className="label" style={{ color: 'var(--waka-orange)', marginTop: 28 }}>
                    PROPOSITION STRATÉGIQUE WAKA x MOOV AFRICA BURKINA FASO
                </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div className="card" style={{ padding: 28, borderLeft: '3px solid var(--waka-orange)' }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>LEVIER 01</div>
                    <div className="title-m" style={{ fontSize: 28, marginTop: 8 }}>Parc déjà là</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>
                        La croissance attend d’être réveillée dans le parc existant.
                    </div>
                </div>
                <div className="card" style={{ padding: 28, borderLeft: '3px solid var(--waka-cyan)' }}>
                    <div className="label" style={{ color: 'var(--waka-cyan)' }}>LEVIER 02</div>
                    <div className="title-m" style={{ fontSize: 28, marginTop: 8 }}>FTTH qualifiée</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>
                        Les zones cibles peuvent recevoir des leads résidentiels exploitables.
                    </div>
                </div>
                <div className="card" style={{ padding: 28, borderLeft: '3px solid var(--red-green)' }}>
                    <div className="label" style={{ color: 'var(--red-green)' }}>LEVIER 03</div>
                    <div className="title-m" style={{ fontSize: 28, marginTop: 8 }}>Pilote rapide</div>
                    <div className="body-m" style={{ fontSize: 18, marginTop: 8 }}>
                        L’intégration reste légère : API binaire, fichiers FTTH, lancement pilote.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Pourquoi maintenant" />
</>;

const Slide20_Closing = () => <>
    <ChromeTop section="CLOSING" slideNum={20} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">→</span>DÉCISION DE PILOTE<span className="bar"></span></div>

        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <h1 style={{ fontSize: 132, fontWeight: 800, lineHeight: .9, letterSpacing: -5, color: 'var(--orbit-text-1)', margin: 0 }}>
                Lançons<br />
                le <span style={{ color: 'var(--waka-orange)' }}>pilote</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 30, maxWidth: 1050 }}>
                Accord de principe, cadrage de l’échantillon, validation API/fichiers, puis lancement opérationnel.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 26, marginTop: 46 }}>
                <div className="card" style={{ padding: 32, display: 'flex', gap: 20, alignItems: 'flex-start', borderTop: '3px solid var(--waka-cyan)' }}>
                    <i className="bi bi-code-square" style={{ fontSize: 44, color: 'var(--waka-cyan)', flexShrink: 0 }}></i>
                    <div>
                        <div className="label" style={{ color: 'var(--waka-cyan)' }}>PROCHAINE ÉTAPE TECHNIQUE</div>
                        <div className="title-m" style={{ fontSize: 30, marginTop: 10 }}>Valider le dispositif pilote</div>
                        <div className="body-m" style={{ fontSize: 18, marginTop: 12 }}>
                            Échantillon MoMo, ping API binaire, format fichiers FTTH et modalités de transmission quotidienne.
                        </div>
                    </div>
                </div>

                <div className="card" style={{ padding: 32, display: 'flex', gap: 20, alignItems: 'flex-start', borderTop: '3px solid var(--red-green)' }}>
                    <i className="bi bi-handshake-fill" style={{ fontSize: 44, color: 'var(--red-green)', flexShrink: 0 }}></i>
                    <div>
                        <div className="label" style={{ color: 'var(--red-green)' }}>PROCHAINE ÉTAPE BUSINESS</div>
                        <div className="title-m" style={{ fontSize: 30, marginTop: 10 }}>Acter l’accord de principe</div>
                        <div className="body-m" style={{ fontSize: 18, marginTop: 12 }}>
                            Confirmer le périmètre test, les campagnes MoMo et FTTH, puis lancer le pilote.
                        </div>
                    </div>
                </div>
            </div>

            <div className="strip" style={{ marginTop: 32, justifyContent: 'space-between' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Waka x Moov Africa Burkina Faso</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Partenaire Officiel de Microsoft</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> antonio.sainz@waka.services</span>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Closing" />
</>;

Object.assign(window, {
    Slide17_PiloteProuver,
    Slide18_CeQueMoovRecoit,
    Slide19_PourquoiMaintenant,
    Slide20_Closing
});

// --- alias noms simples attendus par le bootstrap d'index.html (Slide17..Slide20) ---
Object.assign(window, {
    Slide17: Slide17_PiloteProuver,
    Slide18: Slide18_CeQueMoovRecoit,
    Slide19: Slide19_PourquoiMaintenant,
    Slide20: Slide20_Closing,
});