/* global React, PageIntro, useViewport, EnquiryBlock */ const { useState: useStatePD, useEffect: useEffectPD, useRef: useRefPD } = React; /* ------------------------------------------------------------------ */ /* ProjectDetail */ /* */ /* Template derives from Adelaide Airport live page + SEO brief: */ /* · Full-bleed hero image */ /* · Title strip with Project Information + Collections in use */ /* · H2 spine: The Brief · Design Response · Collections in Use · */ /* Outcome */ /* · 500-900-word narrative paragraphs */ /* · One named quote */ /* · Specific metrics (seats, sqm, charging points, passengers) */ /* · Image slider (manual, arrows + dots) */ /* · Contextual feature blocks (Wheelchair Zones / Connectivity) */ /* · Designer credit + photographer */ /* · Related projects + EnquiryBlock */ /* */ /* The component takes a `project` prop so the same template drives */ /* every case study. Defaults render the Adelaide Airport flagship. */ /* ------------------------------------------------------------------ */ /* --- Info row (label + value) -------------------------------------- */ function InfoCell({ label, value }) { return (
{label}
{value}
); } /* --- Image slider -------------------------------------------------- */ function Slider({ images, vw }) { const [idx, setIdx] = useStatePD(0); const isMobile = vw < 760; const n = images.length; const go = (d) => setIdx(((idx + d) % n + n) % n); return (
{images.map((img, i) => ( {img.alt ))}
{/* Arrows */} {/* Dots */}
{images.map((_, i) => (
); } /* --- Feature block (image + text, alternating side) ---------------- */ function FeatureBlock({ image, alt, eyebrow, title, body, reverse, vw }) { const isMobile = vw < 900; return (
{alt
{eyebrow}

{title}

{body}

); } /* --- Metric card --------------------------------------------------- */ function MetricCell({ value, label, note }) { return (
{value}
{label}
{note && (
{note}
)}
); } /* --- Project tile masonry helpers --------------------------------- */ /* Project tiles size to each image's natural aspect ratio — so a portrait photo renders portrait, a landscape photo renders landscape, and the masonry rhythm comes from the photography itself. */ function ProjectTile({ src, alt, onRatio }) { return (
{alt { const el = e.currentTarget; if (onRatio && el.naturalWidth && el.naturalHeight) onRatio(el.naturalWidth / el.naturalHeight); }} style={{ width: "100%", height: "auto", display: "block" }} />
); } /* --- ProjectMoodboard: JS masonry that places each tile into the shortest column, so the cascade packs tight with no trailing voids. Genuine panoramas (ratio >= 1.8) break out full-width as editorial punctuation. NOTE: named ProjectMoodboard (not Moodboard) to avoid colliding with the global Moodboard page component in Moodboard.jsx. ------- */ function ProjectMoodboard({ items, cols, gap }) { const [ratios, setRatios] = useStatePD({}); const setRatio = (key, r) => setRatios((prev) => (prev[key] === r ? prev : { ...prev, [key]: r })); // Relative height weight for balancing (column width is shared/equal). const weightOf = (it, key) => { if (it.kind === "callout") return 0.95; const r = ratios[key] || 1.3; return 1 / r; }; const keyOf = (it, i) => (it.kind === "image" ? it.src : `cb-${i}`) || `it-${i}`; const isWide = (it, key) => it.kind === "image" && (ratios[key] || 0) >= 1.8; // Split the ordered flow into segments: full-width panoramas stand alone; // everything else accumulates into masonry groups (order preserved). const segments = []; let group = null; items.forEach((it, i) => { const key = keyOf(it, i); if (isWide(it, key)) { if (group) { segments.push(group); group = null; } segments.push({ type: "wide", it, key }); } else { if (!group) { group = { type: "masonry", entries: [] }; } group.entries.push({ it, key }); } }); if (group) segments.push(group); const renderItem = (it, key) => it.kind === "callout" ? : setRatio(key, r)} />; return (
{segments.map((seg, si) => { if (seg.type === "wide") { return
{renderItem(seg.it, seg.key)}
; } // Greedy shortest-column packing for this masonry group. const colItems = Array.from({ length: cols }, () => []); const colH = Array(cols).fill(0); seg.entries.forEach(({ it, key }) => { let c = 0; for (let k = 1; k < cols; k++) if (colH[k] < colH[c] - 1e-6) c = k; colItems[c].push({ it, key }); colH[c] += weightOf(it, key) + 0.04; }); return (
{colItems.map((col, ci) => (
{col.map(({ it, key }) => (
{renderItem(it, key)}
))}
))}
); })}
); } function ProjectCallout({ eyebrow, title, body }) { return (
{eyebrow && (
{eyebrow}
)}

{title}

{body}

); } /* --- Hero carousel (only used when >1 hero image is declared) ------ */ function HeroCarousel({ images, alt, isMobile }) { const [idx, setIdx] = useStatePD(0); const [paused, setPaused] = useStatePD(false); useEffectPD(() => { if (paused || images.length < 2) return; const t = setInterval(() => setIdx((i) => (i + 1) % images.length), 7000); return () => clearInterval(t); }, [paused, images.length]); return (
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ aspectRatio: isMobile ? "4/5" : "16/8", maxHeight: isMobile ? "auto" : "90vh", overflow: "hidden", position: "relative", background: "#e4e2da", }}> {images.map((src, i) => ( {alt ))}
{images.map((_, i) => (
); } /* --- ProjectDetail page ------------------------------------------- */ function ProjectDetail({ project, slug, setScreen }) { const vw = useViewport(); const isMobile = vw < 900; const isSmall = vw < 720; // Resolve project: explicit prop > slug lookup > Adelaide flagship default const resolved = project || (slug && window.getProject ? window.getProject(slug) : null) || (window.getProject ? window.getProject("project-adelaide") : null) || ADELAIDE_AIRPORT; const p = resolved; // Hero may be a single image or an array — only use carousel when 2+. const heroList = Array.isArray(p.hero) ? p.hero.filter(Boolean) : (p.hero ? [p.hero] : []); // De-duplicate imagery across the whole page. The former hero image now // leads the moodboard cascade as the first tile; gallery / featureA / // singleImage / featureB images each get added only if unseen. The result // is a flat list of unique tiles that flow into the masonry. // Identity key: collapses pixel-identical files that live at two paths // (e.g. a gallery photo copied into the feature/ folder). Falls back to the // raw path when the image is unique. See images-dupemap.js (window.IMG_CANON). const canonId = (src) => (typeof window !== "undefined" && window.IMG_CANON && window.IMG_CANON[src]) || src; const used = new Set(); const tileImages = []; const pushImage = (src, alt) => { if (!src) return; const id = canonId(src); if (used.has(id)) return; used.add(id); tileImages.push({ kind: "image", src, alt }); }; heroList.forEach((src) => pushImage(src, p.heroAlt)); (p.gallery || []).forEach((g) => g && pushImage(g.src, g.alt)); if (p.featureA) pushImage(p.featureA.image, p.featureA.alt); if (p.singleImage) pushImage(p.singleImage.src, p.singleImage.alt); if (p.featureB) pushImage(p.featureB.image, p.featureB.alt); // Manifest-driven: append any images dropped into this project's folders // (images/projects//{hero,gallery,feature}) that aren't already shown. // Dedup is by exact src, so curated tiles are untouched — only genuinely new // files appear, after running `node generate-manifests.js`. if (typeof window !== "undefined" && window.IMG && window.IMG.projSlides && p.slug) { const _pslug = String(p.slug).replace(/^project-/, ""); ["hero", "gallery", "feature"].forEach((role) => { window.IMG.projSlides(_pslug, role).forEach((s) => pushImage(s.src, s.alt)); }); } // Callouts — only render if title isn't a placeholder. const calloutFromFeature = (f) => f && f.title && !/^\[/.test(String(f.title).trim()) ? { kind: "callout", eyebrow: f.eyebrow, title: f.title, body: f.body, anchorSrc: f.image } : null; const callouts = [calloutFromFeature(p.featureA), calloutFromFeature(p.featureB)].filter(Boolean); // Insert each callout immediately after its anchor image when present, so // the wheelchair copy sits next to wheelchair photography and the power // copy sits next to the charging photography. Fall back to thirds if the // anchor image isn't in the flow. const flowItems = [...tileImages]; callouts.forEach((c, idx) => { let insertAt = -1; if (c.anchorSrc) { const found = flowItems.findIndex((it) => it.kind === "image" && canonId(it.src) === canonId(c.anchorSrc)); if (found >= 0) insertAt = found + 1; } if (insertAt < 0) { // No anchor — fall back to thirds positioning. insertAt = idx === 0 ? Math.max(1, Math.floor(flowItems.length / 3)) : Math.max(2, Math.floor(flowItems.length * 2 / 3)); } flowItems.splice(Math.min(insertAt, flowItems.length), 0, c); }); const tileCols = isSmall ? 1 : 2; const tileGap = isSmall ? 8 : 14; return ( <> {/* Details first — title strip + project information (no opening hero) */}
{/* Left — title */}
{p.category} · {p.year}

{p.name}

{p.location}
{/* Right — info grid */}
0) ? p.collections.map((c) => c.name).join(", ") : p.sector} />
{/* Narrative — Description (always renders so the space is reserved for copy) */}

Description

{(p.brief && p.brief.length > 0 && p.brief.some((s) => s && !/^\[/.test(String(s).trim()))) ? ( p.brief.map((para, i) => (

{para}

)) ) : (

Project description — to be supplied. Two to three short paragraphs covering the brief, the design response, and the outcome. Replace this placeholder once copy is ready.

)}
{/* Featured collections — slim strip between the description and the cascade */} {p.collections && p.collections.length > 0 && (
Featured collections
)} {/* Masonry tiles — unique images and callout text boxes flowing together */} {flowItems.length > 0 && (
)} {/* Pull quote — named */} {p.quote && (

"{p.quote.text}"

{p.quote.name} · {p.quote.role}
)} {/* Feature blocks + single image — now handled inline within the masonry above. */} {/* Metrics + Outcome sections removed — not consistently sourceable across projects. */} {/* Collections in use — removed; featured collections now listed up top under the details. */} {/* Related projects */}
{(() => { const all = (typeof window !== "undefined" && window.PROJECTS) || []; const mine = new Set((p.collections || []).map((c) => c.slug)); const scored = all .filter((x) => x && x.slug !== p.slug) .map((x) => ({ x, shared: (x.collections || []).filter((c) => mine.has(c.slug)).length })) .filter((e) => e.shared > 0) .sort((a, b) => b.shared - a.shared || (b.x.year || 0) - (a.x.year || 0)); let picks = scored.map((e) => e.x); if (picks.length < 3) { const have = new Set(picks.map((x) => x.slug)); picks = picks.concat(all.filter((x) => x && x.slug !== p.slug && !have.has(x.slug) && x.category === p.category)); } picks = picks.slice(0, 3); if (picks.length === 0) return (p.related || DEFAULT_RELATED).map((r) => (
{r.name}
{r.name}
{r.year}
{r.location}
)); return picks.map((r) => { const img = Array.isArray(r.hero) ? r.hero[0] : (r.indexImage || r.hero); const shared = (r.collections || []).filter((c) => mine.has(c.slug)).map((c) => c.name); return (
setScreen(r.slug)} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter") setScreen(r.slug); }} style={{ cursor: "pointer" }}>
{r.name}
{r.name}
{r.year}
{r.location}
{shared.length > 0 && (
Shared: {shared.join(", ")}
)}
); }); })()}
{(() => { const all = (typeof window !== "undefined" && window.PROJECTS) || []; const idx = all.findIndex((x) => x && x.slug === p.slug); const next = idx >= 0 ? all[(idx + 1) % all.length] : null; if (!next || next.slug === p.slug) return null; const nextImg = Array.isArray(next.hero) ? next.hero[0] : (next.hero || next.indexImage); return (
setScreen(next.slug)} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter") setScreen(next.slug); }} style={{ cursor: "pointer", borderTop: "0.5px solid rgba(26,25,23,0.18)" }}>
Next project
{next.name} →
{next.location}{next.year ? ` · ${next.year}` : ""}
View next project →
{nextImg && !isSmall && (
{next.name}
)}
); })()} ); } /* ------------------------------------------------------------------ */ /* Flagship content — Adelaide Airport */ /* ------------------------------------------------------------------ */ const ADELAIDE_AIRPORT = { name: "Adelaide Airport", location: "South Australia, Australia", category: "Aviation", sector: "Aviation", year: "2025", architect: "Woods Bagot", photographer: "Florian Groehn", hero: "images/_legacy/projects/cairns-airport.webp", heroAlt: "Adelaide Airport gate lounge — Gateway seating by Derlot, 2025.", brief: [ "Adelaide Airport briefed a gate lounge refresh that had to absorb rising passenger volumes inside an existing footprint. More seats per square metre. Integrated power at a meaningful proportion of positions. An inclusive specification — wheelchair zones integrated, not bolted on. And a visual language that read as considered architecture, not as transit furniture.", "\n", ], response: [ "From day one the studio worked alongside Woods Bagot as co-designers rather than a product supplier. Our industrial team sketched alongside their interior leads, testing Gateway's modular logic against the gate cluster plan. Linear runs anchor the primary holding areas; rounded-end configurations soften the transition between gate and concourse; compact circular pods pick up the smaller satellite areas.", "Every seat position was specified against the passenger behaviour the airport wanted to enable. GPO and USB-C integration runs at every third module — roughly forty percent of all positions — chosen as the density that serves charging demand without cluttering the run with outlets. Wheelchair Zones are integrated at every gate cluster: clear access, open ends, seat heights tuned for easy transfer.", "The upholstery palette was tuned to Woods Bagot's material board across three earth-forward neutrals. A custom stitching detail was developed in collaboration between our workshop and their interior studio, visible in the seam lines running along the beam's top edge. Frames are powder-coated mild steel; every upholstered module is designed for on-site replacement without lifting the frame.", "Seats were manufactured in Brisbane and commissioned across a phased fit-out schedule that kept every gate live during install. The install team worked gate-by-gate through operational windows, with the design lead present for sign-off at each cluster handover.", ], quote: { text: "Derlot came to the table as co-designers. Not as a vendor trying to fit an existing product into our plan. Every decision that matters at Adelaide Airport happened in the room with their team.", name: "\n", role: "Woods Bagot · Interior Design Lead", }, gallery: [ { src: "assets/gateway/cairns-hero.webp", alt: "Gate lounge with Gateway seating in three neutrals." }, { src: "assets/gateway/cairns-02.webp", alt: "Linear run of Gateway with integrated charging." }, { src: "assets/gateway/dfw-linear.webp", alt: "Wheelchair Zone integrated at a gate cluster." }, { src: "images/_legacy/projects/cairns-airport-02.webp", alt: "Curved Gateway configuration in the main concourse." }, ], featureA: { image: "assets/gateway/cairns-02.webp", alt: "Gateway Wheelchair Zone at an Adelaide Airport gate.", eyebrow: "Integrated, not added", title: "Wheelchair Zones specified at every cluster.", body: "Gateway demonstrates how inclusivity can be beautiful. Clear access zones with open ends, seat heights tuned for easy transfer, and sight lines that place every traveller — regardless of ability — at the centre of the lounge rather than the edge of it.", }, singleImage: { src: "images/_legacy/projects/cairns-airport.webp", alt: "Wide view of an Adelaide Airport gate lounge.", }, featureB: { image: "assets/gateway/dfw-linear.webp", alt: "Gateway with integrated power and USB-C at an armrest.", eyebrow: "Connectivity", title: "Power and USB-C integrated into the armrest.", body: "Modern travel is connected. Gateway integrates GPO and USB-C charging directly into the armrest shell, allowing passengers to recharge devices and themselves at roughly forty percent of positions across the terminal — the density the airport specified as the right balance of demand and visual calm.", }, metrics: [ { value: "2,400", label: "Seats installed", note: "Across 14 gate clusters." }, { value: "1,860", label: "Charging positions", note: "GPO + USB-C integrated into the armrest." }, { value: "12,000", label: "Passengers / day", note: "Mean terminal throughput, 2025." }, { value: "100%", label: "Made in Australia", note: "Manufactured locally for the project." }, ], outcome: [ "The refreshed gate lounges opened in phases through 2025. The replaceable-module design is already earning its specification — individual seats in the first commissioned cluster have been refreshed without taking a gate out of service, proving out the long-cycle logic the airport invested in.", "Adelaide Airport was recognised at the 2025 Good Design Awards with the Gateway collection, acknowledged for the collaborative design process that made it possible.", ], collections: [ { slug: "gateway", name: "Gateway", note: "Modular beam, 2022", image: "images/_legacy/collections/gateway.webp" }, { slug: "twig", name: "Twig", note: "Upholstered, 2020", image: "images/_legacy/collections/twig.webp" }, ], }; const DEFAULT_RELATED = [ { name: "Cairns Airport", year: 2025, location: "Cairns, Australia", image: "images/_legacy/projects/cairns-airport.webp" }, { name: "DFW International Airport", year: 2024, location: "Dallas–Fort Worth, USA", image: "images/_legacy/projects/dfw-airport.webp" }, { name: "Jubilee Place", year: 2022, location: "Brisbane, Australia", image: "images/_legacy/projects/jubilee-place.webp" }, ]; window.ProjectDetail = ProjectDetail; window.ADELAIDE_AIRPORT_PROJECT = ADELAIDE_AIRPORT;