const Slide09 = () => {
    const capabilities = [
        {
            icon: 'bi-chat-square-text-fill',
            color: 'var(--waka-orange)',
            tag: 'CANAUX DIGITAUX',
            title: 'Engager sans friction',
            body: 'SMS interactifs, tunnels WhatsApp et réseaux sociaux pour relancer le dialogue là où le client répond.'
        },
        {
            icon: 'bi-telephone-outbound-fill',
            color: 'var(--waka-cyan)',
            tag: 'VOICE BOTS IA',
            title: 'Appeler à grande échelle',
            body: 'Appels automatisés mobile et fixe pour qualifier, expliquer, relancer et guider chaque cible.'
        },
        {
            icon: 'bi-person-video3',
            color: 'var(--red-green)',
            tag: 'AVATARS VIDÉO',
            title: 'Personnaliser la preuve',
            body: 'Vidéos personnalisées sur landing pages pour porter le message et renforcer la conversion.'
        }
    ];

    return <>
        <ChromeTop section="SOLUTION OMNICANALE" slideNum={9} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">09</span>ARSENAL OMNICANAL WAKA<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Trois briques pour <span style={{ color: 'var(--waka-orange)' }}>réveiller</span>, <span style={{ color: 'var(--waka-cyan)' }}>qualifier</span> et <span style={{ color: 'var(--red-green)' }}>convertir</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 16, maxWidth: 1260 }}>
                Un dispositif opérationnel pour activer Moov Money et conquérir la Fibre FTTH, sans complexifier le parcours.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 44, flex: 1 }}>
                {capabilities.map(c => (
                    <div key={c.tag} className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 18, borderTop: `4px solid ${c.color}` }}>
                        <div style={{ width: 72, height: 72, borderRadius: 18, background: `linear-gradient(135deg, ${c.color}, rgba(0,0,0,.35))`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                            <i className={`bi ${c.icon}`} style={{ fontSize: 34, color: '#fff' }}></i>
                        </div>
                        <span className="tag" style={{ borderColor: c.color, color: c.color, width: 'fit-content' }}>{c.tag}</span>
                        <div className="title-m" style={{ fontSize: 34, lineHeight: 1.05 }}>{c.title}</div>
                        <div className="body-m" style={{ lineHeight: 1.45 }}>{c.body}</div>
                    </div>
                ))}
            </div>
        </div>
        <ChromeBottom chapter="Solution omnicanale" />
    </>;
};

const Slide10 = () => {
    const triggers = [
        { t: 'Réveil ciblé', d: 'Identifier les comptes dormants et déclencher un message d’usage personnalisé.', i: 'bi-bell-fill', c: 'var(--waka-orange)' },
        { t: 'Éligibilité validée', d: 'Connexion API simple pour confirmer le statut avant engagement.', i: 'bi-shield-check', c: 'var(--waka-cyan)' },
        { t: 'Engagement omnicanal', d: 'Lancement coordonné par canaux digitaux, voix IA et parcours adaptés.', i: 'bi-diagram-3-fill', c: 'var(--red-green)' }
    ];

    return <>
        <ChromeTop section="CAMPAGNE MOMO" slideNum={10} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">10</span>CAMPAGNE 1 · MOOV MONEY<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1540 }}>
                Réveiller le parc dormant par des <span style={{ color: 'var(--waka-orange)' }}>triggers d’usage</span> personnalisés.
            </h1>
            <p className="subtitle" style={{ marginTop: 16, maxWidth: 1280 }}>
                Une campagne indépendante, construite autour d’une validation d’éligibilité simple puis d’un engagement omnicanal.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 40, flex: 1 }}>
                <div className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 22 }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>OBJECTIF OPÉRATIONNEL</div>
                    <div className="title-m" style={{ fontSize: 38, lineHeight: 1.05 }}>
                        Transformer un compte enregistré en usage actif.
                    </div>
                    <div className="body-l" style={{ fontSize: 24, lineHeight: 1.45 }}>
                        Le client existe déjà. L’effort porte sur le bon déclencheur, le bon canal et le bon moment d’engagement.
                    </div>
                    <div style={{ marginTop: 'auto', display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                        <span className="tag orange">MOOV MONEY</span>
                        <span className="tag">PARC DORMANT</span>
                        <span className="tag" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>RÉACTIVATION</span>
                    </div>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                    {triggers.map((item, idx) => (
                        <div key={item.t} className="card" style={{ padding: 22, display: 'flex', alignItems: 'flex-start', gap: 18, borderLeft: `4px solid ${item.c}` }}>
                            <div className="step-num" style={{ flexShrink: 0 }}>{idx + 1}</div>
                            <div style={{ flex: 1 }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
                                    <i className={`bi ${item.i}`} style={{ fontSize: 24, color: item.c }}></i>
                                    <div className="title-m" style={{ fontSize: 25 }}>{item.t}</div>
                                </div>
                                <div className="body-m" style={{ fontSize: 18, lineHeight: 1.45 }}>{item.d}</div>
                            </div>
                        </div>
                    ))}
                    <div className="strip" style={{ marginTop: 'auto', justifyContent: 'center' }}>
                        <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> API simple</span>
                        <span className="sep">/</span>
                        <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Validation d’éligibilité</span>
                        <span className="sep">/</span>
                        <span><span style={{ color: 'var(--red-green)' }}>◆</span> Lancement omnicanal</span>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Campagne Moov Money" />
    </>;
};

const Slide11 = () => {
    const deliverables = [
        { t: 'Coordonnées', d: 'Informations utiles pour recontacter le prospect.', i: 'bi-person-lines-fill', c: 'var(--waka-orange)' },
        { t: 'Adresse précise', d: 'Localisation exploitable pour qualifier la zone.', i: 'bi-geo-alt-fill', c: 'var(--waka-cyan)' },
        { t: 'Fiche complète', d: 'Une base structurée pour action commerciale.', i: 'bi-file-earmark-check-fill', c: 'var(--red-green)' }
    ];

    return <>
        <ChromeTop section="CAMPAGNE FTTH" slideNum={11} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">11</span>CAMPAGNE 2 · FIBRE FTTH<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1550 }}>
                Capter des leads <span style={{ color: 'var(--red-green)' }}>ultra-qualifiés</span> dans les zones à forte valeur.
            </h1>
            <p className="subtitle" style={{ marginTop: 16, maxWidth: 1260 }}>
                Une campagne dédiée à la conquête résidentielle, quartier par quartier, avec des fiches prospects exploitables.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 28, marginTop: 40, flex: 1 }}>
                <div className="card" style={{ padding: 34, position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                    <div className="grid-bg" style={{ opacity: .18 }}></div>
                    <div style={{ position: 'relative', zIndex: 2 }}>
                        <div className="label" style={{ color: 'var(--waka-cyan)' }}>CIBLAGE GÉOGRAPHIQUE</div>
                        <div className="title-m" style={{ fontSize: 40, lineHeight: 1.05, marginTop: 16 }}>
                            Quartiers et zones cibles à forte valeur ajoutée.
                        </div>
                        <div className="body-l" style={{ fontSize: 24, marginTop: 22, lineHeight: 1.45, maxWidth: 720 }}>
                            Waka engage les prospects résidentiels et structure les informations nécessaires à la suite commerciale.
                        </div>
                    </div>

                    <div style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginTop: 42 }}>
                        {['Quartier', 'Adresse', 'Contact'].map((t, idx) => (
                            <div key={t} style={{ padding: 18, borderRadius: 14, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.03)' }}>
                                <div className="label" style={{ color: idx === 0 ? 'var(--waka-orange)' : idx === 1 ? 'var(--waka-cyan)' : 'var(--red-green)' }}>CHAMP {idx + 1}</div>
                                <div style={{ fontSize: 24, color: 'var(--orbit-text-1)', fontWeight: 800, marginTop: 8 }}>{t}</div>
                            </div>
                        ))}
                    </div>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                    <div className="label" style={{ color: 'var(--red-green)' }}>LIVRABLE PILOTE</div>
                    {deliverables.map(d => (
                        <div key={d.t} className="card" style={{ padding: 24, display: 'flex', gap: 18, alignItems: 'flex-start', borderLeft: `4px solid ${d.c}` }}>
                            <i className={`bi ${d.i}`} style={{ fontSize: 34, color: d.c, flexShrink: 0 }}></i>
                            <div>
                                <div className="title-m" style={{ fontSize: 28, marginBottom: 6 }}>{d.t}</div>
                                <div className="body-m" style={{ fontSize: 18, lineHeight: 1.45 }}>{d.d}</div>
                            </div>
                        </div>
                    ))}
                    <div style={{ marginTop: 'auto', padding: 22, borderRadius: 14, border: '1px solid var(--red-green)', background: 'rgba(45,190,96,.07)' }}>
                        <div className="label" style={{ color: 'var(--red-green)' }}>RÉSULTAT ATTENDU</div>
                        <div style={{ fontSize: 22, color: 'var(--orbit-text-1)', fontWeight: 700, lineHeight: 1.35, marginTop: 8 }}>
                            Des fiches prospects complètes, avec coordonnées et adresses précises.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Campagne Fibre FTTH" />
    </>;
};

const Slide12 = () => <>
    <ChromeTop section="SYNERGIE" slideNum={12} total={TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">12</span>DEUX CAMPAGNES, UNE SYNERGIE<span className="bar"></span></div>
        <h1 className="title-l" style={{ maxWidth: 1500 }}>
            Deux moteurs indépendants, un <span style={{ color: 'var(--waka-orange)' }}>levier de vente croisée</span>.
        </h1>
        <p className="subtitle" style={{ marginTop: 16, maxWidth: 1250 }}>
            MoMo réactivé nourrit la relation client. FTTH génère des leads résidentiels qualifiés.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr .72fr 1fr', gap: 24, alignItems: 'stretch', marginTop: 48, flex: 1 }}>
            <div className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 18, borderTop: '4px solid var(--waka-orange)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
                    <div>
                        <div className="label" style={{ color: 'var(--waka-orange)' }}>CAMPAGNE 1</div>
                        <div className="title-m" style={{ fontSize: 38, marginTop: 8 }}>Moov Money</div>
                    </div>
                    <i className="bi bi-wallet2" style={{ fontSize: 48, color: 'var(--waka-orange)' }}></i>
                </div>
                <div className="body-l" style={{ fontSize: 24, lineHeight: 1.42 }}>
                    Réactivation ciblée du parc dormant par triggers d’usage personnalisés.
                </div>
                <div style={{ marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                    <span className="tag orange">Parc existant</span>
                    <span className="tag">Éligibilité API</span>
                    <span className="tag">Engagement omnicanal</span>
                </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18 }}>
                <div style={{ width: 140, height: 140, borderRadius: '50%', border: '2px solid var(--waka-orange)', background: 'radial-gradient(circle, rgba(232,131,42,.22), rgba(15,15,18,.75))', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i className="bi bi-arrow-left-right" style={{ fontSize: 54, color: 'var(--waka-orange)' }}></i>
                </div>
                <div className="card" style={{ padding: 24, textAlign: 'center', borderColor: 'var(--waka-orange)', background: 'rgba(232,131,42,.07)' }}>
                    <div className="label" style={{ color: 'var(--waka-orange)' }}>SYNERGIE</div>
                    <div style={{ fontSize: 32, color: 'var(--orbit-text-1)', fontWeight: 800, lineHeight: 1.05, marginTop: 8 }}>
                        Vente croisée
                    </div>
                    <div className="body-m" style={{ fontSize: 16, marginTop: 10 }}>
                        Une relation plus active ouvre plus d’opportunités.
                    </div>
                </div>
                <div style={{ display: 'flex', gap: 8 }}>
                    <span className="tag orange">MoMo</span>
                    <span className="tag" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>FTTH</span>
                </div>
            </div>

            <div className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 18, borderTop: '4px solid var(--red-green)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 16 }}>
                    <div>
                        <div className="label" style={{ color: 'var(--red-green)' }}>CAMPAGNE 2</div>
                        <div className="title-m" style={{ fontSize: 38, marginTop: 8 }}>Fibre FTTH</div>
                    </div>
                    <i className="bi bi-router-fill" style={{ fontSize: 48, color: 'var(--red-green)' }}></i>
                </div>
                <div className="body-l" style={{ fontSize: 24, lineHeight: 1.42 }}>
                    Captation de leads résidentiels qualifiés dans les quartiers et zones cibles.
                </div>
                <div style={{ marginTop: 'auto', display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                    <span className="tag" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>Leads qualifiés</span>
                    <span className="tag">Coordonnées</span>
                    <span className="tag">Adresses précises</span>
                </div>
            </div>
        </div>

        <div className="strip" style={{ marginTop: 24, justifyContent: 'center' }}>
            <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Deux campagnes indépendantes</span>
            <span className="sep">/</span>
            <span><span style={{ color: 'var(--red-green)' }}>◆</span> Une synergie de vente croisée</span>
            <span className="sep">/</span>
            <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Un partenariat de co-croissance</span>
        </div>
    </div>
    <ChromeBottom chapter="Synergie des campagnes" />
</>;

Object.assign(window, {
    Slide09,
    Slide10,
    Slide11,
    Slide12
});