// Pages: Collection, Product, Cart drawer, Search drawer
const { Icon, Magnetic, RevealText, FadeUp, Bullet } = window.JC;
const { ProductCard, InstagramGrid } = window.JS;

const Breadcrumb = ({ trail }) => (
  <nav className="overline text-[#6B5C44] mb-4 flex flex-wrap gap-1">
    {trail.map((t, i) => (
      <span key={i}>
        {i > 0 && <span className="mx-2 text-[#D4AF7A]">/</span>}
        <span className={i === trail.length - 1 ? "text-[#1A1410]" : ""}>{t}</span>
      </span>
    ))}
  </nav>
);

const CollectionPage = ({ onPick, onAdd, onHome, catId = "dubai", catLabel = "Parfum Dubaï" }) => {
  const [filter, setFilter] = React.useState("tout");
  const [filtersOpen, setFiltersOpen] = React.useState(false);
  const all = window.JENNATI.PRODUCTS.filter(p => p.cat === catId);
  const filtered = filter === "tout" ? all : all.filter(p => p.gender === filter);
  const filters = catId === "dubai"
    ? [["tout","Tout"],["femme","Femme"],["homme","Homme"],["mixte","Mixte"]]
    : [["tout","Tout"]];
  return (
    <div data-screen-label="Collection">
      <section className="bg-[#EDE5D3] pt-[140px] pb-10 sm:pb-12 px-5 sm:px-6 lg:px-12">
        <div className="max-w-[1400px] mx-auto">
          <Breadcrumb trail={["Accueil", catLabel]} />
          <h1 className="font-display text-[36px] sm:text-[44px] lg:text-[56px] text-[#1A1410] leading-tight mb-3">{catLabel}</h1>
          <p className="text-[15px] sm:text-[16px] text-[#6B5C44] max-w-2xl">L'oriental dans toutes ses variations — des gourmands de Lattafa aux musks doux de El Nabil. Choisis sur peau par Ouardia.</p>
        </div>
      </section>
      <section className="bg-[#F5EFE2] py-5 sm:py-10 px-5 sm:px-6 lg:px-12 sticky top-[90px] z-20 border-b border-[rgba(212,175,122,0.3)]">
        <div className="max-w-[1400px] mx-auto flex flex-col sm:flex-row sm:items-center justify-between gap-3 sm:gap-4">
          <div className="flex flex-nowrap sm:flex-wrap gap-2 overflow-x-auto -mx-5 px-5 sm:mx-0 sm:px-0" data-no-smooth>
            {filters.map(([id, label]) => (
              <button key={id} onClick={() => setFilter(id)}
                className={`px-5 py-2 min-h-[44px] text-[12px] tracking-[0.16em] uppercase border transition rounded-full whitespace-nowrap flex-shrink-0 ${filter===id?"bg-[#1A1410] text-[#FAF6EE] border-[#1A1410]":"border-[rgba(212,175,122,0.5)] text-[#1A1410] hover:bg-[#FAF6EE]"}`}>
                {label}
              </button>
            ))}
          </div>
          <div className="flex items-center justify-between gap-4 text-[13px] text-[#6B5C44]">
            <button onClick={() => setFiltersOpen(true)} className="sm:hidden flex items-center gap-2 px-3 py-2 min-h-[44px] border border-[rgba(212,175,122,0.5)] rounded-full">
              ⚙ Filtres
            </button>
            <span className="text-[12px] sm:text-[13px]">{filtered.length} parfums</span>
            <select className="bg-transparent border-b border-[#D4AF7A] py-1 text-[#1A1410] outline-none text-[12px] sm:text-[13px]">
              <option>Tri : pertinence</option>
              <option>Prix croissant</option>
              <option>Prix décroissant</option>
              <option>Nouveautés</option>
            </select>
          </div>
        </div>
      </section>
      <section className="py-12 sm:py-16 px-5 sm:px-6 lg:px-12 bg-[#F5EFE2]">
        <div className="max-w-[1400px] mx-auto grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-10">
          {filtered.map(p => <ProductCard key={p.id} p={p} onClick={onPick} onAdd={onAdd} />)}
        </div>
        <div className="flex items-center justify-center gap-3 mt-12 sm:mt-16">
          {[1,2,3].map(n => (
            <button key={n} className={`w-11 h-11 text-[13px] rounded-full transition ${n===1?"bg-[#1A1410] text-[#FAF6EE]":"text-[#1A1410] hover:bg-[#FAF6EE]"}`}>{n}</button>
          ))}
          <span className="text-[#1A1410] mx-2">…</span>
          <button className="text-[12px] tracking-[0.18em] uppercase text-[#1A1410] flex items-center gap-1 hover:text-[#D4AF7A] min-h-[44px] px-2">Suivant <Icon name="arrowRight" size={12} /></button>
        </div>
      </section>
      {/* Mobile filters drawer */}
      <div onClick={() => setFiltersOpen(false)} className={`fixed inset-0 z-50 bg-black/40 transition-opacity ${filtersOpen?"opacity-100":"opacity-0 pointer-events-none"}`} />
      <aside className={`fixed top-0 left-0 bottom-0 w-[300px] z-50 bg-[#FAF6EE] shadow-xl transition-transform ${filtersOpen?"translate-x-0":"-translate-x-full"}`}>
        <div className="p-6 flex justify-between items-center border-b border-[rgba(212,175,122,0.3)]">
          <p className="font-display text-[22px]">Filtres</p>
          <button onClick={() => setFiltersOpen(false)} className="w-11 h-11 flex items-center justify-center"><Icon name="x" size={20} /></button>
        </div>
        <div className="p-6 space-y-4">
          {filters.map(([id, label]) => (
            <label key={id} className="flex items-center gap-3 py-2 cursor-pointer">
              <input type="radio" name="f" checked={filter===id} onChange={() => setFilter(id)} className="w-4 h-4 accent-[#D4AF7A]" />
              <span className="text-[15px]">{label}</span>
            </label>
          ))}
        </div>
      </aside>
    </div>
  );
};

const Accordion = ({ items }) => {
  const [open, setOpen] = React.useState(-1);
  return (
    <div className="border-t border-[rgba(212,175,122,0.3)]">
      {items.map((it, i) => (
        <div key={i} className="border-b border-[rgba(212,175,122,0.3)]">
          <button onClick={() => setOpen(o => o===i ? -1 : i)}
            className="w-full flex items-center justify-between py-5 text-left min-h-[60px]">
            <span className="overline text-[#1A1410]">{it.title}</span>
            <span className={`transition-transform duration-300 ${open===i?"rotate-180":""}`}><Icon name="chevronDown" size={18} /></span>
          </button>
          <div className="overflow-hidden transition-[max-height] duration-400" style={{ maxHeight: open===i ? 600 : 0 }}>
            <div className="pb-5 text-[14px] sm:text-[15px] text-[#1A1410] leading-[1.7]">{it.body}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

const Guarantees = () => {
  const items = [
    { icon: "🚚", color: "#E0EFD9", title: "LIVRAISON RAPIDE", text: "Nous livrons vos commandes en 2 à 5 jours, pour que vous puissiez profiter rapidement de votre parfum." },
    { icon: "🔒", color: "#F4DAE0", title: "PAIEMENT SÉCURISÉ", text: "Votre sécurité est notre priorité. Tous les paiements sont protégés et traités de manière sécurisée." },
    { icon: "✨", color: "#D9E5F2", title: "SATISFAIT OU REMBOURSÉ", text: "Si vous n'êtes pas satisfait, vous disposez de 14 jours pour demander un remboursement." },
    { icon: "📞", color: "#F4E4D9", title: "SAV À L'ÉCOUTE", text: "N'hésitez pas à nous contacter, nous sommes toujours prêts à vous aider." },
  ];
  return (
    <section className="py-16 sm:py-20 px-5 sm:px-6 lg:px-12 bg-[#FAF6EE]">
      <h2 className="font-display text-[28px] sm:text-[32px] text-[#1A1410] text-center mb-12">Nous garantissons</h2>
      <div className="max-w-[1400px] mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
        {items.map((it, i) => (
          <div key={i} className="text-center">
            <div className="w-20 h-20 rounded-full mx-auto mb-5 flex items-center justify-center text-[32px]" style={{ background: it.color }}>{it.icon}</div>
            <p className="overline text-[#1A1410] mb-2">{it.title}</p>
            <p className="text-[13px] text-[#6B5C44] leading-relaxed max-w-[260px] mx-auto">{it.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
};

const Editorial = ({ onPick }) => {
  const items = window.JENNATI.EDITORIAL;
  return (
    <section className="py-16 sm:py-20 px-5 sm:px-6 lg:px-12 bg-[#F5EFE2]">
      <h2 className="font-display text-[28px] sm:text-[32px] text-[#1A1410] text-center mb-12">L'univers du parfum</h2>
      <div className="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-3 gap-5 sm:gap-6">
        {items.map((it, i) => (
          <button key={i} onClick={() => onPick && onPick(it.cat, it.label)}
            className="relative aspect-[4/5] sm:aspect-[3/4] overflow-hidden group bg-[#1A1410]">
            <img src={it.img} alt="" loading="lazy" className="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:opacity-90 group-hover:scale-105 transition-all duration-700" />
            <div className="absolute inset-0" style={{ background: "linear-gradient(180deg, transparent 30%, rgba(26,20,16,0.8) 100%)" }} />
            <div className="absolute inset-x-0 bottom-0 p-6 sm:p-8 text-left text-[#FAF6EE]">
              <p className="font-display font-semibold text-[20px] sm:text-[24px] leading-tight">{it.title}</p>
              <span className="inline-flex items-center gap-2 mt-3 text-[#D4AF7A] overline">Découvrir <Icon name="arrowRight" size={12} /></span>
            </div>
          </button>
        ))}
      </div>
    </section>
  );
};

const PaymentIcons = () => (
  <div className="flex items-center gap-2 mt-3 flex-wrap">
    {["VISA","MC","CB","Apple Pay","PayPal"].map(p => (
      <span key={p} className="px-2.5 py-1 bg-[#F5EFE2] border border-[rgba(212,175,122,0.3)] text-[10px] font-mono tracking-wider rounded">{p}</span>
    ))}
  </div>
);

const ProductPage = ({ product, onAdd, onPick, onCollection, onBack }) => {
  const p = product || window.JENNATI.PRODUCTS[1];
  const [qty, setQty] = React.useState(1);
  const [thumb, setThumb] = React.useState(0);
  const [stickyVisible, setStickyVisible] = React.useState(true);
  const others = window.JENNATI.PRODUCTS.filter(x => x.id !== p.id && x.cat === p.cat).slice(0, 4);
  const thumbs = [p.img, ...others.slice(0, 3).map(o => o.img)];
  const oldPrice = (p.price * 1.18).toFixed(2);
  const TESTIMONIALS = window.JENNATI.TESTIMONIALS.slice(0,5);
  const [tIdx, setTIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setTIdx(v => (v+1)%TESTIMONIALS.length), 5000);
    return () => clearInterval(id);
  }, []);
  const at = (off) => TESTIMONIALS[(tIdx + off + TESTIMONIALS.length) % TESTIMONIALS.length];

  return (
    <div className="bg-[#F5EFE2] pt-[130px] pb-[80px] sm:pb-0" data-screen-label="Produit">
      <div className="max-w-[1400px] mx-auto px-5 sm:px-6 lg:px-12 pb-12 sm:pb-20">
        <button onClick={onBack} className="overline text-[#6B5C44] hover:text-[#D4AF7A] flex items-center gap-2 mb-6 sm:mb-8 min-h-[44px]"><Icon name="arrowLeft" size={14} />Retour</button>
        <div className="grid lg:grid-cols-2 gap-8 sm:gap-12 lg:gap-20">
          {/* Gallery */}
          <div className="lg:sticky lg:top-[110px] lg:self-start">
            {/* Mobile: swipeable carousel */}
            <div className="lg:hidden">
              <div className="flex gap-3 overflow-x-auto snap-x snap-mandatory -mx-5 px-5" data-no-smooth>
                {thumbs.map((src, i) => (
                  <div key={i} className="flex-shrink-0 w-full snap-center aspect-square flex items-center justify-center p-6">
                    <img src={src} alt="" className="max-w-[75%] max-h-[80%] object-contain" 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>
              <div className="flex justify-center gap-2 mt-3">
                {thumbs.map((_, i) => (
                  <span key={i} className="w-2 h-2 rounded-full bg-[#D4AF7A]/40" />
                ))}
              </div>
            </div>
            {/* Desktop */}
            <div className="hidden lg:block">
              <div className="aspect-square flex items-center justify-center overflow-hidden p-10">
                <img src={thumbs[thumb]} alt={p.name} className="max-w-[75%] max-h-[80%] object-contain" style={{ filter: "drop-shadow(0 18px 32px rgba(212,175,122,0.18)) drop-shadow(0 6px 12px rgba(54,48,42,0.10))" }} />
              </div>
              <div className="grid grid-cols-4 gap-3 mt-4">
                {thumbs.map((src, i) => (
                  <button key={i} onClick={() => setThumb(i)}
                    className={`aspect-square flex items-center justify-center overflow-hidden transition p-3 ${thumb===i?"ring-1 ring-[#D4AF7A]/60":"opacity-70 hover:opacity-100"}`}>
                    <img src={src} alt="" className="max-w-[70%] max-h-[70%] object-contain" style={{ filter: "drop-shadow(0 6px 12px rgba(212,175,122,0.18))" }} />
                  </button>
                ))}
              </div>
            </div>
          </div>
          {/* Info */}
          <div>
            {/* Mini avatars + rating */}
            <div className="flex items-center gap-3 mb-4">
              <div className="flex -space-x-2">
                {[1,2,3,4,5].map(i => (
                  <span key={i} className="w-6 h-6 rounded-full border-2 border-[#F5EFE2]" style={{ background: `linear-gradient(135deg, #D4AF7A 0%, #B8946F 60%, #6B5C44 100%)` }} />
                ))}
              </div>
              <span className="text-[12px] sm:text-[13px] text-[#6B5C44]">+1 002 clients heureux nous ont donné <strong className="text-[#1A1410]">4,8/5</strong></span>
            </div>
            <p className="overline text-[#D4AF7A] mb-3">{p.brand}</p>
            <h1 className="font-display text-[34px] sm:text-[40px] lg:text-[52px] text-[#1A1410] leading-tight mb-2">{p.name}</h1>
            <p className="font-display italic text-[16px] sm:text-[18px] text-[#6B5C44] mb-5">Eau de parfum · 100 ml</p>
            <div className="flex items-center gap-3 mb-6">
              <span className="stars">★★★★★</span>
              <span className="text-[13px] text-[#6B5C44]">128 avis</span>
            </div>
            <div className="flex items-baseline gap-3 mb-3">
              <p className="font-display text-[32px] sm:text-[34px] text-[#1A1410]">{p.price.toFixed(2).replace(".", ",")} €</p>
              <p className="text-[16px] text-[#6B5C44] line-through">{oldPrice.replace(".", ",")} €</p>
            </div>
            <p className="text-[12px] sm:text-[13px] text-[#9A2B2B] mb-6 flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full bg-[#9A2B2B] animate-pulse" />
              Stock limité — Ne laissez pas passer cette occasion !
            </p>
            <p className="text-[14px] sm:text-[15px] text-[#1A1410] leading-[1.7] mb-7 max-w-md">Une signature orientale gourmande aux notes de cardamome, vanille et bois précieux. Tient sur peau toute la journée sans s'imposer.</p>
            <div className="flex items-center gap-3 sm:gap-4 mb-5">
              <div className="flex items-center border border-[#D4AF7A]">
                <button onClick={() => setQty(q => Math.max(1, q-1))} className="w-11 h-11 flex items-center justify-center hover:bg-[#FAF6EE]"><Icon name="minus" size={14} /></button>
                <span className="w-11 text-center text-[14px]">{qty}</span>
                <button onClick={() => setQty(q => q+1)} className="w-11 h-11 flex items-center justify-center hover:bg-[#FAF6EE]"><Icon name="plus" size={14} /></button>
              </div>
              <Magnetic className="flex-1"><button onClick={(e) => onAdd && onAdd({ ...p, qty }, e)} className="btn-primary w-full justify-center">Ajouter au panier</button></Magnetic>
            </div>
            <div className="flex items-center gap-2 text-[13px] text-[#1A1410] mb-3">
              <span>🛡</span>
              <span>14 jours satisfait ou remboursé</span>
            </div>
            <PaymentIcons />
            {/* Magasin */}
            <div className="mt-7 p-5 bg-[#FAF6EE] border border-[rgba(212,175,122,0.3)] rounded">
              <p className="text-[14px] text-[#1A1410] flex items-start gap-2"><span>📍</span><span>Récupération disponible à <strong>[Adresse à compléter]</strong></span></p>
              <p className="text-[12px] text-[#6B5C44] mt-1.5 ml-6">Habituellement prêt en 2 heures</p>
              <button className="text-[12px] underline text-[#D4AF7A] mt-2 ml-6 min-h-[28px]">Afficher les informations du magasin</button>
            </div>
            <ul className="text-[13px] text-[#6B5C44] space-y-1.5 mt-6 mb-8">
              <li>✦ Échantillon offert dès 50 €</li>
              <li>✦ Livraison 48h depuis Nantes</li>
              <li>✦ Conseil sur peau — RDV boutique</li>
            </ul>
            <Accordion items={[
              { title: "Description", body: <p>Composition orientale gourmande, signée par la maison {p.brand}. À porter en soirée comme au quotidien — deux gouttes derrière l'oreille suffisent. Notes : bergamote, cardamome (tête) ; vanille noire, café, prune (cœur) ; oud, ambre, musc blanc (fond).</p> },
              { title: "Livraison", body: <p>Livraison sous 48h en France métropolitaine, gratuite dès 80 €. Expédition sous 24h après commande. Suivi par email.</p> },
              { title: "Une question ?", body: <p>Notre équipe répond à vos questions sous 24h. Contactez-nous à <a href="mailto:jennatiboutique@gmail.com" className="underline">jennatiboutique@gmail.com</a> ou en boutique à Nantes.</p> },
            ]} />
          </div>
        </div>
      </div>
      {/* Cross-sell */}
      <section className="py-16 sm:py-20 px-5 sm:px-6 lg:px-12 bg-[#F5EFE2]">
        <h2 className="font-display text-[28px] sm:text-[36px] text-[#1A1410] text-center mb-12">Vous pourriez aimer</h2>
        <div className="max-w-[1400px] mx-auto grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
          {others.map(o => {
            const old = (o.price * 1.18).toFixed(2);
            const save = (o.price * 0.18).toFixed(2);
            return (
              <div key={o.id} className="relative">
                <span className="absolute top-2 left-2 z-10 bg-[#1A1410] text-[#FAF6EE] text-[10px] tracking-[0.14em] uppercase px-2.5 py-1.5">Épargnez {save.replace(".",",")} €</span>
                <button onClick={() => onPick && onPick(o)} className="block w-full text-left group">
                  <div className="aspect-[4/5] flex items-center justify-center overflow-hidden p-8 transition-transform duration-[500ms] group-hover:-translate-y-2">
                    <img src={o.img} alt={o.name} className="max-w-[80%] max-h-full object-contain group-hover:scale-[1.05] transition-transform duration-700" 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-3 sm:pt-4">
                    <p className="overline text-[#D4AF7A] mb-1">{o.brand}</p>
                    <p className="font-display text-[15px] sm:text-[16px] text-[#1A1410] mb-1.5 leading-tight">{o.name}</p>
                    <p className="text-[14px]"><span className="text-[#6B5C44] line-through mr-2">{old.replace(".",",")} €</span><span className="text-[#D4AF7A] font-medium">{o.price.toFixed(2).replace(".",",")} €</span></p>
                  </div>
                </button>
              </div>
            );
          })}
        </div>
      </section>
      <InstagramGrid onPick={onPick} />
      <Guarantees />
      {/* Avis carousel */}
      <section className="py-16 sm:py-20 px-5 sm:px-6 lg:px-12 bg-[#F5EFE2]">
        <h2 className="font-display text-[28px] sm:text-[36px] text-[#1A1410] text-center mb-12">Ils en parlent</h2>
        <div className="max-w-[1280px] mx-auto">
          <div className="flex items-stretch justify-center gap-4 sm:gap-6">
            {[-1, 0, 1].map(off => {
              const t = at(off);
              const center = off === 0;
              return (
                <article key={off+tIdx+t.name} className={`flex-1 transition-all duration-700 ${center?"scale-100 opacity-100":"scale-[0.92] opacity-60 hidden md:block"}`}
                  style={{ background: "#FAF6EE", padding: center?28:20, 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-4">★★★★★</div>
                    <p className="italic text-[14px] sm:text-[15px] text-[#1A1410] leading-[1.7] mb-5">« {t.text} »</p>
                    <p className="overline text-[#6B5C44]">— {t.name}, {t.city}</p>
                  </div>
                </article>
              );
            })}
          </div>
          <div className="flex justify-center gap-2 mt-8">
            {TESTIMONIALS.map((_, i) => (
              <button key={i} onClick={() => setTIdx(i)} aria-label={`Avis ${i+1}`} className={`w-2 h-2 rounded-full transition ${i===tIdx?"bg-[#D4AF7A] w-6":"bg-[#1A1410]/20"}`} />
            ))}
          </div>
        </div>
      </section>
      <Editorial onPick={onCollection} />

      {/* Sticky mobile CTA */}
      <div className="fixed bottom-0 inset-x-0 lg:hidden z-30 bg-[#FAF6EE] border-t border-[rgba(212,175,122,0.4)] px-4 py-3 flex items-center gap-3 shadow-[0_-4px_20px_rgba(0,0,0,0.08)]">
        <div>
          <p className="text-[10px] text-[#6B5C44] tracking-wider uppercase">Prix</p>
          <p className="font-display text-[20px] text-[#1A1410] leading-none">{p.price.toFixed(2).replace(".",",")} €</p>
        </div>
        <button onClick={(e) => onAdd && onAdd({ ...p, qty }, e)} className="btn-primary flex-1 justify-center !py-4">Ajouter au panier</button>
      </div>
    </div>
  );
};

const CartDrawer = ({ open, onClose, items, onQty, onRemove }) => {
  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const FREE = 80;
  const progress = Math.min(100, (subtotal / FREE) * 100);
  return (
    <>
      <div onClick={onClose} className={`fixed inset-0 z-50 bg-[#1A1410]/50 transition-opacity duration-300 ${open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"}`} />
      <aside aria-hidden={!open} className={`fixed top-0 right-0 bottom-0 z-50 w-full sm:w-[420px] bg-[#FAF6EE] shadow-2xl transform transition-transform duration-[400ms] ease-[cubic-bezier(0.4,0,0.2,1)] ${open ? "translate-x-0" : "translate-x-full pointer-events-none"}`}>
        <div className="h-full flex flex-col" data-no-smooth>
          <div className="flex items-center justify-between px-5 sm:px-6 py-5 border-b border-[rgba(212,175,122,0.3)]">
            <p className="font-display text-[22px]">Panier <span className="text-[#6B5C44] text-[15px]">({items.reduce((s,i)=>s+i.qty,0)})</span></p>
            <button onClick={onClose} aria-label="Fermer" className="w-11 h-11 hover:bg-[#F5EFE2] rounded-full flex items-center justify-center"><Icon name="x" size={22} /></button>
          </div>
          <div className="px-5 sm:px-6 py-4 bg-[#F5EFE2] border-b border-[rgba(212,175,122,0.3)]">
            <p className="text-[12px] text-[#1A1410] mb-2">
              {subtotal >= FREE ? "✓ Livraison offerte" : `Plus que ${(FREE - subtotal).toFixed(2).replace(".",",")} € pour la livraison offerte`}
            </p>
            <div className="h-1 bg-[#D4AF7A]/20 rounded-full overflow-hidden">
              <div className="h-full bg-[#D4AF7A] transition-all duration-500" style={{ width: progress + "%" }} />
            </div>
          </div>
          <div className="flex-1 overflow-y-auto px-5 sm:px-6 py-5 space-y-5">
            {items.length === 0 && <p className="text-center text-[#6B5C44] py-12">Votre panier est vide.</p>}
            {items.map((it, idx) => (
              <div key={idx} className={`flex gap-4 ${it.justAdded ? "ring-2 ring-[#D4AF7A]" : ""} transition-all p-2 -m-2`}>
                <div className="w-20 h-24 bg-[#F5EFE2] flex items-center justify-center flex-shrink-0 border border-[rgba(212,175,122,0.3)]">
                  <img src={it.img} alt="" className="max-w-[80%] max-h-[80%] object-contain" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="overline text-[#D4AF7A] mb-1">{it.brand}</p>
                  <p className="font-display text-[16px] leading-tight mb-2">{it.name}</p>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center border border-[rgba(212,175,122,0.5)] text-[13px]">
                      <button onClick={() => onQty(idx, -1)} className="w-9 h-9 hover:bg-[#F5EFE2]">−</button>
                      <span className="w-7 text-center">{it.qty}</span>
                      <button onClick={() => onQty(idx, 1)} className="w-9 h-9 hover:bg-[#F5EFE2]">+</button>
                    </div>
                    <p className="text-[14px] font-medium">{(it.price * it.qty).toFixed(2).replace(".",",")} €</p>
                  </div>
                  <button onClick={() => onRemove(idx)} className="text-[11px] text-[#6B5C44] hover:text-[#D4AF7A] mt-2 underline tracking-wide">Retirer</button>
                </div>
              </div>
            ))}
          </div>
          <div className="border-t border-[rgba(212,175,122,0.3)] p-5 sm:p-6 bg-[#F5EFE2]">
            <div className="flex justify-between mb-1 text-[14px]"><span>Sous-total</span><span>{subtotal.toFixed(2).replace(".",",")} €</span></div>
            <div className="flex justify-between mb-4 text-[12px] text-[#6B5C44]"><span>Livraison</span><span>{subtotal >= FREE ? "Offerte" : "calculée à l'étape suivante"}</span></div>
            <button className="btn-primary w-full justify-center">Passer la commande — {subtotal.toFixed(2).replace(".",",")} €</button>
            <button onClick={onClose} className="block w-full text-center text-[12px] tracking-[0.18em] uppercase text-[#6B5C44] mt-4 hover:text-[#D4AF7A] min-h-[44px]">Continuer mes achats</button>
          </div>
        </div>
      </aside>
    </>
  );
};

const SearchDrawer = ({ open, onClose, onPick }) => {
  const all = window.JENNATI.PRODUCTS;
  const [q, setQ] = React.useState("");
  const matches = q.length > 0 ? all.filter(p => (p.name + " " + p.brand).toLowerCase().includes(q.toLowerCase())).slice(0, 6) : all.slice(0, 4);
  const suggestions = ["Lattafa Khamrah", "Musc Tahara", "Bakhoor"];
  return (
    <>
      <div onClick={onClose} className={`fixed inset-0 z-40 bg-[#1A1410]/30 ${open?"":"pointer-events-none opacity-0"} transition-opacity`} />
      <div aria-hidden={!open} className={`fixed inset-x-0 top-0 z-50 bg-[#FAF6EE] shadow-xl transition-transform duration-400 ease-out ${open ? "translate-y-0" : "-translate-y-full pointer-events-none"}`}>
        <div className="max-w-[1200px] mx-auto px-5 sm:px-6 lg:px-12 py-6 sm:py-8">
          <div className="flex items-center gap-3 sm:gap-4 border-b border-[rgba(212,175,122,0.5)] pb-3 mb-5">
            <Icon name="search" size={20} />
            <input autoFocus={open} value={q} onChange={e => setQ(e.target.value)} placeholder="Rechercher un parfum, une marque..." className="flex-1 bg-transparent outline-none text-[16px] sm:text-[20px] font-display" />
            <button onClick={onClose} aria-label="Fermer" className="w-11 h-11 flex items-center justify-center"><Icon name="x" size={22} /></button>
          </div>
          {q.length === 0 && (
            <div className="mb-6">
              <p className="overline text-[#6B5C44] mb-3">Suggestions populaires</p>
              <div className="flex flex-wrap gap-2">
                {suggestions.map(s => (
                  <button key={s} onClick={() => setQ(s)} className="px-4 py-2 min-h-[44px] bg-[#F5EFE2] border border-[rgba(212,175,122,0.3)] rounded-full text-[13px] hover:bg-[#D4AF7A] hover:text-white transition">{s}</button>
                ))}
              </div>
            </div>
          )}
          <p className="overline text-[#6B5C44] mb-4">{q.length > 0 ? `Résultats (${matches.length})` : "Découvrir"}</p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            {matches.map(p => (
              <button key={p.id} onClick={() => { onPick && onPick(p); onClose(); }} className="block group text-left">
                <div className="aspect-[4/5] bg-[#F5EFE2] flex items-center justify-center overflow-hidden border border-[rgba(212,175,122,0.3)]">
                  <img src={p.img} alt="" className="max-w-[80%] max-h-[80%] object-contain group-hover:scale-105 transition" />
                </div>
                <p className="overline text-[#D4AF7A] mt-3">{p.brand}</p>
                <p className="font-display text-[15px] sm:text-[16px]">{p.name}</p>
              </button>
            ))}
          </div>
        </div>
      </div>
    </>
  );
};

window.JP = { CollectionPage, ProductPage, CartDrawer, SearchDrawer };
