/* global React, Icon */

const ServiceIndustrielPage = ({ navigate }) => {

    const faqs = [
        { q: "Quels types de sites industriels nettoyez-vous en Guadeloupe ?", a: "Nous intervenons dans les entrepôts logistiques, ateliers de production, usines agroalimentaires, garages, centres de distribution et zones de stockage. Chaque site fait l'objet d'un protocole personnalisé." },
        { q: "Utilisez-vous des équipements haute pression ?", a: "Oui. Nos équipes disposent de matériel haute pression pour le nettoyage des sols industriels, des quais de chargement, des machines et des espaces extérieurs." },
        { q: "Pouvez-vous intervenir sans arrêter la production ?", a: "Oui, nous planifions nos interventions en dehors des périodes de production, ou en zones sécurisées afin de ne pas interrompre votre activité. Nous adaptons nos horaires à vos contraintes." },
        { q: "Proposez-vous le dégraissage de machines industrielles ?", a: "Oui. Nous réalisons le dégraissage de machines, convoyeurs et équipements avec des produits professionnels adaptés à chaque type de surface et de salissure." },
        { q: "Respectez-vous les normes de sécurité industrielle ?", a: "Absolument. Nos équipes sont formées aux règles d'hygiène et de sécurité en environnement industriel. Nous utilisons des EPI adaptés et respectons les protocoles d'accès de chaque site." },
        { q: "Intervenez-vous sur toute la Guadeloupe pour le nettoyage industriel ?", a: "Oui, nous couvrons l'ensemble de la Guadeloupe continentale : Basse-Terre, Grande-Terre et les zones industrielles de Jarry, Carénage, etc. Contactez-nous pour un devis sur site." },
    ];

    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 Industriel en Guadeloupe | SME Nettoyage';
        const meta = document.querySelector('meta[name="description"]');
        if (meta) meta.setAttribute('content', 'Nettoyage industriel en Guadeloupe : haute pression, dégraissage machines, entrepôts et ateliers. Protocoles stricts, matériel professionnel. 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 Industriel</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-industriel';
                            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">Entrepôts & Ateliers</span>
                            <h1 style={{ marginTop: '1.2rem' }}>
                                Nettoyage <span style={{ color: 'var(--sme-green)' }}>Industriel</span>{' '}
                                en Guadeloupe
                            </h1>
                            <p style={{ marginTop: '1.5rem', fontSize: '1.08rem', color: 'var(--sme-grey-600)', lineHeight: 1.75 }}>
                                Des environnements industriels propres et sécurisés sont essentiels pour la performance et la conformité de votre activité. SME Nettoyage intervient dans vos entrepôts, ateliers et zones de production avec un matériel adapté.
                            </p>
                            <ul style={{ marginTop: '1.25rem', listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                {['Nettoyage haute pression des sols et quais', 'Dégraissage machines et équipements', 'Intervention sans arrêt de production', '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="zap" 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-grid3">
                        <div>
                            <span className="eyebrow">Prestations incluses</span>
                            <h2 style={{ marginTop: '1rem' }}>Solutions de nettoyage pour sites industriels</h2>
                            <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', lineHeight: 1.7 }}>
                                Nos équipes interviennent avec le matériel adapté à vos contraintes industrielles et selon un protocole validé en amont avec votre responsable HSE.
                            </p>
                            <ul style={{ listStyle: 'none', padding: 0, margin: '1.5rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
                                {[
                                    'Nettoyage haute pression des sols, quais et zones de chargement',
                                    'Dégraissage et décapage des machines et équipements',
                                    'Aspiration industrielle des poussières et déchets secs',
                                    'Nettoyage des entrepôts de stockage et zones de palettisation',
                                    'Désinfection des vestiaires, sanitaires et réfectoires',
                                    'Nettoyage des espaces de bureau intégrés au site',
                                    'Gestion des déchets industriels courants',
                                    'Nettoyage de façades et parkings extérieurs',
                                ].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: 'Haute pression',          desc: 'Lavage haute pression adapté aux sols industriels, quais et façades de bâtiments industriels.' },
                                { icon: 'shield',   title: 'Protocoles HSE',          desc: 'Conformité aux normes de sécurité industrielle. EPI adaptés, fiches techniques disponibles.' },
                                { icon: 'sparkles', title: 'Nettoyage approfondi',    desc: 'Intervention ponctuelle avant audit, après travaux ou en fin d\'année pour un site impeccable.' },
                            ].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-grid3{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 industriel 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' }}>
                                Un site industriel propre et sécurisé en Guadeloupe.
                            </h2>
                            <p style={{ marginTop: '1rem', opacity: 0.9, maxWidth: 520, marginInline: 'auto' }}>
                                Devis gratuit sur site sous 24h. Nos experts évaluent vos besoins et proposent un protocole adapté.
                            </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.ServiceIndustrielPage = ServiceIndustrielPage;