// Composants partagés : NavBar (avec mega-menu), Footer, Icon, TrustBar, TweaksPanel

const { useState, useEffect, useRef } = React;

function Icon({ name, className = '', style }) {
  return <span className={`material-symbols-outlined ${className}`} style={style}>{name}</span>;
}

// Contenu du mega-menu
const MEGA_MENU_DATA = {
  services: [
    { key: 'fleuriste-marseille', label: 'Fleuriste funéraire Marseille' },
    { key: 'livraison-marseille', label: 'Livraison fleurs funéraires' },
  ],
  communes: [
    { key: 'commune-aix-en-provence', label: 'Aix-en-Provence' },
    { key: 'commune-arles', label: 'Arles' },
    { key: 'commune-salon-de-provence', label: 'Salon-de-Provence' },
    { key: 'commune-cassis', label: 'Cassis' },
    { key: 'commune-la-ciotat', label: 'La Ciotat' },
    { key: 'commune-martigues', label: 'Martigues' },
    { key: 'commune-les-baux-de-provence', label: 'Les Baux-de-Provence' },
    { key: 'commune-aubagne', label: 'Aubagne' },
  ],
};

function MegaMenu({ setRoute, onClose }) {
  return (
    <div
      className="absolute top-full left-1/2 -translate-x-1/2 w-[600px] max-w-[calc(100vw-2rem)] z-50 animate-slideDown"
      style={{ background: 'var(--surface-container-lowest)', boxShadow: '0 24px 60px rgba(20,20,30,0.14)', marginTop: '0px' }}
    >
      <div className="h-0.5 w-full" style={{ background: 'var(--primary)' }} />
      <div className="grid grid-cols-2 gap-0 p-8">
        <div className="pr-8" style={{ borderRight: '1px solid color-mix(in srgb, var(--on-surface) 10%, transparent)' }}>
          <p className="uppercase tracking-widest text-[10px] font-semibold mb-5" style={{ color: 'var(--primary)' }}>SERVICES</p>
          <ul className="space-y-1">
            {MEGA_MENU_DATA.services.map(item => (
              <li key={item.key}>
                <button onClick={() => { setRoute(item.key); onClose(); }} className="w-full text-left py-2.5 px-3 text-sm transition-all hover:opacity-70" style={{ color: 'var(--on-surface)' }}>
                  {item.label}
                </button>
              </li>
            ))}
          </ul>
        </div>
        <div className="pl-8">
          <p className="uppercase tracking-widest text-[10px] font-semibold mb-5" style={{ color: 'var(--primary)' }}>COMMUNES DESSERVIES</p>
          <ul className="space-y-1">
            {MEGA_MENU_DATA.communes.map(item => (
              <li key={item.key}>
                <button onClick={() => { setRoute(item.key); onClose(); }} className="w-full text-left py-2 px-3 text-sm transition-all hover:opacity-70" style={{ color: 'var(--on-surface-variant)' }}>
                  {item.label}
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
      <div className="px-8 py-4 flex items-center gap-3" style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)', background: 'var(--surface-container-low)' }}>
        <Icon name="local_shipping" className="text-base" style={{ color: 'var(--primary)' }} />
        <p className="text-[11px]" style={{ color: 'var(--on-surface-variant)' }}>
          Livraison le jour même dans tout le Grand Marseille — service disponible 7j/7
        </p>
      </div>
    </div>
  );
}

function NavBar({ route, setRoute, cartCount, onOpenCart, onOpenTweaks }) {
  const [megaOpen, setMegaOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  const [mobileCommunes, setMobileCommunes] = useState(false);
  const [allMenuOpen, setAllMenuOpen] = useState(false);
  const [allMenuCommunes, setAllMenuCommunes] = useState(false);
  const megaRef = useRef(null);
  const allMenuRef = useRef(null);

  useEffect(() => {
    function handler(e) {
      if (allMenuRef.current && !allMenuRef.current.contains(e.target)) setAllMenuOpen(false);
    }
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  const leftItems = [
    { key: 'boutique', label: 'Fleuriste' },
    { key: 'funerariums', label: 'Funérariums' },
  ];
  const rightItems = [
    { key: 'guide', label: 'Guide et protocole' },
    { key: 'contact', label: 'Contact' },
    { key: 'apropos', label: 'À propos' },
  ];

  const isMarseilleRoute = route === 'fleuriste-marseille' || route === 'livraison-marseille' || route.startsWith('commune-');

  useEffect(() => { setMobileOpen(false); setMobileCommunes(false); setAllMenuOpen(false); setAllMenuCommunes(false); }, [route]);

  useEffect(() => {
    function handler(e) {
      if (megaRef.current && !megaRef.current.contains(e.target)) setMegaOpen(false);
    }
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

  function NavItem({ item }) {
    const active = route === item.key;
    return (
      <button
        onClick={() => setRoute(item.key)}
        className="text-sm font-body transition-opacity duration-200 hover:opacity-70 pb-1 whitespace-nowrap"
        style={{ color: active ? 'var(--primary)' : 'var(--on-surface-variant)', fontWeight: active ? 600 : 400, borderBottom: active ? '1.5px solid var(--primary)' : '1.5px solid transparent' }}
      >
        {item.label}
      </button>
    );
  }

  return (
    <>
      <header className="sticky top-0 z-40 backdrop-blur-xl" style={{ background: 'color-mix(in srgb, var(--surface) 88%, transparent)' }}>
        <div className="flex justify-between items-center w-full px-6 md:px-8 py-4 md:py-5 max-w-7xl mx-auto">
          <button onClick={() => setRoute('home')} className="flex items-center flex-shrink-0">
            <img src="assets/logo.png" alt="Fleurs de Deuil Marseille" className="h-8 md:h-9 w-auto object-contain" style={{ filter: 'var(--logo-filter, none)' }} onError={e => { e.target.style.display = 'none'; e.target.nextSibling.style.display = 'block'; }} />
            <span className="font-serif text-lg hidden" style={{ color: 'var(--primary)', display: 'none' }}>Fleurs de Deuil Marseille</span>
          </button>

          <nav className="hidden lg:flex items-center gap-8 xl:gap-10">
            {leftItems.map(item => <NavItem key={item.key} item={item} />)}
            <div ref={megaRef} className="relative">
              <button
                className="text-sm font-body transition-opacity duration-200 hover:opacity-70 pb-1 whitespace-nowrap flex items-center gap-1.5"
                style={{ color: isMarseilleRoute ? 'var(--primary)' : 'var(--on-surface-variant)', fontWeight: isMarseilleRoute || megaOpen ? 600 : 400, borderBottom: isMarseilleRoute || megaOpen ? '1.5px solid var(--primary)' : '1.5px solid transparent' }}
                onClick={() => setMegaOpen(v => !v)}
                aria-haspopup="true"
                aria-expanded={megaOpen}
              >
                Marseille &amp; communes
                <Icon name="expand_more" className="text-[16px] transition-transform duration-200" style={{ transform: megaOpen ? 'rotate(180deg)' : 'rotate(0deg)', color: 'inherit' }} />
              </button>
              {megaOpen && <MegaMenu setRoute={setRoute} onClose={() => setMegaOpen(false)} />}
            </div>
            {rightItems.map(item => <NavItem key={item.key} item={item} />)}
          </nav>

          <div className="flex items-center gap-4">
            <button onClick={onOpenCart} className="relative transition-opacity hover:opacity-70" style={{ color: 'var(--primary)' }}>
              <Icon name="shopping_basket" />
              {cartCount > 0 && (
                <span className="absolute -top-2 -right-2 min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-semibold flex items-center justify-center" style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}>
                  {cartCount}
                </span>
              )}
            </button>

            {/* Trigger panneau latéral */}
            <button
              onClick={() => setAllMenuOpen(v => !v)}
              className="hidden lg:flex items-center justify-center w-9 h-9 transition-opacity hover:opacity-70"
              style={{ color: 'var(--primary)' }}
              aria-label="Tout le menu"
            >
              <Icon name="menu" className="text-[22px]" />
            </button>

            <button className="lg:hidden flex flex-col gap-1.5 items-center justify-center w-8 h-8" onClick={() => setMobileOpen(v => !v)} aria-label="Menu">
              <span className="block h-px w-6 transition-all duration-300" style={{ background: 'var(--on-surface)', transform: mobileOpen ? 'rotate(45deg) translateY(5px)' : 'none' }} />
              <span className="block h-px w-6 transition-all duration-300" style={{ background: 'var(--on-surface)', opacity: mobileOpen ? 0 : 1 }} />
              <span className="block h-px w-6 transition-all duration-300" style={{ background: 'var(--on-surface)', transform: mobileOpen ? 'rotate(-45deg) translateY(-5px)' : 'none' }} />
            </button>
          </div>
        </div>

        {mobileOpen && (
          <div className="lg:hidden border-t mobile-nav-enter" style={{ background: 'var(--surface-container-lowest)', borderColor: 'color-mix(in srgb, var(--on-surface) 8%, transparent)' }}>
            <nav className="max-w-7xl mx-auto px-6 py-6 flex flex-col gap-1">
              {[...leftItems].map(item => (
                <button key={item.key} onClick={() => setRoute(item.key)} className="text-left py-3 text-sm font-medium transition-opacity hover:opacity-70" style={{ color: route === item.key ? 'var(--primary)' : 'var(--on-surface)' }}>
                  {item.label}
                </button>
              ))}
              <div>
                <button className="w-full text-left py-3 text-sm font-medium flex items-center justify-between transition-opacity hover:opacity-70" style={{ color: isMarseilleRoute ? 'var(--primary)' : 'var(--on-surface)' }} onClick={() => setMobileCommunes(v => !v)}>
                  Marseille &amp; communes
                  <Icon name="expand_more" className="text-[16px] transition-transform duration-200" style={{ transform: mobileCommunes ? 'rotate(180deg)' : 'rotate(0deg)' }} />
                </button>
                {mobileCommunes && (
                  <div className="pb-2 pl-4">
                    <p className="uppercase tracking-widest text-[10px] font-semibold py-2 mb-1" style={{ color: 'var(--primary)' }}>SERVICES</p>
                    {MEGA_MENU_DATA.services.map(item => (
                      <button key={item.key} onClick={() => setRoute(item.key)} className="block w-full text-left py-3 text-sm transition-opacity hover:opacity-70" style={{ color: 'var(--on-surface-variant)' }}>{item.label}</button>
                    ))}
                    <p className="uppercase tracking-widest text-[10px] font-semibold py-2 mt-2 mb-1" style={{ color: 'var(--primary)' }}>COMMUNES</p>
                    {MEGA_MENU_DATA.communes.map(item => (
                      <button key={item.key} onClick={() => setRoute(item.key)} className="block w-full text-left py-3 text-sm transition-opacity hover:opacity-70" style={{ color: 'var(--on-surface-variant)' }}>{item.label}</button>
                    ))}
                  </div>
                )}
              </div>
              {rightItems.map(item => (
                <button key={item.key} onClick={() => setRoute(item.key)} className="text-left py-3 text-sm font-medium transition-opacity hover:opacity-70" style={{ color: route === item.key ? 'var(--primary)' : 'var(--on-surface)' }}>
                  {item.label}
                </button>
              ))}
            </nav>
          </div>
        )}
      </header>

      {/* Overlay panneau latéral */}
      <div
        className="fixed inset-0 z-40 transition-opacity duration-300"
        style={{ background: 'rgba(10,20,30,0.5)', opacity: allMenuOpen ? 1 : 0, pointerEvents: allMenuOpen ? 'auto' : 'none' }}
        onClick={() => setAllMenuOpen(false)}
      />

      {/* Panneau latéral */}
      <div
        className="fixed top-0 right-0 h-full z-50 overflow-y-auto"
        style={{ width: '300px', background: 'var(--surface-container-lowest)', transform: allMenuOpen ? 'translateX(0)' : 'translateX(100%)', transition: 'transform 0.3s cubic-bezier(0.4,0,0.2,1)', boxShadow: '-8px 0 40px rgba(20,20,30,0.18)' }}
      >
        {/* En-tête panneau */}
        <div className="flex items-center justify-between px-6 py-5" style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)' }}>
          <button onClick={() => { setRoute('home'); setAllMenuOpen(false); }} className="flex items-center">
            <img src="assets/logo.png" alt="Fleurs de Deuil Marseille" className="h-8 w-auto object-contain" />
          </button>
          <button onClick={() => setAllMenuOpen(false)} className="transition-opacity hover:opacity-70" style={{ color: 'var(--on-surface-variant)' }}>
            <Icon name="close" className="text-[22px]" />
          </button>
        </div>

        {/* Navigation */}
        <div className="px-6 pt-6">
          <p className="text-[10px] uppercase tracking-widest font-semibold mb-3" style={{ color: 'var(--on-surface-variant)' }}>Navigation</p>
          {[
            { key: 'boutique', label: 'Fleuriste' },
            { key: 'funerariums', label: 'Funérariums' },
            { key: 'fleuriste-marseille', label: 'Fleuriste funéraire Marseille' },
            { key: 'livraison-marseille', label: 'Livraison fleurs funéraires' },
            { key: 'guide', label: 'Guide et protocole' },
            { key: 'contact', label: 'Contact' },
            { key: 'apropos', label: 'À propos' },
          ].map((item, idx, arr) => (
            <React.Fragment key={item.key}>
              <button
                onClick={() => { setRoute(item.key); setAllMenuOpen(false); }}
                className="w-full text-left py-3.5 text-sm transition-opacity hover:opacity-70"
                style={{ color: route === item.key ? 'var(--primary)' : 'var(--on-surface)', fontWeight: route === item.key ? 600 : 400 }}
              >
                {item.label}
              </button>
              {idx < arr.length - 1 && <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 6%, transparent)' }} />}
            </React.Fragment>
          ))}
        </div>

        {/* Marseille & Communes */}
        <div className="px-6 pt-6 pb-10">
          <p className="text-[10px] uppercase tracking-widest font-semibold mb-3" style={{ color: 'var(--on-surface-variant)' }}>Marseille &amp; Communes</p>
          {[...MEGA_MENU_DATA.services, ...MEGA_MENU_DATA.communes].map((item, idx, arr) => (
            <React.Fragment key={item.key}>
              <button
                onClick={() => { setRoute(item.key); setAllMenuOpen(false); }}
                className="w-full text-left py-3.5 text-sm transition-opacity hover:opacity-70"
                style={{ color: route === item.key ? 'var(--primary)' : 'var(--on-surface-variant)' }}
              >
                {item.label}
              </button>
              {idx < arr.length - 1 && <div style={{ borderTop: '1px solid color-mix(in srgb, var(--on-surface) 6%, transparent)' }} />}
            </React.Fragment>
          ))}
        </div>
      </div>
    </>
  );
}

function Footer({ setRoute }) {
  return (
    <footer style={{ background: 'var(--footer-bg)' }}>
      <div className="max-w-7xl mx-auto px-8 md:px-12 py-16 md:py-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">

        {/* Colonne 1 — Identité */}
        <div className="space-y-5">
          <img src="assets/logo.png" alt="Fleurs de Deuil Marseille" className="h-10 w-auto object-contain" style={{ filter: 'var(--logo-filter, none)' }} onError={e => { e.target.style.display = 'none'; }} />
          <p className="text-sm leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
            Artisan fleuriste spécialisé dans les compositions funéraires à Marseille et en Provence. Nous mettons notre savoir-faire au service de votre hommage avec discrétion et élégance.
          </p>
          <div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-widest" style={{ color: 'var(--primary)' }}>
            <Icon name="schedule" className="text-base" />
            Atelier ouvert 7 jours sur 7
          </div>
        </div>

        {/* Colonne 2 — Informations (miroir du menu) */}
        <div className="space-y-5">
          <h5 className="font-medium uppercase tracking-widest text-[11px]" style={{ color: 'var(--primary)' }}>Informations</h5>
          <ul className="space-y-3 text-sm" style={{ color: 'var(--on-surface-variant)' }}>
            <li><button onClick={() => setRoute('fleuriste-marseille')} className="py-2 hover:opacity-70 transition-opacity text-left">Fleuriste funéraire Marseille</button></li>
            <li><button onClick={() => setRoute('funerariums')} className="py-2 hover:opacity-70 transition-opacity text-left">Funérariums</button></li>
            <li><button onClick={() => setRoute('guide')} className="py-2 hover:opacity-70 transition-opacity text-left">Guide et protocole</button></li>
            <li><button onClick={() => setRoute('contact')} className="py-2 hover:opacity-70 transition-opacity text-left">Contact</button></li>
            <li><button onClick={() => setRoute('apropos')} className="py-2 hover:opacity-70 transition-opacity text-left">À propos</button></li>
          </ul>
        </div>

        {/* Colonne 3 — Informations légales */}
        <div className="space-y-5">
          <h5 className="font-medium uppercase tracking-widest text-[11px]" style={{ color: 'var(--primary)' }}>Informations légales</h5>
          <ul className="space-y-3 text-sm" style={{ color: 'var(--on-surface-variant)' }}>
            <li><button onClick={() => setRoute('mentions-legales')} className="py-2 hover:opacity-70 transition-opacity text-left">Mentions légales</button></li>
            <li><button onClick={() => setRoute('politique-confidentialite')} className="py-2 hover:opacity-70 transition-opacity text-left">Politique de confidentialité</button></li>
            <li><button onClick={() => setRoute('politique-cookies')} className="py-2 hover:opacity-70 transition-opacity text-left">Politique de cookies</button></li>
            <li><button onClick={() => setRoute('cgv')} className="py-2 hover:opacity-70 transition-opacity text-left">Conditions générales de vente</button></li>
          </ul>
        </div>

        {/* Colonne 4 — Nous contacter */}
        <div className="space-y-5">
          <h5 className="font-medium uppercase tracking-widest text-[11px]" style={{ color: 'var(--primary)' }}>Nous contacter</h5>
          <div className="space-y-3 text-sm" style={{ color: 'var(--on-surface-variant)' }}>
            <p className="flex items-start gap-3"><Icon name="mail" className="text-base flex-shrink-0 mt-0.5" />contact@fleursdeuilmarseille.fr</p>
            <p className="flex items-start gap-3"><Icon name="location_on" className="text-base flex-shrink-0 mt-0.5" />Quartier du Panier, 13002 Marseille</p>
          </div>
        </div>

      </div>
      <div className="max-w-7xl mx-auto px-8 md:px-12 pb-10">
        <div className="pt-8 flex flex-col md:flex-row justify-between items-center gap-4" style={{ borderTop: '1px solid color-mix(in srgb, var(--primary) 12%, transparent)' }}>
          <p className="text-[10px] uppercase tracking-widest" style={{ color: 'var(--on-surface-variant)', opacity: 0.6 }}>
            © Fleurs de Deuil Marseille — Artisan Fleuriste Funéraire
          </p>
          <div className="flex gap-4 text-xl" style={{ color: 'var(--on-surface-variant)', opacity: 0.5 }}>
            <Icon name="payments" /><Icon name="lock" /><Icon name="verified" />
          </div>
        </div>
      </div>
    </footer>
  );
}

function TrustBar() {
  const items = [
    { icon: 'local_shipping', label: 'Fleurs obsèques', value: 'Livraison express le jour même' },
    { icon: 'visibility_off', label: 'Engagement', value: 'Service discret' },
    { icon: 'schedule', label: 'Urgences', value: 'Livraison gerbe deuil 24h/24' },
    { icon: 'location_on', label: 'Périmètre', value: 'Grand Marseille & PACA' },
  ];
  return (
    <section className="py-14" style={{ background: 'var(--surface-container-low)' }}>
      <div className="max-w-7xl mx-auto px-8">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-y-10 md:gap-8">
          {items.map(it => (
            <div key={it.label} className="flex flex-col md:flex-row items-center md:items-start gap-4 text-center md:text-left">
              <Icon name={it.icon} className="text-3xl" style={{ color: 'var(--primary)' }} />
              <div>
                <p className="uppercase tracking-widest text-[10px] mb-1" style={{ color: 'var(--primary)' }}>{it.label}</p>
                <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{it.value}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TweaksPanel({ open, onClose, primaryColor, setPrimaryColor }) {
  const palette = [
    { key: '#39a3d5', label: 'Bleu Marseille', sub: 'Original' },
    { key: '#2282b3', label: 'Bleu Profond', sub: 'Plus intense' },
    { key: '#1a6491', label: 'Bleu Marine', sub: 'Sobre' },
    { key: '#57b8d8', label: 'Bleu Ciel', sub: 'Plus clair' },
    { key: '#2d7a8a', label: 'Bleu Pétrole', sub: 'Méditerranéen' },
    { key: '#3a6ea5', label: 'Bleu Indigo', sub: 'Élégant' },
    { key: '#1c3a4a', label: 'Bleu Nuit', sub: 'Minimaliste' },
  ];
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[60] pointer-events-none">
      <div className="absolute inset-0 pointer-events-auto" style={{ background: 'rgba(0,0,0,0.12)' }} onClick={onClose} />
      <div className="absolute bottom-6 right-6 w-[360px] max-w-[calc(100vw-3rem)] pointer-events-auto animate-fadeInUp" style={{ background: 'var(--surface-container-lowest)', boxShadow: '0 24px 60px rgba(20, 20, 30, 0.18)' }}>
        <div className="flex items-center justify-between px-6 py-4" style={{ borderBottom: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)' }}>
          <div>
            <p className="text-[10px] uppercase tracking-widest font-medium" style={{ color: 'var(--primary)' }}>Personnalisation</p>
            <p className="font-serif text-lg" style={{ color: 'var(--on-surface)' }}>Couleur principale</p>
          </div>
          <button onClick={onClose} className="hover:opacity-60 transition-opacity"><Icon name="close" /></button>
        </div>
        <div className="p-6 space-y-2">
          {palette.map(p => {
            const active = p.key.toLowerCase() === primaryColor.toLowerCase();
            return (
              <button key={p.key} onClick={() => setPrimaryColor(p.key)} className="w-full flex items-center gap-4 p-3 transition-colors text-left" style={{ background: active ? 'var(--surface-container-low)' : 'transparent' }}>
                <span className="w-10 h-10 rounded-sm flex-shrink-0" style={{ background: p.key }} />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium" style={{ color: 'var(--on-surface)' }}>{p.label}</p>
                  <p className="text-xs" style={{ color: 'var(--on-surface-variant)' }}>{p.sub}</p>
                </div>
                {active && <Icon name="check" className="text-base" style={{ color: 'var(--primary)' }} />}
              </button>
            );
          })}
        </div>
        <div className="px-6 py-4 text-[11px]" style={{ background: 'var(--surface-container-low)', color: 'var(--on-surface-variant)' }}>
          Le changement s'applique à toute l'interface.
        </div>
      </div>
    </div>
  );
}

function CookieBanner({ setRoute }) {
  const [visible, setVisible] = useState(() => {
    try { return !localStorage.getItem('fdm.cookies'); } catch { return true; }
  });
  const [leaving, setLeaving] = useState(false);

  function dismiss(choice) {
    setLeaving(true);
    setTimeout(() => {
      try { localStorage.setItem('fdm.cookies', choice); } catch {}
      setVisible(false);
    }, 320);
  }

  if (!visible) return null;

  return (
    <div
      className="fixed bottom-0 left-0 right-0 z-[55]"
      style={{
        background: 'var(--surface-container-lowest)',
        borderTop: '1px solid color-mix(in srgb, var(--on-surface) 8%, transparent)',
        boxShadow: '0 -4px 40px rgba(14,37,48,0.10)',
        animation: leaving ? 'slideDownOut 0.32s ease-in both' : 'slideUp 0.4s cubic-bezier(0.2,0.7,0.2,1) both',
      }}
    >
      <div className="max-w-7xl mx-auto px-6 md:px-8 py-5 flex flex-col sm:flex-row items-start sm:items-center gap-5 sm:gap-8">

        {/* Icono + texto */}
        <div className="flex items-start gap-4 flex-1 min-w-0">
          <Icon name="cookie" className="text-2xl flex-shrink-0 mt-0.5" style={{ color: 'var(--primary)' }} />
          <div className="min-w-0">
            <p className="text-[11px] uppercase tracking-widest font-semibold mb-1" style={{ color: 'var(--on-surface)' }}>
              Cookies &amp; confidentialité
            </p>
            <p className="text-xs leading-relaxed" style={{ color: 'var(--on-surface-variant)' }}>
              Nous utilisons des cookies pour améliorer votre expérience et analyser l'audience de notre site, conformément au RGPD.{' '}
              <button
                onClick={() => setRoute('politique-cookies')}
                className="underline underline-offset-2 hover:opacity-70 transition-opacity whitespace-nowrap"
                style={{ color: 'var(--primary)' }}
              >
                En savoir plus
              </button>
            </p>
          </div>
        </div>

        {/* Boutons */}
        <div className="flex items-center gap-3 flex-shrink-0 self-end sm:self-auto">
          <button
            onClick={() => dismiss('refused')}
            className="px-5 py-3.5 text-[10px] uppercase tracking-widest font-medium transition-opacity hover:opacity-70"
            style={{ border: '1px solid color-mix(in srgb, var(--on-surface) 18%, transparent)', color: 'var(--on-surface-variant)' }}
          >
            Refuser
          </button>
          <button
            onClick={() => dismiss('accepted')}
            className="px-7 py-2.5 text-[10px] uppercase tracking-widest font-medium transition-opacity hover:opacity-90"
            style={{ background: 'var(--primary)', color: 'var(--on-primary)' }}
          >
            Tout accepter
          </button>
        </div>

      </div>
    </div>
  );
}

Object.assign(window, { Icon, NavBar, Footer, TrustBar, TweaksPanel, CookieBanner, MEGA_MENU_DATA });