/* ============================================================ SlideOutPanel — drawer UX. No price, no basket CTA. ============================================================ */ function SlideOutPanel({ product, open, onClose }) { const [mounted, setMounted] = React.useState(false); React.useEffect(() => { if (open) { setMounted(true); document.body.style.overflow = "hidden"; } else { document.body.style.overflow = ""; const t = setTimeout(() => setMounted(false), 450); return () => clearTimeout(t); } }, [open]); React.useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [onClose]); if (!mounted && !open) return null; const p = product; return ( <>
); } function DrawerContent({ p }) { return (
{/* Product image */}
{p.image ? ( {p.name} ) : ( )} {p.pill &&
}
{/* Name + tagline */}

{p.name}

{p.tagline}

{/* Why it's good */} {(p.usps || p.ours) && (
Why it's good
    {(p.usps || p.ours).map((x, i) => (
  • {String(i + 1).padStart(2, "0")} {x}
    • ))}
)} {/* Ingredients */}
Ingredients

{p.ingredients.join(" ")}

{/* Never in the pack */}
Never in the pack
{p.notTested.map(n => ( {n} ))}
{/* Show me more button */}
{ e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = "var(--ink)"; }} onMouseLeave={e => { e.currentTarget.style.background = "var(--ink)"; e.currentTarget.style.color = "var(--paper)"; }} > Show me more →
); } window.SlideOutPanel = SlideOutPanel;