// ============== CINEMATIC HERO ANIMATION + SCROLL FX ==============
// SVG-driven hero loop (truck → pipe flow → camera scope → blue light cure)
// Plus scroll-triggered reveal animations. Pure CSS/SVG — no video file needed.
const { useState: useStateCN, useEffect: useEffectCN, useRef: useRefCN } = React;
// ▶ Hero videos come from CB_DATA.heroVideos. Two sources, in priority order:
// 1) The LIVE list a marketer manages inside the Sheetz app (/hero-videos) — fetched by
// live-hero-videos.js from /api/site/hero-videos and merged into CB_DATA.heroVideos
// BEFORE this renders (and again via the 'cb:hero-videos' event if it lands late).
// 2) The static fallback list hardcoded in data.js (usually empty).
// If BOTH are empty we never request a file, so there's no 404 — the SVG animation plays.
function pickHeroVideo() {
const list = ((window.CB_DATA && window.CB_DATA.heroVideos) || []).filter((v) => v && v.src);
if (!list.length) return null;
return list[Math.floor(Math.random() * list.length)]; // rotate when several are listed
}
function HeroCinema() {
const [pick, setPick] = useStateCN(pickHeroVideo); // chosen at mount; null = no video (yet)
const [stage, setStage] = useStateCN(0); // 0..3 loop (SVG fallback)
const [useVideo, setUseVideo] = useStateCN(!!pick);
// If the LIVE list from the app arrives after mount (async fetch), re-pick once so a
// marketer's clip shows without a page reload. Fail-soft: only upgrades empty→video;
// if the fetch was empty/failed this never fires and the SVG hero keeps playing.
useEffectCN(() => {
function onLive() {
if (pick) return; // already showing a clip; don't yank it mid-visit
const next = pickHeroVideo();
if (next && next.src) { setPick(next); setUseVideo(true); }
}
window.addEventListener('cb:hero-videos', onLive);
return () => window.removeEventListener('cb:hero-videos', onLive);
}, [pick]);
useEffectCN(() => {
if (useVideo) return;
const id = setInterval(() => setStage(s => (s + 1) % 4), 4200);
return () => clearInterval(id);
}, [useVideo]);
const stageNames = ['DISPATCH', 'JETTING', 'CAMERA SCOPE', 'BLUE LIGHT CURE'];
// Real footage of the crew/vans rolling — the million-dollar hero. Falls back to the animation on any error
// (e.g. a listed file is missing/misnamed), so a bad filename never leaves a black box.
if (useVideo && pick) {
return (