/* ============================================================ ProductRail — horizontal "shelf" row. Bottles stand side-by-side. Scroll horizontally (wheel/drag/arrows). Click opens the Label Decoder drawer. ============================================================ */ function ProductRail({ onOpen }) { const railRef = React.useRef(null); const [canL, setCanL] = React.useState(false); const [canR, setCanR] = React.useState(true); const dragRef = React.useRef({ dragging: false, startX: 0, scrollLeft: 0, moved: false }); const rafRef = React.useRef(null); const update = React.useCallback(() => { if (rafRef.current) return; rafRef.current = requestAnimationFrame(() => { rafRef.current = null; const el = railRef.current; if (!el) return; setCanL(el.scrollLeft > 4); setCanR(el.scrollLeft + el.clientWidth < el.scrollWidth - 4); }); }, []); React.useEffect(() => { update(); const el = railRef.current; if (!el) return; el.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); return () => { el.removeEventListener("scroll", update); window.removeEventListener("resize", update); if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [update]); const onMouseDown = React.useCallback((e) => { const el = railRef.current; if (!el) return; dragRef.current = { dragging: true, startX: e.pageX - el.offsetLeft, scrollLeft: el.scrollLeft, moved: false }; el.style.cursor = "grabbing"; el.style.userSelect = "none"; }, []); const onMouseMove = React.useCallback((e) => { const d = dragRef.current; if (!d.dragging) return; const el = railRef.current; if (!el) return; const x = e.pageX - el.offsetLeft; const walk = (x - d.startX) * 1.2; if (Math.abs(walk) > 4) d.moved = true; el.scrollLeft = d.scrollLeft - walk; }, []); const stopDrag = React.useCallback(() => { const el = railRef.current; if (!el) return; dragRef.current.dragging = false; el.style.cursor = "grab"; el.style.userSelect = ""; }, []); const nudge = (dir) => { const el = railRef.current; if (!el) return; el.scrollBy({ left: dir * (el.clientWidth * 0.7), behavior: "smooth" }); }; return (

Our team's staples.

{/* Scroll progress bar + arrows */}
nudge(-1)} dir="left" />
nudge(1)} dir="right" />
{/* Rail */}
{PRODUCTS.map((p, i) => ( { if (!dragRef.current.moved) onOpen(p.id); }} /> ))} {/* Terminal tile */}
The Full Collection →
); } function ShelfTile({ p, index, onOpen }) { const [hover, setHover] = React.useState(false); const [ref, visible] = useReveal(0.12); return ( ); } function ArrowButton({ disabled, onClick, dir }) { const [hover, setHover] = React.useState(false); return ( ); } function ScrollTrack({ railRef }) { const [progress, setProgress] = React.useState(0); const trackRef = React.useRef(null); const dragging = React.useRef(false); React.useEffect(() => { const el = railRef.current; if (!el) return; const update = () => { const max = el.scrollWidth - el.clientWidth; setProgress(max > 0 ? el.scrollLeft / max : 0); }; update(); el.addEventListener("scroll", update, { passive: true }); window.addEventListener("resize", update); return () => { el.removeEventListener("scroll", update); window.removeEventListener("resize", update); }; }, [railRef]); const seekTo = React.useCallback((clientX) => { const track = trackRef.current; const el = railRef.current; if (!track || !el) return; const rect = track.getBoundingClientRect(); const trackWidth = rect.width - 110; // exclude the "Drag to scroll" label zone const ratio = Math.max(0, Math.min(1, (clientX - rect.left) / trackWidth)); const max = el.scrollWidth - el.clientWidth; el.scrollLeft = ratio * max; }, [railRef]); const onMouseDown = (e) => { dragging.current = true; seekTo(e.clientX); e.preventDefault(); }; const onMouseMove = React.useCallback((e) => { if (dragging.current) seekTo(e.clientX); }, [seekTo]); const onMouseUp = React.useCallback(() => { dragging.current = false; }, []); React.useEffect(() => { window.addEventListener("mousemove", onMouseMove); window.addEventListener("mouseup", onMouseUp); return () => { window.removeEventListener("mousemove", onMouseMove); window.removeEventListener("mouseup", onMouseUp); }; }, [onMouseMove, onMouseUp]); const LABEL_RESERVE = 110; // px reserved for "Drag to scroll" label const THUMB_RATIO = 0.3; // thumb is 30% of the bar zone return (
{/* Scroll hint label */} Drag to scroll {/* Track background — stays within bar zone */}
{/* Thumb — sized and positioned relative to bar zone via calc() */}
); } window.ProductRail = ProductRail;