// Sections file
const { Icon, Magnetic, RevealText, FadeUp, WipeImage, Counter, Bullet } = window.JC;

// ─────────── Top announcement
const TopBar = () => (
  <div style={{ background: "#D4AF7A", height: 36 }} className="flex items-center justify-center text-[12px]">
    <span className="font-display italic text-[#1A1410] tracking-wide">✦ Échantillon offert dès 50 € d'achat ✦ Livraison 48h depuis Nantes ✦</span>
  </div>
);

// ─────────── Header sticky
const Header = ({ onOpenMenu, onOpenCart, onOpenSearch, onOpenUser, cartCount = 2 }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onS); onS();
    return () => window.removeEventListener("scroll", onS);
  }, []);
  const isLight = !scrolled;
  const colorClass = isLight ? "text-[#FAF6EE]" : "text-[#1A1410]";
  return (
    <header
      className={`fixed top-0 left-0 right-0 z-40 transition-all duration-500 ${scrolled ? "bg-[#F5EFE2]/95 backdrop-blur shadow-[0_1px_0_rgba(212,175,122,0.3)]" : "bg-transparent"}`}
      style={{ height: 90, paddingTop: 36 }}
    >
      <div className="h-[90px] -mt-[36px] pt-[36px] flex items-center px-5 sm:px-6 lg:px-12">
        <div className="flex flex-col leading-none">
          <span className={`font-display ${colorClass} tracking-[0.28em] text-[22px] sm:text-[26px] lg:text-[32px] font-medium`}>JENNATI</span>
          <span className={`${colorClass} opacity-80 text-[9px] sm:text-[10px] tracking-[0.4em] mt-1`}>· NANTES ·</span>
        </div>
        <div className="flex-1" />
        <div className={`flex items-center gap-3 sm:gap-5 ${colorClass}`}>
          <button onClick={onOpenSearch} aria-label="Recherche" className="hidden sm:block hover:opacity-70 transition w-11 h-11 flex items-center justify-center"><Icon name="search" size={20} /></button>
          <button onClick={onOpenUser} aria-label="Compte" className="hidden md:flex hover:opacity-70 transition w-11 h-11 items-center justify-center"><Icon name="user" size={20} /></button>
          <button aria-label="Wishlist" onClick={() => alert("Wishlist — à venir")} className="hidden md:flex hover:opacity-70 transition w-11 h-11 items-center justify-center"><Icon name="heart" size={20} /></button>
          <button onClick={onOpenCart} aria-label="Panier" className="relative hover:opacity-70 transition w-11 h-11 flex items-center justify-center">
            <Icon name="bag" size={20} />
            {cartCount > 0 && (
              <span className="absolute top-1.5 right-1.5 bg-[#D4AF7A] text-[#FAF6EE] text-[10px] font-semibold rounded-full w-[18px] h-[18px] flex items-center justify-center">{cartCount}</span>
            )}
          </button>
          <button
            onClick={onOpenMenu}
            aria-label="Menu"
            className={`ml-1 lg:ml-6 flex items-center gap-2 px-3 sm:px-4 py-2 min-h-[44px] border ${isLight ? "border-[#FAF6EE]/60 text-[#FAF6EE]" : "border-[#1A1410]/30 text-[#1A1410]"} text-[11px] tracking-[0.18em] uppercase hover:bg-[#D4AF7A] hover:text-[#FAF6EE] hover:border-[#D4AF7A] transition`}
          >
            <Icon name="menu" size={16} />
            <span>Menu</span>
          </button>
        </div>
      </div>
    </header>
  );
};

// ─────────── User dropdown
const UserDropdown = ({ open, onClose }) => (
  <>
    <div onClick={onClose} className={`fixed inset-0 z-40 ${open ? "" : "pointer-events-none"}`} />
    <div className={`fixed right-4 sm:right-12 top-[110px] z-50 w-[260px] bg-[#FAF6EE] shadow-xl border border-[rgba(212,175,122,0.3)] transition-all duration-200 ${open ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2 pointer-events-none"}`}>
      <div className="p-6">
        <p className="font-display text-[20px] mb-1">Bonjour</p>
        <p className="text-[13px] text-[#6B5C44] mb-4">Connectez-vous pour suivre vos commandes.</p>
        <button className="btn-primary w-full justify-center mb-3">Se connecter</button>
        <ul className="text-[14px] space-y-2.5 pt-3 border-t border-[rgba(212,175,122,0.3)]">
          <li><a href="#orders" className="hover:text-[#D4AF7A]">Mes commandes</a></li>
          <li><a href="#wishlist" className="hover:text-[#D4AF7A]">Wishlist</a></li>
          <li><a href="#account" className="hover:text-[#D4AF7A]">Mon compte</a></li>
        </ul>
      </div>
    </div>
  </>
);

// ─────────── Menu drawer
const MenuDrawer = ({ open, onClose, onPick }) => {
  const groups = window.JENNATI.MENU_GROUPS.map(g => ({
    ...g,
    catId: g.title.includes("Dubaï") ? "dubai" : g.title.includes("El Nabil") ? "elnabil" : g.title.includes("Brumes") ? "brumes" : g.title.includes("Coffrets") ? "coffrets" : g.title.includes("maison") || g.title.includes("Maison") ? "maison" : "dubai"
  }));
  return (
    <>
      <div
        onClick={onClose}
        className={`fixed inset-0 z-50 bg-[#1A1410]/40 transition-opacity duration-350 ${open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`}
      />
      <aside
        className={`fixed top-0 right-0 bottom-0 z-50 w-full md:w-[480px] bg-[#FAF6EE] shadow-2xl transform transition-transform duration-[350ms] ease-[cubic-bezier(0.4,0,0.2,1)] ${open ? "translate-x-0" : "translate-x-full pointer-events-none"}`}
        aria-hidden={!open}
      >
        <div className="h-full flex flex-col overflow-y-auto" data-no-smooth>
          <div className="flex items-center justify-between px-8 py-6 border-b border-[rgba(212,175,122,0.3)]">
            <span className="font-display tracking-[0.28em] text-[22px]">JENNATI</span>
            <button onClick={onClose} aria-label="Fermer" className="w-11 h-11 flex items-center justify-center hover:bg-[#F5EFE2] transition rounded-full">
              <Icon name="x" size={22} />
            </button>
          </div>
          <nav className="flex-1 px-8 py-10 space-y-7">
            {groups.map((g, i) => (
              <div key={i}>
                <button onClick={() => onPick && onPick(g.catId)} className="font-display text-left text-[30px] sm:text-[34px] leading-tight text-[#1A1410] tracking-wide hover:text-[#D4AF7A] transition block">{g.title}</button>
                {g.subs.length > 0 && (
                  <ul className="mt-3 space-y-1.5">
                    {g.subs.map((s, j) => (
                      <li key={j}><button onClick={() => onPick && onPick(g.catId)} className="text-[14px] text-[#6B5C44] hover:text-[#1A1410] transition block py-1.5">{s}</button></li>
                    ))}
                  </ul>
                )}
              </div>
            ))}
          </nav>
          <div className="px-8 py-6 border-t border-[rgba(212,175,122,0.3)] bg-[#F5EFE2]">
            <p className="overline text-[#6B5C44] mb-3">Boutique Nantes — sur demande</p>
            <div className="flex items-center gap-4 text-[#1A1410]">
              {["instagram","facebook","tiktok","whatsapp"].map(n => (
                <a key={n} href={`#${n}`} aria-label={n} className="hover:text-[#D4AF7A] transition w-11 h-11 flex items-center justify-center"><Icon name={n} size={18} /></a>
              ))}
            </div>
          </div>
        </div>
      </aside>
    </>
  );
};

// ─────────── HERO
const PalaceBackground = () => (
  <div className="absolute inset-0 kenburns" id="hero-parallax" style={{ willChange: "transform" }}>
    <img src="assets/hero-palace.jpg" alt="Palais oriental" fetchpriority="high"
      className="absolute inset-0 w-full h-full object-cover" id="hero-img" />
    <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(26,20,16,0.35) 0%, rgba(26,20,16,0.55) 100%)" }} />
  </div>
);

const Hero = ({ onCollection, onStory }) => {
  const wrapRef = React.useRef(null);
  React.useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    // Bail on touch devices — parallax listeners can interfere with iOS scroll
    const isTouch = ("ontouchstart" in window) || (navigator.maxTouchPoints > 0);
    const isNarrow = window.matchMedia("(max-width: 768px)").matches;
    if (isTouch || isNarrow) return;
    const bg = document.getElementById("hero-parallax");
    let mx = 0, my = 0, cx = 0, cy = 0, raf;
    const onMove = (e) => {
      const r = wrapRef.current?.getBoundingClientRect();
      if (!r) return;
      mx = ((e.clientX - r.left) / r.width - 0.5) * 20;
      my = ((e.clientY - r.top) / r.height - 0.5) * 20;
    };
    const onScroll = () => {
      const y = window.scrollY;
      if (bg) bg.style.transform = `translateY(${y * 0.4}px) scale(${1 + Math.min(0.08, y / 8000)})`;
    };
    const loop = () => {
      cx += (mx - cx) * 0.08;
      cy += (my - cy) * 0.08;
      if (bg) bg.style.translate = `${cx}px ${cy}px`;
      raf = requestAnimationFrame(loop);
    };
    wrapRef.current?.addEventListener("mousemove", onMove);
    window.addEventListener("scroll", onScroll);
    loop();
    return () => { cancelAnimationFrame(raf); window.removeEventListener("scroll", onScroll); };
  }, []);
  return (
    <section ref={wrapRef} className="relative w-full overflow-hidden flex items-center justify-center" style={{ minHeight: "92svh" }} data-screen-label="Hero">
      <PalaceBackground />
      <div className="relative z-10 max-w-[760px] px-8 text-center text-[#FAF6EE]">
        <FadeUp delay={150}>
          <p className="overline text-[#D4AF7A] mb-8">PARFUMERIE ORIENTALE · NANTES · DEPUIS 2022</p>
        </FadeUp>
        <FadeUp delay={350}>
          <h1 className="font-display font-light text-[40px] sm:text-[64px] lg:text-[80px] leading-[1.1] sm:leading-[1.05] mb-6 sm:mb-8">
            Découvrez les parfums<br/><em className="italic font-light text-[#F5E5C3]">exclusifs de l'orient.</em>
          </h1>
        </FadeUp>
        <FadeUp delay={550}>
          <p className="text-[16px] lg:text-[18px] leading-relaxed text-[#FAF6EE]/85 max-w-[540px] mx-auto mb-10">
            Lattafa, El Nabil, Convivium et créateurs de niche. Sélectionnés sur peau, livrés en 48h depuis Nantes.
          </p>
        </FadeUp>
        <FadeUp delay={750}>
          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 items-stretch sm:items-center justify-center">
            <Magnetic><button onClick={onCollection} className="btn-primary w-full sm:w-auto justify-center">Découvrir la collection <Icon name="arrowRight" size={14} /></button></Magnetic>
            <Magnetic><button onClick={onStory} className="btn-outline-light">Voir l'histoire</button></Magnetic>
          </div>
        </FadeUp>
      </div>
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2 text-[#FAF6EE]/70 pulse-down">
        <span className="overline text-[10px]">Découvrir</span>
        <Icon name="arrowDown" size={16} />
      </div>
    </section>
  );
};

// ─────────── (legacy globe block removed)
// ─────────── Marquee marques
const BrandMarquee = ({ reverse = false, bg = "#F5EFE2" }) => {
  const items = window.JENNATI.BRAND_LOGOS;
  const list = [...items, ...items, ...items];
  return (
    <section style={{ background: bg }} className="py-12 sm:py-16 marquee-wrap overflow-hidden border-y border-[rgba(212,175,122,0.2)]" data-screen-label={reverse ? "Marquee2" : "Marquee1"}>
      <p className="overline text-[#D4AF7A] text-center mb-8 sm:mb-10">{reverse ? "Onze maisons. Une sélection." : "Maisons que nous distribuons"}</p>
      <div className="overflow-hidden">
        <div className={`flex ${reverse ? "marquee-track-reverse" : "marquee-track"}`} style={{ width: "max-content" }}>
          {list.map((b, i) => (
            <div key={i} className="flex-shrink-0 mx-3 sm:mx-5 h-[68px] sm:h-[88px] min-w-[180px] sm:min-w-[220px] px-6 sm:px-8 flex items-center justify-center border border-[rgba(212,175,122,0.4)] bg-[#FAF6EE]/70 backdrop-blur-sm rounded-sm hover:bg-[#FAF6EE] hover:border-[#D4AF7A] hover:shadow-[0_4px_24px_rgba(212,175,122,0.25)] transition-all duration-500 group">
              <div className="text-center">
                {b.isHouse ? (
                  <>
                    <p className="font-display tracking-[0.3em] text-[18px] sm:text-[20px] text-[#1A1410] group-hover:text-[#D4AF7A] transition">JENNATI</p>
                    <p className="overline text-[8px] sm:text-[9px] text-[#6B5C44] mt-0.5">· LA MAISON ·</p>
                  </>
                ) : (
                  <p className="font-display italic text-[18px] sm:text-[22px] tracking-wide text-[#1A1410] group-hover:text-[#D4AF7A] transition leading-tight">{b.name}</p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────── Mosaic categories — bento gallery draggable
const CategoryMosaic = ({ onPick }) => {
  const items = [
    { id: "dubai",    title: "Parfum Dubaï",         desc: "Lattafa, Asdaaf, Rasasi. Le golfe en 100ml.", url: "https://cdn.shopify.com/s/files/1/0981/1977/8636/files/CONFIDENTIAL_PRIVATE_GOLD_Lattafa_1500x_61ab70ec-6fd3-4c3b-a8ea-8ded9339e7b8.webp", colSpan: 2, rowSpan: 2 },
    { id: "elnabil",  title: "Parfum El Nabil",      desc: "Le musc, sublimé.",                            url: "https://cdn.shopify.com/s/files/1/0981/1977/8636/files/lune-de-miel-eau-de-parfum.jpg",                                                                          colSpan: 1, rowSpan: 1 },
    { id: "brumes",   title: "Brumes & capillaire",  desc: "Légères en peau, tenaces en cheveux.",         url: "https://cdn.shopify.com/s/files/1/0981/1977/8636/files/pure-musk-2_avec_arriere-plan_supprime.png",                                                              colSpan: 1, rowSpan: 1 },
    { id: "coffrets", title: "Coffrets",             desc: "Le rituel offert.",                            url: "https://cdn.shopify.com/s/files/1/0981/1977/8636/files/MUSCOTTOMANCPAIGLE-BLANC.webp",                                                                            colSpan: 1, rowSpan: 2 },
    { id: "maison",   title: "Parfum maison",        desc: "Spray, bakhoor, ambiance.",                    url: "https://cdn.shopify.com/s/files/1/0981/1977/8636/files/FullSizeRender_70a23d4e-4b3a-4be2-8685-3b1d0805e224.jpg",                                                  colSpan: 2, rowSpan: 1 },
  ];

  const wrapRef = React.useRef(null);
  const trackRef = React.useRef(null);
  const [open, setOpen] = React.useState(null);
  const dragState = React.useRef({ down: false, moved: false, startX: 0, startScrollLeft: 0 });

  // Pointer-drag horizontal scroll (desktop only)
  React.useEffect(() => {
    const wrap = wrapRef.current;
    if (!wrap) return;
    const onDown = (e) => {
      if (window.innerWidth < 768) return;
      dragState.current = { down: true, moved: false, startX: e.clientX, startScrollLeft: wrap.scrollLeft };
      wrap.classList.add("is-dragging");
      wrap.setPointerCapture(e.pointerId);
    };
    const onMove = (e) => {
      if (!dragState.current.down) return;
      const dx = e.clientX - dragState.current.startX;
      if (Math.abs(dx) > 4) dragState.current.moved = true;
      wrap.scrollLeft = dragState.current.startScrollLeft - dx;
    };
    const onUp = () => {
      dragState.current.down = false;
      wrap.classList.remove("is-dragging");
    };
    wrap.addEventListener("pointerdown", onDown);
    wrap.addEventListener("pointermove", onMove);
    wrap.addEventListener("pointerup", onUp);
    wrap.addEventListener("pointercancel", onUp);
    return () => {
      wrap.removeEventListener("pointerdown", onDown);
      wrap.removeEventListener("pointermove", onMove);
      wrap.removeEventListener("pointerup", onUp);
      wrap.removeEventListener("pointercancel", onUp);
    };
  }, []);

  // Lock body scroll + escape key for modal
  React.useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setOpen(null); };
    document.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = prev; document.removeEventListener("keydown", onKey); };
  }, [open]);

  const handleClick = (item) => {
    if (dragState.current.moved) { dragState.current.moved = false; return; }
    setOpen(item);
  };

  return (
    <section className="py-16 px-5 sm:px-6 lg:px-12 bg-[#F5EFE2]" data-screen-label="Categories">
      <div className="text-center max-w-2xl mx-auto mb-12">
        <p className="overline text-[#D4AF7A] mb-4">Explorer par famille</p>
        <h2 className="font-display text-[36px] lg:text-[48px] text-[#1A1410] leading-tight mb-4">
          <RevealText>Quel parfum *vous ressemble ?*</RevealText>
        </h2>
        <p className="text-[17px] text-[#6B5C44]">Cinq univers olfactifs. Glissez pour explorer.</p>
      </div>

      {/* Mobile: simple stacked grid */}
      <div className="md:hidden max-w-[1400px] mx-auto grid grid-cols-1 gap-4">
        {items.map((it, i) => (
          <FadeUp key={it.id} delay={i * 80}>
            <button onClick={() => onPick && onPick(it.id)}
              className="group relative block w-full overflow-hidden rounded-xl"
              style={{ aspectRatio: "16/10" }}>
              <img src={it.url} alt={it.title} loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
              <div className="absolute inset-x-0 bottom-0 p-5 text-left text-[#F5EFE2]">
                <h3 className="font-display font-semibold text-[20px] leading-tight">{it.title}</h3>
                <p className="text-[13px] mt-1 opacity-85">{it.desc}</p>
              </div>
            </button>
          </FadeUp>
        ))}
      </div>

      {/* Desktop: draggable horizontal bento */}
      <div
        ref={wrapRef}
        className="bento-wrap hidden md:block max-w-[1400px] mx-auto overflow-x-auto cursor-grab"
        style={{
          scrollbarWidth: "none",
          msOverflowStyle: "none",
          WebkitOverflowScrolling: "touch",
        }}
      >
        <div
          ref={trackRef}
          className="grid gap-4"
          style={{
            gridAutoFlow: "column dense",
            gridTemplateRows: "repeat(2, 240px)",
            gridAutoColumns: "240px",
            paddingBottom: 8,
          }}
        >
          {items.map((it, i) => (
            <FadeUp key={it.id} delay={i * 90}
              style={{
                gridColumn: `span ${it.colSpan} / span ${it.colSpan}`,
                gridRow:    `span ${it.rowSpan} / span ${it.rowSpan}`,
                minWidth: 240, minHeight: 240,
              }}>
              <button
                onClick={() => handleClick(it)}
                onContextMenu={(e) => e.preventDefault()}
                draggable={false}
                className="group relative block w-full h-full overflow-hidden rounded-xl bento-card"
                style={{ background: "#1A1410" }}
              >
                <img
                  src={it.url}
                  alt={it.title}
                  loading="lazy"
                  draggable={false}
                  className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-[1.05]"
                  style={{ pointerEvents: "none", userSelect: "none" }}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                <div className="absolute inset-x-0 bottom-0 p-5 text-left text-[#F5EFE2] translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 ease-out">
                  <h3 className="font-display font-semibold text-[18px] leading-tight">{it.title}</h3>
                  <p className="text-[13px] mt-1" style={{ opacity: 0.85 }}>{it.desc}</p>
                </div>
              </button>
            </FadeUp>
          ))}
        </div>
      </div>

      {/* Drag hint */}
      <div className="hidden md:flex items-center justify-center gap-2 mt-6 text-[#6B5C44]/70">
        <Icon name="arrowRight" size={14} className="-scale-x-100" />
        <span className="overline text-[10px]">Glissez pour explorer</span>
        <Icon name="arrowRight" size={14} />
      </div>

      {/* Lightbox modal */}
      {open && (
        <div
          className="fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-8"
          style={{ background: "rgba(0,0,0,0.8)", backdropFilter: "blur(8px)", WebkitBackdropFilter: "blur(8px)", animation: "fadeIn 200ms ease-out" }}
          onClick={() => setOpen(null)}
          role="dialog" aria-modal="true"
        >
          <div
            className="relative w-full h-full flex items-center justify-center"
            onClick={(e) => e.stopPropagation()}
            style={{ animation: "lightboxIn 300ms cubic-bezier(0.4, 0, 0.2, 1)" }}
          >
            <img
              src={open.url}
              alt={open.title}
              className="rounded-xl object-contain"
              style={{ maxHeight: "90vh", maxWidth: "100%" }}
            />
            <button
              onClick={() => setOpen(null)}
              className="absolute top-4 right-4 w-10 h-10 rounded-full flex items-center justify-center text-white transition-colors duration-200 hover:bg-white/20"
              style={{ background: "rgba(0,0,0,0.5)", backdropFilter: "blur(8px)" }}
              aria-label="Fermer"
            >
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
            <div className="absolute bottom-6 left-1/2 -translate-x-1/2 text-center text-white px-6 py-3 rounded-full" style={{ background: "rgba(0,0,0,0.5)", backdropFilter: "blur(8px)" }}>
              <h3 className="font-display text-[20px]">{open.title}</h3>
              <p className="text-[13px] opacity-85 mt-0.5">{open.desc}</p>
            </div>
          </div>
        </div>
      )}

      <style>{`
        .bento-wrap::-webkit-scrollbar { display: none; }
        .bento-wrap.is-dragging { cursor: grabbing; }
        .bento-wrap.is-dragging .bento-card { cursor: grabbing; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes lightboxIn {
          from { opacity: 0; transform: translateY(20px) scale(0.9); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
      `}</style>
    </section>
  );
};

// ─────────── Best-sellers
const ProductCard = ({ p, onClick, onAdd }) => (
  <FadeUp className="group">
    <div className="relative">
      <div data-cursor="product" role="button" tabIndex={0}
        onClick={() => onClick && onClick(p)}
        onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick && onClick(p); } }}
        className="block w-full text-left cursor-pointer">
        <div className="relative aspect-[4/5] overflow-hidden transition-transform duration-[500ms] ease-out group-hover:-translate-y-2">
          <img src={p.img} alt={p.name} loading="lazy"
            className="w-full h-full object-contain p-8 transition-transform duration-[700ms] group-hover:scale-[1.05]"
            style={{ filter: "drop-shadow(0 12px 24px rgba(212,175,122,0.15)) drop-shadow(0 4px 8px rgba(54,48,42,0.08))" }} />
        </div>
        <div className="pt-5">
          <p className="overline text-[#D4AF7A] mb-1">{p.brand}</p>
          <h3 className="font-display text-[22px] text-[#1A1410] mb-2">{p.name}</h3>
          <p className="text-[15px] text-[#6B5C44]">{p.price.toFixed(2).replace(".", ",")} €</p>
        </div>
      </div>
      <button onClick={(e) => { e.stopPropagation(); onAdd && onAdd(p, e); }}
        className="absolute bottom-[120px] left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity btn-primary text-[10px] py-3 px-6 z-10">
        Ajouter <Icon name="plus" size={12} />
      </button>
    </div>
  </FadeUp>
);

const BestSellers = ({ onPick, onAdd, onAll }) => {
  const ids = [2, 1, 15, 19];
  const ps = window.JENNATI.PRODUCTS.filter(p => ids.includes(p.id));
  return (
    <section className="py-16 sm:py-24 px-5 sm:px-6 lg:px-12 bg-[#FAF6EE]" data-screen-label="BestSellers">
      <div className="text-center max-w-2xl mx-auto mb-16">
        <p className="overline text-[#D4AF7A] mb-4">La sélection d'Ouardia</p>
        <h2 className="font-display text-[36px] lg:text-[48px] text-[#1A1410] leading-tight mb-5">
          <RevealText>Les flacons les *plus demandés*.</RevealText>
        </h2>
        <p className="text-[17px] text-[#6B5C44]">Quatre signatures qui sortent du comptoir chaque semaine — testées sur ma peau avant la vôtre.</p>
      </div>
      <div className="max-w-[1400px] mx-auto grid grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-10">
        {ps.map(p => <ProductCard key={p.id} p={p} onClick={onPick} onAdd={onAdd} />)}
      </div>
      <div className="text-center mt-14">
        <Magnetic><button onClick={onAll} className="btn-outline">Voir tous les parfums <Icon name="arrowRight" size={14} /></button></Magnetic>
      </div>
    </section>
  );
};

// ─────────── Video manifesto
const VideoManifesto = () => {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setVis(true); obs.disconnect(); } }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return (
    <section ref={ref} className="bg-[#F5EFE2]" data-screen-label="Manifesto">
      <div className="relative w-full overflow-hidden group kenburns-host"
        style={{
          aspectRatio: "16 / 9",
          minHeight: "80vh",
          opacity: vis ? 1 : 0,
          transition: "opacity 1.2s ease",
        }}>
        <img src="https://images.unsplash.com/photo-1615634260167-c8cdede054de?w=2400&q=90&auto=format&fit=crop" alt="" className="absolute inset-0 w-full h-full object-cover" style={{ animation: "manifestoKenBurns 18s ease-in-out infinite alternate" }} />
        <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, rgba(26,20,16,0.35) 0%, rgba(26,20,16,0.55) 50%, rgba(26,20,16,0.65) 100%)" }} />
        {/* Decorative play indicator */}
        <div className="absolute top-6 right-6 flex items-center gap-2 text-[#FAF6EE]/80 overline">
          <span className="w-2 h-2 rounded-full bg-[#D4AF7A] animate-pulse" />
          <span className="text-[10px]">En boucle</span>
        </div>
        <div className="absolute inset-0 flex items-center justify-center text-center px-8">
          <h2 className="font-display text-[#FAF6EE] text-[44px] sm:text-[64px] lg:text-[88px] xl:text-[104px] leading-[1.05] max-w-5xl" style={{ textShadow: "0 4px 40px rgba(0,0,0,0.5)" }}>
            L'orient se respire,<br/><em className="italic text-[#F5E5C3]">jamais ne se hurle.</em>
          </h2>
        </div>
      </div>
      <style>{`@keyframes manifestoKenBurns { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.08) translate(-1%, -1%); } }`}</style>
    </section>
  );
};

// ─────────── Testimonials carousel
const TestimonialCarousel = () => {
  const items = window.JENNATI.TESTIMONIALS;
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setIdx(v => (v + 1) % items.length), 5000);
    return () => clearInterval(id);
  }, [items.length]);
  const at = (offset) => items[(idx + offset + items.length) % items.length];
  return (
    <section className="py-24 px-6 lg:px-12 bg-[#F5EFE2] overflow-hidden" data-screen-label="Avis-Carrousel">
      <div className="text-center max-w-2xl mx-auto mb-14">
        <p className="overline text-[#D4AF7A] mb-4">Elles témoignent</p>
        <h2 className="font-display text-[34px] lg:text-[40px] text-[#1A1410]">
          <RevealText>*Mots* de comptoir.</RevealText>
        </h2>
      </div>
      <div className="relative max-w-[1280px] mx-auto">
        <div className="flex items-center justify-center gap-6">
          <button onClick={() => setIdx(v => (v - 1 + items.length) % items.length)}
            className="hidden lg:flex w-10 h-10 items-center justify-center bg-[#FAF6EE] border border-[rgba(212,175,122,0.5)] hover:bg-[#D4AF7A] hover:text-white transition rounded-full" aria-label="Précédent">
            <Icon name="chevronLeft" size={18} />
          </button>
          <div className="flex items-stretch justify-center gap-6 flex-1 max-w-4xl">
            {[-1, 0, 1].map(off => {
              const t = at(off);
              const center = off === 0;
              return (
                <article key={off + idx + t.name} className={`flex-1 transition-all duration-700 ease-out ${center ? "scale-100 opacity-100" : "scale-[0.92] opacity-60 hidden md:block"}`}
                  style={{
                    background: "#FAF6EE",
                    padding: center ? 32 : 24,
                    boxShadow: center ? "0 24px 60px rgba(26,20,16,0.10)" : "0 8px 20px rgba(26,20,16,0.05)",
                    maxWidth: 380,
                  }}>
                  <div className="text-center">
                    <div className="stars text-[14px] mb-5">★★★★★</div>
                    <p className="font-body italic text-[15px] text-[#1A1410] leading-[1.7] mb-6">« {t.text} »</p>
                    <p className="overline text-[#6B5C44]">— {t.name}, {t.city}</p>
                  </div>
                </article>
              );
            })}
          </div>
          <button onClick={() => setIdx(v => (v + 1) % items.length)}
            className="hidden lg:flex w-10 h-10 items-center justify-center bg-[#FAF6EE] border border-[rgba(212,175,122,0.5)] hover:bg-[#D4AF7A] hover:text-white transition rounded-full" aria-label="Suivant">
            <Icon name="chevronRight" size={18} />
          </button>
        </div>
        <div className="flex items-center justify-center gap-2 mt-10">
          {items.map((_, i) => (
            <button key={i} onClick={() => setIdx(i)} aria-label={`Avis ${i+1}`}
              className={`w-2 h-2 rounded-full transition ${i === idx ? "bg-[#D4AF7A] w-6" : "bg-[#1A1410]/20"}`} />
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────── Pill reviews marquees
const PillRow = ({ items, reverse = false }) => {
  const list = [...items, ...items];
  return (
    <div className="overflow-hidden">
      <div className={reverse ? "marquee-pills-right" : "marquee-pills-left"}>
        {list.map((t, i) => (
          <div key={i} className="flex items-center bg-[#FAF6EE] rounded-full pr-6 pl-3 py-3 shadow-[0_2px_12px_rgba(26,20,16,0.06)] whitespace-nowrap">
            <div className="relative w-12 h-12 rounded-full mr-3 flex-shrink-0"
              style={{ background: `linear-gradient(135deg, #D4AF7A 0%, #B8946F 60%, #6B5C44 100%)` }}>
              <span className="absolute -bottom-0.5 -right-0.5 w-5 h-5 rounded-full bg-[#1A1410] text-[#D4AF7A] text-[8px] flex items-center justify-center font-semibold">5★</span>
            </div>
            <span className="text-[14px] text-[#1A1410]">{t}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

const PillReviews = () => {
  const items = window.JENNATI.PILL_REVIEWS;
  const half = Math.ceil(items.length / 2);
  return (
    <section className="py-16 bg-[#F5EFE2] marquee-wrap" data-screen-label="Avis-Pills">
      <p className="overline text-[#D4AF7A] text-center mb-8">Des centaines d'avis</p>
      <div className="space-y-4">
        <PillRow items={items.slice(0, half).concat(items.slice(half))} />
        <PillRow items={items.slice(half).concat(items.slice(0, half))} reverse />
      </div>
    </section>
  );
};

// ─────────── Sections horizontal padding helpers — apply mobile-first padding adjustments
const Story = () => {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    if (open) document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [open]);
  return (
    <section className="py-20 px-5 sm:px-6 lg:px-12 bg-[#F5EFE2]" data-screen-label="Savoir-faire">
      <div className="max-w-[1100px] mx-auto flex flex-col md:flex-row items-center justify-center gap-8 md:gap-10">
        {/* Video player */}
        <FadeUp className="w-full md:w-auto">
          <button
            onClick={() => setOpen(true)}
            className="group relative block overflow-hidden rounded-2xl shadow-2xl shadow-[#D4AF7A]/30 transition-transform duration-700 ease-out hover:scale-[1.01]"
            style={{ width: "100%", maxWidth: 451, aspectRatio: "1 / 1" }}
            aria-label="Lire la vidéo"
          >
            <img
              src="https://images.unsplash.com/photo-1531497865144-0464ef8fb9a9?w=900&q=85&auto=format&fit=crop"
              alt="Atelier parfumerie"
              className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-105"
            />
            <div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/30" />
            <span
              className="absolute inset-0 flex items-center justify-center"
              aria-hidden="true"
            >
              <span
                className="flex items-center justify-center rounded-full transition-transform duration-300 group-hover:scale-110"
                style={{
                  width: 64, height: 64,
                  border: "2px solid #F5EFE2",
                  background: "rgba(26,20,16,0.35)",
                  backdropFilter: "blur(8px)",
                  WebkitBackdropFilter: "blur(8px)",
                  boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
                }}
              >
                <svg width="20" height="22" viewBox="0 0 20 22" fill="none" style={{ marginLeft: 3 }}>
                  <path d="M19 9.27c1.33.77 1.33 2.69 0 3.46L3 22.05A2 2 0 0 1 0 20.32V1.68A2 2 0 0 1 3 -.05L19 9.27Z" fill="#F5EFE2" />
                </svg>
              </span>
            </span>
          </button>
        </FadeUp>

        {/* Copy */}
        <div className="w-full md:max-w-[480px] text-[#1A1410]">
          <FadeUp delay={100}>
            <p className="overline text-[#D4AF7A] mb-4" style={{ fontSize: 13, letterSpacing: "0.32em" }}>
              Notre savoir-faire
            </p>
          </FadeUp>
          <FadeUp delay={200}>
            <h2 className="font-display text-[36px] leading-[1.1] mb-4">
              Quatre ans à choisir, <em className="italic">flacon par flacon.</em>
            </h2>
          </FadeUp>
          <FadeUp delay={300}>
            <div className="w-24 h-[3px] rounded-full mb-7" style={{ background: "linear-gradient(90deg, #D4AF7A 0%, #E8C792 100%)" }} />
          </FadeUp>
          <FadeUp delay={400}>
            <div className="space-y-5 text-[16px] text-[#6B5C44]" style={{ lineHeight: 1.7 }}>
              <p>Avant Jennati, il y avait une chambre à Nantes, trois enfants qui dormaient, et une commode pleine de flacons rapportés du Moyen-Orient. Des parfums splendides, et invisibles en France.</p>
              <p>Quatre ans plus tard, Jennati a un comptoir, un catalogue resserré, et une règle inflexible : aucun parfum ne s'achète sans s'être posé sur ma peau pendant douze heures.</p>
              <p>C'est tout Jennati.</p>
            </div>
          </FadeUp>
          <FadeUp delay={500}>
            <button
              className="group inline-flex items-center gap-2 mt-7 font-display italic text-[16px] text-[#D4AF7A] transition-colors duration-300 hover:text-[#B8946F]"
              style={{ borderBottom: "1px solid transparent" }}
              onMouseEnter={(e) => (e.currentTarget.style.borderBottomColor = "#D4AF7A")}
              onMouseLeave={(e) => (e.currentTarget.style.borderBottomColor = "transparent")}
            >
              Découvrir notre histoire
              <span className="transition-transform duration-300 group-hover:translate-x-1">→</span>
            </button>
          </FadeUp>
        </div>
      </div>

      {/* Video modal */}
      {open && (
        <div
          className="fixed inset-0 z-[200] flex items-center justify-center p-4 sm:p-8"
          style={{ background: "rgba(14,10,7,0.85)", backdropFilter: "blur(8px)" }}
          onClick={() => setOpen(false)}
          role="dialog"
          aria-modal="true"
        >
          <div
            className="relative w-full max-w-[1080px] aspect-video rounded-2xl overflow-hidden shadow-2xl"
            onClick={(e) => e.stopPropagation()}
            style={{ background: "#000" }}
          >
            <button
              onClick={() => setOpen(false)}
              className="absolute top-4 right-4 z-10 w-10 h-10 rounded-full flex items-center justify-center text-[#F5EFE2] transition-colors duration-200 hover:bg-white/15"
              style={{ background: "rgba(26,20,16,0.6)", backdropFilter: "blur(8px)" }}
              aria-label="Fermer"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
            <video
              src="https://videos.pexels.com/video-files/3997800/3997800-uhd_2560_1440_30fps.mp4"
              className="w-full h-full object-cover"
              controls
              autoPlay
              playsInline
            />
          </div>
        </div>
      )}
    </section>
  );
};

// ─────────── Instagram marquee (FIX C)
const InstagramGrid = ({ onPick }) => {
  const ids = [21, 25, 23, 24, 22, 20, 1, 2, 15, 11];
  const ps = ids.map(id => window.JENNATI.PRODUCTS.find(p => p.id === id)).filter(Boolean);
  const list = [...ps, ...ps];
  const isMobile = typeof window !== "undefined" && window.innerWidth < 640;
  return (
    <section className="py-16 sm:py-20 bg-[#F5EFE2] marquee-wrap" data-screen-label="Instagram">
      <div className="max-w-[1400px] mx-auto px-5 sm:px-6 lg:px-12">
        <div className="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 sm:gap-6 mb-8">
          <div>
            <h2 className="font-display text-[26px] sm:text-[32px] text-[#1A1410] leading-tight">
              <RevealText>Suivez-nous sur *Instagram*</RevealText>
            </h2>
            <p className="text-[14px] text-[#6B5C44] mt-2 max-w-md">Rejoignez notre communauté et découvrez les coulisses de notre univers parfumé.</p>
          </div>
          <a href="#instagram" className="inline-flex items-center gap-2 bg-[#1A1410] text-[#FAF6EE] px-5 py-3 min-h-[44px] rounded-full text-[13px] hover:bg-[#D4AF7A] transition self-start sm:self-auto">
            <Icon name="instagram" size={16} /> @jennati_boutique
          </a>
        </div>
      </div>
      <div className="overflow-hidden sm:overflow-hidden">
        <div className="hidden sm:flex marquee-track" style={{ animationDuration: "35s", gap: "12px" }}>
          {list.map((p, i) => (
            <button key={i} onClick={() => onPick && onPick(p)}
              className="flex-shrink-0 relative aspect-square h-[280px] rounded-2xl overflow-hidden bg-[#FAF6EE] group">
              <img src={p.img} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
              <div className="absolute inset-0 bg-[#1A1410]/0 group-hover:bg-[#1A1410]/30 transition" />
              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition">
                <Icon name="instagram" size={28} className="text-[#FAF6EE]" />
              </div>
            </button>
          ))}
        </div>
        {/* Mobile: native scroll-x snap */}
        <div className="flex sm:hidden gap-3 px-5 overflow-x-auto snap-x snap-mandatory" data-no-smooth>
          {ps.map((p, i) => (
            <button key={i} onClick={() => onPick && onPick(p)}
              className="flex-shrink-0 relative w-[200px] h-[200px] rounded-2xl overflow-hidden bg-[#FAF6EE] snap-start">
              <img src={p.img} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover" />
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────── Newsletter
const Newsletter = () => (
  <section className="py-20 px-8 bg-[#EDE5D3]" data-screen-label="Newsletter">
    <div className="max-w-[560px] mx-auto text-center">
      <p className="overline text-[#D4AF7A] mb-4">Rester en contact</p>
      <h2 className="font-display text-[32px] lg:text-[40px] text-[#1A1410] mb-4 leading-tight">
        <RevealText>L'orient, en plus *subtil*.</RevealText>
      </h2>
      <p className="text-[16px] text-[#6B5C44] mb-8">Une lettre par mois — nouveautés, sélections, mots du comptoir.</p>
      <form className="flex gap-3 mb-4" onSubmit={(e) => e.preventDefault()}>
        <input type="email" placeholder="votre@email.com" className="underline-input flex-1" required />
        <button className="btn-primary !py-3" type="submit">Je m'inscris</button>
      </form>
      <p className="text-[11px] text-[#6B5C44] tracking-wide">En vous inscrivant, vous acceptez de recevoir nos messages. Désinscription en un clic.</p>
    </div>
  </section>
);

// ─────────── Footer
const Footer = () => (
  <footer className="bg-[#1A1410] text-[#FAF6EE]" data-screen-label="Footer">
    <div className="max-w-[1400px] mx-auto px-8 pt-24 pb-8 grid grid-cols-2 lg:grid-cols-4 gap-12">
      <div className="col-span-2 lg:col-span-1">
        <p className="font-display text-[#D4AF7A] text-[32px] tracking-[0.2em]">JENNATI</p>
        <p className="text-[13px] text-[#FAF6EE]/60 mt-3 leading-relaxed">Parfumerie orientale<br/>Nantes — depuis 2022</p>
        <div className="flex gap-4 mt-6 text-[#D4AF7A]">
          {["instagram","facebook","tiktok","whatsapp"].map(n => (
            <a key={n} href="#" aria-label={n} className="hover:text-[#FAF6EE] transition"><Icon name={n} size={18} /></a>
          ))}
        </div>
      </div>
      <div>
        <p className="overline text-[#D4AF7A] mb-5">Boutique</p>
        <ul className="space-y-2.5 text-[14px] text-[#FAF6EE]/75">
          {["Tous les parfums","Parfum Dubaï","El Nabil","Brumes & capillaire","Coffrets","Parfum Maison"].map(x => (
            <li key={x}><a href="#" className="hover:text-[#D4AF7A] transition">{x}</a></li>
          ))}
        </ul>
      </div>
      <div>
        <p className="overline text-[#D4AF7A] mb-5">Aide</p>
        <ul className="space-y-2.5 text-[14px] text-[#FAF6EE]/75">
          {["Contact","FAQ","Livraison & retours","Suivi commande","Échantillons"].map(x => (
            <li key={x}><a href="#" className="hover:text-[#D4AF7A] transition">{x}</a></li>
          ))}
        </ul>
      </div>
      <div>
        <p className="overline text-[#D4AF7A] mb-5">Légal</p>
        <ul className="space-y-2.5 text-[14px] text-[#FAF6EE]/75">
          {["Mentions légales","CGV","Confidentialité","Cookies"].map(x => (
            <li key={x}><a href="#" className="hover:text-[#D4AF7A] transition">{x}</a></li>
          ))}
          <li className="pt-2 text-[#FAF6EE]/50">[Adresse à compléter]<br/>Nantes</li>
          <li className="text-[#FAF6EE]/50">jennatiboutique@gmail.com</li>
        </ul>
      </div>
    </div>
    <div className="border-t border-[#FAF6EE]/10 px-8 py-6 max-w-[1400px] mx-auto flex flex-col sm:flex-row items-center justify-between gap-4 text-[12px] text-[#FAF6EE]/50">
      <p>© 2026 Jennati Boutique — Conçu à Nantes</p>
      <div className="flex items-center gap-3 font-mono text-[11px]">
        <span className="px-2 py-1 bg-[#FAF6EE]/10 rounded">VISA</span>
        <span className="px-2 py-1 bg-[#FAF6EE]/10 rounded">MC</span>
        <span className="px-2 py-1 bg-[#FAF6EE]/10 rounded">CB</span>
        <span className="px-2 py-1 bg-[#FAF6EE]/10 rounded">Apple Pay</span>
        <span className="px-2 py-1 bg-[#FAF6EE]/10 rounded">PayPal</span>
      </div>
    </div>
  </footer>
);

// ─────────── Loader
const Loader = ({ done }) => {
  const [hide, setHide] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => { setHide(true); setTimeout(done, 800); }, 1900);
    return () => clearTimeout(t);
  }, [done]);
  return (
    <div className="fixed inset-0 z-[100] bg-[#F5EFE2] flex flex-col items-center justify-center transition-transform duration-[800ms] ease-[cubic-bezier(0.7,0,0.3,1)]"
      style={{ transform: hide ? "translateY(-100%)" : "translateY(0)" }}>
      <p className="font-display text-[#D4AF7A] text-[64px] sm:text-[80px] tracking-[0.18em]">JENNATI</p>
      <div className="w-[260px] h-px bg-[#D4AF7A]/20 mt-3 overflow-hidden">
        <div className="trace-line h-full bg-[#D4AF7A]" />
      </div>
      <p className="overline text-[#6B5C44] mt-4">· Parfumerie orientale · Nantes ·</p>
    </div>
  );
};

// ─────────── Brand Logos Marquee (FIX E)
const LogoFallback = ({ name, isHouse }) => (
  <span className="font-display italic text-[#1A1410] whitespace-nowrap"
    style={{ fontSize: isHouse ? 28 : 24, letterSpacing: isHouse ? "0.18em" : "0", fontStyle: isHouse ? "normal" : "italic" }}>
    {isHouse ? "JENNATI" : name}
  </span>
);

const BrandLogo = ({ b }) => {
  const [failed, setFailed] = React.useState(!b.domain);
  if (failed) return <LogoFallback name={b.name} isHouse={b.isHouse} />;
  return (
    <img src={`https://cdn.brandfetch.io/${b.domain}/w/200/h/100`} alt={b.name}
      onError={() => setFailed(true)}
      className="h-[60px] w-auto object-contain transition-all duration-300"
      style={{ filter: "grayscale(20%)" }}
      onMouseEnter={(e) => { e.currentTarget.style.filter = "grayscale(0%)"; e.currentTarget.style.transform = "scale(1.05)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.filter = "grayscale(20%)"; e.currentTarget.style.transform = "scale(1)"; }}
    />
  );
};

const LogosMarquee = () => {
  const list = [...window.JENNATI.BRAND_LOGOS, ...window.JENNATI.BRAND_LOGOS];
  return (
    <section className="py-14 px-6 lg:px-12 bg-[#F5EFE2] marquee-wrap" data-screen-label="LogosMarques">
      <p className="overline text-[#D4AF7A] text-center mb-3">Nos marques partenaires</p>
      <h2 className="font-display text-[26px] sm:text-[28px] text-[#1A1410] text-center mb-10">Les maisons que nous distribuons</h2>
      <div className="overflow-hidden">
        <div className="marquee-track" style={{ animationDuration: "40s", gap: "60px" }}>
          {list.map((b, i) => (
            <div key={i} className="flex items-center justify-center px-[30px] sm:px-[40px] h-[100px] flex-shrink-0">
              <BrandLogo b={b} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─────────── Packshot Marquee (FIX B)
const PackshotMarquee = ({ onPick }) => {
  const ids = [2, 1, 15, 19, 14, 3, 20, 5, 6, 11, 12, 25];
  const ps = ids.map(id => window.JENNATI.PRODUCTS.find(p => p.id === id)).filter(Boolean);
  const list = [...ps, ...ps];
  return (
    <section className="py-16 sm:py-20 bg-[#F5EFE2] relative overflow-hidden" data-screen-label="PackshotsMarquee">
      <p className="overline text-[#D4AF7A] text-center mb-3">Marques sélectionnées par Ouardia</p>
      <h2 className="font-display text-[28px] sm:text-[36px] text-[#1A1410] text-center mb-10 px-6">Tout notre univers en mouvement</h2>

      <div className="w-full relative flex items-center justify-center">
        <div
          className="packshot-scroll w-full"
          style={{
            WebkitMask: "linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%)",
            mask: "linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%)",
          }}
        >
          <div className="packshot-track flex gap-8 w-max">
            {list.map((p, i) => (
              <button
                key={i}
                onClick={() => onPick && onPick(p)}
                data-cursor="product"
                draggable={false}
                className="packshot-item flex-shrink-0 w-56 md:w-64 lg:w-72 cursor-pointer bg-transparent text-left"
              >
                <div className="aspect-[4/5] flex items-center justify-center p-6">
                  <img
                    src={p.img}
                    alt={p.name}
                    loading="lazy"
                    draggable={false}
                    className="packshot-img max-w-[80%] max-h-full object-contain transition-all duration-500"
                    style={{ filter: "drop-shadow(0 12px 24px rgba(212,175,122,0.18)) drop-shadow(0 4px 8px rgba(54,48,42,0.08))" }}
                  />
                </div>
                <div className="text-center mt-2 px-3">
                  <h3 className="font-display text-[20px] text-[#1A1410] leading-tight truncate">{p.name}</h3>
                  <p className="text-[15px] text-[#6B5C44] mt-1">{p.price.toFixed(2).replace(".", ",")} €</p>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @keyframes packshotScroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .packshot-track { animation: packshotScroll 50s linear infinite; will-change: transform; }
        .packshot-scroll:hover .packshot-track { animation-play-state: paused; }
        .packshot-item { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
        .packshot-item:hover .packshot-img {
          transform: scale(1.06);
          filter: drop-shadow(0 20px 40px rgba(212,175,122,0.30)) drop-shadow(0 6px 12px rgba(54,48,42,0.12)) brightness(1.05) !important;
        }
        @media (prefers-reduced-motion: reduce) {
          .packshot-track { animation: none; }
        }
      `}</style>
    </section>
  );
};

window.JS = { TopBar, Header, UserDropdown, MenuDrawer, Hero, BrandMarquee, CategoryMosaic, BestSellers, ProductCard, VideoManifesto, TestimonialCarousel, PillReviews, Story, InstagramGrid, Newsletter, Footer, Loader, LogosMarquee, PackshotMarquee };