/* global React, Icon */

const ServiceJardinsPage = ({ navigate }) => {

    const faqs = [
        { q: "Entretenez-vous les espaces verts des entreprises en Guadeloupe ?", a: "Oui. Nous intervenons pour les entreprises, copropriétés, collectivités et particuliers disposant de jardins, parcs ou espaces verts à entretenir régulièrement." },
        { q: "Quels travaux d'entretien de jardin proposez-vous ?", a: "Taille des haies et arbustes, élagage des arbres, désherbage, scarification des pelouses, entretien des allées et bordures, arrosage et nettoyage des espaces extérieurs." },
        { q: "À quelle fréquence intervenez-vous pour l'entretien des jardins ?", a: "Nous proposons des passages hebdomadaires, bi-mensuels ou mensuels selon l'état et la superficie de vos espaces verts. La fréquence est définie lors du devis gratuit." },
        { q: "Proposez-vous l'élagage d'arbres en Guadeloupe ?", a: "Oui, nous réalisons l'élagage et l'abattage des arbres dangereux ou gênants. Pour les travaux en hauteur, nous disposons du matériel adapté et de personnels formés." },
        { q: "Pouvez-vous gérer les espaces verts d'une copropriété ?", a: "Oui. Nous travaillons avec les syndics et gestionnaires de copropriétés pour l'entretien des jardins, parkings paysagers et espaces communs extérieurs." },
        { q: "Intervenez-vous dans toute la Guadeloupe pour les espaces verts ?", a: "Oui, nous couvrons l'ensemble de la Guadeloupe continentale. La végétation tropicale nécessite un entretien régulier — notre équipe connaît bien les espèces locales." },
    ];

    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 = 'Entretien de Jardins & Parcs en Guadeloupe | SME Nettoyage';
        const meta = document.querySelector('meta[name="description"]');
        if (meta) meta.setAttribute('content', 'Entretien de jardins et espaces verts en Guadeloupe : taille, élagage, désherbage, arrosage. Pour entreprises, copropriétés et particuliers. 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)' }}>Jardins & Parcs</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-jardins';
                            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">Espaces verts</span>
                            <h1 style={{ marginTop: '1.2rem' }}>
                                Entretien de <span style={{ color: 'var(--sme-green)' }}>Jardins & Parcs</span>{' '}
                                en Guadeloupe
                            </h1>
                            <p style={{ marginTop: '1.5rem', fontSize: '1.08rem', color: 'var(--sme-grey-600)', lineHeight: 1.75 }}>
                                Un espace vert bien entretenu reflète l'image de votre entreprise ou de votre résidence. SME Nettoyage prend en charge l'entretien régulier de vos jardins, parcs et espaces extérieurs en Guadeloupe.
                            </p>
                            <ul style={{ marginTop: '1.25rem', listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
                                {['Taille des haies, arbustes et pelouses', 'Élagage et abattage d\'arbres', 'Désherbage et entretien des allées', '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="leaf" 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-grid4">
                        <div>
                            <span className="eyebrow">Prestations incluses</span>
                            <h2 style={{ marginTop: '1rem' }}>Un jardin soigné, toute l'année</h2>
                            <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', lineHeight: 1.7 }}>
                                La végétation tropicale de Guadeloupe pousse vite. Un entretien régulier par des professionnels garantit un espace propre, sécurisé et valorisant.
                            </p>
                            <ul style={{ listStyle: 'none', padding: 0, margin: '1.5rem 0 0', display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
                                {[
                                    'Tonte et entretien des pelouses',
                                    'Taille des haies, arbustes et massifs',
                                    'Élagage et abattage d\'arbres',
                                    'Désherbage manuel et traitement préventif',
                                    'Entretien et soufflage des allées et chemins',
                                    'Nettoyage des terrasses et espaces extérieurs dallés',
                                    'Arrosage et suivi des plantations',
                                    'Évacuation des déchets verts',
                                ].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 régulier',  desc: 'Passage hebdomadaire, bi-mensuel ou mensuel selon la superficie et le type de végétation.' },
                                { icon: 'leaf',   title: 'Espèces tropicales',  desc: 'Notre équipe maîtrise les spécificités de la végétation guadeloupéenne : bambous, palmiers, haies tropicales.' },
                                { icon: 'users',  title: 'Pour tous profils',   desc: 'Particuliers, entreprises, copropriétés et collectivités. Un interlocuteur unique pour tous vos espaces verts.' },
                            ].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-grid4{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 — Entretien de jardins 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.15)' }}/>
                        <div style={{ position: 'relative' }}>
                            <h2 style={{ color: 'white', maxWidth: 640, marginInline: 'auto' }}>
                                Des espaces verts impeccables en Guadeloupe, toute l'année.
                            </h2>
                            <p style={{ marginTop: '1rem', opacity: 0.9, maxWidth: 520, marginInline: 'auto' }}>
                                Devis gratuit sous 24h. Nous nous déplaçons pour évaluer vos espaces et proposer un planning 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.ServiceJardinsPage = ServiceJardinsPage;