const Slide06_AgentPersonnel = () => {
    const roles = [
        {
            label: 'CÔTÉ MAMAN',
            icon: 'bi-heart-fill',
            color: 'var(--waka-orange)',
            title: 'Un accompagnant personnel',
            bullets: [
                'Répond aux questions',
                'Rassure dans les moments sensibles',
                'Mémorise le contexte',
                'Aide à décider sans pression'
            ],
            foot: 'Confiance · conseil · orientation'
        },
        {
            label: 'CÔTÉ OPTIMOM',
            icon: 'bi-graph-up-arrow',
            color: 'var(--red-green)',
            title: 'Un moteur de qualification',
            bullets: [
                'Comprend la situation',
                'Détecte les signaux utiles',
                'Identifie l’appétence',
                'Active la conversion au bon moment'
            ],
            foot: 'Qualification · signaux · conversion'
        }
    ];

    return <>
        <ChromeTop section="RELATION DE CONFIANCE" slideNum={6} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">06</span>AGENT PERSONNEL MAMAN<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                Pas un vendeur frontal : <span style={{ color: 'var(--waka-orange)' }}>un accompagnant</span> qui gagne la confiance.
            </h1>
            <p className="subtitle" style={{ marginTop: 14, maxWidth: 1320 }}>
                La relation commence par l’aide. La proposition commerciale arrive ensuite, quand le besoin, le moment et l’offre sont alignés.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, marginTop: 34, flex: 1 }}>
                {roles.map(r => (
                    <div key={r.label} className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', gap: 22, borderTop: `4px solid ${r.color}` }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 20 }}>
                            <div>
                                <div className="label" style={{ color: r.color }}>{r.label}</div>
                                <div className="title-m" style={{ marginTop: 10, fontSize: 38 }}>{r.title}</div>
                            </div>
                            <div style={{ width: 72, height: 72, borderRadius: 18, border: `1px solid ${r.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(255,255,255,.03)' }}>
                                <i className={`bi ${r.icon}`} style={{ fontSize: 34, color: r.color }}></i>
                            </div>
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                            {r.bullets.map((b, idx) => (
                                <div key={b} style={{ padding: '16px 18px', borderRadius: 14, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.025)' }}>
                                    <div style={{ fontSize: 12, fontWeight: 800, letterSpacing: 2, color: r.color, marginBottom: 8 }}>0{idx + 1}</div>
                                    <div style={{ fontSize: 21, fontWeight: 700, lineHeight: 1.2, color: 'var(--orbit-text-1)' }}>{b}</div>
                                </div>
                            ))}
                        </div>

                        <div style={{ marginTop: 'auto', padding: '16px 20px', borderRadius: 14, border: `1px solid ${r.color}`, background: 'rgba(255,255,255,.025)', display: 'flex', alignItems: 'center', gap: 14 }}>
                            <i className="bi bi-check-circle-fill" style={{ color: r.color, fontSize: 22 }}></i>
                            <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--orbit-text-1)' }}>{r.foot}</div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
        <ChromeBottom chapter="Agent personnel" />
    </>;
};

const Slide07_BoiteOutils = () => {
    const groups = [
        {
            title: 'Avant naissance',
            color: 'var(--waka-orange)',
            icon: 'bi-calendar-heart',
            tools: ['Conseil prénatal', 'Informations grossesse', 'Préparation accouchement', 'Checklist naissance']
        },
        {
            title: 'Jeune maman',
            color: 'var(--red-green)',
            icon: 'bi-person-hearts',
            tools: ['Premiers mois', 'Conseil jeune maman', 'Démarches utiles', 'Rappels utiles']
        },
        {
            title: 'Décision & achats',
            color: 'var(--waka-cyan)',
            icon: 'bi-bag-check-fill',
            tools: ['Équipement bébé', 'Garde / crèche', 'Comparer les options', 'Prioriser les achats']
        }
    ];

    return <>
        <ChromeTop section="OUTILS UTILES" slideNum={7} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">07</span>BOÎTE À OUTILS DE L’AGENT<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1480 }}>
                L’agent devient utile <span style={{ color: 'var(--waka-orange)' }}>avant</span> de devenir commercial.
            </h1>
            <p className="subtitle" style={{ marginTop: 14, maxWidth: 1280 }}>
                Il accompagne les décisions concrètes d’une future maman ou jeune maman, puis relie naturellement le besoin aux offres disponibles.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 34, flex: 1 }}>
                {groups.map(g => (
                    <div key={g.title} className="card" style={{ padding: 30, display: 'flex', flexDirection: 'column', gap: 20, borderTop: `4px solid ${g.color}` }}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                            <div style={{ width: 64, height: 64, borderRadius: 16, border: `1px solid ${g.color}`, display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(255,255,255,.03)' }}>
                                <i className={`bi ${g.icon}`} style={{ fontSize: 30, color: g.color }}></i>
                            </div>
                            <div>
                                <div className="label" style={{ color: g.color }}>OUTILS</div>
                                <div className="title-m" style={{ fontSize: 32, marginTop: 4 }}>{g.title}</div>
                            </div>
                        </div>

                        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 12 }}>
                            {g.tools.map((t, idx) => (
                                <div key={t} style={{ padding: '14px 16px', borderRadius: 12, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.025)', display: 'flex', alignItems: 'center', gap: 12 }}>
                                    <span style={{ width: 28, height: 28, borderRadius: '50%', border: `1px solid ${g.color}`, color: g.color, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800 }}>0{idx + 1}</span>
                                    <span style={{ fontSize: 20, fontWeight: 650, color: 'var(--orbit-text-1)' }}>{t}</span>
                                </div>
                            ))}
                        </div>

                        <div style={{ marginTop: 'auto', height: 1, background: 'var(--orbit-border-strong)' }}></div>
                        <div className="body-m" style={{ fontSize: 16 }}>
                            Chaque outil crée une raison légitime de dialoguer, sans forcer une offre.
                        </div>
                    </div>
                ))}
            </div>

            <div className="strip" style={{ marginTop: 24, justifyContent: 'space-around' }}>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Aider</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-cyan)' }}>◆</span> Comprendre</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--red-green)' }}>◆</span> Orienter</span>
                <span className="sep">/</span>
                <span><span style={{ color: 'var(--waka-orange)' }}>◆</span> Proposer au bon moment</span>
            </div>
        </div>
        <ChromeBottom chapter="Boîte à outils" />
    </>;
};

const Slide08_InfosNaturelles = () => {
    const infoGroups = [
        {
            title: 'Situation',
            color: 'var(--waka-orange)',
            items: ['Stade de grossesse', 'Entourage', 'Contraintes', 'Urgence']
        },
        {
            title: 'Intention',
            color: 'var(--waka-cyan)',
            items: ['Besoins', 'Priorités', 'Préférences', 'Canal préféré']
        },
        {
            title: 'Freins',
            color: 'var(--red-green)',
            items: ['Craintes', 'Objections', 'Budget si exprimé', 'Choix difficiles']
        }
    ];

    return <>
        <ChromeTop section="SIGNAUX VIVANTS" slideNum={8} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">08</span>INFORMATIONS PARTAGÉES NATURELLEMENT<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1500 }}>
                La donnée la plus utile ne vient pas d’un formulaire : elle vient de la <span style={{ color: 'var(--waka-orange)' }}>confiance</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 14, maxWidth: 1300 }}>
                Quand l’agent aide réellement, la maman partage son contexte, ses intentions et ses craintes dans la conversation.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1.5fr', gap: 28, marginTop: 34, flex: 1 }}>
                <div className="card" style={{ padding: 34, display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 24, borderLeft: '4px solid var(--waka-orange)' }}>
                    <div className="quote-block" style={{ margin: 0 }}>
                        <div style={{ fontSize: 32, lineHeight: 1.28, color: 'var(--orbit-text-1)', fontWeight: 650 }}>
                            « Je ne remplis pas un profil. Je discute avec quelqu’un qui m’aide. »
                        </div>
                    </div>
                    <div className="body-m" style={{ fontSize: 19 }}>
                        Ce changement transforme des données froides en signaux vivants, contextualisés et actionnables.
                    </div>
                    <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                        <span className="tag orange">Confiance</span>
                        <span className="tag">Conversation</span>
                        <span className="tag" style={{ borderColor: 'var(--red-green)', color: 'var(--red-green)' }}>Signaux utiles</span>
                    </div>
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
                    {infoGroups.map(g => (
                        <div key={g.title} className="card" style={{ padding: 24, display: 'flex', flexDirection: 'column', gap: 16, borderTop: `3px solid ${g.color}` }}>
                            <div>
                                <div className="label" style={{ color: g.color }}>PARTAGÉ EN DISCUSSION</div>
                                <div className="title-m" style={{ fontSize: 29, marginTop: 8 }}>{g.title}</div>
                            </div>
                            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                                {g.items.map(item => (
                                    <div key={item} style={{ padding: '12px 14px', borderRadius: 12, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.025)', fontSize: 18, fontWeight: 650, color: 'var(--orbit-text-1)' }}>
                                        {item}
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Informations naturelles" />
    </>;
};

const Slide09_SignauxDonnees = () => {
    const classic = ['Segmentation', 'Critères disponibles', 'Campagnes', 'Relances'];
    const signals = ['Intention', 'Besoin latent', 'Urgence', 'Appétence', 'Objection', 'Contrainte', 'Fenêtre de décision', 'Offre pertinente'];

    return <>
        <ChromeTop section="BON MOMENT" slideNum={9} total={TOTAL_SLIDES} />
        <div className="slide-body">
            <div className="eyebrow"><span className="num">09</span>SIGNAUX CONVERSATIONNELS + DONNÉES CLASSIQUES<span className="bar"></span></div>
            <h1 className="title-l" style={{ maxWidth: 1560 }}>
                Le bon moment apparaît quand les données classiques rencontrent les <span style={{ color: 'var(--waka-orange)' }}>signaux vivants</span>.
            </h1>
            <p className="subtitle" style={{ marginTop: 14, maxWidth: 1280 }}>
                L’agent ne pousse pas une offre au hasard : il relie contexte, intention, appétence et fenêtre de décision.
            </p>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 90px 1fr 90px 1.05fr', gap: 18, alignItems: 'stretch', marginTop: 36, flex: 1 }}>
                <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 18, borderTop: '4px solid var(--waka-cyan)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                        <i className="bi bi-database-fill" style={{ fontSize: 34, color: 'var(--waka-cyan)' }}></i>
                        <div>
                            <div className="label" style={{ color: 'var(--waka-cyan)' }}>SOURCE 1</div>
                            <div className="title-m" style={{ fontSize: 30 }}>Données classiques</div>
                        </div>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                        {classic.map(item => (
                            <div key={item} style={{ padding: '15px 14px', borderRadius: 12, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.025)', fontSize: 18, fontWeight: 650, color: 'var(--orbit-text-1)' }}>
                                {item}
                            </div>
                        ))}
                    </div>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i className="bi bi-plus-circle-fill" style={{ fontSize: 46, color: 'var(--orbit-text-3)' }}></i>
                </div>

                <div className="card" style={{ padding: 26, display: 'flex', flexDirection: 'column', gap: 18, borderTop: '4px solid var(--waka-orange)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                        <i className="bi bi-chat-heart-fill" style={{ fontSize: 34, color: 'var(--waka-orange)' }}></i>
                        <div>
                            <div className="label" style={{ color: 'var(--waka-orange)' }}>SOURCE 2</div>
                            <div className="title-m" style={{ fontSize: 30 }}>Signaux conversationnels</div>
                        </div>
                    </div>
                    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                        {signals.map(item => (
                            <span key={item} className="tag orange" style={{ fontSize: 12 }}>{item}</span>
                        ))}
                    </div>
                    <div className="body-m" style={{ fontSize: 16 }}>
                        Ces signaux naissent pendant l’échange, puis enrichissent la compréhension du profil.
                    </div>
                </div>

                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i className="bi bi-arrow-right-circle-fill" style={{ fontSize: 48, color: 'var(--waka-orange)' }}></i>
                </div>

                <div className="card" style={{ padding: 30, display: 'flex', flexDirection: 'column', gap: 20, borderTop: '4px solid var(--red-green)', background: 'rgba(45,190,96,.06)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                        <i className="bi bi-bullseye" style={{ fontSize: 38, color: 'var(--red-green)' }}></i>
                        <div>
                            <div className="label" style={{ color: 'var(--red-green)' }}>SORTIE</div>
                            <div className="title-m" style={{ fontSize: 34 }}>Détection du bon moment</div>
                        </div>
                    </div>

                    <div className="kpi">
                        <div className="val green" style={{ fontSize: 64 }}>Offre</div>
                        <div className="label">pertinente · au bon canal · au bon instant</div>
                    </div>

                    <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 10, marginTop: 'auto' }}>
                        {['Pendant le chat', 'À froid via email', 'À froid via SMS', 'À froid via WhatsApp'].map(item => (
                            <div key={item} style={{ padding: '12px 14px', borderRadius: 12, border: '1px solid var(--orbit-border-strong)', background: 'rgba(255,255,255,.025)', display: 'flex', alignItems: 'center', gap: 10 }}>
                                <i className="bi bi-arrow-return-right" style={{ color: 'var(--red-green)', fontSize: 18 }}></i>
                                <span style={{ fontSize: 17, fontWeight: 650, color: 'var(--orbit-text-1)' }}>{item}</span>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
        <ChromeBottom chapter="Signaux et données" />
    </>;
};

const Slide10_SectionMarketplace = () =>
    <SectionDivider
        num="02"
        label="MARKETPLACE RELATIONNELLE"
        kicker="Des signaux vers les offres"
        title="La marketplace devient relationnelle."
        slideNum={10}
        total={TOTAL_SLIDES}
        totalSections={4}
    />;

Object.assign(window, {
    Slide06_AgentPersonnel,
    Slide07_BoiteOutils,
    Slide08_InfosNaturelles,
    Slide09_SignauxDonnees,
    Slide10_SectionMarketplace
});