/* Projects index + Sectors index + Project detail (case study) */ function ProjectsIndex({ go, sectorFilter, setSectorFilter, showCredit }) { const filtered = sectorFilter === "all" ? window.PROJECTS : window.PROJECTS.filter(p => p.sector === sectorFilter); return (
№ 02 / Projects
{filtered.length} of {window.PROJECTS.length} shown
Filterable · 10 sectors
A working portfolio

Projects, by sector.

Built only from client-confirmed work; every image is photographer-credited and rights-cleared before it ships. This is the showcase the previous site was missing.

{window.SECTORS.map(s => { const n = window.PROJECTS.filter(p => p.sector === s.id).length; return ( ); })} {filtered.length} {filtered.length===1?"project":"projects"}
{filtered.length === 0 ? (
No projects in this sector yet.

We deliver here, but the case studies aren't cleared for publication. Get in touch and we'll share work under NDA.

{e.preventDefault(); go("contact");}}>Request a private portfolio
) : (
{filtered.map((p, i) => { /* deliberate visual rhythm by index */ const span = [6,6,4,4,4,8,4,6,6,4,4,8][i % 12] || 4; const frame = span >= 6 ? "wide" : "tall"; return (
); })}
)}
); } function SectorsIndex({ go }) { return (
№ 02b / Sectors
10 sector hubs
Filter projects by sector
Sector portfolio hubs

Ten sectors.
One delivery model.

{window.SECTORS.map((s, i) => { const count = window.PROJECTS.filter(p => p.sector === s.id).length; const hero = window.SECTOR_HERO[s.id]; return ( ); })}
); } function ProjectDetail({ id, go, showCredit }) { const p = window.PROJECTS.find(x => x.id === id); if (!p) { return (
Project not found.
{e.preventDefault(); go("projects");}}>All projects
); } const sector = (window.SECTORS.find(s => s.id === p.sector) || {}).label; const all = window.PROJECTS; const idx = all.findIndex(x => x.id === p.id); const prev = all[(idx - 1 + all.length) % all.length]; const next = all[(idx + 1) % all.length]; return (
№ {String(idx+1).padStart(2,"0")} · Case study
{sector} · {p.location}
{e.preventDefault(); go("projects");}}>← All projects
{sector} · {p.year}

{p.name}

{p.summary}

{p.name} {showCredit && !p.rightsCleared &&
{p.photographer}
}
Hero / {p.name} {p.divisions.join(" · ")}
Sector
{sector}
Location
{p.location}
Scope
{p.scope}
Year completed
{p.year}
Divisions used
{p.divisions.join(" · ")}
Brief → outcome
{p.body.map((para, i) => (

{para}

))}
Photographer {p.photographer}
{p.gallery.map((src, i) => { const span = i === 0 ? 12 : 6; return (
{`${p.name} {showCredit && !p.rightsCleared &&
{p.photographer}
}
); })}
{e.preventDefault(); go(`project/${prev.id}`);}}>← {prev.name} {e.preventDefault(); go("contact");}}>Start a similar project {e.preventDefault(); go(`project/${next.id}`);}}>{next.name} →
); } Object.assign(window, { ProjectsIndex, SectorsIndex, ProjectDetail });