);
}
// ——— Buyer's Consolidation: video-backed CFS cinematic + live consolidation telemetry
function BuyersConsHero() {
const [t, setT] = useStateSh(0);
const buyersVideoRef = useRefSh(null);
const [buyersVideoEnded, setBuyersVideoEnded] = useStateSh(false);
useEffectSh(() => {
let r; const loop = () => { setT(x => x + 1); r = requestAnimationFrame(loop); };
r = requestAnimationFrame(loop);
return () => cancelAnimationFrame(r);
}, []);
const replayBuyersVideo = () => {
const v = buyersVideoRef.current;
if (!v) return;
setBuyersVideoEnded(false);
try { v.currentTime = 0; } catch {}
const p = v.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
};
// Auto-replay whenever the hero scrolls back into view (after having ended).
useEffectSh(() => {
const v = buyersVideoRef.current;
if (!v || typeof IntersectionObserver === 'undefined') return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && v.ended) replayBuyersVideo();
});
}, { threshold: 0.35 });
io.observe(v);
return () => io.disconnect();
}, []);
// Suppliers steadily mark "received" at the CFS as the animation plays.
const TOTAL_SUPPLIERS = 12;
const received = Math.min(TOTAL_SUPPLIERS, 4 + Math.floor(t / 70));
const pct = Math.round((received / TOTAL_SUPPLIERS) * 100);
// CBM filled into the 40' HQ as receipts post (target ~64 CBM).
const cbmBase = 42.5;
const cbm = (cbmBase + (received / TOTAL_SUPPLIERS) * 20 + Math.sin(t * 0.04) * 0.3).toFixed(1);
// Cutoff countdown (h/m) to give the card a live pulse.
const cutoffBase = 212; // minutes
const cutoff = Math.max(1, cutoffBase - Math.floor(t / 60));
const ch = String(Math.floor(cutoff / 60)).padStart(1, '0');
const cm = String(cutoff % 60).padStart(2, '0');
const palette = { bg1: '#F0F6FF', bg2: '#DCE9FB', border: '#CCDCF5' };
const BUYERS_VIDEO_URL = '../uploads/optimized/buyers-consolidation.mp4';
return (
{/* ——— Video motion layer (plays once, click to replay) ——— */}
{/* Soft brand tint for color consistency with sibling service heroes */}
{/* ——— Live consolidation telemetry card (top-right) ——— */}
{/* header */}
CFS LIVE
ABGU 558921-7
{/* route */}
SHALAX
{/* suppliers-received progress bar */}
SUPPLIERS RECEIVED
{received}/{TOTAL_SUPPLIERS}
{/* stats row — CBM filled + cutoff */}
CBM FILLED
{cbm} / 68
CUTOFF
{ch}h {cm}m
);
}
// ——— Trucking: side-view semi driving, dynamic road + live telemetry
function TruckingHero() {
const [t, setT] = useStateSh(0);
useEffectSh(() => {
let r; const loop = () => { setT(x => x + 1); r = requestAnimationFrame(loop); };
r = requestAnimationFrame(loop);
return () => cancelAnimationFrame(r);
}, []);
// ETA minutes, counting down so it feels alive
const etaBase = 238;
const eta = Math.max(1, etaBase - Math.floor(t / 60));
const h = String(Math.floor(eta / 60)).padStart(1, '0');
const m = String(eta % 60).padStart(2, '0');
// Speed needle wobble (around 64 mph)
const mph = Math.round(64 + Math.sin(t * 0.05) * 2);
const palette = { bg1: '#F0F6FF', bg2: '#DCE9FB', border: '#CCDCF5' };
const TRUCK_VIDEO_URL = '../uploads/optimized/trucking.mp4';
return (
{/* ——— Video motion layer (semi-truck driving) ——— */}
{/* Soft warm tint for on-brand color consistency */}
{/* ——— Live telemetry card (top-left, over the "sky") ——— */}
{/* header */}
LIVE
ABG-4412
{/* route */}
LAXCHI
{/* progress bar */}
{/* stats row */}
SPEED
{mph} mph
ETA
{h}h {m}m
);
}
function Wheel({ cx, cy, angle, size = 8 }) {
return (
{/* tire */}
{/* rim */}
{/* spokes */}
{/* hub */}
);
}
// ——— Order Management: PO list with live status
function OrderMgmtHero() {
const rows = [
['PO-4192', 'Vendor A', 'In transit', '#12b76a'],
['PO-4188', 'Vendor B', 'Cargo ready', '#1E57D6'],
['PO-4186', 'Vendor C', 'Delayed', '#F97316'],
['PO-4181', 'Vendor A', 'Cleared', '#12b76a'],
['PO-4175', 'Vendor D', 'Delivered', '#98a2b3'],
];
return (
{/* ——— Video motion layer (plays once, no replay UI) ——— */}
{/* Brand-blue tint so the video blends with the rest of the palette */}
{/* ——— Live prep-line telemetry card (right edge, vertically centered, masks label-printer station) ——— */}
{/* ——— Video motion layer (plays once, click to replay) ——— */}
{/* Frame matches the video's native 1488×608 (~2.45) so the image fills */}
{/* edge-to-edge with zero letterboxing and zero cropping. */}
{/* Brand-blue tint so the video blends with the rest of the palette */}
{/* ——— Replay affordance (fades in when the video has ended) ——— */}
);
}
// ——— Frozen Logistics: video-backed reefer + live temperature telemetry chart
function FrozenHero() {
const [t, setT] = useStateSh(0);
const frozenVideoRef = useRefSh(null);
const [frozenVideoEnded, setFrozenVideoEnded] = useStateSh(false);
useEffectSh(() => {
const i = setInterval(() => setT(v => v + 1), 80);
return () => clearInterval(i);
}, []);
const replayFrozenVideo = () => {
const v = frozenVideoRef.current;
if (!v) return;
setFrozenVideoEnded(false);
try { v.currentTime = 0; } catch {}
const p = v.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
};
// Auto-replay whenever the hero scrolls back into view (after having ended).
useEffectSh(() => {
const v = frozenVideoRef.current;
if (!v || typeof IntersectionObserver === 'undefined') return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && v.ended) replayFrozenVideo();
});
}, { threshold: 0.35 });
io.observe(v);
return () => io.disconnect();
}, []);
// Generate a stable temperature trace around -18°C setpoint with tiny noise.
const points = Array.from({ length: 60 }, (_, i) => {
const phase = (i + t * 0.3) * 0.18;
const noise = Math.sin(phase) * 0.25 + Math.sin(phase * 2.3) * 0.1;
return -18 + noise;
});
const current = points[points.length - 1].toFixed(1);
// Plot coords inside the chart card (measured in %s of its own SVG viewBox 400x110)
const cx0 = 22, cx1 = 378, cy0 = 92, cy1 = 26;
const tempMin = -19.2, tempMax = -16.8;
const sx = (i) => cx0 + (i / (points.length - 1)) * (cx1 - cx0);
const sy = (v) => cy0 - ((v - tempMin) / (tempMax - tempMin)) * (cy0 - cy1);
const path = points.map((v, i) => `${i === 0 ? 'M' : 'L'} ${sx(i).toFixed(1)} ${sy(v).toFixed(2)}`).join(' ');
const area = `${path} L ${cx1} ${cy0} L ${cx0} ${cy0} Z`;
const palette = { bg1: '#EFF6FF', bg2: '#DBEAFE', border: '#BFDBFE' };
const FROZEN_VIDEO_URL = '../uploads/optimized/frozen-reefer.mp4';
return (
{/* ——— Video motion layer (plays once, no loop) ——— */}
{/* Cool blue tint so the video blends with the brand palette */}
{frozenVideoEnded && (<>
{/* ——— Live telemetry card (matches Trucking / Air / Break Bulk pattern) ——— */}
{/* header */}
LIVE
ABGU-4729
{/* route */}
ROTNYC
{/* mini trace */}
{/* stats row */}
TEMP
{current}°C
SETPOINT
−18.0°C
)}
{frozenVideoEnded && (
)}
);
}
// ——— Break Bulk: video-backed hero (crane loading heavy cargo)
function BreakBulkHero() {
const [t, setT] = useStateSh(0);
const bbVideoRef = useRefSh(null);
const [bbVideoEnded, setBbVideoEnded] = useStateSh(false);
useEffectSh(() => {
let r; const loop = () => { setT(x => x + 1); r = requestAnimationFrame(loop); };
r = requestAnimationFrame(loop);
return () => cancelAnimationFrame(r);
}, []);
const replayBbVideo = () => {
const v = bbVideoRef.current;
if (!v) return;
setBbVideoEnded(false);
try { v.currentTime = 0; } catch {}
const p = v.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
};
// Auto-replay when hero scrolls back into view after ending
useEffectSh(() => {
const v = bbVideoRef.current;
if (!v || typeof IntersectionObserver === 'undefined') return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && v.ended) replayBbVideo();
});
}, { threshold: 0.35 });
io.observe(v);
return () => io.disconnect();
}, []);
// Live counters for the telemetry card
const etaBase = 186;
const eta = Math.max(1, etaBase - Math.floor(t / 60));
const h = String(Math.floor(eta / 60)).padStart(1, '0');
const m = String(eta % 60).padStart(2, '0');
const tons = Math.round(482 + Math.sin(t * 0.04) * 3);
const palette = { bg1: '#F0F6FF', bg2: '#DCE9FB', border: '#CCDCF5' };
const BB_VIDEO_URL = '../uploads/optimized/break-bulk.mp4';
return (
{/* ——— Video motion layer (plays once, replays on re-entry) ——— */}
{/* ——— Live telemetry card (revealed after video ends) ——— */}
{bbVideoEnded && (
{/* ——— Video motion layer (plays once, autostops) ——— */}
{/* Brand-blue tint for consistency with sibling service heroes */}
{/* ——— Live duty savings telemetry card (top-left, 80%) ——— */}
SAVINGS STACK
ENG-{2184 + mIdx}
{/* Mechanism being stacked */}
{_t('hero.duty.mechanism')}
{mech.code}
{mech.impact}
{/* Stack depth */}
STACK DEPTH
{stackDepth}%
{/* Stats row */}
EFF. DUTY
{effRate}%
FTZ ACCTS
38
);
}
// ——— Tradeshow Logistics: convention floor video + live event telemetry
function TradeshowHero() {
const [t, setT] = useStateSh(0);
const tsVideoRef = useRefSh(null);
const [tsVideoEnded, setTsVideoEnded] = useStateSh(false);
useEffectSh(() => {
let r; const loop = () => { setT(x => x + 1); r = requestAnimationFrame(loop); };
r = requestAnimationFrame(loop);
return () => cancelAnimationFrame(r);
}, []);
const replayTsVideo = () => {
const v = tsVideoRef.current;
if (!v) return;
setTsVideoEnded(false);
try { v.currentTime = 0; } catch {}
const p = v.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
};
// Auto-replay when hero scrolls back into view
useEffectSh(() => {
const v = tsVideoRef.current;
if (!v || typeof IntersectionObserver === 'undefined') return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting && v.ended) replayTsVideo(); });
}, { threshold: 0.35 });
io.observe(v);
return () => io.disconnect();
}, []);
// Progress bar tracks video playback (or just animates if video missing)
const forkProgress = (t * 0.5) % 100;
// ETA countdown
const etaBase = 252;
const etaMin = Math.max(1, etaBase - Math.floor(t / 60));
const eh = String(Math.floor(etaMin / 60));
const em = String(etaMin % 60).padStart(2, '0');
// CWT counter
const cwt = (1840 + Math.floor(t / 8)).toLocaleString();
const palette = { bg1: '#F0F6FF', bg2: '#DCE9FB', border: '#CCDCF5' };
const TS_VIDEO_URL = '../uploads/optimized/tradeshow.mp4';
return (
{/* ——— Convention floor video ——— */}
{/* Brand-blue tint so the video blends with the rest of the palette */}
{/* ——— Live Show-Day telemetry card ——— */}
{/* ——— Video motion layer (plays once, click to replay) ——— */}
{/* Brand-blue tint for consistency with sibling service heroes */}
{/* ——— Live consolidation telemetry card ——— */}
HOLDING
SUITE-WB-204
USAWORLD1 PARCEL
BOXES
{boxesIn}
SAVED
{savedPct}%
{bhVideoEnded && (
)}
);
}
// ——— Compras Internacionales: video of warehouse + worldwide reach badges,
// with live receiving/shipping telemetry. Plays once on load (with auto-replay
// when scrolled back into view); click anywhere on the video to replay.
function ComprasInternacionalesHero() {
const [t, setT] = useStateSh(0);
const ciVideoRef = useRefSh(null);
useEffectSh(() => {
let r; const loop = () => { setT(x => x + 1); r = requestAnimationFrame(loop); };
r = requestAnimationFrame(loop);
return () => cancelAnimationFrame(r);
}, []);
const replayCiVideo = () => {
const v = ciVideoRef.current;
if (!v) return;
try { v.currentTime = 0; } catch (_) {}
const p = v.play();
if (p && typeof p.catch === 'function') p.catch(() => {});
};
useEffectSh(() => {
const v = ciVideoRef.current;
if (!v || typeof IntersectionObserver === 'undefined') return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting && v.ended) replayCiVideo();
});
}, { threshold: 0.35 });
io.observe(v);
return () => io.disconnect();
}, []);
const packagesIn = 3 + Math.floor((t / 80) % 9);
const consolidatedOut = 1 + Math.floor((t / 200) % 4);
const savedPct = 42 + Math.min(26, Math.floor((t / 16) % 28));
const palette = { bg1: '#F4F8FE', bg2: '#E5EEFB', border: '#D5E2F6' };
const CI_VIDEO_URL = '../uploads/grok-video-97b06b4b-1b6a-419f-a46e-e8dab79121d5-4cc6ba5f.mp4';
return (