// Variant J — the "best of" composite page. // Stitches together the strongest moments from variants A/D/G/I + new // components: SavingsCalculator, CancelLinkedInMini, IntegrationsGrid, // SecurityStrip, CustomerQuotes, SameBriefSplit, TickerLive, MigrationTimeline. /* ============================================================ HeroVideo — big click-to-play video card for the hero right column. Custom-branded controls (not native). Expand = in-page theater mode with blurred backdrop, NOT native fullscreen. ============================================================ */ const HERO_VIDEO_POSTER = 'assets/video-poster.png'; // Scout UI on blue gradient const fmtTime = (s) => { if (!isFinite(s) || s < 0) return '0:00'; const m = Math.floor(s / 60); const ss = Math.floor(s % 60).toString().padStart(2, '0'); return `${m}:${ss}`; }; // Inline SVG icons — 24×24 viewBox, currentColor fill/stroke const VIcon = { play: , pause: , vol: , muted: , expand: , close: , }; function CtrlBtn({ children, onClick, label }) { const [hover, setHover] = React.useState(false); return ( ); } function HeroVideo({ src, poster = HERO_VIDEO_POSTER }) { const videoRef = React.useRef(null); const [started, setStarted] = React.useState(false); const [playing, setPlaying] = React.useState(false); const [current, setCurrent] = React.useState(0); const [duration, setDuration] = React.useState(0); const [buffered, setBuffered] = React.useState(0); const [muted, setMuted] = React.useState(false); const [theater, setTheater] = React.useState(false); const [scrubbing, setScrubbing] = React.useState(false); const [ctrlsVisible, setCtrlsVisible] = React.useState(true); const hideTimerRef = React.useRef(null); // Show controls; restart the 2s auto-hide timer if playing const showCtrls = React.useCallback(() => { setCtrlsVisible(true); clearTimeout(hideTimerRef.current); const v = videoRef.current; if (v && !v.paused) { hideTimerRef.current = setTimeout(() => setCtrlsVisible(false), 2000); } }, []); // Mouse leaves card — hide only if playing (paused → keep visible) const hideCtrls = React.useCallback(() => { clearTimeout(hideTimerRef.current); const v = videoRef.current; if (v && !v.paused) setCtrlsVisible(false); }, []); React.useEffect(() => () => clearTimeout(hideTimerRef.current), []); const togglePlay = React.useCallback(() => { const v = videoRef.current; if (!v) return; if (v.paused) { setStarted(true); v.play().then(() => setPlaying(true)).catch(() => {}); } else { v.pause(); } }, []); const toggleMute = React.useCallback(() => { const v = videoRef.current; if (!v) return; v.muted = !v.muted; setMuted(v.muted); }, []); // ESC closes theater; space toggles play when theater open React.useEffect(() => { if (!theater) return; const onKey = (e) => { if (e.key === 'Escape') setTheater(false); if (e.key === ' ' || e.code === 'Space') { e.preventDefault(); togglePlay(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [theater, togglePlay]); // Lock body scroll during theater mode React.useEffect(() => { if (!theater) return; const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = prev; }; }, [theater]); const seekFromPointer = (e) => { const v = videoRef.current; if (!v || !duration) return; const rect = e.currentTarget.getBoundingClientRect(); const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)); v.currentTime = ratio * duration; setCurrent(ratio * duration); }; const pct = duration ? (current / duration) * 100 : 0; const bufPct = duration ? (buffered / duration) * 100 : 0; return (
{/* Stage — absolute-fills-parent normally, fixed-viewport in theater mode */}
{ if (e.target === e.currentTarget) setTheater(false); } : undefined} > {theater && ( )} {/* Card */}