/* global React, Icon, SMELogo, SectionHeader, Reveal, Counter */

const HomePage = ({ navigate }) => {

    // ============ HERO (editorial) ============
    const Hero = () => (
        <section style={{
            position: 'relative',
            paddingBlock: 'clamp(3rem, 5vw, 4.5rem) 0',
            overflow: 'hidden',
            background: 'white',
        }}>
            {/* Subtle dotted backdrop */}
            <div aria-hidden="true" style={{
                position: 'absolute', inset: 0,
                backgroundImage: 'radial-gradient(circle, rgba(15,23,42,0.05) 1px, transparent 1px)',
                backgroundSize: '36px 36px',
                maskImage: 'linear-gradient(180deg, black 0%, transparent 70%)',
                WebkitMaskImage: 'linear-gradient(180deg, black 0%, transparent 70%)',
            }}/>

            <div className="sme-container" style={{ position: 'relative' }}>

                {/* Editorial top label row */}
                <Reveal>
                    <div style={{
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-between',
                        gap: '2rem',
                        paddingBottom: '2.5rem',
                        marginBottom: '2.5rem',
                        borderBottom: '1px solid var(--sme-grey-100)',
                        flexWrap: 'wrap',
                    }} className="hero-top-row">
                        <div style={{ display: 'flex', alignItems: 'center', gap: '1.2rem' }}>
                            <span style={{
                                fontFamily: 'Poppins, sans-serif',
                                fontWeight: 600,
                                fontSize: '0.75rem',
                                letterSpacing: '0.18em',
                                textTransform: 'uppercase',
                                color: 'var(--sme-grey-400)',
                            }}>01 — Bienvenue</span>
                            <span style={{
                                display: 'inline-flex',
                                alignItems: 'center',
                                gap: 8,
                                padding: '5px 12px 5px 8px',
                                background: 'var(--sme-green-soft)',
                                color: 'var(--sme-green-dark)',
                                borderRadius: 999,
                                fontFamily: 'Poppins, sans-serif',
                                fontWeight: 600,
                                fontSize: '0.78rem',
                            }}>
                                <span style={{
                                    width: 8, height: 8, borderRadius: '50%',
                                    background: 'var(--sme-green)',
                                }}/>
                                Service de nettoyage premium
                            </span>
                        </div>
                        <span className="hero-pretitle" style={{
                            fontFamily: 'Poppins, sans-serif',
                            fontWeight: 500,
                            fontSize: '0.88rem',
                            color: 'var(--sme-grey-600)',
                        }}>
                            Guadeloupe
                        </span>
                    </div>
                </Reveal>

                <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'minmax(0, 1.15fr) minmax(0, 1fr)',
                    gap: 'clamp(2rem, 5vw, 5rem)',
                    alignItems: 'stretch',
                }} className="hero-grid">

                    {/* LEFT — text */}
                    <Reveal>
                        <div className="hero-text-col" style={{ paddingBlock: '0.5rem 4rem' }}>
                            <h1 className="hero-h1-anim" style={{
                                fontSize: 'clamp(2.8rem, 6.5vw, 5.4rem)',
                                lineHeight: 0.98,
                                letterSpacing: '-0.035em',
                                fontWeight: 600,
                                marginBottom: '1.2rem',
                            }}>
                                <span style={{ display: 'block', color: 'var(--sme-grey-900)' }}>La propreté,</span>
                                <span style={{
                                    display: 'block',
                                    color: 'var(--sme-blue)',
                                    fontStyle: 'italic',
                                    fontWeight: 500,
                                }}>notre</span>
                                <span style={{
                                    display: 'block',
                                    position: 'relative',
                                    color: 'var(--sme-grey-900)',
                                }}>
                                    engagement.
                                    <svg aria-hidden="true" viewBox="0 0 420 18" style={{
                                        position: 'absolute',
                                        bottom: '-0.08em', left: 0,
                                        width: '88%', height: '0.18em',
                                    }}>
                                        <path d="M2 12 Q 105 2, 210 9 T 418 7" stroke="#10B981" strokeWidth="5"
                                              fill="none" strokeLinecap="round"/>
                                    </svg>
                                </span>
                            </h1>

                            <p style={{
                                marginTop: '2.2rem',
                                fontSize: 'clamp(1.05rem, 1.3vw, 1.2rem)',
                                color: 'var(--sme-grey-600)',
                                maxWidth: 520,
                                lineHeight: 1.6,
                                fontWeight: 400,
                            }}>
                                Des espaces propres, sains et accueillants pour particuliers et professionnels.
                                Une approche humaine, responsable et durable — avec une équipe que vous reconnaîtrez.
                            </p>

                            <div style={{
                                marginTop: '2.5rem',
                                display: 'flex',
                                gap: '0.9rem',
                                flexWrap: 'wrap',
                                alignItems: 'center',
                            }}>
                                <button className="btn btn-primary" onClick={() => navigate('contact')}
                                        style={{ padding: '17px 32px', fontSize: '0.95rem' }}>
                                    Demander un devis <Icon name="arrow" size={16}/>
                                </button>
                                <button onClick={() => navigate('services')} style={{
                                    background: 'none',
                                    border: 'none',
                                    padding: '8px 4px',
                                    display: 'inline-flex',
                                    alignItems: 'center',
                                    gap: 12,
                                    cursor: 'pointer',
                                    fontFamily: 'Poppins, sans-serif',
                                    fontWeight: 600,
                                    fontSize: '0.95rem',
                                    color: 'var(--sme-grey-900)',
                                    textDecoration: 'underline',
                                    textDecorationColor: 'var(--sme-green)',
                                    textUnderlineOffset: '6px',
                                    textDecorationThickness: '2px',
                                }}>
                                    Voir nos services
                                </button>
                            </div>

                        </div>
                    </Reveal>

                    {/* RIGHT — editorial photo column */}
                    <div style={{
                        position: 'relative',
                        height: '100%',
                        minHeight: 560,
                        overflow: 'hidden',
                        borderRadius: 'var(--sme-radius-lg)',
                    }} className="hero-visual">

                            {/* Background green block — cadre visible à droite et en bas */}
                            <div aria-hidden="true" style={{
                                position: 'absolute',
                                top: '6%', right: '0',
                                bottom: '0', left: '8%',
                                background: 'var(--sme-green)',
                                borderRadius: 'var(--sme-radius-lg)',
                                zIndex: 1,
                            }}/>

                            {/* Main editorial image — LCP, load eagerly */}
                            <img
                                className="hero-img-desktop"
                                src={(window.smeThemeUrl || '/wp-content/themes/sme-nettoyage-react') + '/images/hero-main.png?v=1'}
                                alt="Équipe SME en intervention"
                                loading="eager"
                                fetchPriority="high"
                                decoding="async"
                                style={{
                                    position: 'absolute',
                                    top: 0, left: 0,
                                    width: '90%', height: '90%',
                                    objectFit: 'cover',
                                    objectPosition: 'center 50%',
                                    borderRadius: '20px',
                                    boxShadow: 'var(--sme-shadow-lg)',
                                    zIndex: 2,
                                }}/>
                            {/* Mobile-only image — offset pour révéler le cadre vert à droite et en bas */}
                            <img
                                className="hero-img-mobile"
                                src={(window.smeThemeUrl || '/wp-content/themes/sme-nettoyage-react') + '/images/hero-main.png?v=1'}
                                alt="Équipe SME Nettoyage"
                                loading="eager"
                                fetchPriority="high"
                                decoding="async"
                                style={{
                                    position: 'absolute',
                                    top: 0, left: 0,
                                    width: '65%', height: '94%',
                                    objectFit: 'cover',
                                    objectPosition: 'center 35%',
                                    borderRadius: '20px',
                                    boxShadow: 'var(--sme-shadow-lg)',
                                    zIndex: 2,
                                }}/>

                            {/* Decorative number — bottom right */}
                            <div aria-hidden="true" className="hero-deco-num" style={{
                                position: 'absolute',
                                bottom: '20%', right: '2%',
                                fontFamily: 'Poppins, sans-serif',
                                fontWeight: 700,
                                fontSize: 'clamp(4rem, 8vw, 6rem)',
                                color: 'white',
                                lineHeight: 1,
                                letterSpacing: '-0.06em',
                                zIndex: 3,
                                textShadow: '0 4px 16px rgba(15,23,42,0.18)',
                            }}>
                                /01
                            </div>
                        </div>
                </div>

                {/* Bottom stats strip — full bleed */}
                <Reveal delay={150}>
                    <div style={{
                        marginTop: 'clamp(2rem, 4vw, 3rem)',
                        background: 'var(--sme-grey-900)',
                        borderRadius: 'var(--sme-radius-lg)',
                        padding: 'clamp(1.5rem, 2.5vw, 2rem) clamp(1.5rem, 3vw, 2.5rem)',
                        display: 'grid',
                        gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
                        gap: '1px',
                        background: 'linear-gradient(135deg, #0F172A 0%, #1E293B 100%)',
                    }} className="hero-strip">
                        {[
                            { num: '+36', label: "années d'expérience", icon: 'award' },
                            { num: '+200', label: 'clients fidèles', icon: 'users' },
                            { num: '+50', label: 'sites entretenus / jour', icon: 'building' },
                            { num: '5,0/5', label: 'satisfaction client', icon: 'star' },
                        ].map((s, i) => (
                            <div key={i} style={{
                                padding: '1.2rem 1.5rem',
                                color: 'white',
                                borderRight: i < 3 ? '1px solid rgba(255,255,255,0.08)' : 'none',
                                display: 'flex',
                                alignItems: 'center',
                                gap: '1rem',
                            }}>
                                <div style={{
                                    width: 44, height: 44,
                                    borderRadius: 12,
                                    background: 'rgba(16,185,129,0.18)',
                                    color: 'var(--sme-green)',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    flexShrink: 0,
                                }}>
                                    <Icon name={s.icon} size={20}/>
                                </div>
                                <div>
                                    <div style={{
                                        fontFamily: 'Poppins',
                                        fontWeight: 600,
                                        fontSize: '1.5rem',
                                        lineHeight: 1,
                                        letterSpacing: '-0.02em',
                                    }}>{s.num}</div>
                                    <div style={{
                                        fontSize: '0.8rem',
                                        color: 'rgba(255,255,255,0.65)',
                                        marginTop: 4,
                                    }}>{s.label}</div>
                                </div>
                            </div>
                        ))}
                    </div>
                </Reveal>
            </div>

            <style>{`
                /* ── Fade In Up + Float ── */
                @keyframes heroFadeInUp {
                    from { opacity: 0; transform: translateY(30px); }
                    to   { opacity: 1; transform: translateY(0); }
                }
                @keyframes heroFloat {
                    0%, 100% { transform: translateY(0); }
                    50%      { transform: translateY(-9px); }
                }
                .hero-h1-anim {
                    animation:
                        heroFadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
                        heroFloat    5s ease-in-out 0.8s infinite;
                }

                /* ── TABLETTE ≤960px ── */
                @media (max-width: 960px) {
                    .hero-top-row  { padding-bottom: 1.2rem !important; margin-bottom: 1.2rem !important; gap: 1rem !important; }
                    .hero-grid     { grid-template-columns: 1fr !important; gap: 1rem !important; }
                    .hero-visual   { height: 420px !important; min-height: unset !important; margin-top: 0 !important; overflow: hidden !important; }
                    .hero-pretitle { display: none; }
                    .hero-text-col { padding-block: 0.5rem 1rem !important; }
                }

                /* ── MOBILE ≤600px ── */
                @media (max-width: 600px) {
                    .hero-top-row  { padding-bottom: 0.75rem !important; margin-bottom: 0.75rem !important; }
                    .hero-visual   { height: 300px !important; }
                    .hero-deco-num { display: none !important; }
                    .hero-h1-anim  { font-size: clamp(1.85rem, 7.5vw, 2.6rem) !important; }

                    .hero-strip > div   { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; padding: 0.9rem 1rem !important; }
                    .hero-strip > div:last-child { border-bottom: none !important; }
                }

                /* ── TRÈS PETIT ≤380px ── */
                @media (max-width: 380px) {
                    .hero-h1-anim  { font-size: 1.72rem !important; }
                    .hero-visual   { height: 240px !important; }
                }
                /* Hero image mobile : hauteur naturelle pour image portrait 848×1264 */
                @media (max-width: 960px) {
                    .hero-visual   { height: auto !important; min-height: 0 !important; overflow: hidden !important; padding-bottom: 10% !important; }
                    .hero-img-mobile {
                        position: relative !important;
                        top: auto !important; left: auto !important;
                        width: 88% !important; height: auto !important;
                        object-fit: unset !important;
                    }
                }
            `}</style>
        </section>
    );

    // ============ BENTO SERVICES ============
    const ServicesBento = () => {
        const services = [
            { icon: 'building', title: "Nettoyage d'Entreprises", desc: 'Bureaux, sièges, espaces de travail.',              route: 'service-entreprises' },
            { icon: 'home',     title: 'Nettoyage de Bâtiments',  desc: 'Copropriétés, parties communes, halls.',            route: 'service-batiments'   },
            { icon: 'window',   title: 'Nettoyage de Vitres',     desc: 'Vitrines, façades, baies vitrées.',                 route: 'service-vitres'      },
            { icon: 'shield',   title: 'Nettoyage Industriel',    desc: 'Sites de production, entrepôts, ateliers.',         route: 'service-industriel'  },
            { icon: 'leaf',     title: 'Jardins & Parcs',         desc: "Entretien d'espaces verts et extérieurs.",          route: 'service-jardins'     },
        ];
        return (
            <section style={{ background: 'var(--sme-grey-50)' }}>
                <div className="sme-container">
                    <Reveal>
                        <div style={{
                            display: 'flex',
                            justifyContent: 'space-between',
                            alignItems: 'flex-end',
                            marginBottom: '3rem',
                            gap: '2rem',
                            flexWrap: 'wrap',
                        }}>
                            <div style={{ maxWidth: 600 }}>
                                <span className="eyebrow">Nos services</span>
                                <h2 style={{ marginTop: '1rem' }}>Une expertise complète, sur mesure.</h2>
                            </div>
                            <button onClick={() => navigate('services')} className="btn btn-ghost">
                                Tous les services <Icon name="arrow" size={14}/>
                            </button>
                        </div>
                    </Reveal>

                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(4, 1fr)',
                        gap: '1.2rem',
                    }} className="bento-grid">

                        {/* Featured big card */}
                        <Reveal style={{ gridColumn: 'span 2', gridRow: 'span 2' }} className="bento-featured">
                            <article
                                onClick={() => navigate('service-entreprises')}
                                style={{
                                    height: '100%',
                                    minHeight: 460,
                                    borderRadius: 'var(--sme-radius-lg)',
                                    background: 'linear-gradient(135deg, #0891B2 0%, #066E8A 100%)',
                                    color: 'white',
                                    padding: 'clamp(2rem, 3vw, 2.5rem)',
                                    position: 'relative',
                                    overflow: 'hidden',
                                    cursor: 'pointer',
                                    display: 'flex',
                                    flexDirection: 'column',
                                    justifyContent: 'space-between',
                                }}
                                onMouseEnter={(e) => {
                                    e.currentTarget.style.transform = 'translateY(-4px)';
                                    e.currentTarget.style.boxShadow = '0 24px 48px rgba(8,145,178,0.35)';
                                }}
                                onMouseLeave={(e) => {
                                    e.currentTarget.style.transform = 'translateY(0)';
                                    e.currentTarget.style.boxShadow = 'none';
                                }}>
                                <div aria-hidden="true" style={{
                                    position: 'absolute',
                                    top: -60, right: -60,
                                    width: 280, height: 280,
                                    borderRadius: '50%',
                                    background: 'rgba(16,185,129,0.22)',
                                }}/>
                                <div aria-hidden="true" style={{
                                    position: 'absolute',
                                    bottom: -30, left: -30,
                                    width: 200, height: 200,
                                    borderRadius: '50%',
                                    background: 'rgba(255,255,255,0.06)',
                                }}/>

                                <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%' }}>
                                    <div style={{
                                        display: 'inline-flex',
                                        alignItems: 'center',
                                        gap: 6,
                                        padding: '5px 12px',
                                        borderRadius: 999,
                                        background: 'rgba(255,255,255,0.18)',
                                        backdropFilter: 'blur(8px)',
                                        fontSize: '0.72rem',
                                        textTransform: 'uppercase',
                                        letterSpacing: '0.1em',
                                        fontFamily: 'Poppins',
                                        fontWeight: 600,
                                        alignSelf: 'flex-start',
                                    }}>
                                        ⭐ Le + demandé
                                    </div>

                                    <div style={{ marginTop: 'auto' }}>
                                        <div style={{
                                            width: 64, height: 64,
                                            borderRadius: 18,
                                            background: 'rgba(255,255,255,0.15)',
                                            backdropFilter: 'blur(8px)',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            marginBottom: '1.4rem',
                                        }}>
                                            <Icon name="building" size={32}/>
                                        </div>
                                        <h3 style={{ color: 'white', fontSize: '1.85rem', marginBottom: '0.8rem' }}>
                                            Nettoyage d'Entreprises
                                        </h3>
                                        <p style={{ color: 'rgba(255,255,255,0.88)', fontSize: '1rem', maxWidth: 420, marginBottom: '1.5rem' }}>
                                            Entretien quotidien, hebdo ou mensuel de vos espaces de travail.
                                            Une équipe dédiée, des produits éco-labellisés, un suivi qualité mensuel.
                                        </p>
                                        <div style={{
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            gap: 8,
                                            fontFamily: 'Poppins',
                                            fontWeight: 600,
                                            color: 'white',
                                            fontSize: '0.92rem',
                                        }}>
                                            Découvrir l'offre
                                            <span style={{
                                                width: 32, height: 32,
                                                borderRadius: '50%',
                                                background: 'var(--sme-green)',
                                                display: 'inline-flex',
                                                alignItems: 'center',
                                                justifyContent: 'center',
                                            }}>
                                                <Icon name="arrow" size={14}/>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </article>
                        </Reveal>

                        {/* Smaller cards */}
                        {services.slice(1).map((s, i) => (
                            <Reveal key={s.title} delay={i * 60} style={{ gridColumn: 'span 1' }} className="bento-small">
                                <article
                                    onClick={() => navigate(s.route)}
                                    style={{
                                        height: '100%',
                                        background: 'white',
                                        borderRadius: 'var(--sme-radius-lg)',
                                        padding: '1.7rem 1.7rem',
                                        border: '1px solid var(--sme-grey-100)',
                                        boxShadow: 'var(--sme-shadow-sm)',
                                        cursor: 'pointer',
                                        transition: 'all 0.25s ease',
                                        display: 'flex',
                                        gap: '1.2rem',
                                        alignItems: 'flex-start',
                                    }}
                                    onMouseEnter={(e) => {
                                        e.currentTarget.style.transform = 'translateY(-3px)';
                                        e.currentTarget.style.boxShadow = 'var(--sme-shadow)';
                                        e.currentTarget.style.borderColor = 'var(--sme-blue-soft)';
                                    }}
                                    onMouseLeave={(e) => {
                                        e.currentTarget.style.transform = 'translateY(0)';
                                        e.currentTarget.style.boxShadow = 'var(--sme-shadow-sm)';
                                        e.currentTarget.style.borderColor = 'var(--sme-grey-100)';
                                    }}>
                                    <div style={{
                                        width: 52, height: 52,
                                        borderRadius: 14,
                                        background: i % 2 === 0 ? 'var(--sme-green-soft)' : 'var(--sme-blue-soft)',
                                        color: i % 2 === 0 ? 'var(--sme-green)' : 'var(--sme-blue)',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        flexShrink: 0,
                                    }}>
                                        <Icon name={s.icon} size={24}/>
                                    </div>
                                    <div style={{ flex: 1 }}>
                                        <h4 style={{ fontSize: '1.08rem', marginBottom: 6 }}>{s.title}</h4>
                                        <p style={{ fontSize: '0.9rem', color: 'var(--sme-grey-600)' }}>{s.desc}</p>
                                    </div>
                                    <Icon name="arrow" size={18} stroke={2}/>
                                </article>
                            </Reveal>
                        ))}
                    </div>
                </div>

                <style>{`
                    @media (max-width: 900px) {
                        .bento-grid { grid-template-columns: 1fr !important; }
                        .bento-featured, .bento-small { grid-column: span 1 !important; grid-row: auto !important; }
                    }
                `}</style>
            </section>
        );
    };

    // ============ STATS BAND (dark) ============
    const StatsBand = () => (
        <section style={{
            background: 'var(--sme-grey-900)',
            color: 'white',
            position: 'relative',
            overflow: 'hidden',
        }}>
            <div aria-hidden="true" style={{
                position: 'absolute', inset: 0,
                backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px)',
                backgroundSize: '24px 24px',
            }}/>
            <div aria-hidden="true" style={{
                position: 'absolute', top: '-30%', right: '-10%',
                width: 540, height: 540,
                borderRadius: '50%',
                background: 'radial-gradient(circle, rgba(16,185,129,0.18), transparent 65%)',
            }}/>
            <div aria-hidden="true" style={{
                position: 'absolute', bottom: '-40%', left: '-10%',
                width: 620, height: 620,
                borderRadius: '50%',
                background: 'radial-gradient(circle, rgba(8,145,178,0.18), transparent 65%)',
            }}/>

            <div className="sme-container" style={{ position: 'relative' }}>
                <Reveal>
                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)',
                        gap: 'clamp(2rem, 5vw, 4rem)',
                        alignItems: 'center',
                    }} className="stats-grid">
                        <div>
                            <span className="eyebrow green" style={{ color: 'var(--sme-green)' }}>En chiffres</span>
                            <h2 style={{ color: 'white', marginTop: '1rem' }}>
                                Une expertise<br/>
                                <span style={{ color: 'var(--sme-green)' }}>qui se mesure.</span>
                            </h2>
                            <p style={{ marginTop: '1.2rem', color: 'rgba(255,255,255,0.7)', maxWidth: 380 }}>
                                Plus d'une décennie au service de la propreté professionnelle.
                                Voici l'empreinte que nous laissons — au-delà des espaces nettoyés.
                            </p>
                        </div>

                        <div style={{
                            display: 'grid',
                            gridTemplateColumns: 'repeat(2, 1fr)',
                            gap: '1px',
                            background: 'rgba(255,255,255,0.08)',
                            borderRadius: 'var(--sme-radius-lg)',
                            overflow: 'hidden',
                            border: '1px solid rgba(255,255,255,0.08)',
                        }} className="stats-inner">
                            {[
                                { num: 36, suffix: '+', label: "années d'expérience", green: true },
                                { num: 200, suffix: '+', label: 'clients fidèles' },
                                { num: 50, suffix: '+', label: 'sites quotidiens' },
                                { num: 24, suffix: 'h', label: 'délai devis garanti', green: true },
                            ].map((s, i) => (
                                <div key={i} style={{
                                    padding: '2.2rem 2rem',
                                    background: 'rgba(15,23,42,0.6)',
                                    backdropFilter: 'blur(8px)',
                                }}>
                                    <div style={{
                                        fontFamily: 'Poppins, sans-serif',
                                        fontWeight: 600,
                                        fontSize: 'clamp(2.6rem, 5vw, 3.5rem)',
                                        lineHeight: 1,
                                        color: s.green ? 'var(--sme-green)' : 'white',
                                        letterSpacing: '-0.02em',
                                    }}>
                                        <Counter end={s.num} suffix={s.suffix}/>
                                    </div>
                                    <div style={{
                                        marginTop: '0.8rem',
                                        fontSize: '0.92rem',
                                        color: 'rgba(255,255,255,0.75)',
                                    }}>{s.label}</div>
                                </div>
                            ))}
                        </div>
                    </div>
                </Reveal>
            </div>

            <style>{`
                @media (max-width: 900px) {
                    .stats-grid { grid-template-columns: 1fr !important; }
                }
                @media (min-width: 901px) {
                    .stats-inner { transform: translateY(2.5rem); }
                }
            `}</style>
        </section>
    );

    // ============ WHY US ============
    const WhyUs = () => {
        const reasons = [
            { icon: 'users',  title: 'Équipes formées', desc: 'Personnel formé en interne à nos protocoles et fidélisé sur la durée.' },
            { icon: 'leaf',   title: 'Éco-responsable', desc: 'Produits éco-labellisés par défaut, protocoles ajustables sur demande.' },
            { icon: 'shield', title: 'Référent dédié',  desc: 'Un interlocuteur unique pour le suivi qualité et les ajustements.' },
            { icon: 'zap',    title: 'Réactivité 24h',  desc: 'Devis sous 24h, intervention urgente possible sous 48h.' },
            { icon: 'award',  title: 'Engagement qualité', desc: 'Contrôle qualité régulier et garantie satisfaction client.' },
        ];

        return (
            <section>
                <div className="sme-container">
                    <Reveal>
                        <div style={{ maxWidth: 700, margin: '0 auto 3.5rem', textAlign: 'center' }}>
                            <span className="eyebrow">Pourquoi nous choisir</span>
                            <h2 style={{ marginTop: '1rem' }}>
                                Cinq raisons qui font <span style={{ color: 'var(--sme-green)' }}>la différence.</span>
                            </h2>
                        </div>
                    </Reveal>

                    <div style={{
                        display: 'grid',
                        gridTemplateColumns: 'repeat(6, 1fr)',
                        gap: '1.2rem',
                    }} className="why-grid">

                        {/* Featured image card */}
                        <Reveal style={{ gridColumn: 'span 2', gridRow: 'span 3' }} className="why-feature">
                            <div style={{
                                height: '100%',
                                minHeight: 520,
                                borderRadius: 'var(--sme-radius-lg)',
                                overflow: 'hidden',
                                position: 'relative',
                            }}>
                                <img
                                    src={(window.smeThemeUrl || '/wp-content/themes/sme-nettoyage-react') + '/images/equipe-portrait.jpeg?v=6'}
                                    alt="Portrait équipe SME"
                                    loading="lazy"
                                    decoding="async"
                                    style={{
                                        position: 'absolute',
                                        inset: 0,
                                        width: '100%',
                                        height: '100%',
                                        objectFit: 'cover',
                                        borderRadius: '24px',
                                    }}/>
                                <div style={{
                                    position: 'absolute',
                                    inset: 0,
                                    background: 'linear-gradient(180deg, transparent 40%, rgba(15,23,42,0.85))',
                                    pointerEvents: 'none',
                                }}/>
                                <div style={{
                                    position: 'absolute',
                                    bottom: 0, left: 0, right: 0,
                                    padding: '2rem',
                                    color: 'white',
                                    pointerEvents: 'none',
                                }}>
                                    <div style={{
                                        fontFamily: 'Poppins',
                                        fontWeight: 600,
                                        fontSize: '1.4rem',
                                        marginBottom: '0.6rem',
                                    }}>
                                        Une équipe que vous reconnaîtrez
                                    </div>
                                    <p style={{ fontSize: '0.92rem', color: 'rgba(255,255,255,0.85)' }}>
                                        Nous fidélisons nos collaborateurs pour garantir continuité et confiance.
                                    </p>
                                </div>
                            </div>
                        </Reveal>

                        {reasons.map((r, i) => (
                            <Reveal key={r.title} delay={i * 60}
                                    style={{ gridColumn: i === 0 ? 'span 4' : 'span 2' }}
                                    className={i === 0 ? "why-wide" : "why-cell"}>
                                <article style={{
                                    height: '100%',
                                    padding: '1.8rem',
                                    background: i === 0 ? 'var(--sme-blue)' : 'white',
                                    color: i === 0 ? 'white' : 'inherit',
                                    borderRadius: 'var(--sme-radius-lg)',
                                    border: i === 0 ? 'none' : '1px solid var(--sme-grey-100)',
                                    boxShadow: i === 0 ? '0 12px 28px rgba(8,145,178,0.22)' : 'var(--sme-shadow-sm)',
                                    display: 'flex',
                                    flexDirection: i === 0 ? 'row' : 'column',
                                    gap: i === 0 ? '1.5rem' : '1rem',
                                    alignItems: i === 0 ? 'center' : 'flex-start',
                                }}>
                                    <div style={{
                                        width: 52, height: 52,
                                        borderRadius: 14,
                                        background: i === 0 ? 'rgba(255,255,255,0.18)' : 'var(--sme-blue-soft)',
                                        color: i === 0 ? 'white' : 'var(--sme-blue)',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        flexShrink: 0,
                                    }}>
                                        <Icon name={r.icon} size={24}/>
                                    </div>
                                    <div>
                                        <h4 style={{
                                            fontSize: '1.08rem',
                                            marginBottom: 6,
                                            color: i === 0 ? 'white' : 'inherit',
                                        }}>{r.title}</h4>
                                        <p style={{
                                            fontSize: '0.92rem',
                                            color: i === 0 ? 'rgba(255,255,255,0.85)' : 'var(--sme-grey-600)',
                                        }}>{r.desc}</p>
                                    </div>
                                </article>
                            </Reveal>
                        ))}
                    </div>
                </div>

                <style>{`
                    @media (max-width: 900px) {
                        .why-grid { grid-template-columns: 1fr !important; }
                        .why-feature, .why-wide, .why-cell { grid-column: span 1 !important; grid-row: auto !important; }
                        .why-feature > div { min-height: 300px !important; }
                        .why-feature img { object-position: center 25% !important; }
                    }
                    @media (min-width: 601px) and (max-width: 900px) {
                        .why-feature img { object-position: center top !important; }
                    }
                `}</style>
            </section>
        );
    };

    // ============ TESTIMONIALS ============
    const Testimonials = () => (
        <section style={{ background: 'var(--sme-grey-50)' }}>
            <div className="sme-container">
                <Reveal>
                    <div style={{ maxWidth: 700, margin: '0 auto 3.5rem', textAlign: 'center' }}>
                        <span className="eyebrow green">Témoignages</span>
                        <h2 style={{ marginTop: '1rem' }}>La propreté professionnelle, sans compromis.</h2>

                        {/* Google Reviews badge */}
                        <div style={{
                            display: 'inline-flex',
                            alignItems: 'center',
                            gap: '0.9rem',
                            marginTop: '1.4rem',
                            background: 'white',
                            padding: '0.6rem 1.2rem',
                            borderRadius: 999,
                            boxShadow: 'var(--sme-shadow)',
                            border: '1px solid var(--sme-grey-100)',
                        }}>
                            {/* Overlapping avatars */}
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                {[
                                    { initials: 'JM', bg: '#0891B2' },
                                    { initials: 'SK', bg: '#10B981' },
                                    { initials: 'AB', bg: '#6366F1' },
                                    { initials: 'LR', bg: '#0E9E70' },
                                ].map((a, i) => (
                                    <div key={a.initials} style={{
                                        width: 32, height: 32,
                                        borderRadius: '50%',
                                        background: a.bg,
                                        color: 'white',
                                        display: 'flex',
                                        alignItems: 'center',
                                        justifyContent: 'center',
                                        fontFamily: 'Poppins',
                                        fontWeight: 700,
                                        fontSize: '0.65rem',
                                        border: '2px solid white',
                                        marginLeft: i === 0 ? 0 : -10,
                                        position: 'relative',
                                        zIndex: 4 - i,
                                    }}>{a.initials}</div>
                                ))}
                            </div>

                            {/* Stars + score */}
                            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 1 }}>
                                <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                                    <div style={{ display: 'flex', gap: 2, color: '#F59E0B' }}>
                                        {[...Array(5)].map((_, i) => (
                                            <svg key={i} width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                            </svg>
                                        ))}
                                    </div>
                                    <span style={{ fontFamily: 'Poppins', fontWeight: 700, fontSize: '0.9rem', color: 'var(--sme-grey-900)' }}>5,0</span>
                                </div>
                                <div style={{ fontSize: '0.72rem', color: 'var(--sme-grey-600)' }}>200+ clients · Google</div>
                            </div>
                        </div>
                    </div>
                </Reveal>

                <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)',
                    gap: '1.5rem',
                }} className="testi-grid">

                    {/* Featured big testimonial */}
                    <Reveal>
                        <article style={{
                            background: 'white',
                            borderRadius: 'var(--sme-radius-lg)',
                            padding: 'clamp(2rem, 4vw, 3rem)',
                            boxShadow: 'var(--sme-shadow)',
                            border: '1px solid var(--sme-grey-100)',
                            position: 'relative',
                            overflow: 'hidden',
                            height: '100%',
                            display: 'flex',
                            flexDirection: 'column',
                            justifyContent: 'space-between',
                        }}>
                            <div aria-hidden="true" style={{
                                position: 'absolute',
                                top: -30, right: -30,
                                fontFamily: 'serif',
                                fontSize: 280,
                                lineHeight: 0.8,
                                color: 'var(--sme-blue-soft)',
                                fontWeight: 900,
                                userSelect: 'none',
                            }}>"</div>

                            <div style={{ position: 'relative' }}>
                                <div style={{ display: 'flex', gap: 3, color: '#F59E0B', marginBottom: '1.4rem' }}>
                                    {[...Array(5)].map((_, i) => (
                                        <svg key={i} width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                        </svg>
                                    ))}
                                </div>
                                <p style={{
                                    fontFamily: 'Poppins, sans-serif',
                                    fontWeight: 500,
                                    fontSize: 'clamp(1.2rem, 2vw, 1.55rem)',
                                    lineHeight: 1.45,
                                    color: 'var(--sme-grey-900)',
                                    letterSpacing: '-0.01em',
                                    marginBottom: '2rem',
                                }}>
                                    « Une équipe ponctuelle, soignée, et toujours souriante. Nos bureaux n'ont jamais été aussi bien tenus.
                                    Le référent qualité fait vraiment la différence — on se sent écoutés. »
                                </p>
                            </div>

                            <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                                <div style={{
                                    width: 56, height: 56,
                                    borderRadius: '50%',
                                    background: 'linear-gradient(135deg, var(--sme-blue), var(--sme-green))',
                                    color: 'white',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    fontFamily: 'Poppins',
                                    fontWeight: 600,
                                    fontSize: '1.2rem',
                                    flexShrink: 0,
                                }}>CB</div>
                                <div style={{ flex: 1 }}>
                                    <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: '1.02rem' }}>Camille Bertrand</div>
                                    <div style={{ fontSize: '0.88rem', color: 'var(--sme-grey-600)' }}>Office Manager · Novena, Paris 11e</div>
                                </div>
                                <div style={{
                                    padding: '6px 12px',
                                    background: 'var(--sme-green-soft)',
                                    color: 'var(--sme-green)',
                                    borderRadius: 999,
                                    fontFamily: 'Poppins',
                                    fontWeight: 600,
                                    fontSize: '0.75rem',
                                    textTransform: 'uppercase',
                                    letterSpacing: '0.05em',
                                }}>
                                    Client depuis 3 ans
                                </div>
                            </div>
                        </article>
                    </Reveal>

                    {/* Smaller testimonials */}
                    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
                        {[
                            { initials: 'PL', name: 'Pierre Laurent', role: 'Particulier · Pointe-à-Pitre',
                              text: 'Réactivité impressionnante après notre déménagement. Travail impeccable.', color: 'green' },
                            { initials: 'LM', name: 'Léa Marchand', role: 'Directrice agence · Montreuil',
                              text: 'Un vrai partenaire au quotidien. Communication fluide, équipe formée.', color: 'blue' },
                        ].map((t, i) => (
                            <Reveal key={t.name} delay={i * 80}>
                                <article style={{
                                    background: 'white',
                                    padding: '1.8rem',
                                    borderRadius: 'var(--sme-radius-lg)',
                                    border: '1px solid var(--sme-grey-100)',
                                    boxShadow: 'var(--sme-shadow-sm)',
                                }}>
                                    <div style={{ display: 'flex', gap: 2, color: '#F59E0B', marginBottom: '0.9rem' }}>
                                        {[...Array(5)].map((_, i) => (
                                            <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                                                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                                            </svg>
                                        ))}
                                    </div>
                                    <p style={{
                                        fontSize: '0.98rem',
                                        color: 'var(--sme-grey-900)',
                                        lineHeight: 1.55,
                                        marginBottom: '1.2rem',
                                    }}>« {t.text} »</p>
                                    <div style={{
                                        borderTop: '1px solid var(--sme-grey-100)',
                                        paddingTop: '1rem',
                                        display: 'flex', alignItems: 'center', gap: 12,
                                    }}>
                                        <div style={{
                                            width: 40, height: 40,
                                            borderRadius: '50%',
                                            background: t.color === 'green' ? 'var(--sme-green)' : 'var(--sme-blue)',
                                            color: 'white',
                                            display: 'flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            fontFamily: 'Poppins',
                                            fontWeight: 600,
                                            fontSize: '0.88rem',
                                        }}>{t.initials}</div>
                                        <div>
                                            <div style={{ fontFamily: 'Poppins', fontWeight: 600, fontSize: '0.92rem' }}>{t.name}</div>
                                            <div style={{ fontSize: '0.8rem', color: 'var(--sme-grey-600)' }}>{t.role}</div>
                                        </div>
                                    </div>
                                </article>
                            </Reveal>
                        ))}
                    </div>
                </div>
            </div>

            <style>{`
                @media (max-width: 900px) {
                    .testi-grid { grid-template-columns: 1fr !important; }
                }
            `}</style>
        </section>
    );

    // ============ FINAL CTA ============
    const FinalCTA = () => (
        <section>
            <div className="sme-container">
                <Reveal>
                    <div style={{
                        background: 'linear-gradient(135deg, #0F172A 0%, #0891B2 100%)',
                        borderRadius: 'var(--sme-radius-lg)',
                        padding: 'clamp(2.5rem, 5vw, 4rem)',
                        color: 'white',
                        position: 'relative',
                        overflow: 'hidden',
                    }}>
                        <div aria-hidden="true" style={{
                            position: 'absolute',
                            top: '-40%', right: '-10%',
                            width: 540, height: 540,
                            borderRadius: '50%',
                            background: 'radial-gradient(circle, rgba(16,185,129,0.32), transparent 60%)',
                        }}/>
                        <div aria-hidden="true" style={{
                            position: 'absolute', inset: 0,
                            backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px)',
                            backgroundSize: '20px 20px',
                            maskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
                            WebkitMaskImage: 'radial-gradient(ellipse at center, black 30%, transparent 75%)',
                        }}/>

                        <div style={{
                            position: 'relative',
                            display: 'grid',
                            gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)',
                            gap: '3rem',
                            alignItems: 'center',
                        }} className="cta-grid">

                            <div>
                                <span className="eyebrow" style={{ color: 'var(--sme-green)' }}>
                                    <span style={{ background: 'var(--sme-green)' }}/>
                                    Prêt à passer à l'action ?
                                </span>
                                <h2 style={{ color: 'white', marginTop: '1rem', fontSize: 'clamp(1.8rem, 3.5vw, 2.6rem)' }}>
                                    Recevez votre devis<br/>
                                    <span style={{ color: 'var(--sme-green)' }}>gratuit en 24h.</span>
                                </h2>
                                <p style={{ marginTop: '1.2rem', color: 'rgba(255,255,255,0.85)', maxWidth: 480, fontSize: '1.05rem' }}>
                                    Un échange rapide, une visite si besoin, et une proposition claire et détaillée.
                                    Aucun engagement.
                                </p>
                                <div style={{ marginTop: '2rem', display: 'flex', gap: '0.8rem', flexWrap: 'wrap' }}>
                                    <button className="btn btn-secondary" onClick={() => navigate('contact')}
                                            style={{ padding: '16px 30px', fontSize: '0.95rem' }}>
                                        Demander un devis <Icon name="arrow" size={16}/>
                                    </button>
                                    <a href="tel:+590590819174" className="btn btn-ghost" style={{
                                        borderColor: 'rgba(255,255,255,0.4)',
                                        color: 'white',
                                        padding: '16px 26px',
                                    }}>
                                        <Icon name="phone" size={16}/> +590 590 81-9174
                                    </a>
                                </div>
                            </div>

                            <div style={{
                                display: 'flex',
                                flexDirection: 'column',
                                gap: '1rem',
                            }}>
                                {[
                                    { icon: 'check', text: 'Visite & devis gratuits' },
                                    { icon: 'check', text: 'Réponse sous 24h ouvrées' },
                                    { icon: 'check', text: 'Sans engagement' },
                                    { icon: 'check', text: 'Équipe identifiée dès la 1ʳᵉ intervention' },
                                ].map((it, i) => (
                                    <div key={i} style={{
                                        display: 'flex',
                                        alignItems: 'center',
                                        gap: 14,
                                        padding: '0.9rem 1.1rem',
                                        background: 'rgba(255,255,255,0.08)',
                                        backdropFilter: 'blur(8px)',
                                        borderRadius: 14,
                                        border: '1px solid rgba(255,255,255,0.12)',
                                    }}>
                                        <span style={{
                                            width: 28, height: 28,
                                            borderRadius: '50%',
                                            background: 'var(--sme-green)',
                                            color: 'white',
                                            display: 'inline-flex',
                                            alignItems: 'center',
                                            justifyContent: 'center',
                                            flexShrink: 0,
                                        }}><Icon name={it.icon} size={14} stroke={3}/></span>
                                        <span style={{ fontFamily: 'Poppins', fontWeight: 500 }}>{it.text}</span>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </Reveal>
            </div>

            <style>{`
                @media (max-width: 900px) {
                    .cta-grid { grid-template-columns: 1fr !important; }
                }
            `}</style>
        </section>
    );

    return (
        <main className="page-enter">
            <Hero/>
            <ServicesBento/>
            <StatsBand/>
            <WhyUs/>
            <Testimonials/>
            <FinalCTA/>
        </main>
    );
};

window.HomePage = HomePage;