// TAHAANN — non-book merchandise cards + category, review and story sections const { Badge: DsBadge, SectionHeader: DsSectionHeader } = window.TAHANDesignSystem_a07997; const PWRAP = { maxWidth: "1280px", margin: "0 auto", padding: "0 24px" }; const psvg = (children, size = 24, sw = 1.5) => {children}; const CAT_ICONS = { book: <>, food: <>, craft: <>, tea: <>, coffee: <>, wear: <>, decor: <>, gift: <>, }; const IRibbon = ; const IBagSm = <>; // Corner flags on a product image — one badge per flag the admin saved on the // product (Bestseller, New arrival, …). No flags, no badge. They wrap short of // the wishlist button on the right. function Flag({ item }) { const badges = window.tahanFlagBadges(item.flags); if (!badges.length) return null; return ( {badges.map((b) => ( {b.label} ))} ); } // Struck original first, then the live price in the sale colour. function PriceRow({ price, original, size = 15 }) { return (
{original && ₹{original.toLocaleString("en-IN")}} ₹{price.toLocaleString("en-IN")}
); } function ProductCard({ item, saved, onToggleSave, onAdd }) { const b = item.badge; const tone = b && (b.tone === "sale" ? "sale" : b.tone === "new" ? "new" : "gold"); return (
{b && {b.label}}
{item.title}
{item.titleBn}
{item.tagline}
₹{item.price.toLocaleString("en-IN")} {item.original && ₹{item.original.toLocaleString("en-IN")}}
★{item.rating.toFixed(1)} ({item.ratingCount})
); } function ProductGrid({ items, saved, toggleSave, addToCart }) { return (
{items.map((p) => toggleSave(p.id)} onAdd={() => addToCart(p.id)} />)}
); } const CAT_GAP = 18; // Arrow control for the collection carousel. function CatArrow({ dir, disabled, onClick }) { return ( ); } function ShopByCategory({ data }) { const items = (data && data.categories) || []; const [perView, setPerView] = React.useState(5); const [page, setPage] = React.useState(0); const touchX = React.useRef(null); // Same column counts the grid used at each breakpoint, so the tiles keep // their familiar size — only the overflow behaviour changes. React.useEffect(() => { const calc = () => { const w = window.innerWidth; setPerView(w >= 1200 ? 5 : w >= 992 ? 4 : w >= 768 ? 3 : 2); }; calc(); window.addEventListener("resize", calc); return () => window.removeEventListener("resize", calc); }, []); const pages = Math.max(1, Math.ceil(items.length / perView)); // Resizing can leave the current page past the end. React.useEffect(() => { if (page >= pages) setPage(0); }, [pages, page]); const go = (n) => setPage(Math.max(0, Math.min(pages - 1, n))); const onTouchStart = (e) => { touchX.current = e.touches[0].clientX; }; const onTouchEnd = (e) => { if (touchX.current == null) return; const dx = e.changedTouches[0].clientX - touchX.current; touchX.current = null; if (pages > 1 && Math.abs(dx) > 40) go(page + (dx < 0 ? 1 : -1)); }; return (

Explore by Collection

{/* marginLeft:auto keeps the arrows hard right on narrow screens, where .tahan-section-head wraps them onto their own line. */} {pages > 1 && ( go(page - 1)} /> = pages - 1} onClick={() => go(page + 1)} /> )}
{/* Stepping by (100% + gap) lands each page flush rather than drifting by one gap per page. */}
{items.map((c) => (
{/* A collection tile goes to the Shop filtered by that category — it used to swallow the click and scroll to a section on this page. */} {c.label}
))}
); } function ShopShelfCard({ item, tint, saved, onToggleSave, onAdd }) { const [hover, setHover] = React.useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: "transparent", border: "none", borderRadius: 0, boxShadow: "none", transform: "none", display: "flex", flexDirection: "column" }}>
{item.tagline &&
{item.tagline}
} {item.title}
); } function ShelfSection({ id, title, subtitle, items, tint, rowProps, cols = 4, shopCat }) { const [all, setAll] = React.useState(false); const shown = all ? items : items.slice(0, cols); return (

{title}

{subtitle &&
{subtitle}
}
{shopCat ? ( View All → ) : ( )}
{shown.map((p) => rowProps.toggleSave(p.id)} onAdd={() => rowProps.addToCart(p.id)} />)}
); } function WearGridSection({ id, title, items, rowProps, shopCat }) { return (

{title}

View All →
{items.map((p) => { const saved = !!rowProps.saved[p.id]; return (
{p.title}
₹{p.price.toLocaleString("en-IN")} {p.original && ₹{p.original.toLocaleString("en-IN")}}
★{p.rating.toFixed(1)} ({p.ratingCount})
); })}
); } function ProductSection({ id, eyebrow, title, titleBn, lede, items, rowProps, tint, shopCat }) { return (
{lede &&

{lede}

}
); } function Reviews({ data }) { const [per, setPer] = React.useState(3); const [page, setPage] = React.useState(0); React.useEffect(() => { // Bootstrap tiers: 3 up from lg, 2 on md, 1 below md. const calc = () => setPer(window.innerWidth < 768 ? 1 : window.innerWidth < 992 ? 2 : 3); calc(); window.addEventListener("resize", calc); return () => window.removeEventListener("resize", calc); }, []); const pages = Math.max(1, Math.ceil(data.reviews.length / per)); React.useEffect(() => { if (page > pages - 1) setPage(0); }, [pages, page]); const go = (d) => setPage((p) => (p + d + pages) % pages); const arrow = { width: "40px", height: "40px", borderRadius: "999px", cursor: "pointer", border: "1px solid var(--border-strong)", background: "var(--surface-card)", color: "var(--forest-800)", fontSize: "16px", lineHeight: 1, display: "flex", alignItems: "center", justifyContent: "center" }; return (
{data.reviews.map((r) => (
{r.rating.toFixed(1)}★ {r.bought && {r.bought}}
{r.text}
— {r.name} | {r.place}
))}
{Array.from({ length: pages }).map((_, i) => ( ))}
); } function StoryCards({ data }) { return ( ); } Object.assign(window, { ProductCard, ProductGrid, ShopByCategory, ProductSection, ShelfSection, Reviews, StoryCards });