const Slide01_Cover = () => {
    const cfg = window.DECK_CONFIG || {};
    return <>
        <div className="grid-bg" style={{ opacity: .35 }}></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: 18, background: 'linear-gradient(135deg, var(--waka-orange), rgba(232,131,42,.25))', border: '1px solid var(--orbit-border-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 18px 48px rgba(232,131,42,.18)' }}>
                        <i className="bi bi-stars" style={{ fontSize: 34, color: 'var(--orbit-text-1)' }}></i>
                    </div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                        <div style={{ fontSize: 30, fontWeight: 800, color: 'var(--orbit-text-1)', letterSpacing: 1, lineHeight: 1 }}>Optimom × Waka Orbit</div>
                        <div style={{ fontSize: 11, color: 'var(--orbit-text-3)', letterSpacing: 3, textTransform: 'uppercase' }}>{cfg.legalName || 'Proposition commerciale'}</div>
                    </div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <span className="tag">CONFIDENTIEL</span>
                    <span className="tag orange">DIRECTION GÉNÉRALE</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' }}>
                <div style={{ maxWidth: 1420 }}>
                    <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: 54, height: 1, background: 'var(--waka-orange)' }}></span>
                        Proposition de partenariat stratégique
                    </div>
                    <div style={{ fontSize: 118, fontWeight: 800, lineHeight: .91, letterSpacing: -5, color: 'var(--orbit-text-1)' }}>
                        De la campagne CRM<br />
                        à la <span style={{ color: 'var(--waka-orange)' }}>relation IA</span><br />
                        de confiance.
                    </div>
                    <div className="subtitle" style={{ marginTop: 34, maxWidth: 1200 }}>
                        Une marketplace conversationnelle qui accompagne chaque maman et active les bonnes offres au bon moment.
                    </div>
                    <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
                        <span className="tag orange">Optimom</span>
                        <span className="tag">Waka Orbit</span>
                        <span className="tag" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>Agent personnel</span>
                        <span className="tag" style={{ borderColor: 'var(--waka-cyan)', color: 'var(--waka-cyan)' }}>Marketplace IA</span>
                    </div>
                </div>
            </div>

            <div className="strip" style={{ justifyContent: 'space-between' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Accompagner les mamans</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Détecter les moments utiles</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Activer les bonnes offres</span>
            </div>
        </div>
    </>;
};

const Slide02_ContexteOptimom = () => <>
    <ChromeTop section="CONTEXTE" slideNum={2} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">01</span>CONTEXTE OPTIMOM<span className="bar"></span></div>
        <h1 className="title-l" style={{ maxWidth: 1540 }}>
            Optimom active aujourd’hui ses prospects par <span style={{ color: 'var(--waka-orange)' }}>campagnes ciblées</span>.
        </h1>
        <p className="subtitle" style={{ marginTop: 16, maxWidth: 1260 }}>
            Segmentation, messages email/SMS/WhatsApp, relances et offres poussées selon les critères disponibles.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 26, marginTop: 42, flex: 1 }}>
            <div className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 20 }}>
                <div className="card-header">
                    <i className="bi bi-bullseye" style={{ color: 'var(--waka-orange)' }}></i>
                    <span>Le modèle actuel</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                    {[
                        { t: 'Segmenter', d: 'Cibler des profils à partir des critères disponibles.' },
                        { t: 'Diffuser', d: 'Envoyer campagnes et offres sur les canaux connus.' },
                        { t: 'Relancer', d: 'Répéter le message quand le profil semble pertinent.' },
                        { t: 'Convertir', d: 'Chercher le bon contact au bon moment.' }
                    ].map((x, idx) => (
                        <div key={x.t} style={{ padding: 18, borderRadius: 14, border: '1px solid var(--orbit-border)', background: 'rgba(255,255,255,.02)' }}>
                            <div className="label" style={{ color: 'var(--waka-orange)', marginBottom: 8 }}>{String(idx + 1).padStart(2, '0')}</div>
                            <div className="title-m" style={{ fontSize: 24, lineHeight: 1.1 }}>{x.t}</div>
                            <div className="body-m" style={{ fontSize: 15, marginTop: 8 }}>{x.d}</div>
                        </div>
                    ))}
                </div>
            </div>

            <div className="card surface" style={{ padding: 34, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 24, borderColor: 'var(--red-green)' }}>
                <div>
                    <div className="card-header">
                        <i className="bi bi-arrow-up-right-circle" style={{ color: 'var(--red-green)' }}></i>
                        <span>La limite naturelle</span>
                    </div>
                    <div style={{ fontSize: 44, fontWeight: 800, lineHeight: 1.04, color: 'var(--orbit-text-1)', marginTop: 28 }}>
                        Le ciblage sait <span style={{ color: 'var(--waka-orange)' }}>qui</span> contacter.<br />
                        Il sait moins <span style={{ color: 'var(--red-green)' }}>pourquoi</span>, <span style={{ color: 'var(--waka-cyan)' }}>quand</span> et <span style={{ color: 'var(--red-green)' }}>comment</span>.
                    </div>
                    <p className="body-l" style={{ marginTop: 28, maxWidth: 720 }}>
                        Ce n’est pas un mauvais modèle. C’est un modèle qui atteint ses limites quand la décision dépend du contexte intime de chaque maman.
                    </p>
                </div>
                <div className="strip" style={{ justifyContent: 'space-around' }}>
                    <span>Profil</span>
                    <span className="sep">→</span>
                    <span>Message</span>
                    <span className="sep">→</span>
                    <span>Relance</span>
                    <span className="sep">→</span>
                    <span style={{ color: 'var(--waka-orange)' }}>Moment incertain</span>
                </div>
            </div>
        </div>
    </div>
    <ChromeBottom chapter="Contexte Optimom" />
</>;

const Slide03_LimitesCampagnes = () => {
    const cards = [
        {
            i: 'bi-person-lines-fill',
            c: 'var(--waka-orange)',
            t: 'Personnalisation limitée',
            d: 'Une campagne cible un profil. Elle ne connaît pas réellement la situation, les intentions et les craintes de chaque maman.'
        },
        {
            i: 'bi-bell-slash-fill',
            c: 'var(--waka-cyan)',
            t: 'Relances mal perçues',
            d: 'Quand le message arrive sans contexte utile, il peut être vécu comme une pression, une répétition ou du spam.'
        },
        {
            i: 'bi-clock-history',
            c: 'var(--red-green)',
            t: 'Timing imparfait',
            d: 'Le bon moment se détecte dans les échanges : besoin latent, urgence, objection, fenêtre de décision.'
        }
    ];
    return <>
        <ChromeTop section="LIMITES" slideNum={3} total={window.TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">02</span>LIMITES DES CAMPAGNES CLASSIQUES<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1480 }}>
                Le sujet n’est pas d’envoyer plus. C’est de <span style={{ color: 'var(--waka-orange)' }}>mieux comprendre</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 16, maxWidth: 1320 }}>
                Sans dialogue utile, l’offre reste poussée depuis l’extérieur — parfois trop tôt, parfois trop tard, parfois à côté.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 48, flex: 1 }}>
                {cards.map((card, idx) => (
                    <div key={card.t} className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 18, borderTop: `3px solid ${card.c}` }}>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                            <i className={`bi ${card.i}`} style={{ fontSize: 44, color: card.c }}></i>
                            <span className="label" style={{ color: card.c }}>0{idx + 1}</span>
                        </div>
                        <div className="title-m" style={{ fontSize: 34, lineHeight: 1.05 }}>{card.t}</div>
                        <div className="body-m" style={{ fontSize: 21, lineHeight: 1.45 }}>{card.d}</div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 28, justifyContent: 'space-around' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Pas de connaissance réelle du profil</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Compréhension faible des intentions</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Craintes rarement captées</span>
            </div>
        </div>
        <ChromeBottom chapter="Limites des campagnes" />
    </>;
};

const Slide04_ChangementParadigme = () => <>
    <ChromeTop section="RUPTURE" slideNum={4} total={window.TOTAL_SLIDES} />
    <div className="slide-body">
        <div className="eyebrow"><span className="num">03</span>CHANGEMENT DE PARADIGME<span className="bar"></span></div>
        <h1 className="title-l" style={{ maxWidth: 1540 }}>
            Passer de l’offre poussée à la <span style={{ color: 'var(--waka-orange)' }}>relation utile</span>.
        </h1>
        <p className="subtitle" style={{ marginTop: 16, maxWidth: 1280 }}>
            La maman accepte de dialoguer si l’agent l’aide réellement : répondre, rassurer, orienter, puis proposer.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 26, marginTop: 42, flex: 1 }}>
            <div className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 20 }}>
                <div className="card-header">
                    <i className="bi bi-send-fill" style={{ color: 'var(--orbit-text-3)' }}></i>
                    <span>Campagne classique</span>
                </div>
                <div style={{ fontSize: 46, fontWeight: 800, lineHeight: 1.05, color: 'var(--orbit-text-1)' }}>
                    Pousser une offre<br />
                    vers un segment.
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 10 }}>
                    {[
                        'Critères disponibles',
                        'Message défini à l’avance',
                        'Relance selon scénario',
                        'Conversion dépendante du timing'
                    ].map(x => (
                        <div key={x} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 10, background: 'rgba(255,255,255,.025)', border: '1px solid var(--orbit-border)' }}>
                            <i className="bi bi-dot" style={{ fontSize: 22, color: 'var(--orbit-text-3)' }}></i>
                            <span className="body-m" style={{ fontSize: 18 }}>{x}</span>
                        </div>
                    ))}
                </div>
            </div>

            <div className="card surface" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 20, borderColor: 'var(--waka-orange)' }}>
                <div className="card-header">
                    <i className="bi bi-heart-pulse-fill" style={{ color: 'var(--waka-orange)' }}></i>
                    <span>Agent accompagnant</span>
                </div>
                <div style={{ fontSize: 46, fontWeight: 800, lineHeight: 1.05, color: 'var(--orbit-text-1)' }}>
                    Construire une relation<br />
                    avec chaque maman.
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 10 }}>
                    {[
                        'Répond aux questions',
                        'Mémorise le contexte partagé',
                        'Détecte besoin, crainte et intention',
                        'Propose quand l’offre devient utile'
                    ].map(x => (
                        <div key={x} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px', borderRadius: 10, background: 'rgba(232,131,42,.055)', border: '1px solid rgba(232,131,42,.35)' }}>
                            <i className="bi bi-check-circle-fill" style={{ fontSize: 18, color: 'var(--red-green)' }}></i>
                            <span className="body-m" style={{ fontSize: 18, color: 'var(--orbit-text-1)' }}>{x}</span>
                        </div>
                    ))}
                </div>
            </div>
        </div>

        <div style={{ marginTop: 28, padding: '18px 26px', borderRadius: 14, border: '1px solid var(--red-green)', background: 'rgba(45,190,96,.06)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 26 }}>
            <div>
                <div className="label" style={{ color: 'var(--red-green)' }}>PRINCIPE DIRECTEUR</div>
                <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--orbit-text-1)', marginTop: 4 }}>
                    Aider d’abord. Comprendre ensuite. Proposer seulement quand le moment est pertinent.
                </div>
            </div>
            <i className="bi bi-arrow-right-circle-fill" style={{ fontSize: 42, color: 'var(--red-green)', flexShrink: 0 }}></i>
        </div>
    </div>
    <ChromeBottom chapter="Changement de paradigme" />
</>;

const Slide05_SectionConfiance = () => (
    <SectionDivider
        num="01"
        label="RELATION DE CONFIANCE"
        kicker="Aider d’abord, proposer ensuite"
        title="La confiance avant la conversion"
        slideNum={5}
        total={window.TOTAL_SLIDES}
        totalSections={4}
    />
);

Object.assign(window, {
    Slide01_Cover,
    Slide02_ContexteOptimom,
    Slide03_LimitesCampagnes,
    Slide04_ChangementParadigme,
    Slide05_SectionConfiance
});