/* global React, Icon */

const ServiceBatimentsPage = ({ navigate }) => {

    const faqs = [
        { q: "Intervenez-vous dans les copropriétés et immeubles en Guadeloupe ?", a: "Oui. Nous travaillons en collaboration avec les syndics de copropriété et les gestionnaires d'immeubles pour assurer un entretien régulier des parties communes." },
        { q: "Quelles parties d'un bâtiment nettoyez-vous ?", a: "Halls d'entrée, cages d'escalier, ascenseurs, parkings, couloirs, locaux poubelles, locaux techniques et façades. Nous adaptons le périmètre à votre cahier des charges." },
        { q: "Proposez-vous un nettoyage de façades ?", a: "Oui. Nous réalisons le lavage et le démoussage de façades avec le matériel adapté. Un devis sur site est nécessaire pour évaluer la superficie et le type de revêtement." },
        { q: "À quelle fréquence intervenez-vous dans les bâtiments ?", a: "La fréquence est définie selon le flux de résidents ou d'utilisateurs : quotidienne pour les immeubles à fort passage, hebdomadaire pour les petites copropriétés." },
        { q: "Travaillez-vous avec les syndics de copropriété ?", a: "Oui, nous avons l'habitude de travailler avec les syndics et les conseils syndicaux. Nous établissons des rapports d'intervention et participons aux réunions de suivi si nécessaire." },
        { q: "Couvrez-vous toute la Guadeloupe pour le nettoyage de bâtiments ?", a: "Oui, nous intervenons sur l'ensemble de la Guadeloupe continentale (Basse-Terre et Grande-Terre). Contactez-nous pour vérifier la disponibilité dans votre commune." },
    ];

    const ALL_SERVICES = [
        { page: 'service-entreprises', icon: 'building', label: "Nettoyage d'Entreprises" },
        { page: 'service-batiments',   icon: 'home',     label: 'Nettoyage de Bâtiments' },
        { page: 'service-vitres',      icon: 'window',   label: 'Nettoyage de Vitres' },
        { page: 'service-industriel',  icon: 'zap',      label: 'Nettoyage Industriel' },
        { page: 'service-jardins',     icon: 'leaf',     label: 'Jardins & Parcs' },
    ];

    React.useEffect(() => {
        document.title = 'Nettoyage de Bâtiments en Guadeloupe | SME Nettoyage';
        const meta = document.querySelector('meta[name="description"]');
        if (meta) meta.setAttribute('content', 'Entretien de halls, escaliers, façades et parties communes en Guadeloupe. Coordination syndic, produits certifiés, planning garanti. Devis gratuit — SME Nettoyage.');
        return () => { document.title = 'SME Nettoyage — Entreprise de nettoyage professionnel en Guadeloupe'; };
    }, []);

    const breadBtnStyle = { background: 'none', border: 'none', padding: 0, color: 'var(--sme-blue)', cursor: 'pointer', fontSize: 'inherit', fontFamily: 'inherit' };

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

            {/* BREADCRUMB */}
            <div style={{ background: 'var(--sme-grey-50)', borderBottom: '1px solid var(--sme-grey-200)' }}>
                <div className="sme-container" style={{ paddingBlock: '0.75rem' }}>
                    <nav aria-label="Fil d'Ariane" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.85rem', color: 'var(--sme-grey-600)', flexWrap: 'wrap' }}>
                        <button onClick={() => navigate('home')} style={breadBtnStyle}>Accueil</button>
                        <span>/</span>
                        <button onClick={() => navigate('services')} style={breadBtnStyle}>Services</button>
                        <span>/</span>
                        <span aria-current="page" style={{ color: 'var(--sme-grey-900)' }}>Nettoyage de Bâtiments</span>
                    </nav>
                </div>
            </div>

            {/* SERVICES NAV */}
            <div style={{ background: 'white', borderBottom: '1px solid var(--sme-grey-200)' }}>
                <div className="sme-container">
                    <div style={{ display: 'flex', gap: '0.4rem', overflowX: 'auto', paddingBlock: '0.7rem', scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
                        {ALL_SERVICES.map(s => {
                            const active = s.page === 'service-batiments';
                            return (
                                <button key={s.page} onClick={() => navigate(s.page)} style={{
                                    display: 'inline-flex', alignItems: 'center', gap: '0.4rem',
                                    padding: '0.45rem 1rem', borderRadius: 999,
                                    border: active ? 'none' : '1px solid var(--sme-grey-200)',
                                    background: active ? 'var(--sme-green)' : 'transparent',
                                    color: active ? 'white' : 'var(--sme-grey-600)',
                                    fontFamily: 'Poppins, sans-serif', fontWeight: active ? 600 : 500,
                                    fontSize: '0.82rem', cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
                                }}>
                                    <Icon name={s.icon} size={13}/> {s.label}
                                </button>
                            );
                        })}
                    </div>
                </div>
            </div>

            {/* HERO */}
            <section style={{ paddingBlock: 'clamp(3rem,5vw,4.5rem) clamp(2.5rem,4vw,3.5rem)' }}>
                <div className="sme-container">
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(300px,100%),1fr))', gap: 'clamp(2rem,4vw,4rem)', alignItems: 'center' }}>
                        <div>
                            <span className="eyebrow green">Copropriétés & Immeubles</span>
                            <h1 style={{ marginTop: '1.2rem' }}>
                                Nettoyage de <span style={{ color: 'var(--sme-green)' }}>Bâtiments</span>{' '}
                                en Guadeloupe
                            </h1>
                            <p style={{ marginTop: '1.5rem', fontSize: '1.08rem', color: 'var(--sme-grey-600)', lineHeight: 1.75 }}>
                                Des parties communes impeccables valorisent votre bâtiment et améliorent la qualité de vie des résidents. SME Nettoyage assure l'entretien régulier des halls, escaliers, ascenseurs et façades en Guadeloupe.
                            </p>
                            <ul style={{ marginTop: '1.25rem', listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                {['Halls, escaliers et ascenseurs', 'Nettoyage et démoussage de façades', 'Coordination directe avec le syndic', 'Devis gratuit sous 24h'].map(item => (
                                    <li key={item} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '0.94rem', color: 'var(--sme-grey-900)' }}>
                                        <span style={{ color: 'var(--sme-green)', flexShrink: 0 }}><Icon name="check" size={15} stroke={2.5}/></span>
                                        {item}
                                    </li>
                                ))}
                            </ul>
                            <div style={{ marginTop: '2rem', display: 'flex', gap: '0.8rem', flexWrap: 'wrap' }}>
                                <button className="btn btn-secondary" onClick={() => navigate('contact')}>
                                    Devis gratuit <Icon name="arrow" size={16}/>
                                </button>
                                <a href="tel:+590590819174" className="btn btn-ghost">
                                    <Icon name="phone" size={16}/> +590 590 81-9174
                                </a>
                            </div>
                        </div>
                        <div style={{ background: 'linear-gradient(135deg,var(--sme-green-soft),var(--sme-blue-soft))', borderRadius: 'var(--sme-radius-lg)', aspectRatio: '4/3', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sme-green)' }}>
                            <Icon name="home" size={80}/>
                        </div>
                    </div>
                </div>
            </section>

            {/* PRESTATIONS INCLUSES */}
            <section style={{ paddingTop: 0 }}>
                <div className="sme-container">
                    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 'clamp(2rem,5vw,4rem)', alignItems: 'start' }} className="srv-grid2">
                        <div>
                            <span className="eyebrow">Prestations incluses</span>
                            <h2 style={{ marginTop: '1rem' }}>Entretien complet des parties communes</h2>
                            <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', lineHeight: 1.7 }}>
                                Nous intervenons selon un planning établi avec le syndic ou le gestionnaire, avec compte-rendu d'intervention à chaque passage.
                            </p>
                            <ul style={{ listStyle: 'none', padding: 0, margin: '1.5rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
                                {[
                                    'Balayage et lavage des halls d\'entrée',
                                    'Dépoussiérage et lavage des rampes et garde-corps',
                                    'Nettoyage intérieur des ascenseurs',
                                    'Nettoyage des portes d\'entrée et boîtes aux lettres',
                                    'Entretien des locaux poubelles et locaux techniques',
                                    'Lavage des couloirs et paliers à chaque étage',
                                    'Désinfection des poignées et interphones',
                                    'Démoussage et nettoyage des façades (sur devis)',
                                ].map(item => (
                                    <li key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                                        <span style={{ color: 'var(--sme-green)', marginTop: 3, flexShrink: 0 }}><Icon name="check" size={15} stroke={2.5}/></span>
                                        <span style={{ fontSize: '0.94rem', color: 'var(--sme-grey-900)' }}>{item}</span>
                                    </li>
                                ))}
                            </ul>
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
                            {[
                                { icon: 'clock',    title: 'Fréquence adaptée',       desc: 'Quotidienne, bi-hebdomadaire ou hebdomadaire selon le nombre de résidents et le flux.' },
                                { icon: 'users',    title: 'Coordination syndic',      desc: 'Rapport d\'intervention à chaque passage, communication directe avec votre syndic.' },
                                { icon: 'sparkles', title: 'Grand nettoyage annuel',   desc: 'Nettoyage approfondi annuel : façades, vitres de cage d\'escalier, locaux techniques.' },
                            ].map(card => (
                                <div key={card.title} className="sme-card" style={{ padding: '1.5rem', display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
                                    <span style={{ color: 'var(--sme-green)', flexShrink: 0 }}><Icon name={card.icon} size={24}/></span>
                                    <div>
                                        <h3 style={{ fontSize: '1.02rem', marginBottom: '0.4rem' }}>{card.title}</h3>
                                        <p style={{ fontSize: '0.9rem', color: 'var(--sme-grey-600)', lineHeight: 1.6 }}>{card.desc}</p>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                    <style>{`@media(max-width:900px){.srv-grid2{grid-template-columns:1fr !important}}`}</style>
                </div>
            </section>

            {/* FAQ */}
            <section style={{ background: 'var(--sme-grey-50)' }}>
                <div className="sme-container">
                    <span className="eyebrow green">Questions fréquentes</span>
                    <h2 style={{ marginTop: '1rem', marginBottom: '2.5rem' }}>FAQ — Nettoyage de bâtiments en Guadeloupe</h2>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: 860 }}>
                        {faqs.map((faq, i) => (
                            <details key={i} style={{ background: 'white', borderRadius: 'var(--sme-radius-sm)', border: '1px solid var(--sme-grey-100)', padding: '1.2rem 1.5rem' }}>
                                <summary style={{ fontWeight: 600, fontSize: '0.98rem', cursor: 'pointer', lineHeight: 1.5 }}>{faq.q}</summary>
                                <p style={{ marginTop: '0.9rem', color: 'var(--sme-grey-600)', fontSize: '0.94rem', lineHeight: 1.75 }}>{faq.a}</p>
                            </details>
                        ))}
                    </div>
                </div>
            </section>

            {/* CTA */}
            <section>
                <div className="sme-container">
                    <div style={{ background: 'var(--sme-green)', borderRadius: 'var(--sme-radius-lg)', padding: 'clamp(2.5rem,5vw,4rem)', textAlign: 'center', color: 'white', position: 'relative', overflow: 'hidden' }}>
                        <div aria-hidden="true" style={{ position: 'absolute', bottom: -80, right: -60, width: 240, height: 240, borderRadius: '50%', background: 'rgba(8,145,178,0.2)' }}/>
                        <div style={{ position: 'relative' }}>
                            <h2 style={{ color: 'white', maxWidth: 640, marginInline: 'auto' }}>
                                Confiez l'entretien de votre bâtiment à des professionnels en Guadeloupe.
                            </h2>
                            <p style={{ marginTop: '1rem', opacity: 0.9, maxWidth: 520, marginInline: 'auto' }}>
                                Devis gratuit et sans engagement sous 24h. Nous nous déplaçons pour évaluer votre bâtiment.
                            </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>
                                <a href="tel:+590590819174" className="btn" style={{ background: 'rgba(255,255,255,0.15)', color: 'white', border: '1.5px solid rgba(255,255,255,0.3)' }}>
                                    <Icon name="phone" size={16}/> +590 590 81-9174
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    );
};

window.ServiceBatimentsPage = ServiceBatimentsPage;