/* Yan's Cakes desktop — Home below-fold sections, Category, Product, Search. */ function DHomeSections({ onNav, onAdd }) { const { categories, byId, fmt } = window.YANS; const best = ["sr-pandan", "t-egg-box", "c-cotton", "t-fruit", "h-signature", "s-pineapple", "sr-oreo", "b-rum"].map(byId); return (
{/* categories */}
Shop by category

From our kitchen to your table

{categories.map((c) => ( ))}
{/* bestsellers */}
Bestsellers

Loved by regulars

{best.map((p) => )}
{/* story split */}
Our story

A neighbourhood tradition since 1992

From a single counter at Yan’s Cakes, we’ve been baking Swiss rolls, egg tarts and festive favourites the same careful way for over thirty years — small batches, quality ingredients, and recipes regulars have grown up with.

Delicious to the very last bite.

); } function DCategory({ category, onNav, onAdd }) { const { products, categories } = window.YANS; const [active, setActive] = React.useState(category); React.useEffect(() => { setActive(category); }, [category]); const [sort, setSort] = React.useState("Popular"); let items = products.filter((p) => p.cat === active); if (sort === "Price ↑") items = [...items].sort((a, b) => a.price - b.price); if (sort === "Price ↓") items = [...items].sort((a, b) => b.price - a.price); return (
Shop

{active}

{items.length} handcrafted {active.toLowerCase()} — baked fresh and kept chilled for you.

{(() => { const subs = [...new Set(items.map((p) => p.sub).filter(Boolean))]; if (subs.length === 0) { return
{items.map((p) => )}
; } return subs.map((sg) => (
{sg}
{items.filter((p) => p.sub === sg).map((p) => )}
)); })()}
); } function DProduct({ product, onNav, onAdd, onAddLine }) { const { products, fmt } = window.YANS; const [qty, setQty] = React.useState(1); const related = products.filter((p) => p.cat === product.cat && p.id !== product.id).slice(0, 4); const chilled = product.cat === "Seasonal" ? "Store in a cool, dry place. See expiry on the tub." : "Keep refrigerated. Best enjoyed within 2–3 days of delivery."; return (
{product.name}
{Array.isArray(product.gallery) && product.gallery.length > 1 && (
{product.gallery.map((im, i) =>
)}
)}
{product.cat}

{product.name}

{product.soldOut ? "" : (product.rollMode ? fmt(product.price) : ((product.tartMode || product.htMode || product.variants) ? "from " + fmt(product.price) : fmt(product.price)))}

{product.desc}

{product.soldOut ?
Currently out of stock
: product.htMode ?
: product.tartMode ?
: product.variants ?
: product.rollMode ?
:
{qty}
}
Storage & freshness
{chilled}
{related.length > 0 && (
You may also like
{related.map((p) => )}
)}
); } function DSearch({ onNav, onAdd }) { const { products, fmt } = window.YANS; const [q, setQ] = React.useState(""); const results = q ? products.filter((p) => (p.name + " " + p.cat).toLowerCase().includes(q.toLowerCase())) : []; return (
setQ(e.target.value)} placeholder="Search cakes, tarts, rolls…" style={{ flex: 1, border: 0, outline: "none", background: "transparent", padding: "17px 0", fontFamily: "var(--font-body)", fontSize: 17, color: "var(--text-primary)" }} />
{!q &&
Popular
{["Egg tart", "Pandan", "Cheesecake", "Pineapple"].map((t) => )}
} {q &&
{results.map((p) => )}
} {q && results.length === 0 &&

No matches for “{q}”.

}
); } /* shared */ function DEyebrow({ children, center }) { return
{children}{center && }
; } function DProductCard({ p, onNav, onAdd }) { const { fmt } = window.YANS; const [h, setH] = React.useState(false); return (
setH(true)} onMouseLeave={() => setH(false)} style={{ background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: h ? "var(--shadow-lg)" : "var(--shadow-md)", transform: h ? "translateY(-3px)" : "none", transition: "box-shadow .24s, transform .24s", display: "flex", flexDirection: "column" }}>
onNav({ s: "product", p })} style={{ aspectRatio: "4/3", overflow: "hidden", cursor: "pointer" }}>{p.name}

onNav({ s: "product", p })} style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 21, color: "var(--text-primary)", lineHeight: 1.12, margin: "0 0 6px", cursor: "pointer" }}>{p.name}

{p.desc}

{p.soldOut ? "Sold out" : (p.rollMode ? fmt(p.price) : ((p.tartMode || p.htMode || p.variants) ? "from " + fmt(p.price) : fmt(p.price)))} {p.soldOut ? Unavailable : }
); } const dStep = { width: 48, height: 52, border: 0, background: "transparent", color: "var(--text-primary)", fontSize: 17, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }; const dStepSm = { width: 38, height: 40, border: 0, background: "transparent", color: "var(--text-primary)", fontSize: 14, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }; const stepperWrap = { display: "flex", alignItems: "center", border: "1px solid var(--border-default)", borderRadius: 999, overflow: "hidden", background: "var(--surface-raised)", flex: "none" }; const stepperNum = { minWidth: 44, textAlign: "center", fontFamily: "var(--font-body)", fontSize: 17, fontWeight: 700, color: "var(--text-primary)" }; const addBtn = { flex: 1, height: 54, border: 0, borderRadius: "var(--radius-md)", background: "var(--chocolate)", color: "var(--ivory)", fontFamily: "var(--font-body)", fontSize: 15.5, fontWeight: 700, cursor: "pointer" }; /* Tart purchase UI: egg tart (single or box of 10) + build-your-own assorted box of 10. */ function TartPurchase({ product, onAddLine }) { const { tartFlavours, fmt } = window.YANS; const t = product.tart || { unit: product.price, boxSize: 10, boxPrice: product.price * 10 }; const [mode, setMode] = React.useState("single"); const [qty, setQty] = React.useState(1); const [counts, setCounts] = React.useState({ egg: 0, fruit: 0, cheese: 0 }); const BOX = 10; const total = (counts.egg || 0) + (counts.fruit || 0) + (counts.cheese || 0); const boxPrice = tartFlavours.reduce((s, f) => s + f.price * (counts[f.id] || 0), 0); const setC = (id, n) => setCounts((c) => ({ ...c, [id]: Math.max(0, n) })); if (product.tartMode === "single") { return (
{[["single", "Individual", fmt(t.unit) + " each"], ["box", "Box of " + t.boxSize, fmt(t.boxPrice)]].map(([m, tt, sub]) => ( ))}
{qty}
{mode === "single" ? : }
); } // assorted build-your-own box of 10 return (
Build your box · choose {BOX} {total} / {BOX}
{tartFlavours.map((f) => (
{f.name}
{fmt(f.price)} each
{counts[f.id] || 0}
))}
); } /* Fixed-price assorted roll box: pick N flavours from a list. */ function RollAssortment({ product, onAddLine }) { const { fmt } = window.YANS; const need = product.pick || 3; const [counts, setCounts] = React.useState({}); const total = Object.values(counts).reduce((s, n) => s + n, 0); const setC = (f, n) => setCounts((c) => ({ ...c, [f]: Math.max(0, n) })); return (
Pick {need} flavours {total} / {need}
{product.flavours.map((f) => (
{f}
{counts[f] || 0}
))}
); } /* Size/variant purchase UI (e.g. Small / Large). */ function VariantPurchase({ product, onAddLine }) { const { fmt } = window.YANS; const [vi, setVi] = React.useState(0); const [qty, setQty] = React.useState(1); const v = product.variants[vi]; return (
{product.variants.map((o, i) => ( ))}
{qty}
); } const ghostBtn = { height: 44, padding: "0 22px", border: "1px solid var(--border-strong)", background: "transparent", borderRadius: "var(--radius-md)", fontFamily: "var(--font-body)", fontSize: 14, fontWeight: 600, color: "var(--text-primary)", cursor: "pointer" }; /* High Tea Set builder: pick 2 swiss rolls, a box of 10 tarts, and a cheesecake — each flavour-selectable. Total adjusts to the chosen components. */ function HighTeaBuilder({ onAddLine }) { const { htChoices, TART_BOX, byId, fmt } = window.YANS; const [roll1, setRoll1] = React.useState(htChoices.roll[0].id); const [roll2, setRoll2] = React.useState(htChoices.roll[1] ? htChoices.roll[1].id : htChoices.roll[0].id); const [cake, setCake] = React.useState(htChoices.cheesecake[0].id); const tf = (id) => ((htChoices.tart.find((t) => t.id === id) || {}).price || 0); const tartCombos = [ { id: "egg-fruit", label: "5 Egg · 5 Fruit", price: tf("egg") * 5 + tf("fruit") * 5 }, { id: "fruit-cheese", label: "5 Fruit · 5 Cheese", price: tf("fruit") * 5 + tf("cheese") * 5 }, { id: "egg-cheese", label: "5 Egg · 5 Cheese", price: tf("egg") * 5 + tf("cheese") * 5 }, { id: "egg-10", label: "10 Egg", price: tf("egg") * 10 }, { id: "fruit-10", label: "10 Fruit", price: tf("fruit") * 10 }, { id: "cheese-10", label: "10 Cheese", price: tf("cheese") * 10 }, ]; const [comboId, setComboId] = React.useState(tartCombos[0].id); const combo = tartCombos.find((c) => c.id === comboId) || tartCombos[0]; const rollPrice = (id) => byId(id) ? byId(id).price : 0; const cakePrice = byId(cake) ? byId(cake).price : 0; const total = 32.8; const Picker = ({ label, hint, value, set, options, getName }) => (
{label} {hint}
{options.map((o) => { const on = value === o.id; return ( ); })}
); return (
o.name} /> o.name} />
Tarts · box of {TART_BOX} choose combination
{tartCombos.map((c) => { const on = comboId === c.id; return ( ); })}
o.name.replace("Japanese ", "")} />
); } Object.assign(window, { DHomeSections, DCategory, DProduct, DSearch, DEyebrow, DProductCard, TartPurchase, HighTeaBuilder, VariantPurchase, RollAssortment, ghostBtn });