// works-archive.jsx — Full-screen works archive page
const { useState, useEffect, useRef, useCallback } = React;
// Single source of truth — the same canonical list as the Selected Works funnel,
// defined in works-vitrin.jsx (loaded before this file) and shared via window.
const ALL_WORKS = window.FEATURED_WORKS;
// ── Archive-only ordering ───────────────────────────────────────────────────
// The archive presents a curated order independent of the canonical upload order
// used by the homepage. Two goals:
// • DESIGN filter reads top→bottom: Pepsi, Paradiso, Işık, İtalyan.
// • ALL tab surfaces Pepsi × Tokyo and Paradiso Palms inside the first ten rows.
// Both are satisfied by one reordered list (the DESIGN filter preserves this order).
const ARCHIVE_WORKS = (() => {
const byId = (id) => ALL_WORKS.find((w) => w.id === id);
// 32 = Pepsi × Tokyo, 29 = Paradiso, 31 = Işık, 30 = İtalyan
// Pinned to the very bottom (user request): 28 = SGIA New Terminal,
// 26 = Haf Stone, 24 = Çankaya Healthy Streets.
const BOTTOM = [28, 26];
const pulled = [32, 29, 31, 30, ...BOTTOM];
const core = ALL_WORKS.filter((w) => !pulled.includes(w.id));
const out = [...core];
out.splice(4, 0, byId(32)); // Pepsi → into the first ten
out.splice(8, 0, byId(29)); // Paradiso → into the first ten
const mi = out.findIndex((w) => w && w.id === 19); // 19 = Maurer
out.splice(mi, 0, byId(31), byId(30)); // Işık, then İtalyan → directly above Maurer
out.push(...BOTTOM.map(byId)); // pinned to the very bottom
return out.filter(Boolean);
})();
// Explicit category taxonomy — single deliberate order, independent of which
// categories currently have works assigned (so DESIGN shows even when empty).
const TAXONOMY = ['PRODUCTION', 'ANIMATION', 'POST-PRODUCTION', 'DESIGN'];
const CATS = ['ALL', ...TAXONOMY];
const CARD_COLORS = {
'PRODUCTION': '#110400',
'POST-PRODUCTION': '#0f0600',
'ANIMATION': '#00050f',
'DESIGN': '#0d0d00',
'CAMPAIGN & BRAND CONTENT': '#0d0010',
'AI FILMMAKING': '#001008',
'VISUAL DESIGN / ART DIRECTION': '#0d0d00',
};
function WorksArchive({ setView }) {
const [activeCat, setActiveCat] = useState('ALL');
const [filterKey, setFilterKey] = useState(0); // bump to retrigger entrance + rebuild focus refs
const canHover = typeof window !== 'undefined' && window.matchMedia('(hover: hover)').matches;
// Archive projects open over the Work page → Back returns here.
const openWork = (w) => window.RBRouter.openProject(w, { base: 'works' });
const rowsRef = useRef([]); // live row elements, in render order
const focusRef = useRef([]); // eased focus value per row (0→1)
const hoverRef = useRef([]); // eased hover amount per row (0→1)
const hovRef = useRef(null); // currently-hovered row element (read inside RAF)
const filtered = activeCat === 'ALL'
? ARCHIVE_WORKS
: ARCHIVE_WORKS.filter(w => w.cat === activeCat);
// Publish the current (filtered) list so the route-driven overlay can offer
// prev/next navigation scoped to whatever the visitor is browsing.
useEffect(() => { window.__rbArchiveList = filtered; }, [filtered]);
const handleCat = (cat) => {
if (cat === activeCat) return;
rowsRef.current = [];
focusRef.current = [];
hoverRef.current = [];
hovRef.current = null;
setActiveCat(cat);
setFilterKey(k => k + 1);
};
// Scroll / cursor focus. The row nearest the viewport centre eases up to full
// Hover-only. No scroll-position movement. Every row sits still; its cover
// rests at 50%. The row under the cursor physically EXPANDS — it eases taller
// by adding vertical padding, pushing the rows above/below away (real reflow,
// so borders stay perfectly aligned and nothing overlaps). Grows to ~1.8× its
// resting height. Cover reveals further left-to-right and up to 70%. Eased per
// row with a lerp so the grow/shrink stays buttery.
useEffect(() => {
let raf;
const hov = hoverRef.current;
// ── Mobile: there's no cursor, so drive the focus from scroll position.
// The row whose centre sits nearest the viewport centre eases up to full
// size while rows further away shrink slightly — the touch analogue of the
// desktop hover-expand, so the list feels alive as you scroll instead of
// sitting flat. ──
if (window.matchMedia('(max-width: 760px)').matches) {
const mloop = () => {
const rows = rowsRef.current;
const vh = window.innerHeight || 1;
const mid = vh / 2;
// Whichever row is physically LAST in the list — found by DOM position, so
// it always tracks the real last project even after some are removed. At
// the end of the page that row can never reach the viewport centre, so we
// ease it to full presence as the scroll bottoms out.
let lastIdx = -1;
for (let i = rows.length - 1; i >= 0; i--) { if (rows[i]) { lastIdx = i; break; } }
const maxScroll = document.documentElement.scrollHeight - vh;
const endZone = vh * 0.6;
const bottomBlend = maxScroll <= 0 ? 1
: Math.max(0, Math.min(1, (window.scrollY - (maxScroll - endZone)) / endZone));
for (let i = 0; i < rows.length; i++) {
const el = rows[i];
if (!el) continue;
const r = el.getBoundingClientRect();
// Continuous focus: a smooth bump that peaks (1) exactly when the row's
// centre crosses the viewport centre and fades over ~half a viewport on
// either side. Because growth is a proportional function of scroll
// position — not a single "nearest" pick that snaps between rows — every
// row rises and falls smoothly as it passes and nothing is ever skipped,
// even on a fast flick.
let hovTarget = 0;
if (r.bottom > 0 && r.top < vh) {
const off = (r.top + r.height / 2) - mid;
const near = Math.max(0, 1 - Math.abs(off) / (vh * 0.55));
hovTarget = near * near * (3 - 2 * near);
}
// Bottom of the list: bring the true last row up to full presence.
if (i === lastIdx) hovTarget = Math.max(hovTarget, bottomBlend);
const ch = (hov[i] == null ? 0 : hov[i]) + (hovTarget - (hov[i] || 0)) * 0.1;
hov[i] = ch;
if (ch < 0.001) {
if (el.__grown) { el.__grown = false; el.style.paddingTop = ''; el.style.paddingBottom = ''; }
} else {
el.__grown = true;
const grow = (80 * ch).toFixed(2) + 'px';
el.style.paddingTop = `calc(var(--vpad) + ${grow})`;
el.style.paddingBottom = `calc(var(--vpad) + ${grow})`;
}
const thumb = el.__thumb || (el.__thumb = el.querySelector('.arch-thumb'));
if (thumb) {
thumb.style.opacity = (0.3 + 0.4 * ch).toFixed(4);
thumb.style.width = (60 + 18 * ch).toFixed(2) + '%';
}
const wantFocus = ch > 0.5;
if (wantFocus !== el.__foc) { el.__foc = wantFocus; el.classList.toggle('is-focus', wantFocus); }
}
raf = requestAnimationFrame(mloop);
};
raf = requestAnimationFrame(mloop);
return () => cancelAnimationFrame(raf);
}
const loop = () => {
const rows = rowsRef.current;
for (let i = 0; i < rows.length; i++) {
const el = rows[i];
if (!el) continue;
const hovTarget = hovRef.current === el ? 1 : 0;
const ch = (hov[i] == null ? 0 : hov[i]) + (hovTarget - (hov[i] || 0)) * 0.12;
hov[i] = ch;
if (ch < 0.001) {
if (el.__grown) { el.__grown = false; el.style.paddingTop = ''; el.style.paddingBottom = ''; }
} else {
el.__grown = true;
const grow = (80 * ch).toFixed(2) + 'px'; // up to +160px total → ~1.8× resting height
el.style.paddingTop = `calc(var(--vpad) + ${grow})`;
el.style.paddingBottom = `calc(var(--vpad) + ${grow})`;
}
const thumb = el.__thumb || (el.__thumb = el.querySelector('.arch-thumb'));
if (thumb) {
thumb.style.opacity = (0.3 + 0.4 * ch).toFixed(4); // 30% at rest → 70% hovered
thumb.style.width = (60 + 18 * ch).toFixed(2) + '%'; // reveals further left-to-right
}
const wantFocus = ch > 0.5;
if (wantFocus !== el.__foc) { el.__foc = wantFocus; el.classList.toggle('is-focus', wantFocus); }
}
raf = requestAnimationFrame(loop);
};
raf = requestAnimationFrame(loop);
return () => cancelAnimationFrame(raf);
}, [filterKey]);
return (
{ ref.current = el; if (innerRef) innerRef(el); }}
onClick={onClick}
onMouseEnter={() => onEnter && onEnter(ref.current)}
onMouseLeave={onLeave}
className="arch-row spring-in"
style={{ '--spring-delay': `${index * 0.045}s`, cursor: 'none' }}
>
{/* cover bleeds in behind the title — see .arch-thumb in robust.css */}
{/* category chip laid over the thumbnail (mobile only — see robust.css) */}
{work.cat}
{work.title}
{work.client}
{work.type}{work.year}
);
}
/* ── Floating thumbnail ── */
function FloatingThumb({ work, x, y }) {
if (!work) return null;
const col = CARD_COLORS[work.cat] || '#0a0a0a';
return (
{work.cover &&
}
{work.title} — {work.year}
);
}
/* ── Close button ── */
function CloseBtn({ onClick }) {
const [hov, setHov] = useState(false);
return (
);
}
/* ── Design masonry — Staggered Masonry treatment for the DESIGN filter ──
Uneven 3-column column-flow with varied crops; each tile reveals with a
shutter wipe + counter-scaling cover, meta rises after. Clicking a tile
opens the same editorial case study as the row list. */
function DesignMasonry({ works, onOpen }) {
const rootRef = useRef(null);
// Varied aspect ratios drive the staggered column flow — a more dynamic mix
// so column bottoms fall at clearly different heights.
const RATIOS = ['3/4', '16/10', '1', '4/5', '3/4', '1', '16/9', '4/5'];
// Swap Paradiso (29) and İtalyan Kültür Merkezi (30) so they trade places.
const items = [...works];
const i29 = items.findIndex((w) => w.id === 29);
const i30 = items.findIndex((w) => w.id === 30);
if (i29 > -1 && i30 > -1) { const t = items[i29]; items[i29] = items[i30]; items[i30] = t; }
useEffect(() => {
const root = rootRef.current;
if (!root) return;
const items = [...root.querySelectorAll('.arch-mason-item')];
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); }
});
}, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
items.forEach((it) => io.observe(it));
return () => io.disconnect();
}, [works]);
return (
: }