/* global React, Icon */

const ServiceVitresPage = ({ navigate }) => {

    const faqs = [
        { q: "À quelle fréquence faut-il nettoyer ses vitres en milieu tropical comme la Guadeloupe ?", a: "En Guadeloupe, le climat humide et les embruns salins encrassent les vitres beaucoup plus vite qu'en métropole. Nous recommandons un nettoyage mensuel pour les vitrines commerciales et trimestriel pour les logements et bureaux." },
        { q: "Intervenez-vous sur les vitres en hauteur ou difficiles d'accès ?", a: "Oui. Nous disposons de perches télescopiques, de nacelles et d'équipements adaptés à tous types d'accès. Nos agents sont formés aux travaux en hauteur avec le matériel de sécurité requis." },
        { q: "Le nettoyage inclut-il les joints, les châssis et les rebords ?", a: "Oui, nos interventions incluent le nettoyage des joints, châssis PVC ou aluminium, rebords de fenêtres et rails de portes coulissantes — pas uniquement les surfaces vitrées." },
        { q: "Proposez-vous des contrats de nettoyage régulier de vitres pour les commerces ?", a: "Oui. Les commerçants peuvent souscrire à un contrat mensuel ou bimensuel incluant le nettoyage des vitrines, des portes d'entrée et des surfaces vitrées intérieures. Tarif préférentiel pour les contrats annuels." },
        { q: "Utilisez-vous des produits adaptés au verre teinté ou traité ?", a: "Absolument. Nous identifions le type de vitrage avant toute intervention (verre feuilleté, trempé, teinté, traité anti-UV) et sélectionnons les produits et techniques adaptés pour ne pas abîmer les traitements de surface." },
        { q: "Intervenez-vous aussi pour les particuliers ?", a: "Oui, nous nettoyons les vitres des maisons individuelles, appartements et bungalows en Guadeloupe. Une intervention ponctuelle ou dans le cadre d'un contrat d'entretien global du domicile." },
    ];

    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"
                }
            },
            {
                "@type": "Service",
                "name": "Nettoyage de vitres et vitrines commerciales en Guadeloupe",
                "description": "Nettoyage professionnel de vitres, vitrines commerciales et baies vitrées en Guadeloupe. Matériel pro, tous accès, produits adaptés au verre traité. Contrats mensuels disponibles.",
                "provider": { "@type": "LocalBusiness", "name": "SME Nettoyage" },
                "areaServed": { "@type": "AdministrativeArea", "name": "Guadeloupe" },
                "serviceType": "Nettoyage de vitres professionnel"
            },
            {
                "@type": "FAQPage",
                "mainEntity": faqs.map(faq => ({
                    "@type": "Question",
                    "name": faq.q,
                    "acceptedAnswer": { "@type": "Answer", "text": faq.a }
                }))
            }
        ]
    };

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

    React.useEffect(() => {
        document.title = 'Nettoyage de Vitres & Vitrines Commerciales en Guadeloupe | SME Nettoyage';
        const meta = document.querySelector('meta[name="description"]');
        if (meta) meta.setAttribute('content', 'Nettoyage professionnel de vitres, vitrines et baies vitrées en Guadeloupe. Tous accès, produits adaptés, contrats mensuels. 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 de Vitres</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' }}>
                        {[
                            { 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' },
                        ].map(s => {
                            const active = s.page === 'service-vitres';
                            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">Vitrages</span>
                            <h1 style={{ marginTop: '1.2rem' }}>
                                Nettoyage de <span style={{ color: 'var(--sme-blue)' }}>Vitres & Vitrines</span>{' '}
                                en Guadeloupe
                            </h1>
                            <p style={{ marginTop: '1.5rem', fontSize: '1.08rem', color: 'var(--sme-grey-600)', lineHeight: 1.75 }}>
                                En milieu tropical, les embruns, la poussière de sable et la pluie encrassent rapidement les surfaces vitrées. SME Nettoyage intervient sur vos vitrines commerciales, baies vitrées, fenêtres et façades en verre — avec le matériel professionnel adapté à chaque type de vitrage.
                            </p>
                            <ul style={{ marginTop: '1.25rem', listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                {['Vitrines commerciales et devantures de magasin', 'Baies vitrées, fenêtres et portes coulissantes', 'Nettoyage des joints, châssis et rebords inclus', 'Matériel adapté : perches télescopiques, nacelles'].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="window" size={80}/>
                        </div>
                    </div>
                </div>
            </section>

            {/* TYPES & INCLUS */}
            <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-v">
                        <div>
                            <span className="eyebrow green">Ce que nous nettoyons</span>
                            <h2 style={{ marginTop: '1rem' }}>Tous types de surfaces vitrées</h2>
                            <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', lineHeight: 1.7 }}>
                                Du petit appartement à la grande surface commerciale, nous traitons toutes les surfaces vitrées quelle que soit leur hauteur ou complexité d'accès.
                            </p>
                            <ul style={{ listStyle: 'none', padding: 0, margin: '1.5rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
                                {[
                                    'Vitrines et devantures de commerces',
                                    'Fenêtres et fenêtres de toit (Velux)',
                                    'Baies vitrées et portes coulissantes',
                                    'Cloisons vitrées et parois de douche',
                                    'Miroirs et surfaces réfléchissantes',
                                    'Façades en verre et murs-rideaux',
                                    'Vérandas et jardins d\'hiver',
                                    'Surfaces vitrées en hauteur (nacelle)',
                                ].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: 'zap',      title: 'Contrat mensuel commerce',  desc: 'Nettoyage régulier de vos vitrines pour une devanture toujours impeccable. Intervention rapide, sans rendez-vous fixé à l\'avance.' },
                                { icon: 'sparkles', title: 'Nettoyage résidentiel',      desc: 'Fenêtres, baies vitrées et parois de douche pour particuliers. Ponctuel ou dans le cadre d\'un contrat d\'entretien global.' },
                                { icon: 'building', title: 'Façades vitrées tertiaire',  desc: 'Nettoyage de grandes surfaces vitrées (immeubles, bureaux, centres commerciaux) avec équipements de hauteur sécurisés.' },
                            ].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-v{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 de vitres 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>

            {/* AUTRES SERVICES */}
            <section>
                <div className="sme-container">
                    <span className="eyebrow green">Nos autres prestations</span>
                    <h2 style={{ marginTop: '1rem', marginBottom: '2rem' }}>Découvrez l'ensemble de nos services</h2>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(220px,1fr))', gap: '1rem' }}>
                        {related.map(s => (
                            <button key={s.page} onClick={() => navigate(s.page)}
                                style={{ display: 'flex', alignItems: 'center', gap: '0.9rem', padding: '1.2rem 1.4rem', background: 'white', border: '1px solid var(--sme-grey-200)', borderRadius: 'var(--sme-radius)', cursor: 'pointer', fontFamily: 'inherit', textAlign: 'left', transition: 'all 0.2s', color: 'var(--sme-grey-900)' }}
                                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--sme-blue)'; e.currentTarget.style.boxShadow = 'var(--sme-shadow)'; }}
                                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--sme-grey-200)'; e.currentTarget.style.boxShadow = 'none'; }}>
                                <span style={{ color: 'var(--sme-blue)', flexShrink: 0 }}><Icon name={s.icon} size={22}/></span>
                                <span style={{ fontFamily: 'Poppins,sans-serif', fontWeight: 600, fontSize: '0.92rem', flex: 1 }}>{s.label}</span>
                                <span style={{ color: 'var(--sme-grey-400)', flexShrink: 0 }}><Icon name="arrow" size={14}/></span>
                            </button>
                        ))}
                    </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', top: -60, right: -60, width: 220, height: 220, borderRadius: '50%', background: 'rgba(16,185,129,0.18)' }}/>
                        <div style={{ position: 'relative' }}>
                            <h2 style={{ color: 'white', maxWidth: 640, marginInline: 'auto' }}>
                                Des vitres parfaitement propres, même sous le soleil des Antilles.
                            </h2>
                            <p style={{ marginTop: '1rem', opacity: 0.85, maxWidth: 520, marginInline: 'auto' }}>
                                Demandez un devis gratuit pour vos vitrines, fenêtres ou façades vitrées en Guadeloupe.
                            </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.ServiceVitresPage = ServiceVitresPage;