const Slide11_MarketplaceOffres = () => {
    const families = [
        { i: 'bi-box-seam-fill', t: 'Produits du quotidien', d: 'Couches, équipement bébé, articles utiles dans les premiers mois.', c: 'var(--waka-orange)' },
        { i: 'bi-shield-check', t: 'Protection & services', d: 'Assurance, démarches, services adaptés aux moments de vie.', c: 'var(--red-green)' },
        { i: 'bi-house-heart-fill', t: 'Accueil du bébé', d: 'Lit bébé, préparation naissance, solutions pour la maison.', c: 'var(--waka-cyan)' },
        { i: 'bi-people-fill', t: 'Garde & crèche', d: 'Offres liées à la garde, crèche et organisation familiale.', c: 'var(--red-green)' }
    ];

    return <>
        <ChromeTop section="MARKETPLACE" slideNum={11} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">11</span>VENDEURS & OFFRES<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                La marketplace n’est plus un catalogue : <span style={{ color: 'var(--waka-orange)' }}>chaque offre devient activable</span>.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1320, marginTop: 14 }}>
                Optimom embarque vendeurs, partenaires et offres dans un parcours conversationnel capable de guider, expliquer et convertir.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1.25fr', gap: 24, marginTop: 28, flex: 1 }}>
                <div className="card" style={{ padding: 30, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 18 }}>
                    <div>
                        <div className="label" style={{ color: 'var(--waka-orange)' }}>PRINCIPE</div>
                        <div className="title-m" style={{ fontSize: 36, lineHeight: 1.08, marginTop: 12 }}>
                            Une offre n’attend plus d’être trouvée.
                        </div>
                        <div className="body-m" style={{ marginTop: 16, maxWidth: 620 }}>
                            Elle peut être proposée au bon moment, dans le bon contexte, avec les bons arguments pour chaque maman.
                        </div>
                    </div>

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                        {['Vendeur', 'Offre', 'Moment utile', 'Conversation'].map((x, idx) => (
                            <div key={x} style={{ padding: 16, borderRadius: 12, 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)' : idx === 2 ? 'var(--red-green)' : 'var(--orbit-text-2)' }}>{String(idx + 1).padStart(2, '0')}</div>
                                <div style={{ fontSize: 22, color: 'var(--orbit-text-1)', fontWeight: 800, marginTop: 6 }}>{x}</div>
                            </div>
                        ))}
                    </div>

                    <div className="strip" style={{ justifyContent: 'center', fontSize: 12 }}>
                        <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Parcours conversationnel</span>
                        <span className="sep">/</span>
                        <span><span style={{ color: 'var(--red-green)' }}>◆</span> Offres contextualisées</span>
                    </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    {families.map(f => (
                        <div key={f.t} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 12, borderTop: `3px solid ${f.c}` }}>
                            <i className={`bi ${f.i}`} style={{ fontSize: 34, color: f.c }}></i>
                            <div className="title-m" style={{ fontSize: 26, lineHeight: 1.12 }}>{f.t}</div>
                            <div className="body-m" style={{ fontSize: 16, lineHeight: 1.45 }}>{f.d}</div>
                            <div style={{ marginTop: 'auto', paddingTop: 12, borderTop: '1px solid var(--orbit-border-strong)', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                                <span className="tag">VENDEUR</span>
                                <span className="tag orange">OFFRE</span>
                                <span className="tag" style={{ borderColor: f.c, color: f.c }}>ACTIVABLE</span>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Marketplace relationnelle" />
    </>;
};

const Slide12_AgentsOffre = () => {
    const steps = [
        { n: '01', t: 'Offre', d: 'Produit ou service embarqué dans la marketplace.', i: 'bi-bag-heart-fill', c: 'var(--waka-orange)' },
        { n: '02', t: 'Agent d’offre', d: 'Présente, explique et adapte le discours.', i: 'bi-stars', c: 'var(--waka-cyan)' },
        { n: '03', t: 'Argumentaire', d: 'Informations utiles selon le contexte maman.', i: 'bi-chat-square-text-fill', c: 'var(--red-green)' },
        { n: '04', t: 'Objections', d: 'Réponses aux freins, craintes et contraintes.', i: 'bi-shield-fill-check', c: 'var(--waka-orange)' },
        { n: '05', t: 'Conversion', d: 'Passage à l’action quand le moment est juste.', i: 'bi-check-circle-fill', c: 'var(--red-green)' }
    ];

    return <>
        <ChromeTop section="AGENTS D’OFFRE" slideNum={12} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">12</span>UN AGENT PAR OFFRE<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1460 }}>
                Chaque offre peut avoir son <span style={{ color: 'var(--waka-cyan)' }}>agent dédié</span> pour convaincre sans forcer.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1260, marginTop: 14 }}>
                L’agent d’offre intervient quand une maman visite l’offre ou pendant une vente en salle de vente.
            </p>

            <div style={{ marginTop: 34, flex: 1, display: 'flex', flexDirection: 'column', gap: 24 }}>
                <div className="card" style={{ padding: 30, position: 'relative' }}>
                    <div style={{ position: 'absolute', left: 96, right: 96, top: 112, height: 2, background: 'linear-gradient(90deg, var(--waka-orange), var(--waka-cyan), var(--red-green))' }}></div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, position: 'relative', zIndex: 2 }}>
                        {steps.map(s => (
                            <div key={s.n} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 12 }}>
                                <div className="step-num" style={{ width: 76, height: 76, fontSize: 22, background: 'var(--orbit-bg)', borderColor: s.c, color: s.c }}>
                                    {s.n}
                                </div>
                                <div style={{ padding: '18px 14px', borderRadius: 14, border: `1px solid ${s.c}`, background: 'rgba(255,255,255,.03)', minHeight: 190, width: '100%' }}>
                                    <i className={`bi ${s.i}`} style={{ fontSize: 34, color: s.c }}></i>
                                    <div className="title-m" style={{ fontSize: 24, lineHeight: 1.1, marginTop: 12 }}>{s.t}</div>
                                    <div className="body-m" style={{ fontSize: 14, lineHeight: 1.38, marginTop: 10 }}>{s.d}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                    <div className="card" style={{ padding: 24, borderLeft: '3px solid var(--waka-orange)' }}>
                        <div className="label" style={{ color: 'var(--waka-orange)' }}>CAS 1 · VISITE MARKETPLACE</div>
                        <div className="body-l" style={{ fontSize: 24, marginTop: 10, lineHeight: 1.3 }}>
                            La maman consulte une offre : l’agent d’offre fournit les informations utiles et traite les objections.
                        </div>
                    </div>
                    <div className="card" style={{ padding: 24, borderLeft: '3px solid var(--red-green)' }}>
                        <div className="label" style={{ color: 'var(--red-green)' }}>CAS 2 · SALLE DE VENTE</div>
                        <div className="body-l" style={{ fontSize: 24, marginTop: 10, lineHeight: 1.3 }}>
                            La maman exprime un besoin : l’agent personnel appelle les offres pertinentes et prépare la conversion.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Agents d’offre" />
    </>;
};

const Slide13_ListeCadeauxNaissance = () => {
    const inputs = [
        { t: 'Besoins', c: 'var(--waka-orange)' },
        { t: 'Préférences', c: 'var(--waka-cyan)' },
        { t: 'Situation', c: 'var(--red-green)' },
        { t: 'Stade', c: 'var(--waka-orange)' },
        { t: 'Priorités', c: 'var(--waka-cyan)' },
        { t: 'Produits utiles', c: 'var(--red-green)' }
    ];
    const roles = [
        { i: 'bi-list-check', t: 'Construire', d: 'L’agent aide à créer une liste adaptée à la maman.' },
        { i: 'bi-intersect', t: 'Éviter les doublons', d: 'Il repère les articles redondants ou déjà couverts.' },
        { i: 'bi-gift-fill', t: 'Équilibrer', d: 'Il équilibre achats essentiels et cadeaux plaisir.' },
        { i: 'bi-arrow-repeat', t: 'Mettre à jour', d: 'La liste évolue au fil des échanges.' }
    ];

    return <>
        <ChromeTop section="LISTE CADEAUX" slideNum={13} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">13</span>FONCTIONNALITÉ CLÉ<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1520 }}>
                La liste de cadeaux naissance devient un <span style={{ color: 'var(--waka-orange)' }}>moteur de marketplace</span>.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1260, marginTop: 14 }}>
                L’agent aide la maman à construire une liste utile, contextualisée et activable auprès de son entourage.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.15fr', gap: 24, marginTop: 30, flex: 1 }}>
                <div className="card" style={{ padding: 30, display: 'flex', flexDirection: 'column', gap: 20 }}>
                    <div className="label" style={{ color: 'var(--waka-cyan)' }}>À PARTIR DE LA RELATION</div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
                        {inputs.map(x => (
                            <span key={x.t} style={{ padding: '10px 14px', borderRadius: 999, border: `1px solid ${x.c}`, color: x.c, fontSize: 15, fontWeight: 800, letterSpacing: 1 }}>
                                {x.t}
                            </span>
                        ))}
                    </div>

                    <div style={{ marginTop: 8, padding: 22, borderRadius: 14, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.03)' }}>
                        <div className="label" style={{ color: 'var(--waka-orange)' }}>RÉSULTAT</div>
                        <div className="title-m" style={{ fontSize: 32, lineHeight: 1.12, marginTop: 10 }}>
                            Une liste qui ressemble vraiment à la maman.
                        </div>
                        <div className="body-m" style={{ fontSize: 17, marginTop: 12 }}>
                            Elle reflète ses besoins, son moment de vie, ses préférences et les produits utiles dans la marketplace.
                        </div>
                    </div>

                    <div className="strip" style={{ marginTop: 'auto', justifyContent: 'center', fontSize: 12 }}>
                        <span><span style={{ color: 'var(--red-green)' }}>◆</span> Liste vivante</span>
                        <span className="sep">/</span>
                        <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Marketplace activée</span>
                    </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                    {roles.map((r, idx) => (
                        <div key={r.t} className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 14, borderTop: `3px solid ${idx % 2 === 0 ? 'var(--waka-orange)' : 'var(--waka-cyan)'}` }}>
                            <i className={`bi ${r.i}`} style={{ fontSize: 38, color: idx % 2 === 0 ? 'var(--waka-orange)' : 'var(--waka-cyan)' }}></i>
                            <div className="title-m" style={{ fontSize: 28, lineHeight: 1.1 }}>{r.t}</div>
                            <div className="body-m" style={{ fontSize: 16, lineHeight: 1.45 }}>{r.d}</div>
                        </div>
                    ))}

                    <div className="card" style={{ gridColumn: '1 / span 2', padding: 22, background: 'rgba(45,190,96,.06)', borderColor: 'var(--red-green)', display: 'flex', alignItems: 'center', gap: 18 }}>
                        <i className="bi bi-heart-arrow" style={{ fontSize: 42, color: 'var(--red-green)' }}></i>
                        <div>
                            <div className="label" style={{ color: 'var(--red-green)' }}>LEVier SOCIAL</div>
                            <div className="body-l" style={{ fontSize: 22, lineHeight: 1.32, marginTop: 4 }}>
                                La liste ouvre un nouveau cercle de conversion : amis et proches qui veulent offrir utile.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Liste de cadeaux naissance" />
    </>;
};

const Slide14_ActivationAmisProches = () => {
    const flow = [
        { n: '01', t: 'Partage', d: 'La maman partage sa liste de cadeaux.', i: 'bi-share-fill', c: 'var(--waka-orange)' },
        { n: '02', t: 'Contact', d: 'L’agent échange avec amis et proches.', i: 'bi-chat-heart-fill', c: 'var(--waka-cyan)' },
        { n: '03', t: 'Choix guidé', d: 'Il propose des produits adaptés.', i: 'bi-gift-fill', c: 'var(--red-green)' },
        { n: '04', t: 'Utilité expliquée', d: 'Il explique pourquoi l’article est utile.', i: 'bi-info-circle-fill', c: 'var(--waka-orange)' },
        { n: '05', t: 'Conversion', d: 'Il évite les doublons et facilite l’achat.', i: 'bi-bag-check-fill', c: 'var(--red-green)' }
    ];

    return <>
        <ChromeTop section="ENTOURAGE" slideNum={14} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">14</span>AMIS & PROCHES<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                La marketplace s’étend au cercle de confiance de la maman.
            </h1>
            <p className="subtitle" style={{ maxWidth: 1320, marginTop: 14 }}>
                L’agent guide les proches qui veulent offrir, tout en gardant la liste cohérente et utile.
            </p>

            <div style={{ marginTop: 34, flex: 1, display: 'grid', gridTemplateRows: '1fr auto', gap: 24 }}>
                <div className="card" style={{ padding: 30, position: 'relative' }}>
                    <div style={{ position: 'absolute', left: 110, right: 110, top: 104, height: 2, background: 'linear-gradient(90deg, var(--waka-orange), var(--waka-cyan), var(--red-green))' }}></div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 18, position: 'relative', zIndex: 2 }}>
                        {flow.map(f => (
                            <div key={f.n} style={{ textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
                                <div className="step-num" style={{ width: 74, height: 74, background: 'var(--orbit-bg)', borderColor: f.c, color: f.c }}>
                                    {f.n}
                                </div>
                                <div style={{ width: '100%', minHeight: 220, padding: '20px 14px', borderRadius: 14, border: `1px solid ${f.c}`, background: 'rgba(255,255,255,.03)' }}>
                                    <i className={`bi ${f.i}`} style={{ fontSize: 34, color: f.c }}></i>
                                    <div className="title-m" style={{ fontSize: 23, lineHeight: 1.1, marginTop: 14 }}>{f.t}</div>
                                    <div className="body-m" style={{ fontSize: 14, lineHeight: 1.38, marginTop: 10 }}>{f.d}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 18 }}>
                    <div className="card" style={{ padding: 24, borderLeft: '3px solid var(--waka-orange)' }}>
                        <div className="label" style={{ color: 'var(--waka-orange)' }}>EFFET MARKETPLACE</div>
                        <div className="body-l" style={{ fontSize: 23, lineHeight: 1.3, marginTop: 8 }}>
                            Chaque liste partagée crée de nouvelles occasions de découverte et d’achat dans la marketplace.
                        </div>
                    </div>
                    <div className="card" style={{ padding: 24, borderLeft: '3px solid var(--waka-cyan)' }}>
                        <div className="label" style={{ color: 'var(--waka-cyan)' }}>EFFET CONFIANCE</div>
                        <div className="body-m" style={{ fontSize: 17, lineHeight: 1.45, marginTop: 8 }}>
                            Le proche comprend l’utilité du cadeau et choisit plus facilement.
                        </div>
                    </div>
                    <div className="card" style={{ padding: 24, borderLeft: '3px solid var(--red-green)' }}>
                        <div className="label" style={{ color: 'var(--red-green)' }}>EFFET CONVERSION</div>
                        <div className="body-m" style={{ fontSize: 17, lineHeight: 1.45, marginTop: 8 }}>
                            L’agent réduit les hésitations, les doublons et les abandons.
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Activation amis et proches" />
    </>;
};

const Slide15_SectionFlux = () => (
    <SectionDivider
        num="03"
        label="TROIS FLUX"
        kicker="Visite · besoin · anticipation"
        title="Trois flux de conversion"
        slideNum={15}
        total={TOTAL_SLIDES}
        totalSections={4}
    />
);

Object.assign(window, {
    Slide11_MarketplaceOffres,
    Slide12_AgentsOffre,
    Slide12_AgentsDOffre: Slide12_AgentsOffre,
    Slide13_ListeCadeauxNaissance,
    Slide13_ListeCadeaux: Slide13_ListeCadeauxNaissance,
    Slide14_ActivationAmisProches,
    Slide14_ActivationProches: Slide14_ActivationAmisProches,
    Slide14_ActivationAmis: Slide14_ActivationAmisProches,
    Slide15_SectionFlux
});