const Slide05 = () => <>
    <ChromeTop section="DIAGNOSTIC" slideNum={5} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">05</span>CHOC DE LA DORMANCE<span className="bar"></span></div>
        <h1 className="title-l" style={{ maxWidth: 1450 }}>
            La dormance MoMo est un <span style={{ color: 'var(--waka-orange)' }}>défi structurel</span>, pas un échec.
        </h1>
        <p className="subtitle" style={{ marginTop: 16, maxWidth: 1280 }}>
            Le parc enregistré existe déjà. L’enjeu est de réveiller l’usage, pas de reconstruire l’acquisition.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1.25fr 1fr 1fr', gap: 24, marginTop: 42, flex: 1 }}>
            <div className="card surface" style={{ padding: 42, display: 'flex', flexDirection: 'column', justifyContent: 'center', borderColor: 'var(--waka-orange)' }}>
                <div className="kpi">
                    <div className="label">TAUX DE DORMANCE MONDIAL MOYEN</div>
                    <div className="val orange" style={{ fontSize: 116, lineHeight: .95 }}>74,2%</div>
                    <div className="label">près de 3 comptes enregistrés sur 4 sont inactifs</div>
                </div>
            </div>

            <div className="card" style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
                <i className="bi bi-person-check-fill" style={{ fontSize: 42, color: 'var(--red-green)' }}></i>
                <div className="title-m" style={{ fontSize: 30, lineHeight: 1.1 }}>Le client est déjà connu</div>
                <div className="body-m">
                    Le compte est enregistré. La barrière d’entrée principale n’est plus l’identification.
                </div>
            </div>

            <div className="card" style={{ padding: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
                <i className="bi bi-lightning-charge-fill" style={{ fontSize: 42, color: 'var(--waka-cyan)' }}></i>
                <div className="title-m" style={{ fontSize: 30, lineHeight: 1.1 }}>Le potentiel est dormant</div>
                <div className="body-m">
                    L’effort porte sur l’activation ciblée et la reprise d’usage régulier.
                </div>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Diagnostic" />
</>;

const Slide06 = () => {
    const causes = [
        {
            n: '01',
            i: 'bi-arrow-left-right',
            c: 'var(--waka-orange)',
            t: 'Usage transactionnel',
            d: 'MoMo est souvent réduit au Cash-In / Cash-Out. Le réflexe d’usage quotidien reste à installer.'
        },
        {
            n: '02',
            i: 'bi-pause-circle-fill',
            c: 'var(--waka-cyan)',
            t: 'Comptes sans usage régulier',
            d: 'Les comptes existent déjà, mais une partie du parc ne revient pas spontanément vers le service.'
        },
        {
            n: '03',
            i: 'bi-shield-check',
            c: 'var(--red-green)',
            t: 'KYC déjà franchi',
            d: 'La qualification client est déjà passée. La barrière d’activation est donc réduite.'
        }
    ];

    return <>
        <ChromeTop section="DIAGNOSTIC" slideNum={6} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">06</span>POURQUOI LA DORMANCE EXISTE<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Le frein n’est pas l’accès au client. C’est le <span style={{ color: 'var(--waka-orange)' }}>réveil de l’usage</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 16, maxWidth: 1240 }}>
                Trois signaux structurent le business case : usage ponctuel, absence de régularité, activation plus accessible.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 44, flex: 1 }}>
                {causes.map(cause => (
                    <div key={cause.n} className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 18, borderTop: `3px solid ${cause.c}` }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                            <div style={{ width: 58, height: 58, borderRadius: 14, background: 'rgba(255,255,255,.04)', border: `1px solid ${cause.c}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                                <i className={`bi ${cause.i}`} style={{ fontSize: 28, color: cause.c }}></i>
                            </div>
                            <div className="label" style={{ color: cause.c }}>{cause.n}</div>
                        </div>
                        <div className="title-m" style={{ fontSize: 34, lineHeight: 1.08 }}>{cause.t}</div>
                        <div className="body-m" style={{ lineHeight: 1.45 }}>{cause.d}</div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 28, justifyContent: 'space-between' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Parc déjà enregistré</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> KYC déjà franchi</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Effort concentré sur l’activation</span>
            </div>
        </div>
        <ChromeBottom chapter="Diagnostic" />
    </>;
};

const Slide07 = () => <>
    <ChromeTop section="BUSINESS CASE" slideNum={7} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">07</span>RÉACTIVER VS ACQUÉRIR<span className="bar"></span></div>
        <h1 className="title-l" style={{ maxWidth: 1500 }}>
            Réactiver le parc existant change l’<span style={{ color: 'var(--red-green)' }}>équation économique</span>.
        </h1>
        <p className="subtitle" style={{ marginTop: 16, maxWidth: 1220 }}>
            Le client est déjà dans le réseau. Waka concentre l’effort sur le ciblage, l’engagement et le passage à l’action.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24, marginTop: 42 }}>
            <div className="card surface" style={{ padding: 34, borderColor: 'var(--waka-orange)' }}>
                <div className="kpi">
                    <div className="label">COÛT DE RÉACTIVATION</div>
                    <div className="val orange" style={{ fontSize: 86 }}>5×</div>
                    <div className="label">moins cher qu’acquérir une nouvelle ligne physique</div>
                </div>
            </div>
            <div className="card surface" style={{ padding: 34, borderColor: 'var(--waka-cyan)' }}>
                <div className="kpi">
                    <div className="label">VITESSE DE MISE EN MOUVEMENT</div>
                    <div className="val cyan" style={{ fontSize: 86 }}>3×</div>
                    <div className="label">plus rapide qu’une acquisition physique</div>
                </div>
            </div>
            <div className="card surface" style={{ padding: 34, borderColor: 'var(--red-green)' }}>
                <div className="kpi">
                    <div className="label">COÛT RÉEL VIA WAKA</div>
                    <div className="val green" style={{ fontSize: 86 }}>20%</div>
                    <div className="label">versus 100% du coût CAC classique</div>
                </div>
            </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, marginTop: 28, flex: 1 }}>
            <div className="card" style={{ padding: 30, display: 'flex', flexDirection: 'column', gap: 14 }}>
                <div className="label" style={{ color: 'var(--orbit-text-3)' }}>ACQUISITION CLASSIQUE</div>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18 }}>
                    <div className="val" style={{ fontSize: 72, fontWeight: 800, lineHeight: 1, color: 'var(--orbit-text-1)' }}>100%</div>
                    <div className="body-m" style={{ paddingBottom: 10 }}>coût CAC de référence</div>
                </div>
                <div style={{ height: 18, borderRadius: 999, background: 'var(--orbit-border-strong)', overflow: 'hidden' }}>
                    <div style={{ width: '100%', height: '100%', background: 'var(--orbit-text-3)' }}></div>
                </div>
                <div className="body-m" style={{ fontSize: 15 }}>Nouvelle ligne physique, effort complet d’acquisition.</div>
            </div>

            <div className="card" style={{ padding: 30, display: 'flex', flexDirection: 'column', gap: 14, borderColor: 'var(--waka-orange)', background: 'rgba(232,131,42,.06)' }}>
                <div className="label" style={{ color: 'var(--waka-orange)' }}>RÉACTIVATION VIA WAKA</div>
                <div style={{ display: 'flex', alignItems: 'flex-end', gap: 18 }}>
                    <div className="val orange" style={{ fontSize: 72, fontWeight: 800, lineHeight: 1 }}>20%</div>
                    <div className="body-m" style={{ paddingBottom: 10 }}>coût réel d’activation</div>
                </div>
                <div style={{ height: 18, borderRadius: 999, background: 'var(--orbit-border-strong)', overflow: 'hidden' }}>
                    <div style={{ width: '20%', height: '100%', background: 'var(--waka-orange)' }}></div>
                </div>
                <div className="body-m" style={{ fontSize: 15 }}>Compte existant, KYC franchi, engagement omnicanal ciblé.</div>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Business case" />
</>;

const Slide08 = () =>
    <SectionDivider
        num="02"
        label="Le levier"
        kicker="Diagnostic & business case"
        title="Réactivation ciblée, acquisition optimisée"
        slideNum={8}
        total={window.TOTAL_SLIDES}
        totalSections={5}
    />;

const Slide05_ChocDormance = Slide05;
const Slide06_PourquoiDormance = Slide06;
const Slide07_ReactiverAcquerir = Slide07;
const Slide08_Levier = Slide08;

Object.assign(window, {
    Slide05,
    Slide06,
    Slide07,
    Slide08,
    Slide05_ChocDormance,
    Slide06_PourquoiDormance,
    Slide07_ReactiverAcquerir,
    Slide08_Levier
});