/* global React, Icon, WORK, JOURNAL, TEAM, CLIENT_LOGOS, Hero, ClientStrip, WorkIndex, WorkGrid, SectionHead, ServicesAccordion, ProcessBand, StudioSplit, Testimonial, Principles, CtaBanner, MegaFooter */ const { useState, useEffect, useRef } = React; // =================================================================== // Home Page // =================================================================== function HomePage({ onGoto, heroVariant, workSlug }) { // `filter` holds either a type label ('All', 'Commercial', ...) or a // client-pinned filter encoded as 'client:' — the latter is // only set by clicking a logo in the ClientStrip and disappears when the // user picks any standard chip. State is component-local, so navigating // away and back resets it. const [filter, setFilter] = useState('All'); const filters = ['All', 'Commercial', 'Brand Videos', 'Social Content', 'Live Events']; const clientFilter = filter.startsWith('client:') ? filter.slice(7) : null; const filtered = filter === 'All' ? WORK : clientFilter ? WORK.filter((w) => w.client === clientFilter) : WORK.filter((w) => w.type === filter); // Logo click → pin filter to that client and bring the work grid into // view. We scroll to the W—00 section header (not the filter row) so the // filter chiplets — including the just-pinned logo — land below the fold // of the heading rather than at the very top of the viewport. The // section's intrinsic padding-top (96px) already clears the fixed nav. const onSelectClient = (client) => { setFilter(`client:${client}`); const headEl = document.querySelector('.section-head'); if (headEl) headEl.scrollIntoView({ block: 'start', behavior: 'smooth' }); }; return (
{filters.map((f) => )} {clientFilter && ( )}
); } // =================================================================== // (Work page removed — work content lives on the Home page) // =================================================================== // =================================================================== // Services Page // =================================================================== function ServicesPage({ onGoto }) { return (
VF—02 What we make

Four ways we'd love to make work with you.

Most engagements start with a 30-minute call and a one-page response — we won't quote until we understand the brief.

); } // =================================================================== // About Page // =================================================================== function AboutPage({ onGoto }) { return (
VF—03 About the studio

A small team, obsessive about the craft.

Valley Films is a boutique production company in Acton, West London. We make creative corporate and commercial video for brands and agencies — from product films and brand documentaries to music videos and live events.

The studio is built on a deliberate combination — the sophistication of high-budget commercial production with the flexibility and economics of a compact crew. Fewer people on set, more attention on the work.

"Detail driven" isn't a tagline; it's the rhythm of every shoot day. Lighting that earns its frame. Audio that disappears. A grade that supports the story rather than performs over it.

); } // =================================================================== // Team section — hover for bio peek, click for expanded view // =================================================================== function TeamSection() { const [hovered, setHovered] = useState(null); const [openIdx, setOpenIdx] = useState(null); const closeTimer = useRef(null); // ESC closes modal; lock scroll while open; trap focus inside modal useEffect(() => { if (openIdx === null) return; const FOCUSABLE = 'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"]), input, textarea, select'; const onKey = (e) => { if (e.key === 'Escape') { setOpenIdx(null); return; } if (e.key !== 'Tab') return; const modal = document.querySelector('.team-modal'); if (!modal) return; const items = [...modal.querySelectorAll(FOCUSABLE)].filter(el => !el.hidden && el.offsetParent !== null); if (!items.length) return; const first = items[0], last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }; window.addEventListener('keydown', onKey); const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; // Move focus into modal const focusInModal = setTimeout(() => { const closeBtn = document.querySelector('.team-modal .team-modal-close'); closeBtn && closeBtn.focus(); }, 0); return () => { clearTimeout(focusInModal); window.removeEventListener('keydown', onKey); document.body.style.overflow = prev; }; }, [openIdx]); const onEnter = (i) => { if (closeTimer.current) clearTimeout(closeTimer.current); setHovered(i); }; const onLeave = () => { if (closeTimer.current) clearTimeout(closeTimer.current); closeTimer.current = setTimeout(() => setHovered(null), 80); }; return (
{TEAM.map((t, i) => { const isHover = hovered === i; const facts = t.facts || []; return (
onEnter(i)} onMouseLeave={onLeave} onFocus={() => onEnter(i)} onBlur={onLeave} onClick={() => setOpenIdx(i)} tabIndex={0} role="button" aria-label={`Open profile for ${t.name}`} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setOpenIdx(i); } }} >
T—{String(i + 1).padStart(2, '0')} Full profile

{t.name}

{t.role}
Focus {t.specialty}
Signature {t.signature}
{facts.slice(0, 4).map((f, k) => (
{f.k}
{f.v}
))}
{t.years}
); })}
{/* Expanded modal */} {openIdx !== null && (
setOpenIdx(null)}>
e.stopPropagation()} >
T—{String(openIdx + 1).padStart(2, '0')} {TEAM[openIdx].years} in craft
T—{String(openIdx + 1).padStart(2, '0')} {TEAM[openIdx].role}

{TEAM[openIdx].name}

{TEAM[openIdx].bio.map((p, k) =>

{p}

)}
Selected credits
    {TEAM[openIdx].credits.map((c) =>
  • {c}
    • )}
{TEAM[openIdx].contact}
{openIdx + 1} / {TEAM.length}
)} ); } // =================================================================== // Journal Page // =================================================================== function JournalPage({ onGoto }) { return (
VF—05 Journal & field notes

Notes from set, the cutting room, and our process.

{JOURNAL.map((j) =>
{j.cat} · {j.date} · {j.read}

{j.title}

)}
); } // =================================================================== // UK business-hours status — drives the green/red dot on the contact form. // // Open Mon–Fri 09:00–17:00 Europe/London, excluding England & Wales bank // holidays. Bank holidays are computed (not hardcoded) so the list stays // correct without yearly maintenance: Easter via the Anonymous Gregorian // Computus, May/August bank holidays via first/last Monday of the month, // and New Year's / Christmas / Boxing with the standard weekend-substitute // rules. // =================================================================== function _easterSunday(year) { const a = year % 19; const b = Math.floor(year / 100); const c = year % 100; const d = Math.floor(b / 4); const e = b % 4; const f = Math.floor((b + 8) / 25); const g = Math.floor((b - f + 1) / 3); const h = (19 * a + b - d - g + 15) % 30; const i = Math.floor(c / 4); const k = c % 4; const L = (32 + 2 * e + 2 * i - h - k) % 7; const m = Math.floor((a + 11 * h + 22 * L) / 451); const month = Math.floor((h + L - 7 * m + 114) / 31); const day = ((h + L - 7 * m + 114) % 31) + 1; return new Date(Date.UTC(year, month - 1, day)); } function _firstMondayOfMonth(year, month) { for (let day = 1; day <= 7; day++) { const d = new Date(Date.UTC(year, month, day)); if (d.getUTCDay() === 1) return d; } } function _lastMondayOfMonth(year, month) { const lastDay = new Date(Date.UTC(year, month + 1, 0)).getUTCDate(); for (let day = lastDay; day >= lastDay - 6; day--) { const d = new Date(Date.UTC(year, month, day)); if (d.getUTCDay() === 1) return d; } } function _ymd(d) { return `${d.getUTCFullYear()}-${String(d.getUTCMonth() + 1).padStart(2, '0')}-${String(d.getUTCDate()).padStart(2, '0')}`; } function _ukBankHolidays(year) { const dates = new Set(); const nyd = new Date(Date.UTC(year, 0, 1)); if (nyd.getUTCDay() === 6) dates.add(`${year}-01-03`); else if (nyd.getUTCDay() === 0) dates.add(`${year}-01-02`); else dates.add(_ymd(nyd)); const easter = _easterSunday(year); dates.add(_ymd(new Date(easter.getTime() - 2 * 86400000))); dates.add(_ymd(new Date(easter.getTime() + 86400000))); dates.add(_ymd(_firstMondayOfMonth(year, 4))); dates.add(_ymd(_lastMondayOfMonth(year, 4))); dates.add(_ymd(_lastMondayOfMonth(year, 7))); const xmasDay = new Date(Date.UTC(year, 11, 25)).getUTCDay(); if (xmasDay === 6) { dates.add(`${year}-12-27`); dates.add(`${year}-12-28`); } else if (xmasDay === 0) { dates.add(`${year}-12-26`); dates.add(`${year}-12-27`); } else if (xmasDay === 5) { dates.add(`${year}-12-25`); dates.add(`${year}-12-28`); } else { dates.add(`${year}-12-25`); dates.add(`${year}-12-26`); } return dates; } function _ukParts(date) { const fmt = new Intl.DateTimeFormat('en-GB', { timeZone: 'Europe/London', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false, weekday: 'long', }); const parts = Object.fromEntries(fmt.formatToParts(date).map((p) => [p.type, p.value])); const hour = parts.hour === '24' ? 0 : Number(parts.hour); return { year: Number(parts.year), month: Number(parts.month), day: Number(parts.day), hour, weekday: parts.weekday, }; } function _ukBusinessStatus(now) { const p = _ukParts(now); const todayYmd = `${p.year}-${String(p.month).padStart(2, '0')}-${String(p.day).padStart(2, '0')}`; const isWeekend = p.weekday === 'Saturday' || p.weekday === 'Sunday'; const isHoliday = _ukBankHolidays(p.year).has(todayYmd); const inHours = p.hour >= 9 && p.hour < 17; if (!isWeekend && !isHoliday && inHours) { return { open: true, label: "We're open, will respond very shortly." }; } let cursor = new Date(Date.UTC(p.year, p.month - 1, p.day)); for (let i = 0; i < 14; i++) { cursor = new Date(cursor.getTime() + 86400000); const cp = _ukParts(cursor); const cymd = `${cp.year}-${String(cp.month).padStart(2, '0')}-${String(cp.day).padStart(2, '0')}`; if (cp.weekday === 'Saturday' || cp.weekday === 'Sunday') continue; if (_ukBankHolidays(cp.year).has(cymd)) continue; const tomorrowMs = Date.UTC(p.year, p.month - 1, p.day) + 86400000; const cursorMs = Date.UTC(cp.year, cp.month - 1, cp.day); if (!isWeekend && cursorMs === tomorrowMs) { return { open: false, label: "We're closed for the day, we'll get back to you tomorrow." }; } return { open: false, label: `We're closed, we'll get back to you on ${cp.weekday}.` }; } return { open: false, label: "We're closed, we'll get back to you on the next working day." }; } function ContactStatus() { const [now, setNow] = useState(() => new Date()); useEffect(() => { const id = setInterval(() => setNow(new Date()), 60_000); return () => clearInterval(id); }, []); const status = _ukBusinessStatus(now); return (

{status.label}

); } // =================================================================== // Contact Page (light theme) // =================================================================== function ContactPage({ onGoto }) { const [sent, setSent] = useState(false); const [sending, setSending] = useState(false); const [error, setError] = useState(''); const [form, setForm] = useState({ name: '', company: '', email: '', type: 'Commercial', brief: '', honeypot: '' }); const set = (k) => (e) => setForm({ ...form, [k]: e.target.value }); // Continuous form-completion progress (0 → 1). // Weighted so the brief textarea drives the final third — bars fill out as // identity → contact → brief, mirroring the visual order. const progress = (() => { const has = (s) => (s || '').trim().length > 0; const emailOk = /\S+@\S+\.\S+/.test(form.email || ''); const briefLen = (form.brief || '').trim().length; const briefScore = Math.min(1, briefLen / 80); // ~80 chars feels "filled" const parts = [ has(form.name) ? 1 : 0, has(form.company) ? 1 : 0, emailOk ? 1 : has(form.email) ? 0.4 : 0, 1, // project type always has a default briefScore]; return parts.reduce((a, b) => a + b, 0) / parts.length; })(); return (
Get in touch · VF—04

Ready to make an impact?

Tell us about your project. We'll come back to you as soon as we can with thoughts, references and an honest sense of fit.

{sent ?

Thanks — that's with us.

We'll come back to you within two working days, in working hours UK. Reply to the email confirmation if anything urgent comes up.

:

Project enquiry

A few lines is plenty — we'll take it from there.