const Slide01 = () => {
    const cfg = window.DECK_CONFIG || {};
    return <>
        <div className="grid-bg" style={{ opacity: .42 }}></div>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at 28% 48%, rgba(232,131,42,.18) 0%, rgba(15,15,18,.35) 44%, rgba(15,15,18,.96) 100%)' }}></div>

        <div style={{ position: 'absolute', inset: 0, padding: '72px 80px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
                    <div style={{ width: 72, height: 72, borderRadius: 16, background: 'linear-gradient(135deg, var(--waka-orange), rgba(232,131,42,.24))', border: '1px solid rgba(232,131,42,.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 10px 30px rgba(232,131,42,.25)' }}>
                        <span style={{ fontSize: 30, fontWeight: 900, color: 'var(--orbit-text-1)', letterSpacing: -1 }}>W</span>
                    </div>
                    <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 || 'Waka'}</div>
                        <div style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 3, textTransform: 'uppercase' }}>Partenaire Officiel de Microsoft</div>
                    </div>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <span className="tag">CONFIDENTIEL</span>
                    <span className="tag orange">PROPOSITION STRATÉGIQUE</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: 36 }}>
                <div style={{ maxWidth: 1480 }}>
                    <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: 4, color: 'var(--waka-orange)', textTransform: 'uppercase', marginBottom: 26, display: 'flex', alignItems: 'center', gap: 18 }}>
                        <span style={{ width: 48, height: 1, background: 'var(--waka-orange)' }}></span>
                        Proposition stratégique de co-croissance
                    </div>

                    <div style={{ fontSize: 132, fontWeight: 800, lineHeight: .9, letterSpacing: -6, color: 'var(--orbit-text-1)' }}>
                        Double Réseau,<br />
                        Double <span style={{ color: 'var(--waka-orange)' }}>Impact</span>.
                    </div>

                    <div className="subtitle" style={{ marginTop: 34, maxWidth: 1180 }}>
                        Réactivation Massive Moov Money &amp; Conquête Fibre FTTH.
                    </div>

                    <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                        <span className="tag orange">Moov Money</span>
                        <span className="tag cyan">Fibre FTTH</span>
                        <span className="tag green">Omnicanal IA</span>
                    </div>
                </div>
            </div>

            <div className="strip" style={{ 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(--waka-cyan)' }}>◆</span> Deux campagnes omnicanales indépendantes</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Partenaire Officiel de Microsoft</span>
            </div>
        </div>
    </>;
};

const Slide02 = () => <>
    <ChromeTop section="HOOK" slideNum={2} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">01</span>PROMESSE DE CO-CROISSANCE<span className="bar"></span></div>

        <h1 className="title-l" style={{ maxWidth: 1540 }}>
            Deux campagnes omnicanales indépendantes, <span style={{ color: 'var(--waka-orange)' }}>un levier de vente croisée</span> unique.
        </h1>

        <p className="subtitle" style={{ marginTop: 18, maxWidth: 1220 }}>
            Moov Money et Fibre FTTH avancent chacun sur leur objectif, tout en créant une synergie commerciale exploitable.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 46, flex: 1 }}>
            <div className="card" style={{ padding: 36, display: 'flex', flexDirection: 'column', gap: 18, borderTop: '4px solid var(--waka-orange)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <div style={{ width: 64, height: 64, borderRadius: 16, background: 'rgba(232,131,42,.14)', border: '1px solid var(--waka-orange)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <i className="bi bi-wallet2" style={{ fontSize: 30, color: 'var(--waka-orange)' }}></i>
                    </div>
                    <div>
                        <div className="label" style={{ color: 'var(--waka-orange)' }}>MOTEUR 01</div>
                        <div className="title-m" style={{ fontSize: 34, marginTop: 4 }}>Réactivation MoMo</div>
                    </div>
                </div>
                <div className="body-l" style={{ fontSize: 24, lineHeight: 1.35, maxWidth: 720 }}>
                    Réveiller le parc Moov Money dormant par une activation ciblée et omnicanale.
                </div>
                <div style={{ marginTop: 'auto', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    <span className="tag orange">Parc existant</span>
                    <span className="tag">Activation</span>
                    <span className="tag">Moov Money</span>
                </div>
            </div>

            <div className="card" style={{ padding: 36, display: 'flex', flexDirection: 'column', gap: 18, borderTop: '4px solid var(--waka-cyan)' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                    <div style={{ width: 64, height: 64, borderRadius: 16, background: 'rgba(0,188,212,.12)', border: '1px solid var(--waka-cyan)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                        <i className="bi bi-router-fill" style={{ fontSize: 30, color: 'var(--waka-cyan)' }}></i>
                    </div>
                    <div>
                        <div className="label" style={{ color: 'var(--waka-cyan)' }}>MOTEUR 02</div>
                        <div className="title-m" style={{ fontSize: 34, marginTop: 4 }}>Conquête FTTH</div>
                    </div>
                </div>
                <div className="body-l" style={{ fontSize: 24, lineHeight: 1.35, maxWidth: 720 }}>
                    Capter des prospects Fibre FTTH dans les quartiers et zones cibles à forte valeur ajoutée.
                </div>
                <div style={{ marginTop: 'auto', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    <span className="tag cyan">Fibre FTTH</span>
                    <span className="tag">Leads</span>
                    <span className="tag">Résidentiel</span>
                </div>
            </div>
        </div>

        <div className="strip" style={{ marginTop: 28, justifyContent: 'space-around' }}>
            <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Deux campagnes</span>
            <span className="sep">/</span>
            <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Deux réseaux</span>
            <span className="sep">/</span>
            <span><span style={{ color: 'var(--red-green)' }}>◆</span> Une synergie de vente croisée</span>
        </div>
    </div>
    <ChromeBottom chapter="Hook stratégique" />
</>;

const Slide03 = () => <>
    <ChromeTop section="OPPORTUNITÉ" slideNum={3} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">02</span>OPPORTUNITÉ DORMANTE<span className="bar"></span></div>

        <h1 className="title-l" style={{ maxWidth: 1480 }}>
            La croissance peut venir du parc déjà acquis.
        </h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 34, marginTop: 44, flex: 1, alignItems: 'stretch' }}>
            <div className="quote-block" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: '54px 62px' }}>
                <div style={{ fontSize: 46, lineHeight: 1.18, fontWeight: 700, color: 'var(--orbit-text-1)', letterSpacing: -1 }}>
                    « Nous n&apos;avons pas besoin de pêcher dans d&apos;autres mers : la croissance attend simplement d&apos;être réveillée. »
                </div>
                <div className="label" style={{ color: 'var(--waka-orange)', marginTop: 28 }}>
                    Idée directrice du partenariat
                </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div className="card" style={{ padding: 30, flex: 1 }}>
                    <div className="card-header">
                        <i className="bi bi-people-fill" style={{ color: 'var(--waka-orange)' }}></i>
                        <span>MAXIMISER L’EXISTANT</span>
                    </div>
                    <div className="body-l" style={{ fontSize: 24, marginTop: 24, lineHeight: 1.35 }}>
                        Le premier levier consiste à activer le parc déjà présent, déjà connu, déjà adressable.
                    </div>
                </div>

                <div className="card" style={{ padding: 30, flex: 1 }}>
                    <div className="card-header">
                        <i className="bi bi-house-check-fill" style={{ color: 'var(--waka-cyan)' }}></i>
                        <span>SÉCURISER LE RÉSIDENTIEL</span>
                    </div>
                    <div className="body-l" style={{ fontSize: 24, marginTop: 24, lineHeight: 1.35 }}>
                        Le second levier cible les parts de marché Fibre FTTH dans les zones résidentielles prioritaires.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Opportunité dormante" />
</>;

const Slide04 = () => <>
    <SectionDivider
        num="01"
        label="L’opportunité"
        kicker="Double réseau, double impact"
        title="Réveiller le parc existant"
        slideNum={4}
        total={window.TOTAL_SLIDES}
        totalSections={5}
    />
</>;

Object.assign(window, {
    Slide01,
    Slide02,
    Slide03,
    Slide04
});