/* global React, Icon, SectionHeader */

const ServicesPage = ({ navigate }) => {

    const services = [
        {
            icon: 'building',
            title: 'Bureaux & Locaux professionnels',
            tagline: 'Le quotidien de vos équipes, sans souci.',
            desc: 'Entretien régulier (quotidien, hebdo, mensuel) de vos bureaux, salles de réunion, sanitaires et espaces communs. Adapté à vos horaires.',
            features: ['Planning sur mesure', 'Produits éco-labellisés', 'Équipe dédiée', 'Suivi qualité mensuel'],
            color: 'blue',
        },
        {
            icon: 'home',
            title: 'Maisons & Appartements',
            tagline: 'Un service à domicile haut de gamme.',
            desc: 'Ménage régulier, repassage, vitres, sols. Une intervention ponctuelle ou récurrente, toujours avec la même personne autant que possible.',
            features: ['Ponctuel ou récurrent', 'Personne référente', 'Produits adaptés', 'Garantie satisfaction'],
            color: 'green',
        },
        {
            icon: 'window',
            title: 'Vitres & Vitrines',
            tagline: 'Une transparence sans compromis.',
            desc: 'Nettoyage de vitrines commerciales, baies vitrées, miroirs et façades. Tout type d\'accès, intérieur comme extérieur.',
            features: ['Vitrines commerce', 'Baies & verrières', 'Matériel pro', 'Tous niveaux'],
            color: 'blue',
        },
        {
            icon: 'sparkles',
            title: 'Remise en état',
            tagline: 'Pour les grandes étapes de votre vie.',
            desc: 'Nettoyage de fin de chantier, après déménagement, ou pour préparer un état des lieux. Intervention rapide et complète.',
            features: ['Fin de chantier', 'Après déménagement', 'État des lieux', 'Intervention 48h'],
            color: 'green',
        },
        {
            icon: 'broom',
            title: 'Copropriétés & Parties communes',
            tagline: 'Des espaces collectifs irréprochables.',
            desc: 'Entretien régulier des halls, escaliers, ascenseurs et locaux poubelles. Une relation directe avec votre syndic.',
            features: ['Halls & escaliers', 'Ascenseurs', 'Locaux techniques', 'Coordination syndic'],
            color: 'blue',
        },
        {
            icon: 'shield',
            title: 'Désinfection & Sanitaire',
            tagline: 'Une hygiène professionnelle certifiée.',
            desc: 'Protocoles renforcés pour environnements sensibles : cabinets médicaux, crèches, restauration, lieux de passage.',
            features: ['Protocoles renforcés', 'Produits certifiés', 'Traçabilité', 'Personnel formé'],
            color: 'green',
        },
    ];

    return (
        <main className="page-enter">

            {/* PAGE HEADER */}
            <section style={{ paddingBlock: 'clamp(3rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3rem)' }}>
                <div className="sme-container">
                    <div style={{ maxWidth: 760 }}>
                        <span className="eyebrow">Nos prestations</span>
                        <h1 style={{ marginTop: '1.2rem' }}>
                            Des services <span style={{ color: 'var(--sme-blue)' }}>complets</span>,
                            pour chaque besoin.
                        </h1>
                        <p style={{ marginTop: '1.5rem', fontSize: '1.13rem', color: 'var(--sme-grey-600)' }}>
                            Particuliers, professionnels, syndics : nous adaptons nos prestations à votre rythme,
                            vos contraintes et vos exigences. Toujours avec la même équipe, toujours avec la même rigueur.
                        </p>
                        <div style={{ marginTop: '2rem', display: 'flex', gap: '0.8rem', flexWrap: 'wrap' }}>
                            <button className="btn btn-primary" onClick={() => navigate('contact')}>
                                Demander un devis <Icon name="arrow" size={16}/>
                            </button>
                            <a href="tel:0768536516" className="btn btn-ghost">
                                <Icon name="phone" size={16}/> 07 68 53 65 16
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            {/* SERVICES GRID — large cards */}
            <section style={{ paddingTop: 0 }}>
                <div className="sme-container">
                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
                        gap: '1.5rem',
                    }}>
                        {services.map((s) => {
                            const accent = s.color === 'blue' ? 'var(--sme-blue)' : 'var(--sme-green)';
                            const accentSoft = s.color === 'blue' ? 'var(--sme-blue-soft)' : 'var(--sme-green-soft)';
                            return (
                                <article key={s.title} className="sme-card" style={{
                                    padding: '2rem',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    gap: '1.3rem',
                                }}>
                                    <div style={{
                                        display: 'flex',
                                        alignItems: 'flex-start',
                                        gap: '1.2rem',
                                    }}>
                                        <div style={{
                                            width: 64, height: 64,
                                            borderRadius: 16,
                                            background: accentSoft,
                                            color: accent,
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            flexShrink: 0,
                                        }}>
                                            <Icon name={s.icon} size={30}/>
                                        </div>
                                        <div>
                                            <h3 style={{ fontSize: '1.2rem', marginBottom: '0.4rem' }}>{s.title}</h3>
                                            <p style={{
                                                color: accent,
                                                fontFamily: 'Poppins',
                                                fontWeight: 500,
                                                fontSize: '0.9rem',
                                            }}>{s.tagline}</p>
                                        </div>
                                    </div>

                                    <p style={{ color: 'var(--sme-grey-600)', fontSize: '0.95rem' }}>{s.desc}</p>

                                    <ul style={{
                                        listStyle: 'none', padding: 0, margin: 0,
                                        display: 'grid',
                                        gridTemplateColumns: '1fr 1fr',
                                        gap: '0.6rem',
                                    }}>
                                        {s.features.map(f => (
                                            <li key={f} style={{
                                                display: 'flex',
                                                alignItems: 'center',
                                                gap: 8,
                                                fontSize: '0.86rem',
                                                color: 'var(--sme-grey-900)',
                                            }}>
                                                <Icon name="check" size={14} stroke={2.5}/> {f}
                                            </li>
                                        ))}
                                    </ul>

                                    <button onClick={() => navigate('contact')} style={{
                                        background: 'none', border: 'none', padding: 0,
                                        color: accent,
                                        fontFamily: 'Poppins, sans-serif',
                                        fontWeight: 600,
                                        fontSize: '0.9rem',
                                        display: 'inline-flex',
                                        alignItems: 'center',
                                        gap: 6,
                                        cursor: 'pointer',
                                        marginTop: 'auto',
                                        alignSelf: 'flex-start',
                                    }}>
                                        Demander un devis <Icon name="arrow" size={14}/>
                                    </button>
                                </article>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* HOW IT WORKS */}
            <section style={{ background: 'var(--sme-grey-50)' }}>
                <div className="sme-container">
                    <SectionHeader
                        eyebrow="Comment ça marche"
                        title="De la demande à l'intervention, en 4 étapes."
                        center
                    />

                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                        gap: '1.5rem',
                        position: 'relative',
                    }}>
                        {[
                            { n: 1, title: 'Votre demande', desc: 'Par téléphone ou via le formulaire. On vous rappelle vite.' },
                            { n: 2, title: 'Visite gratuite', desc: 'On évalue ensemble vos besoins, sur place ou à distance.' },
                            { n: 3, title: 'Devis 24h', desc: 'Une proposition claire, sans frais cachés, dans les 24h.' },
                            { n: 4, title: 'Intervention', desc: 'Une équipe identifiée commence dès la date convenue.' },
                        ].map(step => (
                            <article key={step.n} style={{ textAlign: 'center' }}>
                                <div style={{
                                    width: 64, height: 64,
                                    borderRadius: '50%',
                                    background: 'white',
                                    border: '2px solid var(--sme-blue)',
                                    color: 'var(--sme-blue)',
                                    fontFamily: 'Poppins',
                                    fontWeight: 600,
                                    fontSize: '1.3rem',
                                    display: 'inline-flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    margin: '0 auto 1rem',
                                }}>{step.n}</div>
                                <h4 style={{ fontSize: '1.05rem', marginBottom: '0.5rem' }}>{step.title}</h4>
                                <p style={{ fontSize: '0.9rem', color: 'var(--sme-grey-600)' }}>{step.desc}</p>
                            </article>
                        ))}
                    </div>
                </div>
            </section>

            {/* ZONES + STATS */}
            <section>
                <div className="sme-container">
                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)',
                        gap: 'clamp(2rem, 5vw, 4rem)',
                        alignItems: 'center',
                    }} className="zones-grid">

                        <div>
                            <span className="eyebrow green">Nos zones d'intervention</span>
                            <h2 style={{ marginTop: '1rem' }}>Paris & toute l'Île-de-France.</h2>
                            <p style={{ marginTop: '1.2rem', color: 'var(--sme-grey-600)', fontSize: '1rem' }}>
                                Nous intervenons dans tous les départements franciliens, avec des équipes
                                basées localement pour une réactivité maximale.
                            </p>

                            <div style={{
                                marginTop: '2rem',
                                display: 'grid',
                                gridTemplateColumns: 'repeat(2, 1fr)',
                                gap: '0.8rem',
                            }}>
                                {['Paris (75)', 'Hauts-de-Seine (92)', 'Seine-Saint-Denis (93)',
                                  'Val-de-Marne (94)', 'Yvelines (78)', 'Val-d\'Oise (95)',
                                  'Essonne (91)', 'Seine-et-Marne (77)'].map(z => (
                                    <div key={z} style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        gap: 8,
                                        fontSize: '0.92rem',
                                        padding: '0.7rem 1rem',
                                        background: 'var(--sme-grey-50)',
                                        borderRadius: 10,
                                    }}>
                                        <Icon name="location" size={14} stroke={2}/> {z}
                                    </div>
                                ))}
                            </div>
                        </div>

                        <div style={{
                            background: 'var(--sme-blue)',
                            borderRadius: 'var(--sme-radius-lg)',
                            padding: 'clamp(2rem, 4vw, 3rem)',
                            color: 'white',
                            position: 'relative',
                            overflow: 'hidden',
                        }}>
                            <div aria-hidden="true" style={{
                                position: 'absolute',
                                bottom: -100, right: -80,
                                width: 280, height: 280,
                                borderRadius: '50%',
                                background: 'rgba(16,185,129,0.25)',
                            }}/>
                            <div style={{ position: 'relative' }}>
                                <h3 style={{ color: 'white', fontSize: '1.3rem', marginBottom: '2rem' }}>
                                    En chiffres
                                </h3>
                                <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                                    {[
                                        { num: '+12', label: "années d'expérience" },
                                        { num: '+200', label: 'clients fidèles' },
                                        { num: '+50', label: 'sites entretenus quotidiennement' },
                                        { num: '24h', label: 'délai moyen pour un devis' },
                                    ].map(s => (
                                        <div key={s.label} style={{
                                            display: 'flex',
                                            alignItems: 'baseline',
                                            gap: '1rem',
                                            paddingBottom: '1rem',
                                            borderBottom: '1px solid rgba(255,255,255,0.15)',
                                        }}>
                                            <div style={{
                                                fontFamily: 'Poppins',
                                                fontWeight: 600,
                                                fontSize: '2rem',
                                                color: 'white',
                                                minWidth: 80,
                                            }}>{s.num}</div>
                                            <div style={{ color: 'rgba(255,255,255,0.85)', fontSize: '0.92rem' }}>{s.label}</div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>

                    <style>{`
                        @media (max-width: 900px) {
                            .zones-grid { grid-template-columns: 1fr !important; }
                        }
                    `}</style>
                </div>
            </section>

            {/* CTA */}
            <section>
                <div className="sme-container">
                    <div style={{
                        background: 'var(--sme-grey-50)',
                        borderRadius: 'var(--sme-radius-lg)',
                        padding: 'clamp(2.5rem, 5vw, 4rem)',
                        textAlign: 'center',
                    }}>
                        <span className="eyebrow green">Un besoin spécifique ?</span>
                        <h2 style={{ marginTop: '1rem', maxWidth: 720, marginInline: 'auto' }}>
                            Parlons-en. Le premier échange est toujours gratuit.
                        </h2>
                        <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', maxWidth: 600, marginInline: 'auto' }}>
                            Décrivez-nous votre projet, on revient vers vous sous 24h avec une proposition adaptée.
                        </p>
                        <div style={{ marginTop: '2rem', display: 'flex', gap: '0.8rem', justifyContent: 'center', flexWrap: 'wrap' }}>
                            <button className="btn btn-primary" onClick={() => navigate('contact')}>
                                Demander un devis <Icon name="arrow" size={16}/>
                            </button>
                            <button className="btn btn-secondary" onClick={() => navigate('about')}>
                                En savoir plus sur nous
                            </button>
                        </div>
                    </div>
                </div>
            </section>

        </main>
    );
};

window.ServicesPage = ServicesPage;