/* global React, Icon */

const ServiceEntreprisesPage = ({ navigate }) => {

    const faqs = [
        { q: "À quelle fréquence intervenez-vous dans les entreprises en Guadeloupe ?", a: "Nous adaptons la fréquence à votre activité : quotidienne, bi-hebdomadaire ou hebdomadaire. La cadence est définie lors du devis selon la superficie, le nombre d'occupants et vos exigences." },
        { q: "Intervenez-vous en dehors des heures de bureau ?", a: "Oui. Nous organisons nos interventions tôt le matin avant l'ouverture, le soir après la fermeture, ou le week-end — pour ne jamais perturber vos équipes ni vos clients." },
        { q: "Proposez-vous un contrat d'entretien annuel pour les entreprises ?", a: "Oui. Nos contrats annuels incluent un tarif préférentiel, un planning garanti, un suivi qualité mensuel et un interlocuteur dédié joignable à tout moment." },
        { q: "Quels produits utilisez-vous dans les locaux professionnels ?", a: "Nous utilisons des produits professionnels certifiés. Sur demande, nous privilégions les produits éco-labellisés (Ecolabel européen) pour les entreprises engagées dans une démarche RSE." },
        { q: "Comment garantissez-vous la confidentialité dans nos locaux ?", a: "Tous nos agents signent un accord de confidentialité. Nous gérons les accès (clés, badges, codes) selon votre protocole de sécurité et vous transmettons une liste nominative de l'équipe intervenant." },
        { q: "Intervenez-vous dans toute la Guadeloupe ?", a: "Oui, nous couvrons l'ensemble du département 971 : Basse-Terre, Grande-Terre, ainsi que les communes du nord comme du sud. Contactez-nous pour confirmer la disponibilité sur votre zone." },
    ];

    const schema = {
        "@context": "https://schema.org",
        "@graph": [
            {
                "@type": "LocalBusiness",
                "@id": "https://smenettoyage.fr/#organization",
                "name": "SME Nettoyage",
                "telephone": "+590590819174",
                "email": "ste.sme@orange.fr",
                "address": {
                    "@type": "PostalAddress",
                    "streetAddress": "Cité Grain d'Or Bât C Esc 17",
                    "postalCode": "97100",
                    "addressLocality": "Basse-Terre",
                    "addressRegion": "Guadeloupe",
                    "addressCountry": "FR"
                },
                "areaServed": { "@type": "AdministrativeArea", "name": "Guadeloupe" },
                "priceRange": "€€"
            },
            {
                "@type": "Service",
                "name": "Nettoyage d'entreprises en Guadeloupe",
                "description": "Entretien régulier de bureaux, open spaces et locaux professionnels en Guadeloupe. Planning personnalisé, équipe dédiée, produits certifiés.",
                "provider": { "@type": "LocalBusiness", "name": "SME Nettoyage" },
                "areaServed": { "@type": "AdministrativeArea", "name": "Guadeloupe" },
                "serviceType": "Nettoyage professionnel d'entreprises"
            },
            {
                "@type": "FAQPage",
                "mainEntity": faqs.map(faq => ({
                    "@type": "Question",
                    "name": faq.q,
                    "acceptedAnswer": { "@type": "Answer", "text": faq.a }
                }))
            }
        ]
    };

    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 d'Entreprises en Guadeloupe | SME Nettoyage";
        const meta = document.querySelector('meta[name="description"]');
        if (meta) meta.setAttribute('content', "Entretien régulier de bureaux et locaux professionnels en Guadeloupe. Équipe dédiée, produits certifiés, planning sur mesure. Devis gratuit sous 24h — 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">
            <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}/>

            {/* 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 d'Entreprises</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-entreprises';
                            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-blue)' : '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">Professionnels</span>
                            <h1 style={{ marginTop: '1.2rem' }}>
                                Nettoyage <span style={{ color: 'var(--sme-blue)' }}>d'Entreprises</span>{' '}
                                en Guadeloupe
                            </h1>
                            <p style={{ marginTop: '1.5rem', fontSize: '1.08rem', color: 'var(--sme-grey-600)', lineHeight: 1.75 }}>
                                Vos collaborateurs méritent un environnement propre, sain et accueillant. SME Nettoyage assure l'entretien régulier de vos bureaux, open spaces et locaux professionnels en Guadeloupe — selon votre planning et vos exigences qualité.
                            </p>
                            <ul style={{ marginTop: '1.25rem', listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                {['Intervention en dehors des heures de bureau', 'Équipe dédiée formée à vos locaux', 'Produits éco-labellisés disponibles', '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-primary" 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-blue-soft),var(--sme-green-soft))', borderRadius: 'var(--sme-radius-lg)', aspectRatio: '4/3', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--sme-blue)' }}>
                            <Icon name="building" 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-grid">
                        <div>
                            <span className="eyebrow green">Prestations incluses</span>
                            <h2 style={{ marginTop: '1rem' }}>Ce que comprend votre contrat d'entretien</h2>
                            <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', lineHeight: 1.7 }}>
                                Chaque intervention est réalisée selon un cahier des charges défini avec vous lors du devis, et contrôlé mensuellement.
                            </p>
                            <ul style={{ listStyle: 'none', padding: 0, margin: '1.5rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
                                {[
                                    'Dépoussiérage et désinfection des postes de travail',
                                    'Aspiration et lavage des sols (moquettes, carrelage, parquet)',
                                    'Nettoyage complet des sanitaires et vestiaires',
                                    'Entretien de la cuisine et des espaces communs',
                                    'Vidage et nettoyage des corbeilles à papier',
                                    'Désinfection des poignées, interrupteurs et surfaces de contact',
                                    'Nettoyage des vitrages intérieurs',
                                    'Réapprovisionnement savon, papier (optionnel)',
                                ].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: 'Entretien quotidien',      desc: 'Pour les locaux à fort trafic. Propreté garantie chaque matin avant l\'ouverture.' },
                                { icon: 'zap',      title: 'Nettoyage hebdomadaire',   desc: 'Idéal pour les PME et TPE. Intervention complète une ou deux fois par semaine.' },
                                { icon: 'sparkles', title: 'Grand nettoyage ponctuel', desc: 'Nettoyage approfondi trimestriel ou semestriel : vitres, moquettes, mobilier.' },
                            ].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-blue)', 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-grid{grid-template-columns:1fr !important}}`}</style>
                </div>
            </section>

            {/* FAQ */}
            <section style={{ background: 'var(--sme-grey-50)' }}>
                <div className="sme-container">
                    <span className="eyebrow">Questions fréquentes</span>
                    <h2 style={{ marginTop: '1rem', marginBottom: '2.5rem' }}>FAQ — Nettoyage d'entreprises 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-blue)', 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(16,185,129,0.2)' }}/>
                        <div style={{ position: 'relative' }}>
                            <h2 style={{ color: 'white', maxWidth: 640, marginInline: 'auto' }}>
                                Prêt à externaliser le nettoyage de votre entreprise en Guadeloupe ?
                            </h2>
                            <p style={{ marginTop: '1rem', opacity: 0.85, maxWidth: 520, marginInline: 'auto' }}>
                                Devis gratuit et sans engagement sous 24h. Nos experts se déplacent pour évaluer vos locaux.
                            </p>
                            <div style={{ marginTop: '2rem', display: 'flex', gap: '0.8rem', justifyContent: 'center', flexWrap: 'wrap' }}>
                                <button className="btn btn-secondary" 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.ServiceEntreprisesPage = ServiceEntreprisesPage;