{title}

{intro &&

{intro}

}

{action}

); } /* --- Image slot wrapper --------------------------------------------------- */ // Drop-in image placeholder. Pass `src` to wire a real photo (e.g. from // assets/photos/). Distinct id per slot. // Wrapped in a .media-frame: the frame is the fixed box that scroll-reveals and // clips, while the inner slot carries the slow framed hover-zoom (Aesop-style). // A `src` is only handed to the slot once we have confirmed the file actually // loads, so a missing photo falls back to the placeholder rather than showing a // broken image. function MediaSlot({ id, placeholder = "Drop a photo", radius = 14, shape = "rounded", src, style, className = "" }) { const [okSrc, setOkSrc] = React.useState(null); React.useEffect(() => { if (!src) { setOkSrc(null); return; } let live = true; const probe = new Image(); probe.onload = () => { if (live) setOkSrc(src); }; probe.onerror = () => { if (live) setOkSrc(null); }; probe.src = src; return () => { live = false; }; }, [src]); const attrs = { id, placeholder, shape, radius: String(radius), class: `media-slot ${className}`.trim(), }; if (okSrc) attrs.src = okSrc; return React.createElement( "div", { className: "media-frame", style: { ...style, borderRadius: Number(radius) || 0 } }, React.createElement("image-slot", attrs) ); } /* --- Product grid tile ------------------------------------------------------ Wraps the design-system ProductCard. When a family has `image` + `imageHover`, the hover photo is layered on top (fades in on hover) — the design-system bundle itself isn't touched, this just overlays a second sized to match ProductCard's media block. Families without photos yet fall back to ProductCard's plain title-on-kraft placeholder. */ function ProductTile({ family, onNavigate }) { return ( { e.preventDefault(); onNavigate(`products/${family.slug}`); }}> {family.image && family.imageHover && ( )} ); } /* --- Carousel (multi-photo case studies, product galleries) --------------- `slides` is an array of { src, placeholder }. Renders one MediaSlot per slide, cross-fading between them — arrows + dots only appear once there's more than one photo, so a single-photo carousel degrades to a plain frame. */ function Carousel({ id, slides = [], radius = 0, style }) { const [index, setIndex] = React.useState(0); const count = slides.length; if (!count) return null; const go = (delta) => setIndex((i) => (i + delta + count) % count); return (

{slides.map((s, i) => (

))}

{count > 1 && ( <>

{slides.map((_, i) => (

)}

); } /* --- Closing CTA block (every page) --------------------------------------- */ function ClosingCTA({ onNavigate, title, sub, waText, prefillFamily }) { return (

{title || "Tell us what you're packaging."}

{sub ?

{sub}

One-line invitation. Final copy TBD.

}

); } Object.assign(window, { Icon, WhatsAppGlyph, PH, PHBlock, Flag, SectionHead, MediaSlot, Carousel, ProductTile, ClosingCTA, waLink, WA_NUMBER, WA_DEFAULT, routeToHref, });