/* global React, Icon, SectionHeader */

const ServicesPage = ({ navigate }) => {

    const services = [
        { id: 'service-entreprises', label: "Nettoyage d'Entreprises", icon: 'building', desc: 'Bureaux, sièges, espaces de travail.',            color: 'blue'  },
        { id: 'service-batiments',   label: 'Nettoyage de Bâtiments',   icon: 'home',     desc: 'Copropriétés, parties communes, halls.',           color: 'green' },
        { id: 'service-vitres',      label: 'Nettoyage de Vitres',      icon: 'window',   desc: 'Vitrines, façades, baies vitrées.',                color: 'blue'  },
        { id: 'service-industriel',  label: 'Nettoyage Industriel',     icon: 'shield',   desc: 'Sites de production, entrepôts, ateliers.',        color: 'green' },
        { id: 'service-jardins',     label: 'Jardins & Parcs',          icon: 'leaf',     desc: "Entretien d'espaces verts et extérieurs.",         color: 'blue'  },
    ];

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

            {/* PAGE HEADER */}
            <section style={{ paddingBlock: 'clamp(3rem, 5vw, 4rem) clamp(2.5rem, 4vw, 3rem)' }}>
                <div className="sme-container">
                    <div style={{ maxWidth: 680 }}>
                        <span className="eyebrow">Nos prestations</span>
                        <h1 style={{ marginTop: '1.2rem' }}>
                            Des services <span style={{ color: 'var(--sme-blue)' }}>complets</span>,
                            pour chaque besoin.
                        </h1>
                        <p style={{ marginTop: '1.5rem', fontSize: '1.1rem', color: 'var(--sme-grey-600)', lineHeight: 1.7 }}>
                            Découvrez l'ensemble de nos prestations et choisissez celle qui correspond
                            à votre situation. Un devis sur mesure, sous 24h.
                        </p>
                        <div style={{ marginTop: '2rem', display: 'flex', gap: '0.8rem', 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 btn-ghost">
                                <Icon name="phone" size={16}/> +590 590 81-9174
                            </a>
                        </div>
                    </div>
                </div>
            </section>

            {/* SERVICES CARDS GRID */}
            <section style={{ paddingTop: 0, paddingBottom: 'clamp(3rem, 6vw, 5rem)' }}>
                <div className="sme-container">

                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fill, minmax(min(300px, 100%), 1fr))',
                        gap: '1.5rem',
                    }}>
                        {services.map((s) => {
                            const accent     = s.color === 'blue' ? 'var(--sme-blue)'      : 'var(--sme-green)';
                            const accentSoft = s.color === 'blue' ? 'var(--sme-blue-soft)' : 'var(--sme-green-soft)';
                            const shadow     = s.color === 'blue'
                                ? '0 8px 20px rgba(8,145,178,0.18)'
                                : '0 8px 20px rgba(16,185,129,0.18)';

                            return (
                                <article
                                    key={s.id}
                                    className="sme-card"
                                    style={{
                                        padding: '2rem 1.8rem',
                                        display: 'flex',
                                        flexDirection: 'column',
                                        gap: '1.1rem',
                                        cursor: 'pointer',
                                        transition: 'box-shadow 0.25s, transform 0.25s, border-color 0.25s',
                                        borderTop: `3px solid ${accent}`,
                                    }}
                                    onClick={() => navigate(s.id)}
                                    onMouseEnter={e => {
                                        e.currentTarget.style.boxShadow = shadow;
                                        e.currentTarget.style.transform = 'translateY(-4px)';
                                    }}
                                    onMouseLeave={e => {
                                        e.currentTarget.style.boxShadow = '';
                                        e.currentTarget.style.transform = 'none';
                                    }}
                                >
                                    {/* Icon */}
                                    <div style={{
                                        width: 56, height: 56,
                                        borderRadius: 14,
                                        background: accentSoft,
                                        color: accent,
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        flexShrink: 0,
                                    }}>
                                        <Icon name={s.icon} size={26}/>
                                    </div>

                                    {/* Title + desc */}
                                    <div>
                                        <h3 style={{ fontSize: '1.1rem', marginBottom: '0.4rem' }}>{s.label}</h3>
                                        <p style={{ fontSize: '0.92rem', color: 'var(--sme-grey-600)', lineHeight: 1.6 }}>{s.desc}</p>
                                    </div>

                                    {/* CTA */}
                                    <div style={{ marginTop: 'auto', paddingTop: '0.8rem', borderTop: '1px solid var(--sme-grey-100)' }}>
                                        <button
                                            className="btn btn-ghost"
                                            style={{ padding: '0.55rem 1.2rem', fontSize: '0.88rem' }}
                                            onClick={(e) => { e.stopPropagation(); navigate(s.id); }}
                                        >
                                            Savoir plus <Icon name="arrow" size={14}/>
                                        </button>
                                    </div>
                                </article>
                            );
                        })}
                    </div>
                </div>
            </section>

            {/* CTA BANNER */}
            <section style={{ background: 'var(--sme-grey-50)' }}>
                <div className="sme-container">
                    <div style={{
                        background: 'var(--sme-green-soft)',
                        borderRadius: 'var(--sme-radius-lg)',
                        padding: 'clamp(2.5rem, 5vw, 3.5rem)',
                        textAlign: 'center',
                    }}>
                        <span className="eyebrow green">Un besoin spécifique ?</span>
                        <h2 style={{ marginTop: '1rem', maxWidth: 680, marginInline: 'auto' }}>
                            Parlons-en. Le premier échange est toujours gratuit.
                        </h2>
                        <p style={{ marginTop: '1rem', color: 'var(--sme-grey-600)', maxWidth: 520, marginInline: 'auto' }}>
                            Décrivez-nous votre projet, on revient vers vous sous 24h avec une proposition adaptée.
                        </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>
                            <button className="btn btn-secondary" onClick={() => navigate('about')}>
                                En savoir plus sur nous
                            </button>
                        </div>
                    </div>
                </div>
            </section>

        </main>
    );
};

window.ServicesPage = ServicesPage;