// Collections — three-tier customer journey: // // 1. CollectionsHub ← `navigate('collections')` // Four-axis picker. The reception desk of the catalogue. Customer // chooses how they want to shop: by Room / Colour / Style / Shape&Size. // // 2. CollectionsAxis ← `navigate('collections-axis', 'room')` // The options under one axis. e.g. picking "By Room" lands here with // Bathroom / Kitchen / Living / Outdoor / etc. Each option shows a // thumbnail picked from the matching tiles + a live tile-count. // // 3. CollectionDetail ← `navigate('collection', { axis, value, label })` // The actual filtered grid of tiles. Big editorial hero, sticky // finish/size sub-filters, the tile cards. (Same component as before, // refactored to take a filter spec rather than a category object. // Still accepts the legacy `{id: 'bath', label: 'Bath Tiles'}` shape // so the nav menu and home cards keep working without edits.) // // Tiles gain four new fields via scripts/tag-tiles.mjs: // room: string[] colour: string style: string shape: string // Old fields (cat / finish / size / img / …) are untouched. const { useState, useEffect, useMemo } = React; // ─── Global RowCard styles ──────────────────────────────────────────── // Injected once into document.head when this module loads, so the .row-card // layout works on every page that renders — both the listing // (CollectionDetail) and the product page's "You might also like" // suggestions strip. Previously these rules were buried inside // CollectionDetail's inline ); } // ─── 2. AXIS PAGE ─────────────────────────────────────────────────── function CollectionsAxis({ axis, navigate }) { const tiles = useAllTiles(); const cfg = AXES[axis] || AXES.room; useReveal(); // For each option: count tiles + pick a representative image. const enrichedOptions = useMemo(() => cfg.options.map(opt => { const matched = filterTiles(tiles, { axis: cfg.key, value: opt.id }); return { ...opt, count: matched.length, thumb: matched[0]?.img || '' }; }), [tiles, cfg]); return (
{/* Header */}

{cfg.eyebrow}

{cfg.label.replace('By ', 'Shop by ')}

{cfg.intro}

{/* Options grid */}
{enrichedOptions.map(opt => { const empty = opt.count === 0; const isColour = cfg.key === 'colour'; return ( ); })}
); } // ─── Legacy alias ──────────────────────────────────────────────────── // `CollectionsList` is what App.jsx and others used to render. Now it is // just the new Hub. Anything still calling it gets the new behaviour. const CollectionsList = CollectionsHub; // ─── 3. FILTERED DETAIL ───────────────────────────────────────────── // Story copy keyed by (axis, value). Only a few are explicitly written; // everything else falls back to a generic line that still reads well. const STORIES = { 'cat:bath': 'Bathrooms demand tiles that handle moisture, steam and daily use while never compromising on beauty. Our bath range spans sleek subway glazes, precision large formats and handmade mosaics — all tested to slip resistance and frost standards.', 'cat:wall': 'Wall tiles set the tone for a room before anything else is in it. We\'ve chosen glazes with depth, texture and movement — tiles that reward close attention and look better with age.', 'cat:floor': 'A great floor tile disappears into the background while defining the whole room. Our floor collection prioritises hardwearing finishes, generous formats and natural stone looks that don\'t date.', 'cat:outdoor': 'Outdoor tiles carry the full weight of the London climate. Every tile in this range is tested to frost resistance, anti-slip ratings and UV stability — and selected because they look as good in winter as in summer.', 'cat:decor': 'Feature tiles are the exclamation mark of an interior. Zellige, encaustic and artisan glazes for splashbacks, niches and statement walls. Handmade by small ateliers and finished in our London studio.', 'room:bathroom': 'Specified for steam, splashes and bare feet. Slip-rated porcelains, low-porosity glazes, and large formats that minimise grout lines.', 'room:kitchen': 'Hard-working surfaces for the busiest room in the house. Heat- and stain-resistant, easy to wipe, and chosen to flatter both daylight and warm evening light.', 'room:living': 'The room your guests see first — and where you spend the most time. We pick floors that hold their character for decades, not just seasons.', 'room:outdoor': 'Frost-rated, UV-stable and anti-slip. The tiles in this range are tested to the London climate and selected for terraces, balconies and patio renovations.', 'colour:white': 'White tiles read as clean, calm and architectural. Calacatta marbles, Bianco onyxes and pure ceramic glazes — every shade of white we stock.', 'colour:beige': 'Warm neutrals that flatter every wood, every stone, every fabric. Cream, almond, peach, pearl — the tonal range that grounds an interior without dating it.', 'colour:green': 'From sage to olive to deep emerald — green tiles bring a softness no neutral can. Excellent in bathrooms, kitchen splashbacks, garden rooms.', 'colour:metallic':'Gold veins, bronze chromats, onyx with metallic tracery. Used sparingly, these tiles do all the work in a room.', 'style:marble': 'Calacatta, Arabescato, Lava — the great marbles reproduced in porcelain so they survive bathrooms, kitchens and the London winter.', 'style:onyx': 'Translucent, layered, dramatic. Onyx-effect porcelains for feature walls, fireplace surrounds and bathroom interiors that need to feel set apart.', 'style:stone': 'Bahia, Stone, Apulia — quarried looks rendered in modern porcelain. The tactile depth of natural stone, with none of the maintenance.', 'shape:mosaic': 'Twenty-by-twenty handglazed pieces. Used as splashback accents, niches inside larger walls, or to dress a kitchen island.', 'shape:subway': 'Thirty-by-sixty rectified rectangles. The classic format — and our best-selling shape on bathroom walls.', 'shape:square-60':'Sixty-by-sixty square format. Generous enough to keep grout lines minimal, restrained enough to suit any room.', }; const FALLBACK_STORY = 'Curated tiles in this range, hand-selected by our London studio. Every tile in our catalogue is held to the same brief: aesthetic depth, technical credibility, and longevity.'; // Hero imagery per axis-value. Falls back to the first matching tile if no // hand-picked asset exists. const HERO_BY_KEY = { 'cat:bath': '/assets/generated/category-hero-bath.jpg', 'cat:wall': '/assets/generated/category-hero-wall.jpg', 'cat:floor': '/assets/generated/category-hero-floor.jpg', 'cat:outdoor': '/assets/generated/category-hero-outdoor.jpg', 'cat:decor': '/assets/generated/category-hero-decor.jpg', 'room:bathroom': '/assets/generated/category-hero-bath.jpg', 'room:kitchen': '/assets/generated/lifestyle-floor-wide.jpg', 'room:living': '/assets/generated/lifestyle-floor-wide.jpg', 'room:outdoor': '/assets/categories/outdoor.jpg', 'room:feature-wall':'/assets/categories/statement.jpg', 'style:marble': '/assets/categories/luxury-meteorite.jpg', 'style:stone': '/assets/categories/heritage.jpg', 'style:patterned':'/assets/categories/style-frozen-up.jpg', }; // Durstone-style listing layout. // // ┌────────────────────────────────────────────────────────────┐ // │ Collections / Bathroom Sort ▾ 13 products │ // │ [Bathroom ×] [Polished ×] │ // ├──────────────┬─────────────────────────────────────────────┤ // │ FILTERS │ ┌────┐ ┌────┐ ┌────┐ │ // │ Reset │ │img │ │img │ │img │ │ // │ │ └────┘ └────┘ └────┘ │ // │ ▾ Room │ Apulia Jatoba Grotta │ // │ ☑ Bathroom │ Gold Brown Oro │ // │ ☐ Kitchen │ 30×60·… 30×60·… 30×60·… │ // │ ▸ Colour │ │ // │ ▸ Style │ ... │ // │ ▸ Finish │ │ // │ ▸ Format │ │ // └──────────────┴─────────────────────────────────────────────┘ // // Sidebar is sticky under the nav. Each filter section is multi-select. // The primary axis arrives pre-checked + that section auto-expanded; // other sections start collapsed. // Filter sections rendered in the sidebar, in order. Mirrors the four // browse axes shown in the nav mega-menu (Room / Colour / Style / Shape // & Size) plus Finish — so what the customer sees in nav, axis page, and // sidebar all use the same vocabulary. const SIDEBAR_SECTIONS = [ { key: 'room', title: 'Room', getOptions: () => AXES.room.options.map(o => ({ id: o.id, label: o.label })) }, { key: 'colour', title: 'Colour', getOptions: () => AXES.colour.options.map(o => ({ id: o.id, label: o.label, swatch: o.swatch })) }, { key: 'style', title: 'Style', getOptions: () => AXES.style.options.map(o => ({ id: o.id, label: o.label })) }, { key: 'shape', title: 'Shape & Size', getOptions: () => AXES.shape.options.filter(o => !o.coming).map(o => ({ id: o.id, label: o.sub ? `${o.label} · ${o.sub}` : o.label })) }, { key: 'finish', title: 'Finish', getOptions: (tiles) => uniqueValues(tiles, 'finishes').map(v => ({ id: v, label: v })) }, ]; // Collect unique values from a multi-value array field across the // tile catalogue (e.g. every distinct finish that appears on any tile). function uniqueValues(tiles, field) { const set = new Set(); for (const t of tiles) { const arr = t[field]; if (Array.isArray(arr)) for (const v of arr) { if (v) set.add(v); } else if (t[field]) set.add(t[field]); } return Array.from(set).sort(); } // Apply ALL active sidebar filters (multi-select per axis, intersected). // Each axis is multi-value on the tile side; we check ANY overlap // between the tile's array and the selected set. function applySidebar(tiles, sel) { const overlaps = (arr, set) => arr.some(v => set.has(v)); const tileArr = (tile, field) => { const plural = field === 'room' ? tile.rooms : tile[field + 's']; if (Array.isArray(plural) && plural.length) return plural; const legacy = field === 'room' ? tile.room : tile[field]; return Array.isArray(legacy) ? legacy : (legacy ? [legacy] : []); }; return tiles.filter(t => { if (sel.room.size && !overlaps(tileArr(t, 'room'), sel.room)) return false; if (sel.colour.size && !overlaps(tileArr(t, 'colour'), sel.colour)) return false; if (sel.style.size && !overlaps(tileArr(t, 'style'), sel.style)) return false; if (sel.shape.size && !overlaps(tileArr(t, 'shape'), sel.shape)) return false; if (sel.finish.size && !overlaps(tileArr(t, 'finish'), sel.finish)) return false; return true; }); } function CollectionDetail({ filter, collection, navigate }) { // Accept new `filter` prop OR legacy `collection` prop (cat-based). const spec = useMemo(() => resolveFilter(filter || collection), [filter, collection]); const tiles = useAllTiles(); // Mobile detection — drives layout overrides (grid view forced, // sidebar hidden behind a Filter drawer, view switcher hidden). const isMobile = useIsMobile(760); const [filterDrawerOpen, setFilterDrawerOpen] = useState(false); useEffect(() => { if (filterDrawerOpen) { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; } }, [filterDrawerOpen]); // Multi-select state per filter axis. Sets are easier to mutate than // arrays for membership flips. const [selected, setSelected] = useState(() => emptySelection()); // Sort + view const [sort, setSort] = useState('featured'); // View mode: 'row' (default — full-width row per tile, supports // multiple images), 'grid' (3-up squares), 'compact' (5-up small). // Persists per-user via localStorage. const [viewMode, setViewMode] = useState(() => { try { return localStorage.getItem('venoraa-view') || 'row'; } catch { return 'row'; } }); useEffect(() => { try { localStorage.setItem('venoraa-view', viewMode); } catch {} }, [viewMode]); // When the spec changes (customer arrives with a new pre-filter from // the axis page), reset the selection to ONLY that pre-filter. Cat- // legacy specs don't pre-check anything (no Cat section in sidebar). useEffect(() => { const next = emptySelection(); if (['room', 'colour', 'style', 'shape'].includes(spec.axis)) { next[spec.axis] = new Set([spec.value]); } setSelected(next); }, [spec.axis, spec.value]); // Pipeline: start with all tiles → apply the page-level axis lock // (cat / luxury) → apply sidebar filters → sort. // // The axes `room` / `colour` / `style` / `shape` are NOT applied // here because the same axis has a sidebar pill row — the useEffect // above pre-selects the relevant pill from `spec.value`, and the // sidebar then drives the actual filtering through `applySidebar`. // // The axes `cat` and `luxury` have NO sidebar option (cat is // legacy; luxury is a boolean flag on the tile, not a pillable // taxonomy). So we must apply them at the base-tile stage, // otherwise the page would show the entire catalogue. const baseTiles = useMemo(() => { if (spec.axis === 'cat' || spec.axis === 'luxury') return filterTiles(tiles, spec); return tiles; }, [tiles, spec]); const filtered = useMemo(() => applySidebar(baseTiles, selected), [baseTiles, selected]); const products = useMemo(() => { const list = filtered.slice(); if (sort === 'name-asc') list.sort((a, b) => a.name.localeCompare(b.name)); if (sort === 'name-desc') list.sort((a, b) => b.name.localeCompare(a.name)); return list; }, [filtered, sort]); // ─── Stage 4: progressive load ───────────────────────────────── // Render PAGE_SIZE tiles at first; user clicks "Load more" to // reveal the next batch. Reset whenever the filter pipeline // changes so the user always starts at the top of a fresh result. const PAGE_SIZE = 24; const [visibleCount, setVisibleCount] = useState(PAGE_SIZE); useEffect(() => { setVisibleCount(PAGE_SIZE); }, [spec.axis, spec.value, selected, sort, viewMode]); const visibleProducts = products.slice(0, visibleCount); const hasMore = visibleCount < products.length; // Helpers exposed to the sidebar + chip row const toggle = (axis, id) => { setSelected(prev => { const next = cloneSelection(prev); if (next[axis].has(id)) next[axis].delete(id); else next[axis].add(id); return next; }); }; const resetAll = () => setSelected(emptySelection()); // Build the active-chip list across all axes (so user can see + remove // any single filter from one place). const activeChips = []; for (const sec of SIDEBAR_SECTIONS) { for (const id of selected[sec.key]) { const opts = sec.getOptions(tiles); const opt = opts.find(o => o.id === id); activeChips.push({ axis: sec.key, id, label: opt?.label || id }); } } // Section open/closed state — primary axis open by default. const [openSections, setOpenSections] = useState(() => { const o = {}; SIDEBAR_SECTIONS.forEach(s => { o[s.key] = (s.key === spec.axis); }); return o; }); useEffect(() => { setOpenSections(prev => ({ ...prev, [spec.axis]: true })); }, [spec.axis]); // Page title + breadcrumb tail const crumbTail = spec.label || 'All tiles'; return (
{/* Header bar — breadcrumb + sort + count */}
{/* Breadcrumb */} {/* Sort + count + view switcher. On mobile the view-switcher hides (forced grid mode) and a "Filter" button takes its place to open the bottom-sheet drawer instead of the sidebar (which is hidden at this width). */}

{products.length} {products.length === 1 ? 'product' : 'products'}

{!isMobile && } {isMobile && ( )}
{/* On mobile, render the page title ABOVE the grid (the sidebar which hosts the desktop title is hidden). */} {isMobile && (

{crumbTail}

)} {/* Body — sidebar (with title at top) + grid. Active filter chips + Clear all live BELOW the grid (see after the body close), so they don't push the body's top edge down when filters are active and disturb the title↔first-row alignment. */}
{/* ── Sidebar (desktop only — hidden on mobile, replaced by the bottom-sheet drawer triggered from the "Filter" button in the header bar). ─────────────────────────────────── */} {!isMobile && ( )} {/* ── Grid ────────────────────────────────────────────── */}
{products.length === 0 ? (

No tiles match every selected filter.

) : ( // Key on viewMode so the grid remounts when the user toggles // — letting each card replay its fade-in animation. The // class drives layout-specific grid columns + responsive.
{visibleProducts.map((p, i) => { // Mobile always uses the grid card (compact, 2-col, big // tap target). Row view's big tile + 3 thumb layout // doesn't suit a 360px viewport. if (isMobile) return ; if (viewMode === 'row') return ; if (viewMode === 'compact') return ; return ; })}
)} {/* ── Stage 4: Load more ───────────────────────────────── */} {hasMore && (

Showing {visibleProducts.length} of {products.length}

)}
{/* ── Mobile filter drawer ────────────────────────────────── Slides up from the bottom of the screen on mobile when the "Filter" button in the header is tapped. Contains every filter section the desktop sidebar holds. The whole content area scrolls; a sticky footer shows "Apply" + "Reset". */} {isMobile && filterDrawerOpen && (
setFilterDrawerOpen(false)} >
e.stopPropagation()} style={{ background: 'white', width: '100%', maxHeight: '88vh', borderRadius: '16px 16px 0 0', display: 'flex', flexDirection: 'column', overflow: 'hidden', animation: 'venoraaSheetUp 0.28s var(--ease-out)', }} > {/* Sheet header */}

Filter{activeChips.length > 0 ? ` · ${activeChips.length}` : ''}

{/* Scrollable filter sections */}
{SIDEBAR_SECTIONS.map(sec => ( setOpenSections(s => ({ ...s, [sec.key]: !s[sec.key] }))} options={sec.getOptions(tiles)} selected={selected[sec.key]} onPick={(id) => toggle(sec.key, id)} countOf={(id) => baseTiles.filter(t => tileHas(t, sec.key, id)).length} /> ))}
{/* Sticky footer — Reset + Apply */}
)} {/* Active filter chips — moved BELOW the body so they don't push the title and first-row alignment down when filters are active. Renders only when at least one filter is selected. */} {activeChips.length > 0 && (
Active filters {activeChips.map(c => ( ))}
)}
); } // ─── Selection helpers ─────────────────────────────────────────────── function emptySelection() { return { room: new Set(), colour: new Set(), style: new Set(), shape: new Set(), finish: new Set(), }; } function cloneSelection(s) { return { room: new Set(s.room), colour: new Set(s.colour), style: new Set(s.style), shape: new Set(s.shape), finish: new Set(s.finish), }; } // ─── Sidebar filter section ────────────────────────────────────────── function FilterSection({ title, open, onToggle, options, selected, onPick, countOf }) { return (
{open && (
    {options.map(opt => { const checked = selected.has(opt.id); const c = countOf(opt.id); const dim = c === 0 && !checked; return (
    • ); })}
)}
); } // ─── Sort dropdown ─────────────────────────────────────────────────── function SortDropdown({ value, onChange }) { return ( ); } // ─── Card helpers ──────────────────────────────────────────────────── // Pull the "style" label off the tile via the shared AXES vocabulary so // the eyebrow on every card variant uses the same words as the sidebar // + mega-menu (Marble Effect, Stone Effect, etc). function styleLabelOf(tile) { if (!tile?.style) return ''; // Resolves the human-readable style label. Reads from styles[0] in // the new schema (falls back to legacy single `style`). const styleId = firstOf(tile, 'styles') || tile?.style; if (!styleId) return null; return AXES.style.options.find(o => o.id === styleId)?.label || styleId; } // Tiles only carry a single `img` today. The row layout supports up to // 4 images for when admin uploads variants (per-tile `images: []`); for // now this just returns `[tile.img]` so single-image tiles still render // cleanly without faking detail shots. function imagesOf(tile) { // New schema: sightImages + galleryImages. Falls through to legacy // fields so any not-yet-migrated record still renders something. const sights = Array.isArray(tile?.sightImages) ? tile.sightImages : []; const gallery = Array.isArray(tile?.galleryImages) ? tile.galleryImages : []; if (sights.length || gallery.length) return [...sights, ...gallery].filter(Boolean); if (Array.isArray(tile?.images) && tile.images.length) return tile.images.filter(Boolean); return tile?.img ? [tile.img] : []; } // Resolve the colour swatch image(s) for "The colours" cells. // Strict rule: never a sight image. // // Schema history — `colourImagesOf` understands ALL of these: // 1) tile.colourImages = [{url, name?}, …] ← current; per-swatch name // 2) tile.colourImages = [url, …] ← mid-state; URL strings // 3) tile.colourImage = "url" ← legacy single // 4) tile.galleryImages[0] / extraImages[0] ← image fallback // // `colourImagesOf(tile)` always returns a uniform shape: // [{ url: string, name?: string }, …] // where `name` is optional. Callers fall back to tile.name when // `name` is absent. `colourImageOf(tile)` returns just the first // URL — used for SIBLING cells where each sibling represents ONE // other tile / variant and the sibling's own name is the label. function colourImagesOf(tile) { if (Array.isArray(tile?.colourImages) && tile.colourImages.length) { return tile.colourImages .map(item => ( typeof item === 'string' ? { url: item } : { url: item?.url, ...(item?.name ? { name: item.name } : {}) } )) .filter(o => o.url); } if (tile?.colourImage) return [{ url: tile.colourImage }]; if (Array.isArray(tile?.galleryImages) && tile.galleryImages.length) return [{ url: tile.galleryImages[0] }]; if (Array.isArray(tile?.extraImages) && tile.extraImages.length) return [{ url: tile.extraImages[0] }]; return []; } function colourImageOf(tile) { return colourImagesOf(tile)[0]?.url || null; } // Single-field readers — every legacy `tile.style`, `tile.finish`, // `tile.size`, `tile.colour` now resolves to the first element of the // multi-value array. Keeps the storefront code paths concise. const firstOf = (tile, key) => { const arr = tile?.[key]; return Array.isArray(arr) ? arr[0] : null; }; // One-liner editorial copy keyed by style — used as a sub-headline on // the row card. Falls back to a generic line if no match. const ROW_TAGLINES = { marble: 'Classic marble veining rendered in low-maintenance porcelain.', onyx: 'Translucent layers, dramatic on a feature wall.', stone: 'Quarried character with none of the upkeep.', wood: 'Plank-format porcelain — warmth without the maintenance.', concrete: 'Industrial calm, urban quiet.', terrazzo: 'Mid-century pattern, modern porcelain body.', patterned: 'Made for splashbacks, niches and feature panels.', handmade: 'Hand-glazed in small ateliers — variation is part of the pleasure.', metallic: 'Used sparingly — does the whole job in a room.', plain: 'A quiet surface that lets the architecture speak.', }; function taglineOf(tile) { return ROW_TAGLINES[tile?.style] || 'Hand-selected by our London studio.'; } // ─── ROW CARD (default) — big cycling tile + 3 static thumbs ──────── // 2-column layout: BIG square tile (left, 1fr) + side column (right, 2fr) // containing 3 thumb squares above + a details strip below. // // Big tile: stacks every sight image the admin uploaded and crossfades // between them on a 3.8s timer (staggered per card via `index` so the // listing feels alive rather than synchronised). Hover pauses cycling. // // Thumbs: STATIC. Source from `extraImages[]` first (the gallery shots // the admin explicitly uploaded for the in-sight section), falling back // to `images.slice(1)` for legacy tiles. They never cycle — only the // big tile does. function RowCard({ tile, navigate, index }) { const { favourites, toggleFavourite } = useAccount(); const faved = favourites?.includes(tile.id); const images = imagesOf(tile); // Cycling pool for the BIG cell. Reads tile.sightImages from the // new schema; falls back to legacy fields for any not-yet-migrated // record. Tiles with one sight render statically (no timer). const sights = React.useMemo(() => { if (Array.isArray(tile.sightImages) && tile.sightImages.length) return tile.sightImages; if (Array.isArray(tile.images) && tile.images.length) return [tile.images[0]]; return tile.img ? [tile.img] : []; }, [tile.sightImages, tile.images, tile.img]); // Static thumbs — galleryImages in the new schema, with legacy // `extraImages` and `images.slice(1)` fallbacks. Always 3 cells: // missing slots fall back to the first available image so we never // render an empty box. const thumbSource = React.useMemo(() => { if (Array.isArray(tile.galleryImages) && tile.galleryImages.length) return tile.galleryImages; if (Array.isArray(tile.extraImages) && tile.extraImages.length) return tile.extraImages; return images.slice(1); }, [tile.galleryImages, tile.extraImages, images]); const thumbs = [0, 1, 2].map(i => thumbSource[i] || thumbSource[0] || images[0]); const [active, setActive] = React.useState(0); const [paused, setPaused] = React.useState(false); React.useEffect(() => { if (sights.length <= 1 || paused) return; const offset = (index % 5) * 700; let intervalId; const startId = setTimeout(() => { intervalId = setInterval(() => { setActive(s => (s + 1) % sights.length); }, 3800); }, offset); return () => { clearTimeout(startId); if (intervalId) clearInterval(intervalId); }; }, [sights.length, index, paused]); const eyebrow = styleLabelOf(tile) || tile.collection || ''; const goProduct = () => navigate('product', tile); return (
{ if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goProduct(); } }} role="button" tabIndex={0} aria-label={`${tile.name} — view details`} style={{ animationDelay: `${index * 0.04}s` }} > {/* Left col: BIG cycling square. Multiple tags stacked at full bleed via .row-card-image (position: absolute) — only the active one is opaque, the rest crossfade. */}
setPaused(true)} onMouseLeave={() => setPaused(false)} > {sights.map((src, i) => ( {i { e.target.style.display = 'none'; }} /> ))}
{/* Right col: 3 static thumbs across the top + details strip below. Same proportions as the original layout. */}
{thumbs.map((src, i) => (
{ e.target.style.display = 'none'; }} />
))}
{eyebrow &&

{eyebrow}

}

{tile.name}

); } // ─── GRID CARD (square) ────────────────────────────────────────────── // Compact: square image + style eyebrow + serif italic name. NO size // line below the listing — that detail belongs on the product page. function GridCard({ tile, navigate, index }) { const { favourites, toggleFavourite } = useAccount(); const faved = favourites?.includes(tile.id); const eyebrow = styleLabelOf(tile) || tile.collection || ''; const heroImg = imagesOf(tile)[0]; return (
navigate('product', tile)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate('product', tile); } }} role="button" tabIndex={0} style={{ animationDelay: `${index * 0.03}s` }} >
{tile.name} e.target.style.display = 'none'} />
{eyebrow &&

{eyebrow}

}

{tile.name}

); } // ─── COMPACT CARD (small, dense) ───────────────────────────────────── // Just the image + the name. For when the customer wants to scan many // tiles at once. No eyebrow, no meta — keeps each cell light. function CompactCard({ tile, navigate, index }) { const heroImg = imagesOf(tile)[0]; return (
navigate('product', tile)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); navigate('product', tile); } }} role="button" tabIndex={0} style={{ animationDelay: `${index * 0.02}s` }} >
{tile.name} e.target.style.display = 'none'} />

{tile.name}

); } // ─── View-mode switcher ────────────────────────────────────────────── // Three-icon segmented control. Icons are inline SVGs so they scale // crisply and inherit currentColor (so the active state's white fill // works without extra CSS). function ViewSwitcher({ value, onChange }) { const modes = [ { id: 'row', label: 'Row view', icon: }, { id: 'grid', label: 'Grid view', icon: }, { id: 'compact', label: 'Compact view', icon: }, ]; return (
{modes.map(m => ( ))}
); } // Breadcrumb visual atoms const crumbBtn = { background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', color: 'var(--dark-mid)', }; const crumbSep = { margin: '0 8px', color: 'var(--cream-deep)' }; // ─── Hero (used inside CollectionDetail) ───────────────────────────── function CollectionHero({ heroImg, spec, count, navigate, backToAxis }) { const [src, setSrc] = useState(heroImg); const [parallax, setParallax] = useState(0); useEffect(() => { setSrc(heroImg); }, [heroImg]); useEffect(() => { const onScroll = () => setParallax(window.scrollY); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // What does the eyebrow say? Map axis to a short label. const axisLabel = ({ cat: 'Tile collection', room: 'Shop by room', colour: 'Shop by colour', style: 'Shop by style', shape: 'Shop by shape & size', })[spec.axis] || 'Tile collection'; // The big italic word at the end of the headline. For cat we keep the // legacy "Tiles", for everything else we use the axis term. const trailingWord = spec.axis === 'cat' ? 'tiles' : axisLabel.replace('Shop by ', ''); return (
{spec.label} setSrc('/assets/categories/luxury-meteorite.jpg')} style={{ position: 'absolute', inset: 0, width: '100%', height: '115%', objectFit: 'cover', display: 'block', transform: `translateY(${parallax * 0.25}px) scale(1.02)`, filter: 'brightness(0.85) saturate(1.05)', }} />
{spec.axis === 'cat' ? 'Collection' : 'Selection'} N° {String(Math.abs(hashCode(`${spec.axis}:${spec.value}`)) % 99 + 1).padStart(2, '0')}
London

{axisLabel}

{spec.label} {trailingWord}

{count} {count === 1 ? 'tile' : 'tiles'} · Hand-picked in London

); } // Tiny string→int hash for the "Selection N° xx" badge — stable per spec. function hashCode(s) { let h = 0; for (let i = 0; i < s.length; i++) h = ((h << 5) - h + s.charCodeAt(i)) | 0; return h; } // ─── Filter pill ───────────────────────────────────────────────────── function FilterPill({ label, value, options, onChange }) { const norm = options.map(o => Array.isArray(o) ? o : [o, o === 'all' ? `All ${label.toLowerCase()}` : o]); return ( ); } // ─── Tile card (unchanged from the previous design) ────────────────── function TileCard({ tile, navigate }) { const { favourites, toggleFavourite, addToCart } = useAccount(); const faved = favourites?.includes(tile.id); const [hover, setHover] = useState(false); const goToProduct = () => navigate('product', tile); const heroImg = imagesOf(tile)[0]; const finishLabel = firstOf(tile, 'finishes') || tile.finish || ''; const sizeLabel = firstOf(tile, 'sizes') || tile.size || ''; return (
setHover(true)} onMouseLeave={() => setHover(false)} onClick={goToProduct} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); goToProduct(); } }} role="button" tabIndex={0} aria-label={`${tile.name} — view details`} style={{ position: 'relative', cursor: 'pointer', outline: 'none' }} >
{tile.name} e.target.style.display = 'none'} />
{tile.collection && (

— {tile.collection}

)}

{tile.name}

{[finishLabel, sizeLabel].filter(Boolean).join(' · ') || 'See details'} {tile.price || 'POA'}
); } const actionBtnDark = { flex: 1, padding: '12px 8px', border: 'none', background: 'var(--dark)', color: 'white', cursor: 'pointer', fontFamily: 'var(--sans)', fontSize: '11px', letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 500 }; // ─── Product detail (unchanged) ────────────────────────────────────── // ─── PRODUCT DETAIL PAGE ───────────────────────────────────────────── // A scroll-driven sequence — no floating boxes, no chrome on the hero. // Each section reveals as the customer scrolls down: // // 1. HERO full-viewport ambience (the tile image), tile name // centred, animated scroll-cue line at the bottom. // 2. DETAIL a row of up to 5 product images side-by-side. // Centred when fewer (3 images render in slots 2-4). // 3. SIZES a single outlined box that morphs shape with the // selected size, plus an m² → tiles calculator. // 4. COLOURS siblings in the same collection (Noor White, Noor // Berry...) as clickable thumb + name cells. // 5. FINISHES available finishes as pill buttons. // 6. ACTIONS small ♡ + Request-a-quote row, centred. // 7. SUGGESTIONS the same row layout as the listing page, headed // "You might also like". // // useReveal is the existing IntersectionObserver hook — adds .visible // when an element scrolls into view. CSS in this file handles the // fade-up animation on `.reveal → .reveal.visible`. // ─── FinishIcon — small symbolic SVG per finish type ───────────────── // Each icon is a 20×20 inline SVG that hints at the finish texture so // the customer reads the FINISH section visually before reading text. // · Matt a quiet solid disc (no shine) // · Polished disc with a soft highlight // · Natural two soft waves (organic surface variation) // · Honed smooth rounded square (refined matt) // · Handglazed a single brush-stroke arc function FinishIcon({ name }) { const map = { Matt: ( ), Polished: ( ), Natural: ( ), Honed: ( ), Handglazed: ( ), }; return map[name] || ( // Generic fallback for unknown finish names ); } function Product({ product, navigate }) { const allTiles = useAllTiles(); const collectionsMeta = useCollectionsMeta(); const { favourites, toggleFavourite } = useAccount(); const faved = favourites?.includes(product.id); // Mobile detection — drives the sticky bottom CTA bar and the // beefier touch target sizes on size/finish pills. const isProductMobile = useIsMobile(760); // Sibling tiles = same product name AND same collection (used to // surface available size + finish options for THIS specific product). // Filtering on collection too matters because tile names can collide // across collections (e.g. "PEARL" exists in ALLOY, ARABESCATO and // AT. STONE — three different products that share a colour name). const siblings = useMemo(() => { if (!product?.name || !allTiles.length) return product ? [product] : []; return allTiles.filter(t => t.name === product.name && t.collection === product.collection); }, [allTiles, product?.name, product?.collection]); // Collection-prefix display (used in the hero "X collection" line). // Reads the first-class `collection` field from the new schema; // falls back to first-word of the name for legacy records. const collectionPrefix = useMemo( () => product.collection || (product.name || '').split(' ')[0] || '', [product.collection, product.name] ); // Colour variants in the same range. Matches on the first-class // `collection` field. Order + hidden are pulled from // collectionsMeta (admin-managed via the Collections admin page) — // tiles not in the order list fall to the end in catalogue order, // and tiles in the hidden list are dropped entirely. const colourSwatches = useMemo(() => { if (!product.collection || !allTiles.length) return []; const meta = collectionsMeta[product.collection] || {}; const hidden = new Set(Array.isArray(meta.hidden) ? meta.hidden : []); const order = Array.isArray(meta.order) ? meta.order : []; // 1) Gather all tiles in this collection except the current one // and any explicitly hidden by admin. const seen = new Set(); const pool = []; for (const t of allTiles) { if (t.id === product.id) continue; if (t.collection !== product.collection) continue; if (hidden.has(t.id)) continue; if (seen.has(t.name)) continue; // dedupe variants that share a name seen.add(t.name); pool.push(t); } // 2) Sort: ids in `order` come first in that order, then everything // else in original catalogue order. const indexOf = (id) => { const i = order.indexOf(id); return i < 0 ? Number.POSITIVE_INFINITY : i; }; pool.sort((a, b) => indexOf(a.id) - indexOf(b.id)); return pool.slice(0, 12); }, [allTiles, collectionsMeta, product.collection, product.id]); // Multi-value primary values for the active-size / active-finish state. // Reads sizes[0] / finishes[0] from the new schema; legacy single- // value `tile.size` / `tile.finish` work as the final fallback. const initialSize = firstOf(product, 'sizes') || product.size || ''; const initialFinish = firstOf(product, 'finishes') || product.finish || ''; const [activeSize, setActiveSize] = useState(initialSize); const [activeFinish, setActiveFinish] = useState(initialFinish); useEffect(() => { setActiveSize(firstOf(product, 'sizes') || product.size || ''); setActiveFinish(firstOf(product, 'finishes') || product.finish || ''); }, [product.id]); // Sizes — combine the multi-value `sizes[]` array on the current // tile (admin upgrade — the customer-visible source of truth) with // anything from sibling tiles, de-duplicated. Same pattern as the // finishList below: multi-value array first, sibling-derived fallback. const sizes = useMemo(() => { const out = new Set(); if (Array.isArray(product.sizes)) product.sizes.forEach(s => s && out.add(s)); siblings.forEach(t => { if (t.size) out.add(t.size); }); return Array.from(out); }, [product.sizes, siblings]); const finishes = useMemo(() => { const set = new Set(); for (const t of siblings) { if (Array.isArray(t.finishes)) t.finishes.forEach(f => set.add(f)); else if (t.finish) set.add(t.finish); } return Array.from(set); }, [siblings]); // ─── Size shape groups ─────────────────────────────────────── // Parse each size string ("30×60cm", "60x60cm", "Ø80cm" → first // 2 numbers) and group by aspect ratio. Each group renders as a // single visual box (square or rectangle of the right ratio) with // every dimension in that group listed beside it as a clickable // pill. Square sizes group together (1:1), every distinct rectangle // ratio gets its own group. const sizeGroups = useMemo(() => { const parse = (s) => { const m = String(s || '').match(/(\d+(?:\.\d+)?)\s*[×xX*]\s*(\d+(?:\.\d+)?)/); if (!m) return null; return { a: Number(m[1]), b: Number(m[2]) }; }; const map = new Map(); for (const s of sizes) { const p = parse(s); if (!p) continue; const long = Math.max(p.a, p.b); const short = Math.min(p.a, p.b); const ratio = long / short; // Bucket key — round to 2 dp so 1.99 and 2.01 collapse together. const key = ratio.toFixed(2); if (!map.has(key)) map.set(key, { ratio, long, short, items: [] }); map.get(key).items.push(s); } // Sort: 1:1 (square) first, then ratios ascending (gentlest rect → most extreme). const grouped = Array.from(map.values()).sort((a, b) => a.ratio - b.ratio); // Cap each box at TWO sizes — the client wants no more than two // dimensions per visual box. A ratio group with more than two // sizes splits into multiple boxes of the SAME shape, each holding // up to two. (e.g. four 1:1 squares → two square boxes.) const out = []; for (const g of grouped) { for (let i = 0; i < g.items.length; i += 2) { out.push({ ...g, items: g.items.slice(i, i + 2) }); } } return out; }, [sizes]); // Finish PILLS for the spec section. Prefer the admin-uploaded // `finishes` array on the current product. Fall back to the // sibling-derived list, and finally to the legacy single `finish`. const finishList = useMemo(() => { if (Array.isArray(product.finishes) && product.finishes.length) return product.finishes; if (finishes.length) return finishes; return product.finish ? [product.finish] : []; }, [product.finishes, product.finish, finishes]); // Calculator — parse "30×60cm" → 0.18 m² per tile, etc. const tileArea = useMemo(() => { const m = (activeSize || '').match(/(\d+)\D+(\d+)/); if (!m) return 0.18; return (Number(m[1]) / 100) * (Number(m[2]) / 100); }, [activeSize]); const [sqm, setSqm] = useState(10); const tilesNeeded = Math.ceil(sqm / Math.max(tileArea, 0.01)); const cartons = Math.ceil(sqm / 1.2); // Suggestions — every other tile that shares this tile's styles, // colours, or rooms, ranked by best match first. No upper cap. // // Ranking pass (each tile gets the FIRST bucket it qualifies for): // 1. shares BOTH a style and a colour (closest match) // 2. shares a colour (same palette family) // 3. shares a style (same look — marble, wood…) // 4. shares a room (same context) // 5. anything else (broad relevance) // Each tile appears only ONCE, in its highest-priority bucket. const suggestions = useMemo(() => { if (!allTiles.length) return []; const others = allTiles.filter(t => t.id !== product.id); const seen = new Set(); const buckets = [[], [], [], [], []]; const arr = (v) => Array.isArray(v) ? v : (v ? [v] : []); const productColours = new Set(arr(product.colours).concat(arr(product.colour)).filter(Boolean)); const productStyles = new Set(arr(product.styles ).concat(arr(product.style )).filter(Boolean)); const productRooms = new Set(arr(product.rooms ).concat(arr(product.room )).filter(Boolean)); for (const t of others) { if (seen.has(t.name)) continue; const tColours = new Set(arr(t.colours).concat(arr(t.colour)).filter(Boolean)); const tStyles = new Set(arr(t.styles ).concat(arr(t.style )).filter(Boolean)); const tRooms = new Set(arr(t.rooms ).concat(arr(t.room )).filter(Boolean)); const colourMatch = [...productColours].some(c => tColours.has(c)); const styleMatch = [...productStyles ].some(s => tStyles.has(s)); const roomMatch = [...productRooms ].some(r => tRooms.has(r)); let bucket; if (styleMatch && colourMatch) bucket = 0; else if (colourMatch) bucket = 1; else if (styleMatch) bucket = 2; else if (roomMatch) bucket = 3; else bucket = 4; buckets[bucket].push(t); seen.add(t.name); } return buckets.flat(); }, [allTiles, product.id, product.name, product.styles, product.colours, product.rooms]); // Suggestions pagination — start with 6, "Show more" reveals the // next 6 each time the user clicks. State resets when the customer // navigates to a different tile. const SUGGESTIONS_PAGE_SIZE = 6; const [suggestionsCount, setSuggestionsCount] = useState(SUGGESTIONS_PAGE_SIZE); useEffect(() => { setSuggestionsCount(SUGGESTIONS_PAGE_SIZE); }, [product.id]); const visibleSuggestions = suggestions.slice(0, suggestionsCount); const hasMoreSuggestions = suggestionsCount < suggestions.length; const styleLabel = styleLabelOf(product) || product.collection || ''; // Combined images list (sights + gallery) — used as a fallback in a // few places. New schema reads sightImages[] + galleryImages[]; // legacy tiles still surface via the imagesOf() helper. const images = imagesOf(product); // ─── HERO SIGHT IMAGES (cycling, like the home page) ─────────── // Reads tile.sightImages from the new schema; falls back through // legacy fields so any not-yet-migrated record still renders. const sightImages = useMemo(() => { if (Array.isArray(product.sightImages) && product.sightImages.length) return product.sightImages; if (Array.isArray(product.images) && product.images.length) return [product.images[0]]; return product.img ? [product.img] : []; }, [product.sightImages, product.images, product.img]); // Gallery in the "In sight" section reads from galleryImages[]; // legacy extraImages and images.slice(1) are honoured as fallbacks. const galleryImages = useMemo(() => { if (Array.isArray(product.galleryImages) && product.galleryImages.length) return product.galleryImages; if (Array.isArray(product.extraImages) && product.extraImages.length) return product.extraImages; return images.slice(1); }, [product.galleryImages, product.extraImages, images]); const [activeHero, setActiveHero] = useState(0); const [heroPaused, setHeroPaused] = useState(false); // Reset to the first sight whenever the product changes. useEffect(() => { setActiveHero(0); }, [product.id]); // Auto-advance every 6.5s (matches home page rhythm). Pauses on hover. useEffect(() => { if (heroPaused || sightImages.length <= 1) return; const id = setInterval(() => { setActiveHero(s => (s + 1) % sightImages.length); }, 6500); return () => clearInterval(id); }, [heroPaused, sightImages.length]); const prevHero = () => setActiveHero(s => (s - 1 + sightImages.length) % sightImages.length); const nextHero = () => setActiveHero(s => (s + 1) % sightImages.length); const hasMultipleSights = sightImages.length > 1; // Tile aspect for the size visualisation. Always longer-side ÷ shorter- // side, so 30×60 reads as a wide rectangle (aspect 2), 60×60 a square // (aspect 1), 20×20 a small square. The visualisation box is set to a // fixed max-width and uses CSS aspect-ratio to derive its height. const tileAspect = useMemo(() => { const m = (activeSize || '').match(/(\d+)\D+(\d+)/); if (!m) return 1; const a = Number(m[1]); const b = Number(m[2]); return Math.max(a, b) / Math.min(a, b); }, [activeSize]); // No scroll-triggered fade-ins — sections render visible. The earlier // .reveal/.visible dance was hiding async-loaded sections (the // suggestions strip especially) when the IntersectionObserver had // already finished observing what was in the DOM at first paint. return (
{/* ── 1. HERO — full-viewport ambience + name + scroll cue ─── Multiple sight images crossfade automatically (6.5s) and also flip on click of the left/right nav zones (45% wide each, 10% safe gap in the middle). Cursor.jsx detects [data-hero-nav] and swaps the cursor to a big chevron — identical to the home page. */}
{/* Stacked sight images. Only the active one has opacity:1; the rest fade. Single-sight legacy tiles render exactly one here and skip the nav zones entirely. */}
setHeroPaused(true)} onMouseLeave={() => setHeroPaused(false)} aria-hidden > {sightImages.map((src, i) => ( {i { e.target.style.display = 'none'; }} /> ))}
{/* Hero NAV ZONES — only when more than one sight image exists. 45% wide left/right click areas with a 10% safe gap in the middle, just like the home page. data-hero-nav triggers the chevron cursor via Cursor.jsx. */} {hasMultipleSights && ( <>
)}
{styleLabel &&

{styleLabel}

}

{product.name}

{collectionPrefix && (

{collectionPrefix} collection

)} {product.description && (

{product.description}

)}
Scroll
{/* ── 2. DETAIL — up to 5 images side-by-side, centred. The sight images now cycle in the hero, so the gallery shows ONLY the admin-uploaded additional shots (extraImages), never the sight images. Section hides if there are no additional images. */} {galleryImages.length > 0 && (

Detail

In sight

{galleryImages.map((src, i) => (
{ e.target.style.display = 'none'; }} />
))}
)} {/* ── 3. SPECIFICATION — two halves split by a centre line. Content anchors at the centre and grows outward toward the screen edges, using the wide canvas symmetrically. · LEFT half: SIZE — dropdown + visual side-by-side · RIGHT half: FINISH — icon + name pills, max 5 Calculator moved to the ACTIONS section below. */}

Size & finish

{/* LEFT half — Size. Anchored at the centre line on its right edge (kisses the divider); content extends leftward. One visual box per shape group; dimensions live INSIDE the box as plain clickable text. Visual order (left → right): widest rectangle first, square last (closest to the centre divider). */}

Size

{sizeGroups.length === 0 ? (

{activeSize || '—'}

) : (
{sizeGroups.map((g, gi) => (
    {g.items.map(s => (
    • ))}
))}
)}
{/* RIGHT half — Finish, anchored at the centre line on the left edge of the half, content extends rightward. */}

Finish

{finishList.slice(0, 5).map(f => ( ))}
{/* ── 4. COLOURS — every swatch for the current tile first, then siblings (other tiles in the same collection). Strict rule: cells NEVER show a sight image. They use admin-uploaded colour swatches, falling back to gallery / extra images. The section hides only if no usable image exists for current or any sibling. */} {(() => { const currentSwatches = colourImagesOf(product); const usableSiblings = colourSwatches .map(c => ({ tile: c, img: colourImageOf(c) })) .filter(s => s.img); if (currentSwatches.length === 0 && usableSiblings.length === 0) return null; return (

The colours

{currentSwatches.map((swatch, i) => { // Every swatch on a single-tile multi-colour product // (e.g. Era's six colours, Alabastri's five) belongs // to the same product record — none is more "current" // than another, so they all render identically. The // visible label is the admin-typed swatch name; we fall // back to " · Variant N" only when no name // was supplied. const displayName = swatch.name || (i === 0 ? product.name : `${product.name} · Variant ${i + 1}`); return (
{displayName}

{displayName}

); })} {usableSiblings.map(({ tile: c, img }) => ( ))}
); })()} {/* ── 5. ACTIONS — area calculator (moved here from the spec section) + ♡ + Request a quote, all in one block. */}

How much do you need?

setSqm(Math.max(1, Number(e.target.value) || 1))} aria-label="Area in square metres" /> m²

≈ {tilesNeeded.toLocaleString()} tiles  ·  {cartons} carton{cartons === 1 ? '' : 's'}

{/* ── 7. SUGGESTIONS — single prominent title, then row layout identical to the listing page (same RowCard + same tile-grid.view-row class chain). Paginated: starts at 6 tiles, "Show more" reveals the next batch each click. ─── */} {suggestions.length > 0 && (

You might also like

{visibleSuggestions.map((s, i) => ( ))}
{hasMoreSuggestions && (

Showing {visibleSuggestions.length} of {suggestions.length}

)}
)} {/* ── Sticky mobile CTA bar ───────────────────────────────── Always-visible action bar at the bottom of the viewport on mobile — the canonical e-commerce pattern. Favourite toggle on the left, primary "Request a quote" button on the right. Adds bottom padding to the page below so content isn't hidden behind the bar. */} {isProductMobile && ( <>
)}
); } Object.assign(window, { // New three-tier journey CollectionsHub, CollectionsAxis, CollectionDetail, // Legacy aliases — anything still saying CollectionsList gets the Hub CollectionsList, // Shared Product, TileCard, // Listing-page card variants + view switcher (exposed for debugging // / future reuse from other surfaces, e.g. favourites page). RowCard, GridCard, CompactCard, ViewSwitcher, // Single source of truth for the browse axes — read by Nav so the // mega-menu and the sidebar stay in sync. Nav imports these at render. AXES, // Exposed for Phone.jsx — phone components reuse the same filter // logic without duplicating it. SIDEBAR_SECTIONS, applySidebarFn: applySidebar, filterTilesFn: filterTiles, tileHasFn: tileHas, resolveFilter, useAllTilesHook: useAllTiles, useCollectionsMetaHook: useCollectionsMeta, });