// Shared components: nav, logo, garments, product card, footer, now-playing const { useState, useEffect, useRef, useMemo, useCallback } = React; // ───────────────────────── icons ───────────────────────── const Icon = { search: (p) => , bag: (p) => , heart: (p) => , heartFill:(p)=> , user: (p) => , close: (p) => , arrow: (p) => , plus: (p) => , minus: (p) => , star: (p) => , yt: (p) => , ig: (p) => , sc: (p) => , tt: (p) => , spotify:(p) => , }; // ───────────────────────── garment SVGs ───────────────────────── // Stylized, monochromatic apparel silhouettes. Designed to read as // editorial product photography placeholders. User can drop in real // images via . function Garment({ kind, color = 'currentColor', graphic = true, back = false }) { // viewBox 0 0 200 240 const common = { width: '100%', height: '100%', viewBox: '0 0 200 240', preserveAspectRatio: 'xMidYMid meet' }; const stroke = 'currentColor'; const fill = color; const Label = () => ( PVL ); const BackGraphic = () => ( ); if (kind === 'tee' || kind === 'tee-crop') { const bottom = kind === 'tee-crop' ? 175 : 220; return ( ); } if (kind === 'longsleeve') { return ( ); } if (kind === 'hoodie' || kind === 'hoodie-zip' || kind === 'pullover') { return ( ); } if (kind === 'tote') { return ( ); } if (kind === 'cap5') { return ( ); } if (kind === 'cap-trucker') { return ( ); } if (kind === 'beanie') { return ( ); } if (kind === 'tank') { return ( ); } if (kind === 'pullover') { return ( ); } if (kind === 'carrier') { return ( ); } return null; } // ───────────────────────── product card ───────────────────────── function ProductCard({ p, onOpen, wish, onWish }) { const [cwIdx, setCwIdx] = useState(0); const isWished = wish.has(p.id); const card = useRef(null); // Resolve the active colorway — prefer printed, fall back to embroidered const colorways = p.printed?.length ? p.printed : (p.embroidered || []); const cw = colorways[cwIdx] || colorways[0]; const frontImg = cw?.images?.[0]; const backImg = frontImg; // designs are one-sided — don't swap to blank back on hover const bg = cw?.hex || '#e8dfc8'; return (

onCursor('hover')} onMouseLeave={() => onCursor('default')} onClick={() => { onCursor('default'); onOpen(p); }}>

{frontImg ? ( <>

) : ( <>

)}

{p.featured &&

Volume 02

}

{(p.colors || []).slice(0, 5).map((c, i) => ( { e.stopPropagation(); setCwIdx(i); }}/> ))}

{p.name}

{p.type}

€{p.price}

); } // tint a hex color toward warm light function tint(hex, amt) { return `color-mix(in oklab, ${hex} ${100 - amt*100}%, var(--accent-warm) ${amt*100}%)`; } // ───────────────────────── nav ───────────────────────── function Nav({ route, setRoute, cartCount, wishCount, onOpenCart, onOpenSearch, onOpenWish, openCollection }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); const goHome = () => setRoute({ name: 'home' }); const goSection = (id) => { if (route.name !== 'home') setRoute({ name:'home' }); setTimeout(() => scrollToId(id), 50); }; return (

setRoute({name:'home'})} onMouseEnter={()=>onCursor('hover')} onMouseLeave={()=>onCursor('default')}>

Peripheral

); } function scrollToId(id) { const el = document.getElementById(id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' }); } // ───────────────────────── footer ───────────────────────── function Footer({ setRoute }) { const [email, setEmail] = useState(''); const [submitted, setSubmitted] = useState(false); return ( ); } // ───────────────────────── now playing widget ───────────────────────── function NowPlaying() { const tracks = [ { side: 'A1', title: 'Yotto — Walls of Jericho (Mix 02)' }, { side: 'A2', title: 'Ben Böhmer — Lights Out (live edit)' }, { side: 'B1', title: 'Tinlicker — Because You Move Me' }, { side: 'B2', title: 'Marsh — Endless (Anjuna Deep)' }, ]; const [i, setI] = useState(0); useEffect(() => { const id = setInterval(() => setI(v => (v + 1) % tracks.length), 8000); return () => clearInterval(id); }, []); return (

Now Spinning · Side {tracks[i].side}

{tracks[i].title}

); } // ───────────────────────── custom cursor helpers ───────────────────────── function onCursor(mode) { const c = document.getElementById('cursor'); if (!c) return; c.classList.remove('hover','text'); if (mode && mode !== 'default') c.classList.add(mode); } function useCursor() { useEffect(() => { const c = document.getElementById('cursor'); if (!c) return; if (!c.querySelector('.vinyl')) { const inner = document.createElement('div'); inner.className = 'vinyl'; c.appendChild(inner); } let x = window.innerWidth / 2, y = window.innerHeight / 2; let tx = x, ty = y; let needsSnap = false; // When the window loses focus (e.g. window.open opens a new tab), mark for snap. // On the next real mousemove we teleport the lerp source to avoid a catch-up zoop. const onBlur = () => { needsSnap = true; }; const onMove = (e) => { tx = e.clientX; ty = e.clientY; if (needsSnap) { x = tx; y = ty; needsSnap = false; } }; window.addEventListener('mousemove', onMove); window.addEventListener('blur', onBlur); let raf; const tick = () => { x += (tx - x) * 0.28; y += (ty - y) * 0.28; c.style.left = x + 'px'; c.style.top = y + 'px'; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => { window.removeEventListener('mousemove', onMove); window.removeEventListener('blur', onBlur); cancelAnimationFrame(raf); }; }, []); } // expose Object.assign(window, { Icon, Garment, ProductCard, Nav, Footer, NowPlaying, onCursor, useCursor, scrollToId, tint });