/* 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"/></>,
        facebook: <><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></>,
        instagram: <><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></>,
        google: <><path d="M21.8 10.2H12v3.7h5.6c-.5 2.4-2.6 4.1-5.6 4.1a6 6 0 0 1 0-12c1.6 0 3 .6 4.1 1.6l2.7-2.7A9.9 9.9 0 0 0 12 2 10 10 0 1 0 22 12c0-.6-.1-1.2-.2-1.8z"/></>,
        'chevron-up': <path d="M18 15l-6-6-6 6"/>,
    };
    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 }) => {
    const iconW = size === 'xl' ? 100 : size === 'lg' ? 84 : size === 'sm' ? 52 : 72;
    const nameSize = size === 'xl' ? '1.35rem' : size === 'lg' ? '1.15rem' : size === 'sm' ? '0.85rem' : '1.05rem';
    const tagSize  = size === 'xl' ? '0.68rem' : size === 'lg' ? '0.62rem'  : size === 'sm' ? '0.52rem' : '0.58rem';
    const nameColor = light ? '#ffffff' : 'var(--sme-grey-900)';
    const tagColor  = light ? 'rgba(255,255,255,0.65)' : 'var(--sme-grey-400)';

    const logoSrc = (typeof window !== 'undefined' && window.smeThemeUrl)
        ? window.smeThemeUrl + '/images/logo-sme.png?v=12'
        : '/wp-content/themes/sme-nettoyage-react/images/logo-sme.png?v=12';

    return (
        <div className="sme-logo-wrap" style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 12,
            background: 'transparent',
            textDecoration: 'none',
            border: 'none',
            outline: 'none',
            boxShadow: 'none',
            padding: 0,
        }}>
            <img
                src={logoSrc}
                alt="SME Nettoyage"
                className="sme-logo-icon"
                style={{
                    width: iconW,
                    height: 'auto',
                    objectFit: 'contain',
                    display: 'block',
                    background: 'transparent',
                    flexShrink: 0,
                    border: 'none',
                    outline: 'none',
                    boxShadow: 'none',
                    padding: 0,
                    margin: 0,
                }}
            />
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.2 }}>
                <span className="sme-logo-name" style={{
                    fontFamily: 'Poppins, sans-serif',
                    fontWeight: 700,
                    fontSize: nameSize,
                    color: light ? '#ffffff' : 'var(--sme-blue)',
                    letterSpacing: '0.08em',
                    textTransform: 'uppercase',
                    whiteSpace: 'nowrap',
                }}>NETTOYAGE</span>
                <span className="sme-logo-tagline" style={{
                    fontFamily: 'Inter, sans-serif',
                    fontWeight: 400,
                    fontSize: tagSize,
                    color: tagColor,
                    letterSpacing: '0.06em',
                    textTransform: 'uppercase',
                    whiteSpace: 'nowrap',
                    marginTop: 2,
                }}>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('service-' + subId);
    };

    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:+590590819174" style={{
                            display: 'inline-flex', alignItems: 'center', gap: 8,
                            color: 'inherit', textDecoration: 'none',
                        }}>
                            <Icon name="phone" size={13}/> +590 590 81-9174
                        </a>
                        <span className="topbar-email" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                            <Icon name="mail" size={13}/> ste.sme@orange.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 – Ven · 8h–14h30
                        </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:+590590819174" 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}/> +590 590 81-9174
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {/* MOBILE PANEL */}
                {mobileOpen && (
                    <div className="mobile-panel" style={{
                        background: 'white',
                        borderTop: '1px solid var(--sme-grey-100)',
                        maxHeight: 'calc(100vh - 70px)',
                        overflowY: 'auto',
                        overflowX: 'hidden',
                    }}>
                        {/* CTA header */}
                        <div style={{
                            background: 'linear-gradient(135deg, var(--sme-blue) 0%, var(--sme-blue-dark) 100%)',
                            padding: '1rem 1.2rem',
                        }}>
                            <button className="btn btn-secondary"
                                    style={{ width: '100%', justifyContent: 'center', padding: '14px 20px' }}
                                    onClick={() => { navigate('contact'); setMobileOpen(false); }}>
                                Demander un devis gratuit <Icon name="arrow" size={15}/>
                            </button>
                        </div>

                        {/* Nav links */}
                        <div style={{ padding: '0.5rem 0.8rem 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: active ? 'var(--sme-blue-soft)' : 'transparent',
                                                    border: 'none',
                                                    borderRadius: 10,
                                                    padding: '13px 12px',
                                                    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 style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                                                    {active && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--sme-blue)', flexShrink: 0 }}/>}
                                                    {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', flexShrink: 0 }}>
                                                    <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.15rem',
                                                    paddingLeft: '1rem',
                                                    borderLeft: '2px solid var(--sme-grey-200)',
                                                    marginLeft: '0.75rem',
                                                    marginBottom: '0.4rem',
                                                    marginTop: '0.15rem',
                                                }}>
                                                    {SUB_SERVICES.map(s => (
                                                        <button
                                                            key={s.id}
                                                            onClick={() => goService(s.id)}
                                                            style={{
                                                                background: 'none', border: 'none',
                                                                borderRadius: 8,
                                                                padding: '10px 8px',
                                                                textAlign: 'left',
                                                                fontFamily: 'inherit',
                                                                fontSize: '0.93rem',
                                                                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={{
                                            width: '100%',
                                            background: active ? 'var(--sme-blue-soft)' : 'transparent',
                                            border: 'none',
                                            borderRadius: 10,
                                            padding: '13px 12px',
                                            textAlign: 'left',
                                            fontFamily: 'Poppins, sans-serif',
                                            fontWeight: active ? 600 : 500,
                                            fontSize: '1rem',
                                            color: active ? 'var(--sme-blue)' : 'var(--sme-grey-900)',
                                            cursor: 'pointer',
                                            display: 'flex',
                                            alignItems: 'center',
                                            gap: 8,
                                        }}>
                                        {active && <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--sme-blue)', flexShrink: 0 }}/>}
                                        {p.label}
                                    </button>
                                );
                            })}
                        </div>

                        {/* Contact info block */}
                        <div style={{
                            margin: '0.4rem 0.8rem 1.2rem',
                            padding: '1rem 1.2rem',
                            background: 'var(--sme-grey-50)',
                            borderRadius: 12,
                            border: '1px solid var(--sme-grey-100)',
                            display: 'flex',
                            flexDirection: 'column',
                            gap: 10,
                        }}>
                            <a href="tel:+590590819174" style={{
                                display: 'inline-flex', gap: 8, alignItems: 'center',
                                color: 'var(--sme-grey-900)', textDecoration: 'none',
                                fontFamily: 'Poppins, sans-serif', fontWeight: 600, fontSize: '0.92rem',
                            }}>
                                <Icon name="phone" size={15}/> +590 590 81-9174
                            </a>
                            <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center', fontSize: '0.88rem', color: 'var(--sme-grey-600)' }}>
                                <Icon name="mail" size={15}/> ste.sme@orange.fr
                            </span>
                            <span style={{ display: 'inline-flex', gap: 8, alignItems: 'center', fontSize: '0.88rem', color: 'var(--sme-grey-600)' }}>
                                <Icon name="clock" size={15}/> Lun–Ven · 8h–14h30
                            </span>
                        </div>
                    </div>
                )}

                <style>{`
                    @keyframes slidePanelDown {
                        from { opacity: 0; transform: translateY(-6px); }
                        to   { opacity: 1; transform: translateY(0); }
                    }
                    .mobile-panel { animation: slidePanelDown 0.22s ease; }
                    @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; }
                        .topbar { font-size: 0.78rem !important; min-height: 36px !important; }
                    }
                    @media (max-width: 480px) {
                        .topbar { display: none !important; }
                        .sme-logo-icon { width: 56px !important; border: none !important; box-shadow: none !important; }
                        .sme-logo-wrap { gap: 10px !important; border: none !important; box-shadow: none !important; }
                        .sme-logo-name { font-size: 0.92rem !important; }
                        .sme-logo-tagline { font-size: 0.5rem !important; }
                    }
                    @media (max-width: 360px) {
                        .sme-logo-icon { width: 46px !important; }
                        .sme-logo-name { font-size: 0.82rem !important; }
                        .sme-logo-tagline { font-size: 0.46rem !important; }
                    }
                `}</style>
            </header>
        </>
    );
};

// ---------- Footer ----------
const Footer = ({ navigate }) => {
    return (
    <footer style={{
        background: 'var(--sme-grey-900)',
        color: 'rgba(255,255,255,0.85)',
        paddingBlock: '5rem 2rem',
        marginTop: '4rem',
    }}>
        <div className="sme-container">
            <div className="footer-grid" style={{
                display: 'grid',
                gridTemplateColumns: '1.7fr 1fr 1fr 1fr',
                gap: '3rem',
                marginBottom: '3rem',
            }}>
                <div>
                    {/* Brand block footer */}
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                        <div style={{
                            background: 'white',
                            borderRadius: 14,
                            padding: '10px 12px',
                            boxShadow: '0 4px 18px rgba(0,0,0,0.30)',
                            display: 'inline-flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            flexShrink: 0,
                            border: '1px solid rgba(255,255,255,0.08)',
                        }}>
                            <img
                                src={((typeof window !== 'undefined' && window.smeThemeUrl)
                                    ? window.smeThemeUrl
                                    : '/wp-content/themes/sme-nettoyage-react')
                                    + '/images/logo-sme-footer.png?v=4'}
                                alt="SME Nettoyage"
                                loading="lazy"
                                decoding="async"
                                width={48}
                                height={48}
                                style={{ width: 48, height: 'auto', display: 'block' }}
                            />
                        </div>
                        <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.25 }}>
                            <span style={{
                                fontFamily: 'Poppins, sans-serif',
                                fontWeight: 700,
                                fontSize: '1.05rem',
                                color: 'var(--sme-blue)',
                                letterSpacing: '0.08em',
                                textTransform: 'uppercase',
                                whiteSpace: 'nowrap',
                            }}>NETTOYAGE</span>
                            <span style={{
                                fontFamily: 'Inter, sans-serif',
                                fontWeight: 400,
                                fontSize: '0.6rem',
                                color: 'rgba(255,255,255,0.5)',
                                letterSpacing: '0.07em',
                                textTransform: 'uppercase',
                                whiteSpace: 'nowrap',
                                marginTop: 4,
                            }}>La propreté, notre engagement</span>
                        </div>
                    </div>
                    <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 style={{ display: 'flex', gap: 10, marginTop: '1.5rem' }}>
                        <a href="https://web.facebook.com/profile.php?id=100070333171964"
                           target="_blank" rel="noopener noreferrer"
                           aria-label="Facebook SME Nettoyage"
                           style={{
                               width: 38, height: 38, borderRadius: 10,
                               background: 'rgba(255,255,255,0.1)',
                               border: '1px solid rgba(255,255,255,0.15)',
                               display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                               color: 'rgba(255,255,255,0.85)', textDecoration: 'none',
                               transition: 'background 0.2s',
                           }}
                           onMouseEnter={e => e.currentTarget.style.background = '#1877F2'}
                           onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}>
                            <Icon name="facebook" size={16}/>
                        </a>
                        <a href="mailto:ste.sme@orange.fr" aria-label="Email SME Nettoyage"
                           style={{
                               width: 38, height: 38, borderRadius: 10,
                               background: 'rgba(255,255,255,0.1)',
                               border: '1px solid rgba(255,255,255,0.15)',
                               display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                               color: 'rgba(255,255,255,0.85)', textDecoration: 'none',
                               transition: 'background 0.2s',
                           }}
                           onMouseEnter={e => e.currentTarget.style.background = '#EA4335'}
                           onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}>
                            <Icon name="mail" size={16}/>
                        </a>
                        <a href="https://share.google/vPM5xxgZi07Cb5xzE" target="_blank" rel="noopener noreferrer"
                           aria-label="Fiche Google My Business SME Nettoyage"
                           style={{
                               width: 38, height: 38, borderRadius: 10,
                               background: 'rgba(255,255,255,0.1)',
                               border: '1px solid rgba(255,255,255,0.15)',
                               display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                               color: 'rgba(255,255,255,0.85)', textDecoration: 'none',
                               transition: 'background 0.2s',
                           }}
                           onMouseEnter={e => e.currentTarget.style.background = '#EA4335'}
                           onMouseLeave={e => e.currentTarget.style.background = 'rgba(255,255,255,0.1)'}>
                            <Icon name="google" size={16}/>
                        </a>
                    </div>
                </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' }}>
                        {[
                            { id: 'service-entreprises', label: "Nettoyage d'Entreprises" },
                            { id: 'service-batiments',   label: 'Nettoyage de Bâtiments' },
                            { id: 'service-vitres',      label: 'Nettoyage de Vitres' },
                            { id: 'service-industriel',  label: 'Nettoyage Industriel' },
                            { id: 'service-jardins',     label: 'Jardins & Parcs' },
                        ].map(s => (
                            <li key={s.id}>
                                <button onClick={() => navigate(s.id)} style={{
                                    background: 'none', border: 'none', padding: 0,
                                    color: 'rgba(255,255,255,0.7)', cursor: 'pointer',
                                    fontFamily: 'inherit', fontSize: '0.93rem',
                                    textAlign: 'left',
                                    transition: 'color 0.18s',
                                }}
                                onMouseEnter={e => e.currentTarget.style.color = 'white'}
                                onMouseLeave={e => e.currentTarget.style.color = 'rgba(255,255,255,0.7)'}>
                                    {s.label}
                                </button>
                            </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}/>
                            <a href="tel:+590590819174" style={{ color: 'inherit', textDecoration: 'none' }}>+590 590 81-9174</a>
                        </li>
                        <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <Icon name="mail" size={16}/>
                            <a href="mailto:ste.sme@orange.fr" style={{ color: 'inherit', textDecoration: 'none' }}>ste.sme@orange.fr</a>
                        </li>
                        <li style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                            <Icon name="location" size={16}/>
                            <a href="https://maps.google.com/maps?q=Cit%C3%A9+Grain+d%27Or+Bat+C,+97100+Basse-Terre,+Guadeloupe&hl=fr&z=15"
                               target="_blank" rel="noopener noreferrer"
                               style={{ color: 'inherit', textDecoration: 'none' }}>
                                Cité Grain d'Or Bât C Esc 17<br/>97100 Basse-Terre
                            </a>
                        </li>
                    </ul>
                </div>

            </div>

            <style>{`
                @media (max-width: 900px) {
                    .footer-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 2rem !important; }
                }
                @media (max-width: 540px) {
                    .footer-grid { grid-template-columns: 1fr !important; }
                }
            `}</style>

            <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 className="footer-copy">© 2026 SME Nettoyage — Tous droits réservés.</span>
                <span className="footer-credit">
                    Site réalisé par{' '}
                    <a href="https://digitalmediamobile.fr/" target="_blank" rel="noopener noreferrer"
                       style={{ color: 'rgba(255,255,255,0.75)', textDecoration: 'underline', textUnderlineOffset: 3 }}>
                        Digital Média Mobile
                    </a>
                </span>
                <div className="footer-legal" style={{ display: 'flex', gap: '1.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
                    <button onClick={() => navigate('mentions-legales')} style={{
                        background: 'none', border: 'none', padding: 0, cursor: 'pointer',
                        color: 'rgba(255,255,255,0.55)', fontFamily: 'inherit', fontSize: 'inherit',
                        textDecoration: 'underline', textUnderlineOffset: 3,
                    }}>Mentions légales</button>
                    <button onClick={() => navigate('politique-confidentialite')} style={{
                        background: 'none', border: 'none', padding: 0, cursor: 'pointer',
                        color: 'rgba(255,255,255,0.55)', fontFamily: 'inherit', fontSize: 'inherit',
                        textDecoration: 'underline', textUnderlineOffset: 3,
                    }}>Politique de confidentialité</button>
                </div>
                <style>{`
                    @media (max-width: 640px) {
                        .footer-copy   { order: 1; width: 100%; }
                        .footer-legal  { order: 2; width: 100%; }
                        .footer-credit { order: 3; width: 100%; }
                    }
                `}</style>
            </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>
);

// ---------- Back to top button ----------
const BackToTop = () => {
    const [visible, setVisible] = React.useState(false);

    React.useEffect(() => {
        const onScroll = () => setVisible(window.scrollY > 400);
        window.addEventListener('scroll', onScroll, { passive: true });
        return () => window.removeEventListener('scroll', onScroll);
    }, []);

    if (!visible) return null;

    return (
        <>
            <style>{`
                .sme-back-to-top {
                    position: fixed;
                    bottom: 2rem;
                    right: 2rem;
                    width: 46px;
                    height: 46px;
                    border-radius: 50%;
                    background: var(--sme-blue);
                    color: white;
                    border: none;
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-shadow: 0 4px 20px rgba(26,86,219,0.40);
                    z-index: 999;
                    transition: background 0.2s, transform 0.2s;
                }
                .sme-back-to-top:hover {
                    background: var(--sme-blue-dark);
                    transform: translateY(-3px);
                }
                @media (max-width: 768px) {
                    .sme-back-to-top {
                        bottom: 1.2rem;
                        right: 1rem;
                        width: 42px;
                        height: 42px;
                    }
                }
                @media (max-width: 480px) {
                    .sme-back-to-top {
                        bottom: 1rem;
                        right: 0.75rem;
                        width: 40px;
                        height: 40px;
                    }
                }
            `}</style>
            <button
                className="sme-back-to-top"
                onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
                aria-label="Retour en haut de la page"
            >
                <Icon name="chevron-up" size={20} stroke={2.5}/>
            </button>
        </>
    );
};

// ---------- Cookie consent banner ----------
const CookieConsent = ({ navigate }) => {
    const STORAGE_KEY = 'sme_cookie_consent';
    const [visible, setVisible] = React.useState(false);

    React.useEffect(() => {
        if (!localStorage.getItem(STORAGE_KEY)) setVisible(true);
    }, []);

    const accept = () => { localStorage.setItem(STORAGE_KEY, 'accepted'); setVisible(false); };
    const refuse = () => { localStorage.setItem(STORAGE_KEY, 'refused');  setVisible(false); };

    if (!visible) return null;

    return (
        <>
            <style>{`
                .sme-cookie-overlay {
                    position: fixed; inset: 0;
                    background: rgba(0,0,0,0.35);
                    z-index: 1100;
                    display: flex; align-items: flex-end; justify-content: center;
                    padding: 0 1rem 1.5rem;
                    animation: smeCookieFadeIn 0.25s ease;
                }
                @keyframes smeCookieFadeIn {
                    from { opacity: 0; }
                    to   { opacity: 1; }
                }
                .sme-cookie-box {
                    background: white;
                    border-radius: 16px;
                    padding: 1.75rem 2rem;
                    max-width: 780px;
                    width: 100%;
                    box-shadow: 0 8px 40px rgba(0,0,0,0.18);
                    display: flex;
                    gap: 1.5rem;
                    align-items: center;
                    flex-wrap: wrap;
                    animation: smeCookieSlideUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
                }
                @keyframes smeCookieSlideUp {
                    from { transform: translateY(40px); opacity: 0; }
                    to   { transform: translateY(0);    opacity: 1; }
                }
                .sme-cookie-text { flex: 1; min-width: 220px; }
                .sme-cookie-actions {
                    display: flex; gap: 0.65rem; flex-shrink: 0; flex-wrap: wrap;
                }
                @media (max-width: 600px) {
                    .sme-cookie-box { padding: 1.4rem 1.2rem; gap: 1rem; }
                    .sme-cookie-actions { width: 100%; }
                    .sme-cookie-actions button { flex: 1; }
                }
            `}</style>

            <div className="sme-cookie-overlay" role="dialog" aria-modal="true" aria-label="Consentement aux cookies">
                <div className="sme-cookie-box">
                    <div className="sme-cookie-text">
                        <p style={{
                            fontFamily: 'Poppins, sans-serif',
                            fontWeight: 600,
                            fontSize: '0.97rem',
                            color: 'var(--sme-grey-900)',
                            marginBottom: '0.35rem',
                        }}>
                            🍪 Ce site utilise des cookies
                        </p>
                        <p style={{ fontSize: '0.875rem', color: 'var(--sme-grey-600)', lineHeight: 1.6, margin: 0 }}>
                            Nous utilisons des cookies techniques essentiels au bon fonctionnement du site.
                            Aucun cookie publicitaire n'est déposé sans votre accord.{' '}
                            {navigate && (
                                <button onClick={() => { refuse(); navigate('politique-confidentialite'); }} style={{
                                    background: 'none', border: 'none', padding: 0,
                                    color: 'var(--sme-blue)', cursor: 'pointer',
                                    fontFamily: 'inherit', fontSize: 'inherit',
                                    fontWeight: 500, textDecoration: 'underline',
                                    textUnderlineOffset: '2px',
                                }}>
                                    En savoir plus
                                </button>
                            )}
                        </p>
                    </div>
                    <div className="sme-cookie-actions">
                        <button
                            onClick={refuse}
                            style={{
                                padding: '0.6rem 1.2rem',
                                borderRadius: 10,
                                border: '1.5px solid var(--sme-grey-200)',
                                background: 'white',
                                color: 'var(--sme-grey-700)',
                                fontFamily: 'Poppins, sans-serif',
                                fontWeight: 500,
                                fontSize: '0.88rem',
                                cursor: 'pointer',
                                transition: 'border-color 0.2s, color 0.2s',
                                whiteSpace: 'nowrap',
                            }}
                            onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--sme-grey-400)'; e.currentTarget.style.color = 'var(--sme-grey-900)'; }}
                            onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--sme-grey-200)'; e.currentTarget.style.color = 'var(--sme-grey-700)'; }}
                        >
                            Tout refuser
                        </button>
                        <button
                            onClick={accept}
                            style={{
                                padding: '0.6rem 1.4rem',
                                borderRadius: 10,
                                border: 'none',
                                background: 'var(--sme-blue)',
                                color: 'white',
                                fontFamily: 'Poppins, sans-serif',
                                fontWeight: 600,
                                fontSize: '0.88rem',
                                cursor: 'pointer',
                                transition: 'background 0.2s',
                                whiteSpace: 'nowrap',
                            }}
                            onMouseEnter={e => { e.currentTarget.style.background = 'var(--sme-blue-dark)'; }}
                            onMouseLeave={e => { e.currentTarget.style.background = 'var(--sme-blue)'; }}
                        >
                            Tout accepter
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
};

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