);
}
function ServiceShowcase({ samples, intervalMs = 7000 }) {
// Virtual index space: we render [last, ...samples, first] so there's always
// a peek on both sides. virtualIndex 0 = clone-of-last, 1..N = real, N+1 = clone-of-first.
const N = samples.length;
const [virtualIndex, setVirtualIndex] = useStateST(1); // start on first real
const [paused, setPaused] = useStateST(false);
const [transitioning, setTransitioning] = useStateST(false);
const [animate, setAnimate] = useStateST(true); // disabled briefly when we snap from clone → real
const [activeDurationMs, setActiveDurationMs] = useStateST(intervalMs);
const timerRef = useRefST(null);
const videoRefs = useRefST([]);
// Map virtual → real (the sample being shown center)
const realIndex = ((virtualIndex - 1) % N + N) % N;
// Auto-advance: fixed 8-second cadence for all cards (video or not).
// Pauses while the tab is backgrounded (browsers throttle setTimeout there,
// which would otherwise desync the strip from the video).
const [tabHidden, setTabHidden] = useStateST(typeof document !== 'undefined' && document.hidden);
useEffectST(() => {
const onVis = () => {
const hidden = document.hidden;
setTabHidden(hidden);
if (!hidden) {
// Re-kick the centered video, browsers may have paused it.
const v = videoRefs.current[virtualIndex];
if (v) {
const p = v.play();
if (p && p.catch) p.catch(() => {});
}
}
};
document.addEventListener('visibilitychange', onVis);
return () => document.removeEventListener('visibilitychange', onVis);
}, [virtualIndex]);
useEffectST(() => {
if (paused || transitioning || tabHidden) return;
const FIXED_MS = 8000;
setActiveDurationMs(FIXED_MS);
timerRef.current = setTimeout(() => {
setVirtualIndex((i) => i + 1);
}, FIXED_MS);
return () => clearTimeout(timerRef.current);
}, [virtualIndex, paused, transitioning, tabHidden]);
// Mark "transitioning" so we can pause the active video until it lands center
useEffectST(() => {
setTransitioning(true);
const t = setTimeout(() => setTransitioning(false), 480);
return () => clearTimeout(t);
}, [virtualIndex]);
// Snap from clone slots back to the real equivalents (no animation) once the
// transition has finished, so the next move can continue smoothly in either direction.
useEffectST(() => {
if (virtualIndex === 0 || virtualIndex === N + 1) {
const t = setTimeout(() => {
setAnimate(false);
setVirtualIndex(virtualIndex === 0 ? N : 1);
// re-enable animation on the next frame
requestAnimationFrame(() => requestAnimationFrame(() => setAnimate(true)));
}, 760);
return () => clearTimeout(t);
}
}, [virtualIndex, N]);
// Drive video playback: ALL videos play on loop continuously, including the
// side cards. The browser will throttle off-screen ones automatically.
useEffectST(() => {
videoRefs.current.forEach((v) => {
if (!v) return;
const p = v.play();
if (p && p.catch) p.catch(() => {});
});
}, [virtualIndex]);
// Build the rendered strip: [clone-of-last, ...samples, clone-of-first]
const stripItems = [samples[N - 1], ...samples, samples[0]];
const goTo = (realI) => setVirtualIndex(realI + 1);
return (
{/* Caption, sits below the video, only readable on the active card */}
{s.label}
{s.caption}
);
})}
{/* Progress dots, outside the strip viewport */}
{samples.map((_, i) => (
))}
);
}
function ServiceContentPlaceholder() {
return (
More on this service
Detailed explanation sections will live here, the methodology, the deliverables,
the way we work, and how it ties to outcomes.
);
}
function Recognition() {
return (
Recognized by
);
}
function ServicePage({ service }) {
const Content = service.contentComponent || ServiceContentPlaceholder;
const hasSamples = service.samples && service.samples.length > 0;
// If samplesAfter is set, the showcase strip is inserted between two halves of
// the intro copy. Used by the Video & Animation page to place the strip right
// after the "decision made at the brief" line, before the studio explainer.
const splitIntro = hasSamples && Number.isInteger(service.samplesAfter) && Array.isArray(service.intro);
const introHead = splitIntro ? service.intro.slice(0, service.samplesAfter) : service.intro;
const introTail = splitIntro ? service.intro.slice(service.samplesAfter) : null;
return (
<>
{service.banner ? : null}
{hasSamples ? (
) : null}
{splitIntro ? (
) : null}
{service.cta ? : null}
{service.showRecognition ? : null}
);
}
// Expose globals for per-service entry scripts
Object.assign(window, { ServicePage, ServiceBanner, ServiceHero, ServiceShowcase, ServiceContentPlaceholder });
