/* Yan's Cakes — immersive "step into the shop" hero. Drag the storefront to look around; tap a hotspot or category to browse. */ function ImmersiveHero({ onAdd, onScrollToShop, onNav }) { const { Button, Eyebrow, IconButton } = window.DorDesignSystem_396f3e; const { products, categories, hotspots, byId, fmt } = window.YANS; const [pan, setPan] = React.useState({ x: 0, y: 0 }); const [parallax, setParallax] = React.useState({ x: 0, y: 0 }); const [activeCat, setActiveCat] = React.useState("Swiss Rolls"); const [popId, setPopId] = React.useState("sr-pandan"); const drag = React.useRef(null); const RANGE_X = 90, RANGE_Y = 55; const clamp = (v, m) => Math.max(-m, Math.min(m, v)); const onDown = (e) => { drag.current = { sx: e.clientX, sy: e.clientY, px: pan.x, py: pan.y }; }; const onMove = (e) => { if (drag.current) { const d = drag.current; setPan({ x: clamp(d.px + (e.clientX - d.sx), RANGE_X), y: clamp(d.py + (e.clientY - d.sy), RANGE_Y) }); } else { const r = e.currentTarget.getBoundingClientRect(); const nx = (e.clientX - r.left) / r.width - 0.5; const ny = (e.clientY - r.top) / r.height - 0.5; setParallax({ x: -nx * 24, y: -ny * 16 }); } }; const endDrag = () => { drag.current = null; }; const nudge = (dx, dy) => setPan((p) => ({ x: clamp(p.x + dx, RANGE_X), y: clamp(p.y + dy, RANGE_Y) })); const tx = pan.x + parallax.x, ty = pan.y + parallax.y; const railArrow = { flex: "none", width: 38, height: 38, borderRadius: "50%", border: "1px solid var(--border-default)", background: "var(--surface-raised)", color: "var(--accent)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18 }; const pop = byId(popId); const goCat = (cat) => onNav ? onNav({ s: "category", cat }) : onScrollToShop(); const goProduct = (p) => onNav ? onNav({ s: "product", p }) : onScrollToShop(); const popCatItems = pop ? products.filter((p) => p.cat === pop.cat) : []; const cyclePop = (dir) => { if (!pop) return; const i = popCatItems.findIndex((p) => p.id === pop.id); const n = (i + dir + popCatItems.length) % popCatItems.length; setPopId(popCatItems[n].id); }; const popNav = (side) => ({ position: "absolute", [side]: 8, top: "50%", transform: "translateY(-50%)", width: 36, height: 36, borderRadius: "50%", border: 0, background: "rgba(252,250,246,0.92)", color: "var(--chocolate)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 17, boxShadow: "var(--shadow-md)" }); // Fixed featured selection (no category filtering) — a few rolls, cheesecake & egg tart. const featured = ["sr-sugar", "sr-pandan", "sr-oreo", "c-cotton", "t-egg-box"].map(byId); const railRef = React.useRef(null); const scrollRail = (dir) => railRef.current && railRef.current.scrollBy({ left: dir * 280, behavior: "smooth" }); const pickCat = (name) => { setActiveCat(name); const first = products.find((p) => p.cat === name); if (first) setPopId(first.id); if (railRef.current) railRef.current.scrollTo({ left: 0 }); }; return (
{/* ---- draggable scene (straight-on storefront, gentle overscan for look-around) ---- */}
Yan's Cakes storefront {/* mini-photo hotspots — anchored to the photo; open category + jump to the store */} {hotspots.map((h) => ( ))}
{/* legibility gradient stays fixed (not panned) */}
{/* ---- left category panel (capped so it never collides with the bottom dock) ---- */}
Explore our collection
{categories.map((c) => { const on = c.name === activeCat; return ( ); })}
{/* ---- product popover (browse within category; Shop → category, Details → product) ---- */} {pop && (
{pop.name}

{pop.name}

{fmt(pop.price)}

{pop.desc}

)} {/* ---- bottom dock: nav pad · featured rail · visit card ---- */}
{/* nav pad */}
nudge(0, 40)} /> nudge(0, -40)} /> nudge(60, 0)} /> nudge(-60, 0)} />
Drag to
look around
{/* featured rail removed — browsing now lives in the product popover */} {/* ---- value bar (signature red → maroon) ---- */}
); } /* Hand-drawn-style line icons for the category list (red/maroon to match the brand). */ function CatIcon({ type, size = 22, color = "currentColor" }) { const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" }; const paths = { cake: , roll: , cheesecake: , tart: , bread: , cookie: , }; return {paths[type] || paths.cookie}; } function PadBtn({ pos, icon, onClick }) { return ( ); } function Val({ icon, head, sub }) { return (
{head}
{sub}
); } window.ImmersiveHero = ImmersiveHero;