// portfolio-cinematic.jsx // Direction A — Cinematic Editorial · dark red + black. // FULLMETAL & CINESTEEL sub-brands in nav. TEAM dropdown opens a member // detail page with a project slideshow showing the member's role per film. // Services split into Video / Graphic / Clothing. const CIN = { bg: '#0a0606', bgSoft: '#140909', bgRaise: '#1c0c0e', ink: '#f0e8dc', inkMute: 'rgba(240,232,220,.62)', inkDim: 'rgba(240,232,220,.38)', rule: 'rgba(240,232,220,.10)', accent: '#a8202c', accentDeep: '#6b0d14', }; function CinematicPortfolio({ projects, accent = CIN.accent, dense = false, showreelId = '76979871', showreelSource = 'vimeo', workFilters, creators = CREATORS, brands = BRANDS, managed = MANAGED_SEED, subBrandClients = SUB_BRAND_CLIENTS_SEED, team = TEAM, links = NAV_LINKS, subBrands = SUB_BRANDS, services = SERVICES, locations, homePhotos = [] }) { const locs = (Array.isArray(locations) && locations.length) ? locations : [ { name: 'Lisbon', address: 'Rua da Boavista 84\n1200-066\nrichard@armature.studio' }, { name: 'New York', address: '79 Walker St, 4F\nNY 10013\nbookings@armature.studio' }, ]; const [route, setRoute] = React.useState(() => { const m = location.hash.match(/^#team=(.+)/); return m ? { name: 'team', id: decodeURIComponent(m[1]) } : { name: 'home' }; }); const scrollRef = React.useRef(null); React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = 0; }, [route]); const go = React.useCallback((r) => { setRoute(r); if (r.name === 'team' && r.id) { history.replaceState(null, '', '#team=' + encodeURIComponent(r.id)); } else if (location.hash.startsWith('#team=')) { history.replaceState(null, '', location.pathname + location.search); } }, []); React.useEffect(() => { function onHashChange() { const m = location.hash.match(/^#team=(.+)/); if (m) setRoute({ name: 'team', id: decodeURIComponent(m[1]) }); else if (route.name === 'team') setRoute({ name: 'home' }); } window.addEventListener('hashchange', onHashChange); return () => window.removeEventListener('hashchange', onHashChange); }, [route.name]); return (
{route.name === 'home' && } {route.name === 'project' && p.id === route.id) || projects[0]} projects={projects} accent={accent} go={go} />} {route.name === 'team' && m.id === route.id) || team[0]} projects={projects} accent={accent} go={go} />} {route.name === 'services' && } {route.name === 'about' && } {route.name === 'contact' && }
); } function CinNav({ route, go, accent, team = TEAM, links = NAV_LINKS, subBrands = SUB_BRANDS }) { const [teamOpen, setTeamOpen] = React.useState(false); const closeTimer = React.useRef(null); const teamWrapRef = React.useRef(null); const openTeam = () => { clearTimeout(closeTimer.current); setTeamOpen(true); }; const scheduleClose = () => { clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setTeamOpen(false), 220); }; React.useEffect(() => () => clearTimeout(closeTimer.current), []); // Touch / mobile: clicking outside the team dropdown should close it. React.useEffect(() => { if (!teamOpen) return; function onDocClick(e) { if (teamWrapRef.current && !teamWrapRef.current.contains(e.target)) setTeamOpen(false); } document.addEventListener('click', onDocClick); return () => document.removeEventListener('click', onDocClick); }, [teamOpen]); const items = [ ['work', { name: 'home' }], ['services', { name: 'services' }], ['about', { name: 'about' }], ['contact', { name: 'contact' }], ]; const subBrandHrefs = subBrands.reduce((acc, b) => { acc[b.id] = links[b.id] || b.href; return acc; }, {}); return (
{subBrands.map(b => ( {b.name} ↗ ))}
); } function CinHome({ projects, accent, dense, showreelId, showreelSource = 'vimeo', workFilters, go, team = TEAM, links = NAV_LINKS, subBrands = SUB_BRANDS, homePhotos = [] }) { const filters = (Array.isArray(workFilters) && workFilters.length) ? workFilters : ['all', 'cinesteel', 'fullmetal', 'brand film', 'documentary']; const [activeFilter, setActiveFilter] = React.useState(filters[0]); React.useEffect(() => { setActiveFilter(filters[0]); }, [filters.join('|')]); const filtered = (activeFilter && activeFilter.toLowerCase() !== 'all') ? projects.filter(p => { const tokens = [p.brand, p.tag, p.client].filter(Boolean).map(s => String(s).toLowerCase()); const needle = String(activeFilter).toLowerCase(); return tokens.some(t => t.includes(needle) || needle.includes(t)); }) : projects; const showreelSrc = showreelSource === 'youtube' ? youTubeEmbed(showreelId, { background: true }) : vimeoEmbed(showreelId, { background: true }); return ( <> {/* HERO — full-bleed showreel */}