/* global React */

// ---------- Icons (inline SVG) ----------
const Icon = ({ name, size = 24, stroke = 2 }) => {
    const paths = {
        building: <><rect x="4" y="3" width="16" height="18" rx="1"/><path d="M9 8h.01M15 8h.01M9 12h.01M15 12h.01M9 16h.01M15 16h.01"/></>,
        home: <><path d="M3 11l9-8 9 8M5 10v10h14V10"/></>,
        sparkles: <><path d="M12 3v3M12 18v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M3 12h3M18 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"/><circle cx="12" cy="12" r="3"/></>,
        broom: <><path d="M14 4l6 6M9 9l6 6M5 21l4-4 6-6 4-4M5 21h4l1-3"/></>,
        shield: <><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></>,
        window: <><rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 12h18M12 3v18"/></>,
        phone: <><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.96.34 1.9.65 2.81a2 2 0 0 1-.45 2.11L8 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.3 1.85.52 2.81.64A2 2 0 0 1 22 16.92z"/></>,
        mail: <><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 7 10 6 10-6"/></>,
        location: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></>,
        clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
        check: <><path d="m5 12 5 5 9-11"/></>,
        arrow: <><path d="M5 12h14M13 5l7 7-7 7"/></>,
        star: <><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"/></>,
        users: <><circle cx="9" cy="8" r="4"/><path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/><circle cx="17" cy="8" r="3"/><path d="M21 21v-1.5a3.5 3.5 0 0 0-3-3.45"/></>,
        award: <><circle cx="12" cy="9" r="6"/><path d="m8.21 13.89-1.74 7.11L12 17l5.53 4-1.74-7.11"/></>,
        leaf: <><path d="M11 20A7 7 0 0 1 4 13c0-5 4-9 13-9 0 9-4 13-9 13 0 0-2 0-3-1"/><path d="M2 22c2-3 4-5 8-7"/></>,
        heart: <><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></>,
        zap: <><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></>,
        chat: <><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></>,
        menu: <><path d="M3 6h18M3 12h18M3 18h18"/></>,
        close: <><path d="M18 6 6 18M6 6l12 12"/></>,
        target: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></>,
        spray: <><path d="M9 3h6v4H9zM10 7v3M14 7v3M8 10h8l1 11H7z"/><circle cx="18" cy="5" r="1"/><circle cx="20" cy="7" r="0.5"/></>,
    };
    return (
        <svg width={size} height={size} viewBox="0 0 24 24"
             fill="none" stroke="currentColor" strokeWidth={stroke}
             strokeLinecap="round" strokeLinejoin="round"
             aria-hidden="true">
            {paths[name] || null}
        </svg>
    );
};

// ---------- SME Logo (real brand mark) ----------
const SMELogo = ({ size = 'md', light = false, vertical = false }) => {
    const scale = size === 'xl' ? 1.8 : size === 'lg' ? 1.3 : size === 'sm' ? 0.7 : 1;
    const subColor = light ? 'rgba(255,255,255,0.95)' : '#0891B2';
    const tagColor = light ? 'rgba(255,255,255,0.55)' : '#94A3B8';

    // Real brand logo (JPEG, white background). On dark surfaces we wrap it
    // in a small white card so the white background reads as intentional.
    const markSize = 64 * scale;
    const mark = (
        <div style={{
            width: markSize,
            height: markSize,
            background: '#FFFFFF',
            borderRadius: light ? 10 : 0,
            padding: light ? 4 : 0,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
        }}>
            <img
                src={(window.smeThemeUrl || '') + '/images/logo-sme.jpeg'}
                alt="SME Nettoyage"
                style={{
                    width: '100%',
                    height: '100%',
                    objectFit: 'contain',
                    display: 'block',
                }}
            />
        </div>
    );

    if (vertical) {
        return (
            <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 8 * scale }}>
                {mark}
                <span style={{
                    fontFamily: 'Poppins, sans-serif',
                    fontWeight: 600,
                    fontSize: `${1.1 * scale}rem`,
                    letterSpacing: '0.22em',
                    color: subColor,
                    textTransform: 'uppercase',
                }}>NETTOYAGE</span>
                <span style={{
                    fontFamily: 'Inter, sans-serif',
                    fontSize: `${0.6 * scale}rem`,
                    letterSpacing: '0.15em',
                    color: tagColor,
                    textTransform: 'uppercase',
                }}>La propreté, notre engagement</span>
            </div>
        );
    }

    return (
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 12 * scale }}>
            {mark}
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 4 * scale }}>
                <span style={{
                    fontFamily: 'Poppins, sans-serif',
                    fontWeight: 600,
                    fontSize: `${0.95 * scale}rem`,
                    letterSpacing: '0.22em',
                    color: subColor,
                    textTransform: 'uppercase',
                }}>NETTOYAGE</span>
                <span style={{
                    fontFamily: 'Inter, sans-serif',
                    fontSize: `${0.55 * scale}rem`,
                    letterSpacing: '0.12em',
                    color: tagColor,
                    textTransform: 'uppercase',
                }}>La propreté, notre engagement</span>
            </div>
        </div>
    );
};

// ---------- Scroll-triggered fade-in (rect-based for reliability) ----------
const Reveal = ({ children, delay = 0, y = 24, as: As = 'div', style = {}, ...rest }) => {
    const ref = React.useRef(null);
    const [visible, setVisible] = React.useState(false);
    React.useEffect(() => {
        const el = ref.current;
        if (!el) return;
        const check = () => {
            const rect = el.getBoundingClientRect();
            return rect.top < window.innerHeight - 40 && rect.bottom > 0;
        };
        if (check()) { setVisible(true); return; }
        const onScroll = () => { if (check()) { setVisible(true); cleanup(); } };
        // Safety fallback: reveal anyway after 1.2s so content can never stay hidden.
        const fallback = setTimeout(() => { setVisible(true); cleanup(); }, 1200);
        const cleanup = () => {
            window.removeEventListener('scroll', onScroll);
            clearTimeout(fallback);
        };
        window.addEventListener('scroll', onScroll, { passive: true });
        return cleanup;
    }, []);
    return (
        <As ref={ref} style={{
            opacity: visible ? 1 : 0,
            transform: visible ? 'translateY(0)' : `translateY(${y}px)`,
            transition: `opacity 0.7s ${delay}ms ease, transform 0.7s ${delay}ms cubic-bezier(0.22, 1, 0.36, 1)`,
            ...style,
        }} {...rest}>
            {children}
        </As>
    );
};

// ---------- Animated counter (rect-based) ----------
const Counter = ({ end, suffix = '', prefix = '', duration = 1600 }) => {
    const ref = React.useRef(null);
    const [val, setVal] = React.useState(0);
    const startedRef = React.useRef(false);
    React.useEffect(() => {
        const el = ref.current;
        if (!el) return;
        let raf;
        const startAnim = () => {
            if (startedRef.current) return;
            startedRef.current = true;
            const start = performance.now();
            const tick = (now) => {
                const t = Math.min(1, (now - start) / duration);
                const eased = 1 - Math.pow(1 - t, 3);
                setVal(Math.round(end * eased));
                if (t < 1) raf = requestAnimationFrame(tick);
            };
            raf = requestAnimationFrame(tick);
        };
        const check = () => {
            const rect = el.getBoundingClientRect();
            return rect.top < window.innerHeight - 40 && rect.bottom > 0;
        };
        if (check()) { startAnim(); return () => cancelAnimationFrame(raf); }
        const onScroll = () => { if (check()) { startAnim(); cleanup(); } };
        const fallback = setTimeout(startAnim, 1500);
        const cleanup = () => {
            window.removeEventListener('scroll', onScroll);
            clearTimeout(fallback);
        };
        window.addEventListener('scroll', onScroll, { passive: true });
        return () => { cleanup(); cancelAnimationFrame(raf); };
    }, [end, duration]);
    return <span ref={ref}>{prefix}{val.toLocaleString('fr-FR')}{suffix}</span>;
};

// ---------- Header (utility topbar + main bar with mega-menu) ----------
const SUB_SERVICES = [
    { id: 'entreprises', label: "Nettoyage d'Entreprises", icon: 'building', desc: 'Bureaux, sièges, espaces de travail.' },
    { id: 'batiments',   label: 'Nettoyage de Bâtiments',   icon: 'home',     desc: 'Copropriétés, parties communes, halls.' },
    { id: 'vitres',      label: 'Nettoyage de Vitres',      icon: 'window',   desc: 'Vitrines, façades, baies vitrées.' },
    { id: 'industriel',  label: 'Nettoyage Industriel',     icon: 'shield',   desc: 'Sites de production, entrepôts, ateliers.' },
    { id: 'jardins',     label: 'Jardins & Parcs',          icon: 'leaf',     desc: 'Entretien d\'espaces verts et extérieurs.' },
];

const Header = ({ currentPage, navigate }) => {
    const [scrolled, setScrolled] = React.useState(false);
    const [mobileOpen, setMobileOpen] = React.useState(false);
    const [megaOpen, setMegaOpen] = React.useState(false);
    const [mobileServicesOpen, setMobileServicesOpen] = React.useState(false);
    const closeTimer = React.useRef(null);

    React.useEffect(() => {
        const onScroll = () => setScrolled(window.scrollY > 12);
        window.addEventListener('scroll', onScroll);
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    // Close mega-menu on Escape
    React.useEffect(() => {
        const onKey = (e) => { if (e.key === 'Escape') setMegaOpen(false); };
        window.addEventListener('keydown', onKey);
        return () => window.removeEventListener('keydown', onKey);
    }, []);

    const pages = [
        { id: 'home',     label: 'Accueil' },
        { id: 'about',    label: 'À propos' },
        { id: 'services', label: 'Services', hasMega: true },
        { id: 'faq',      label: 'FAQ' },
        { id: 'contact',  label: 'Contact' },
    ];

    const openMega = () => {
        if (closeTimer.current) { clearTimeout(closeTimer.current); closeTimer.current = null; }
        setMegaOpen(true);
    };
    const scheduleClose = () => {
        if (closeTimer.current) clearTimeout(closeTimer.current);
        closeTimer.current = setTimeout(() => setMegaOpen(false), 180);
    };

    const goService = (subId) => {
        setMegaOpen(false);
        setMobileOpen(false);
        setMobileServicesOpen(false);
        navigate('services');
        // Defer hash so navigate's scroll-to-top finishes first
        setTimeout(() => {
            const el = document.getElementById('service-' + subId);
            if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }, 350);
    };

    const navItem = (p) => {
        const active = currentPage === p.id;
        if (p.hasMega) {
            return (
                <div
                    key={p.id}
                    onMouseEnter={openMega}
                    onMouseLeave={scheduleClose}
                    style={{ position: 'relative' }}>
                    <button
                        onClick={() => { setMegaOpen(!megaOpen); }}
                        aria-expanded={megaOpen}
                        aria-haspopup="true"
                        style={{
                            background: 'none', border: 'none',
                            fontFamily: 'Poppins, sans-serif',
                            fontWeight: active ? 600 : 500,
                            fontSize: '0.95rem',
                            color: active || megaOpen ? 'var(--sme-blue)' : 'var(--sme-grey-900)',
                            padding: '10px 4px',
                            position: 'relative',
                            cursor: 'pointer',
                            display: 'inline-flex',
                            alignItems: 'center',
                            gap: 6,
                            transition: 'color 0.2s',
                        }}>
                        {p.label}
                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
                             style={{
                                 transform: megaOpen ? 'rotate(180deg)' : 'rotate(0)',
                                 transition: 'transform 0.2s ease',
                             }}>
                            <path d="m6 9 6 6 6-6"/>
                        </svg>
                        <span style={{
                            position: 'absolute', bottom: 4, left: 4, right: 4,
                            height: 2, background: active ? 'var(--sme-green)' : 'transparent',
                            borderRadius: 2, transition: 'background 0.2s',
                        }}/>
                    </button>
                </div>
            );
        }
        return (
            <button
                key={p.id}
                onClick={() => { navigate(p.id); setMobileOpen(false); }}
                style={{
                    background: 'none',
                    border: 'none',
                    fontFamily: 'Poppins, sans-serif',
                    fontWeight: active ? 600 : 500,
                    fontSize: '0.95rem',
                    color: active ? 'var(--sme-blue)' : 'var(--sme-grey-900)',
                    padding: '10px 4px',
                    position: 'relative',
                    cursor: 'pointer',
                    transition: 'color 0.2s',
                }}>
                {p.label}
                <span style={{
                    position: 'absolute', bottom: 4, left: 4, right: 4,
                    height: 2, background: active ? 'var(--sme-green)' : 'transparent',
                    borderRadius: 2, transition: 'background 0.2s',
                }}/>
            </button>
        );
    };

    return (
        <>
            {/* TOP UTILITY BAR */}
            <div className="topbar" style={{
                background: 'var(--sme-grey-900)',
                color: 'rgba(255,255,255,0.85)',
                fontSize: '0.82rem',
                fontFamily: 'Poppins, sans-serif',
                fontWeight: 400,
            }}>
                <div className="sme-container" style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    minHeight: 40, gap: '1rem', flexWrap: 'wrap',
                }}>
                    <div style={{ display: 'flex', gap: '1.5rem', alignItems: 'center', flexWrap: 'wrap' }}>
                        <a href="tel:0768536516" style={{
                            display: 'inline-flex', alignItems: 'center', gap: 8,
                            color: 'inherit', textDecoration: 'none',
                        }}>
                            <Icon name="phone" size={13}/> 07 68 53 65 16
                        </a>
                        <span className="topbar-email" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                            <Icon name="mail" size={13}/> contact@smenettoyage.fr
                        </span>
                        <span className="topbar-hours" style={{
                            display: 'inline-flex', alignItems: 'center', gap: 8,
                            color: 'rgba(255,255,255,0.55)',
                        }}>
                            <Icon name="clock" size={13}/> Lun – Sam · 8h–19h
                        </span>
                    </div>
                    <div style={{ display: 'flex', gap: '1.2rem', alignItems: 'center' }}>
                        <span style={{
                            display: 'inline-flex', alignItems: 'center', gap: 6,
                            color: 'var(--sme-green)',
                        }}>
                            <span style={{
                                width: 7, height: 7, borderRadius: '50%',
                                background: 'var(--sme-green)',
                                boxShadow: '0 0 0 3px rgba(16,185,129,0.25)',
                                animation: 'pulse 2s ease-in-out infinite',
                            }}/>
                            Disponible — Devis 24h
                        </span>
                    </div>
                </div>
                <style>{`
                    @keyframes pulse {
                        0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,0.25); }
                        50% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
                    }
                    @media (max-width: 720px) {
                        .topbar-email, .topbar-hours { display: none !important; }
                    }
                `}</style>
            </div>

            {/* MAIN HEADER */}
            <header style={{
                position: 'sticky',
                top: 0,
                zIndex: 50,
                background: scrolled ? 'rgba(255,255,255,0.96)' : 'white',
                backdropFilter: 'blur(14px)',
                WebkitBackdropFilter: 'blur(14px)',
                borderBottom: '1px solid var(--sme-grey-100)',
                boxShadow: scrolled ? '0 4px 20px rgba(15,23,42,0.04)' : 'none',
                transition: 'all 0.25s ease',
            }}
            onMouseLeave={scheduleClose}>
                <div className="sme-container" style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingBlock: 18,
                    gap: '2rem',
                }}>
                    <button onClick={() => navigate('home')}
                            style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer' }}
                            aria-label="Accueil SME Nettoyage">
                        <SMELogo size="md"/>
                    </button>

                    <nav className="desktop-nav" style={{
                        display: 'flex', alignItems: 'center', gap: '2rem',
                    }}>
                        {pages.map(navItem)}
                    </nav>

                    <div className="desktop-cta" style={{ display: 'flex', alignItems: 'center', gap: '0.8rem' }}>
                        <button className="btn btn-primary"
                                style={{ padding: '13px 22px', fontSize: '0.85rem' }}
                                onClick={() => navigate('contact')}>
                            Devis gratuit <Icon name="arrow" size={14}/>
                        </button>
                    </div>

                    <button className="mobile-toggle" onClick={() => setMobileOpen(!mobileOpen)}
                        aria-label="Menu"
                        style={{
                            display: 'none',
                            background: mobileOpen ? 'var(--sme-grey-50)' : 'none',
                            border: '1px solid var(--sme-grey-100)',
                            borderRadius: 12,
                            padding: 10,
                            color: 'var(--sme-grey-900)',
                        }}>
                        <Icon name={mobileOpen ? 'close' : 'menu'}/>
                    </button>
                </div>

                {/* MEGA-MENU PANEL — full-width drop under the header */}
                <div
                    onMouseEnter={openMega}
                    onMouseLeave={scheduleClose}
                    aria-hidden={!megaOpen}
                    style={{
                        position: 'absolute',
                        top: '100%', left: 0, right: 0,
                        background: 'white',
                        borderTop: '1px solid var(--sme-grey-100)',
                        borderBottom: '1px solid var(--sme-grey-100)',
                        boxShadow: '0 24px 48px -16px rgba(15,23,42,0.18)',
                        opacity: megaOpen ? 1 : 0,
                        transform: megaOpen ? 'translateY(0)' : 'translateY(-8px)',
                        pointerEvents: megaOpen ? 'auto' : 'none',
                        transition: 'opacity 0.22s ease, transform 0.22s ease',
                    }}>
                    <div className="sme-container" style={{ paddingBlock: '2rem' }}>
                        <div style={{
                            display: 'grid',
                            gridTemplateColumns: 'minmax(0, 1fr) 320px',
                            gap: '2.5rem',
                            alignItems: 'stretch',
                        }} className="mega-grid">

                            {/* Sub-services grid */}
                            <div>
                                <span className="eyebrow" style={{ marginBottom: '1rem', display: 'inline-flex' }}>
                                    Nos prestations
                                </span>
                                <div style={{
                                    marginTop: '1rem',
                                    display: 'grid',
                                    gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                                    gap: '0.6rem',
                                }}>
                                    {SUB_SERVICES.map((s, i) => (
                                        <button
                                            key={s.id}
                                            onClick={() => goService(s.id)}
                                            style={{
                                                display: 'flex',
                                                alignItems: 'flex-start',
                                                gap: '0.85rem',
                                                padding: '0.9rem 1rem',
                                                background: 'transparent',
                                                border: '1px solid transparent',
                                                borderRadius: 12,
                                                cursor: 'pointer',
                                                textAlign: 'left',
                                                fontFamily: 'inherit',
                                                transition: 'all 0.18s ease',
                                            }}
                                            onMouseEnter={(e) => {
                                                e.currentTarget.style.background = 'var(--sme-grey-50)';
                                                e.currentTarget.style.borderColor = 'var(--sme-grey-100)';
                                            }}
                                            onMouseLeave={(e) => {
                                                e.currentTarget.style.background = 'transparent';
                                                e.currentTarget.style.borderColor = 'transparent';
                                            }}>
                                            <span style={{
                                                width: 40, height: 40,
                                                borderRadius: 10,
                                                background: i % 2 === 0 ? 'var(--sme-blue-soft)' : 'var(--sme-green-soft)',
                                                color: i % 2 === 0 ? 'var(--sme-blue)' : 'var(--sme-green)',
                                                display: 'inline-flex',
                                                alignItems: 'center',
                                                justifyContent: 'center',
                                                flexShrink: 0,
                                            }}>
                                                <Icon name={s.icon} size={20}/>
                                            </span>
                                            <span>
                                                <span style={{
                                                    display: 'block',
                                                    fontFamily: 'Poppins, sans-serif',
                                                    fontWeight: 600,
                                                    fontSize: '0.95rem',
                                                    color: 'var(--sme-grey-900)',
                                                    marginBottom: 3,
                                                }}>{s.label}</span>
                                                <span style={{
                                                    display: 'block',
                                                    fontSize: '0.82rem',
                                                    color: 'var(--sme-grey-600)',
                                                    lineHeight: 1.4,
                                                }}>{s.desc}</span>
                                            </span>
                                        </button>
                                    ))}
                                </div>
                            </div>

                            {/* Featured CTA card */}
                            <div className="mega-cta" style={{
                                background: 'linear-gradient(135deg, var(--sme-blue) 0%, var(--sme-blue-dark) 100%)',
                                color: 'white',
                                borderRadius: 'var(--sme-radius)',
                                padding: '1.8rem',
                                display: 'flex',
                                flexDirection: 'column',
                                justifyContent: 'space-between',
                                position: 'relative',
                                overflow: 'hidden',
                                minHeight: 200,
                            }}>
                                <div aria-hidden="true" style={{
                                    position: 'absolute',
                                    top: -50, right: -50,
                                    width: 180, height: 180,
                                    borderRadius: '50%',
                                    background: 'rgba(16,185,129,0.28)',
                                }}/>
                                <div style={{ position: 'relative' }}>
                                    <span style={{
                                        display: 'inline-flex',
                                        alignItems: 'center',
                                        gap: 6,
                                        padding: '4px 10px',
                                        borderRadius: 999,
                                        background: 'rgba(255,255,255,0.18)',
                                        fontFamily: 'Poppins, sans-serif',
                                        fontWeight: 600,
                                        fontSize: '0.7rem',
                                        textTransform: 'uppercase',
                                        letterSpacing: '0.08em',
                                    }}>
                                        <span style={{
                                            width: 6, height: 6, borderRadius: '50%',
                                            background: 'var(--sme-green)',
                                        }}/>
                                        Devis sous 24h
                                    </span>
                                    <h4 style={{
                                        color: 'white',
                                        fontSize: '1.2rem',
                                        marginTop: '0.9rem',
                                        lineHeight: 1.3,
                                    }}>
                                        Un besoin spécifique&nbsp;? Parlons-en.
                                    </h4>
                                </div>
                                <div style={{ position: 'relative', marginTop: '1.2rem' }}>
                                    <button
                                        onClick={() => { setMegaOpen(false); navigate('contact'); }}
                                        className="btn btn-secondary"
                                        style={{
                                            padding: '11px 18px',
                                            fontSize: '0.82rem',
                                            width: '100%',
                                            justifyContent: 'center',
                                        }}>
                                        Demander un devis <Icon name="arrow" size={13}/>
                                    </button>
                                    <a href="tel:0768536516" style={{
                                        display: 'inline-flex',
                                        alignItems: 'center',
                                        gap: 8,
                                        marginTop: '0.9rem',
                                        color: 'rgba(255,255,255,0.92)',
                                        fontSize: '0.88rem',
                                        fontFamily: 'Poppins, sans-serif',
                                        fontWeight: 500,
                                    }}>
                                        <Icon name="phone" size={14}/> 07 68 53 65 16
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* MOBILE PANEL */}
                {mobileOpen && (
                    <div style={{
                        background: 'white',
                        borderTop: '1px solid var(--sme-grey-100)',
                        padding: '1.2rem 1.5rem 1.8rem',
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '0.4rem',
                    }}>
                        {pages.map(p => {
                            const active = currentPage === p.id;
                            if (p.hasMega) {
                                return (
                                    <div key={p.id}>
                                        <button
                                            onClick={() => setMobileServicesOpen(!mobileServicesOpen)}
                                            aria-expanded={mobileServicesOpen}
                                            style={{
                                                width: '100%',
                                                background: 'none', border: 'none',
                                                padding: '12px 4px',
                                                display: 'flex',
                                                alignItems: 'center',
                                                justifyContent: 'space-between',
                                                fontFamily: 'Poppins, sans-serif',
                                                fontWeight: active ? 600 : 500,
                                                fontSize: '1rem',
                                                color: active ? 'var(--sme-blue)' : 'var(--sme-grey-900)',
                                                cursor: 'pointer',
                                                textAlign: 'left',
                                            }}>
                                            <span>{p.label}</span>
                                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                                                stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"
                                                style={{ transform: mobileServicesOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s' }}>
                                                <path d="m6 9 6 6 6-6"/>
                                            </svg>
                                        </button>
                                        <div style={{
                                            maxHeight: mobileServicesOpen ? 500 : 0,
                                            overflow: 'hidden',
                                            transition: 'max-height 0.3s ease',
                                        }}>
                                            <div style={{
                                                display: 'flex',
                                                flexDirection: 'column',
                                                gap: '0.2rem',
                                                paddingLeft: '0.8rem',
                                                borderLeft: '2px solid var(--sme-grey-100)',
                                                marginLeft: '0.4rem',
                                                marginBottom: '0.4rem',
                                            }}>
                                                {SUB_SERVICES.map(s => (
                                                    <button
                                                        key={s.id}
                                                        onClick={() => goService(s.id)}
                                                        style={{
                                                            background: 'none', border: 'none',
                                                            padding: '10px 8px',
                                                            textAlign: 'left',
                                                            fontFamily: 'inherit',
                                                            fontSize: '0.92rem',
                                                            color: 'var(--sme-grey-600)',
                                                            cursor: 'pointer',
                                                            display: 'flex',
                                                            alignItems: 'center',
                                                            gap: 10,
                                                        }}>
                                                        <Icon name={s.icon} size={16}/> {s.label}
                                                    </button>
                                                ))}
                                            </div>
                                        </div>
                                    </div>
                                );
                            }
                            return (
                                <button
                                    key={p.id}
                                    onClick={() => { navigate(p.id); setMobileOpen(false); }}
                                    style={{
                                        background: 'none', border: 'none',
                                        padding: '12px 4px',
                                        textAlign: 'left',
                                        fontFamily: 'Poppins, sans-serif',
                                        fontWeight: active ? 600 : 500,
                                        fontSize: '1rem',
                                        color: active ? 'var(--sme-blue)' : 'var(--sme-grey-900)',
                                        cursor: 'pointer',
                                    }}>
                                    {p.label}
                                </button>
                            );
                        })}
                        <button className="btn btn-primary"
                                style={{ marginTop: '0.8rem', justifyContent: 'center' }}
                                onClick={() => { navigate('contact'); setMobileOpen(false); }}>
                            Devis gratuit <Icon name="arrow" size={14}/>
                        </button>
                        <div style={{
                            display: 'flex', flexDirection: 'column', gap: 10,
                            paddingTop: '1rem', marginTop: '0.5rem',
                            borderTop: '1px solid var(--sme-grey-100)',
                            fontSize: '0.9rem', color: 'var(--sme-grey-600)',
                        }}>
                            <a href="tel:0768536516" style={{ display: 'inline-flex', gap: 8, alignItems: 'center', color: 'inherit' }}>
                                <Icon name="phone" size={14}/> 07 68 53 65 16
                            </a>
                            <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center' }}>
                                <Icon name="mail" size={14}/> contact@smenettoyage.fr
                            </span>
                        </div>
                    </div>
                )}

                <style>{`
                    @media (max-width: 1080px) {
                        .desktop-nav, .desktop-cta { display: none !important; }
                        .mobile-toggle { display: inline-flex !important; }
                    }
                    @media (max-width: 720px) {
                        .mega-grid { grid-template-columns: 1fr !important; }
                    }
                `}</style>
            </header>
        </>
    );
};

// ---------- Footer ----------
const Footer = ({ navigate }) => (
    <footer style={{
        background: 'var(--sme-grey-900)',
        color: 'rgba(255,255,255,0.85)',
        paddingBlock: '5rem 2rem',
        marginTop: '4rem',
    }}>
        <div className="sme-container">
            <div style={{
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
                gap: '3rem',
                marginBottom: '3rem',
            }}>
                <div style={{ maxWidth: 320 }}>
                    <SMELogo size="md" light/>
                    <p style={{ marginTop: '1.5rem', color: 'rgba(255,255,255,0.7)', fontSize: '0.93rem' }}>
                        Entreprise de nettoyage professionnel pour particuliers et professionnels.
                        Des espaces propres, sains et accueillants — avec rigueur et confiance.
                    </p>
                </div>

                <div>
                    <h4 style={{ color: 'white', fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '1.2rem' }}>
                        Navigation
                    </h4>
                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.7rem' }}>
                        {['home', 'about', 'services', 'faq', 'contact'].map((p, i) => (
                            <li key={p}>
                                <button onClick={() => navigate(p)} style={{
                                    background: 'none', border: 'none', padding: 0,
                                    color: 'rgba(255,255,255,0.7)', cursor: 'pointer',
                                    fontFamily: 'inherit', fontSize: '0.93rem',
                                }}>
                                    {['Accueil', 'À propos', 'Services', 'FAQ', 'Contact'][i]}
                                </button>
                            </li>
                        ))}
                    </ul>
                </div>

                <div>
                    <h4 style={{ color: 'white', fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '1.2rem' }}>
                        Services
                    </h4>
                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.7rem', color: 'rgba(255,255,255,0.7)', fontSize: '0.93rem' }}>
                        <li>Nettoyage d'Entreprises</li>
                        <li>Nettoyage de Bâtiments</li>
                        <li>Nettoyage de Vitres</li>
                        <li>Nettoyage Industriel</li>
                        <li>Jardins & Parcs</li>
                    </ul>
                </div>

                <div>
                    <h4 style={{ color: 'white', fontSize: '0.9rem', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: '1.2rem' }}>
                        Contact
                    </h4>
                    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: '0.9rem', color: 'rgba(255,255,255,0.85)', fontSize: '0.93rem' }}>
                        <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <Icon name="phone" size={16}/>
                            <span>07 68 53 65 16</span>
                        </li>
                        <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <Icon name="mail" size={16}/>
                            <span>contact@smenettoyage.fr</span>
                        </li>
                        <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <Icon name="location" size={16}/>
                            <span>Île-de-France<br/>& alentours</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div style={{
                borderTop: '1px solid rgba(255,255,255,0.12)',
                paddingTop: '2rem',
                display: 'flex',
                justifyContent: 'space-between',
                flexWrap: 'wrap',
                gap: '1rem',
                fontSize: '0.85rem',
                color: 'rgba(255,255,255,0.55)',
            }}>
                <span>© 2026 SME Nettoyage — Tous droits réservés.</span>
                <span>Mentions légales · Politique de confidentialité</span>
            </div>
        </div>
    </footer>
);

// ---------- Reusable: section header ----------
const SectionHeader = ({ eyebrow, title, intro, center = false, eyebrowGreen = false }) => (
    <div style={{
        textAlign: center ? 'center' : 'left',
        maxWidth: center ? 720 : 760,
        marginInline: center ? 'auto' : 0,
        marginBottom: '3rem',
    }}>
        <span className={`eyebrow${eyebrowGreen ? ' green' : ''}`}>{eyebrow}</span>
        <h2 style={{ marginTop: '1rem' }}>{title}</h2>
        {intro && <p style={{ marginTop: '1.2rem', color: 'var(--sme-grey-600)', fontSize: '1.08rem' }}>{intro}</p>}
    </div>
);

// Export to window for cross-file babel script access
Object.assign(window, { Icon, SMELogo, Header, Footer, SectionHeader, Reveal, Counter });