// APEX components — header, hero, marquee, product rail, cart drawer const { useState, useEffect, useRef, useMemo } = React; /* ---------- ICONS ---------- */ const Icon = { Search: ({size=16}) => ( ), Bag: ({size=16}) => ( ), Account: ({size=16}) => ( ), Arrow: ({size=16, dir='right'}) => { const r = dir === 'left' ? 180 : dir === 'up' ? -90 : dir === 'down' ? 90 : 0; return ( ); }, Close: ({size=16}) => ( ), Plus: ({size=12}) => ( ), Minus: ({size=12}) => ( ), Star: ({size=10}) => ( ), }; /* ---------- ANNOUNCEMENT BAR ---------- */ const AnnounceBar = () => { const items = [ 'DROP 04 — DARK MATTER LIVE', 'COMPLIMENTARY EXPRESS ON ORDERS > $250', 'NEXT DROP: 06.14.26 — 21:00 GMT', 'MEMBERS UNLOCK +15% — JOIN APEX//ACCESS', ]; return (
{[...Array(2)].map((_,k)=>( {items.map((it,i)=>( {it} ))} ))}
); }; /* ---------- HEADER ---------- */ const Header = ({ cartCount, onOpenCart, onSearch, palette }) => { const [scrolled, setScrolled] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const isMobile = window.useIsMobile(); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll); return () => window.removeEventListener('scroll', onScroll); }, []); const navItems = [ { label: 'SHOP', href: 'shop.html' }, { label: 'DROP 04', href: 'index.html' }, { label: 'LOOKBOOK', href: 'lookbook.html' }, { label: 'JOURNAL', href: 'journal.html' }, { label: 'STORES', href: '#' }, { label: 'ACCESS', href: 'access.html' }, ]; return (
{isMobile ? ( <>
APEX
{menuOpen && ( )} ) : (
APEX BRANDS // EST 19
)}
); }; /* ---------- HERO PRODUCT VISUAL ---------- */ const HeroProductVisual = ({ palette, accent }) => { return (
OBJ-04 VOIDSHELL
SPEC // 01
NYLON RIPSTOP
440 GSM
SPEC // 02
HAND ASSEMBLED
OSAKA, JP
{[ {top:24, left:24, brT:1, brL:1}, {top:24, right:24, brT:1, brR:1}, {bottom:24, left:24, brB:1, brL:1}, {bottom:24, right:24, brB:1, brR:1}, ].map((p,i)=>(
))}
); }; /* ---------- HERO ---------- */ const Hero = ({ accent, onShop }) => { const [time, setTime] = useState(new Date()); const isMobile = window.useIsMobile(); useEffect(() => { const t = setInterval(() => setTime(new Date()), 1000); return () => clearInterval(t); }, []); const tStr = time.toUTCString().split(' ').slice(4,5)[0]?.slice(0,8) || '00:00:00'; const [parRef, parPos] = window.useMouseParallax(20); const spotRef = useRef(null); useEffect(() => { if (isMobile) return; const el = parRef.current; if (!el || !spotRef.current) return; const onMove = (e) => { const r = el.getBoundingClientRect(); spotRef.current.style.left = (e.clientX - r.left) + 'px'; spotRef.current.style.top = (e.clientY - r.top) + 'px'; spotRef.current.style.opacity = 1; }; const onLeave = () => { if (spotRef.current) spotRef.current.style.opacity = 0; }; el.addEventListener('mousemove', onMove); el.addEventListener('mouseleave', onLeave); return () => { el.removeEventListener('mousemove', onMove); el.removeEventListener('mouseleave', onLeave); }; }, [isMobile]); const pad = isMobile ? '32px 20px 28px' : '56px 56px 40px 56px'; return (
LIVE // {tStr} UTC
CHAPTER 04 / 12
↓ NOW SHOWING
▶ OBJ-04 // DARK MATTER

A 14-piece capsule built around weight, weather and the architecture of the body. Hand-assembled in Osaka. Numbered. Limited.

LOOKBOOK
PIECES
EDITION
/
PRICE FROM
$
{!isMobile && (
)}
); }; /* ---------- MARQUEE STRIP ---------- */ const Marquee = ({ accent }) => (
{[...Array(2)].map((_, k) => ( {['DARK MATTER','OBJ-04','APEX//ACCESS','OSAKA · LONDON · NYC','HAND ASSEMBLED','LIMITED 240','DARK MATTER','OBJ-04'].map((w,i)=>( {i % 3 === 1 ? {w} : w} ))} ))}
); /* ---------- PRODUCT CARD ---------- */ const ProductMockup = ({ product, accent, hover }) => { const isOuter = product.category === 'Outerwear'; const isFoot = product.category === 'Footwear'; const isBottom = product.category === 'Bottoms'; const isTee = product.category === 'Essentials'; const isHood = product.name.includes('Hood'); const isCap = product.category === 'Accessories'; let clip = 'polygon(22% 6%, 78% 6%, 92% 22%, 100% 38%, 92% 100%, 8% 100%, 0% 38%, 8% 22%)'; if (isFoot) clip = 'polygon(0% 60%, 18% 50%, 36% 38%, 60% 32%, 100% 30%, 100% 100%, 0% 100%)'; if (isBottom) clip = 'polygon(15% 0%, 85% 0%, 92% 100%, 60% 100%, 50% 30%, 40% 100%, 8% 100%)'; if (isTee) clip = 'polygon(20% 8%, 36% 4%, 64% 4%, 80% 8%, 95% 20%, 88% 28%, 78% 22%, 78% 100%, 22% 100%, 22% 22%, 12% 28%, 5% 20%)'; if (isHood) clip = 'polygon(28% 0%, 72% 0%, 86% 14%, 96% 28%, 100% 100%, 0% 100%, 4% 28%, 14% 14%)'; if (isCap) clip = 'polygon(15% 50%, 25% 30%, 50% 22%, 75% 30%, 85% 50%, 95% 60%, 95% 70%, 5% 70%, 5% 60%)'; return (
{product.code}
{!isCap && !isFoot && (
)}
{String(parseInt(product.id.split('-')[1])).padStart(2,'0')} / 08
); }; const ProductCard = ({ product, index, accent, onAdd, onSelect, big }) => { const [hover, setHover] = useState(false); const [size, setSize] = useState(null); const isMobile = window.useIsMobile(); const tiltRef = (!isMobile && window.useTilt) ? window.useTilt(6) : useRef(null); const cardW = isMobile ? 260 : (big ? 480 : 360); const cardH = isMobile ? 380 : (big ? 640 : 540); return (
setHover(true)} onMouseLeave={()=>setHover(false)} >
{product.tag && ( {product.tag === 'HERO' && } {product.tag} )}
onSelect(product)}>
QUICK ADD — SIZE
{product.sizes.map(s => { const sold = product.soldOut.includes(s); const active = size === s; return ( ); })}
{product.code} · {product.category.toUpperCase()} {product.fabric.split(' ')[0].toUpperCase()}
{product.name}
${product.price}.00 USD
{product.sizes.slice(0,5).map((s,i)=>( {s} )).reduce((acc,x,i)=>acc.concat(i ? [·, x] : [x]), [])}
); }; /* ---------- PRODUCT RAIL ---------- */ const ProductRail = ({ accent, onAdd, onSelect, products }) => { const railRef = useRef(null); const [progress, setProgress] = useState(0); const [activeCat, setActiveCat] = useState('all'); const isMobile = window.useIsMobile(); const pad = isMobile ? 16 : 56; const endCardW = isMobile ? 240 : 360; const endCardH = isMobile ? 380 : 540; const filtered = useMemo(() => { if (activeCat === 'all') return products; return products.filter(p => p.category === activeCat); }, [activeCat, products]); const onScroll = () => { if (!railRef.current) return; const el = railRef.current; const max = el.scrollWidth - el.clientWidth; setProgress(max > 0 ? el.scrollLeft / max : 0); }; useEffect(() => { const el = railRef.current; if (!el) return; el.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => el.removeEventListener('scroll', onScroll); }, [filtered]); const scrollBy = (dir) => { if (!railRef.current) return; railRef.current.scrollBy({ left: dir * (isMobile ? 280 : 380), behavior: 'smooth' }); }; return (
INDEX // 04 — DARK MATTER

THE DROP

{window.APEX_CATEGORIES.map(c => ( ))} {!isMobile && ( <>
SHOWING {String(filtered.length).padStart(2,'0')} / {String(products.length).padStart(2,'0')} →
)}
{filtered.map((p, i) => ( ))}
INDEX END
NEXT
DROP
06.14.26 // 21:00 GMT
OBJ-05 // ASH KINGDOM
SET REMINDER
SCROLL
{String(Math.round(progress*100)).padStart(2,'0')}%
); }; /* ---------- EDITORIAL SPLIT ---------- */ const Editorial = ({ accent }) => { const isMobile = window.useIsMobile(); const pad = isMobile ? 20 : 56; return (
FILM // 01:24
▶
WATCH
THE FILM
DIR. K. NAKAMURAOSAKA · 2026
JOURNAL // 014

THE WEIGHT OF
BLACK GARMENTS.

Every Apex piece begins with a single question: how heavy can a garment be before it stops being clothing? Drop 04 lives at that edge — 440gsm shells, oxidized hardware, hand-stitched panels you can feel through your fingertips.

READ ESSAY 8 MIN READ
); }; /* ---------- ACCESS / NEWSLETTER ---------- */ const Access = ({ accent }) => { const [email, setEmail] = useState(''); const [done, setDone] = useState(false); const isMobile = window.useIsMobile(); const pad = isMobile ? 20 : 56; return (
APEX // ACCESS

INSIDE
THE GATE.

Members get drops 24 hours early, +15% off every order, and access to the OBJ-Reserve archive — past pieces brought back, exactly once.

{!done ? (
{e.preventDefault(); if(email) setDone(true);}} style={{display:'flex', flexDirection:'column', gap:14}}>
setEmail(e.target.value)} placeholder="you@domain.io" style={{flex:1, background:'transparent', border:0, color:'var(--ink)', fontSize:18, fontFamily:'var(--body)', outline:'none'}} />
BY SUBMITTING YOU AGREE TO THE APEX TERMS & PRIVACY DOCTRINE.
) : (
REQUEST RECEIVED
YOU'RE ON THE LIST.
CONFIRMATION SENT TO {email.toUpperCase()}
)}
); }; /* ---------- FOOTER ---------- */ const Footer = ({ accent }) => { const isMobile = window.useIsMobile(); const pad = isMobile ? 20 : 56; return (
APEX
BRANDS // EST 19 // OSAKA · LDN · NYC
{[ ['SHOP', [['New','shop.html'],['Drop 04','index.html'],['Outerwear','shop.html'],['Knitwear','shop.html'],['Footwear','shop.html'],['Archive','shop.html']]], ['ABOUT', [['Brand','#'],['Workshop','#'],['Materials','#'],['Press','#']]], ['SUPPORT', [['Sizing','#'],['Care','#'],['Repair','#'],['Returns','#'],['FAQ','#']]], ['CONNECT', [['Instagram','#'],['Telegram','#'],['Substack','#'],['Discord','#']]], ].map(([title, items]) => (
{title}
{items.map(([label, href]) => ( {label} ))}
))}
{isMobile ? (
© 2026 APEX BRANDS
) : (
© 2026 APEX BRANDS · ALL RIGHTS RESERVED PrivacyTermsCookiesAccessibility USD · ENGLISH ↗
)}
); }; /* ---------- CART DRAWER ---------- */ const CartDrawer = ({ open, items, onClose, onQty, onRemove, accent }) => { if (!open) return null; const subtotal = items.reduce((a,i)=>a + i.product.price * i.qty, 0); return (
); }; /* ---------- TOAST ---------- */ const Toast = ({ msg, accent }) => msg ? (
{msg}
) : null; /* ---------- PRODUCT MODAL (focus view) ---------- */ const ProductFocus = ({ product, onClose, onAdd, accent }) => { const [size, setSize] = useState(null); const isMobile = window.useIsMobile(); if (!product) return null; return (
{!isMobile && (
{product.code}
)}
{product.category.toUpperCase()}
{isMobile && (
)}

{product.name}

{product.fabric.toUpperCase()} · HAND ASSEMBLED · LIMITED 240

{product.desc}

{[ ['WEIGHT', '440 GSM'], ['ORIGIN', 'OSAKA, JP'], ['LEAD', '14 DAYS'], ['EDITION', '/240'], ].map(([l,v])=>(
{l}
{v}
))}
SELECT SIZE
{product.sizes.map(s => { const sold = product.soldOut.includes(s); return ( ); })}
PRICE ${product.price}.00
); }; Object.assign(window, { Icon, AnnounceBar, Header, Hero, Marquee, ProductRail, Editorial, Access, Footer, CartDrawer, Toast, ProductFocus, ProductCard, ProductMockup, });