); } // ── Top-left brand watermark (always on, fades for end card) ──────────── function Watermark({ t }) { const opacity = t < 13 ? 1 : ovClamp(1 - (t - 13) / 0.8, 0, 1); return (

{window.t ? window.t('v.brand') : 'FastFix · Home services'}

); } // ── Bottom-right timestamp counter (cinematic detail) ─────────────────── function TimeStamp({ t }) { const opacity = t < 13 ? 0.7 : ovClamp(1 - (t - 13) / 0.8, 0, 0.7); return (

REC ● 00:{String(Math.floor(t)).padStart(2,'0')}:{String(Math.floor((t%1)*100)).padStart(2,'0')}

); } // ── Scene A (0–3s): Hook caption — "It's late. Your phone won't stop." ─ function SceneHook({ t }) { const w = windowFade(t, 0.3, 3.2, 0.5, 0.5); if (!w.visible) return null; const rise = (1 - w.opacity) * 14; return (

{window.t ? window.t('v.chapter1') : 'Chapter 01 · The bottleneck'}

won't stop."}} style={{ fontFamily: OV_SERIF, fontStyle:'italic', fontSize: 76, color:'#fff', lineHeight: 0.98, letterSpacing:'-0.02em', textShadow:'0 4px 24px rgba(0,0,0,0.5)', }}/>

); } // ── Scene B (3–6s): Missed-call HUD ───────────────────────────────────── function SceneMissed({ t }) { const w = windowFade(t, 3.0, 6.2, 0.4, 0.5); if (!w.visible) return null; const calls = Math.min(7, Math.floor((t - 3.0) * 2.2)); const dollars = Math.min(4800, Math.floor((t - 3.0) * 1900)); return ( <> {/* Top callout pill */}

☎ {calls} missed calls · last 24h

{/* Big lower-third caption */}

{window.t ? window.t('v.missed') : 'Every voicemail is a job your competitor closes'}

${dollars.toLocaleString()}

{window.t ? window.t('v.missed.unit') : 'walking out the door every week.'}

); } // ── Scene C (6–9.5s): Brand reveal — "We solve your bottlenecks." ────── function SceneBrand({ t }) { const w = windowFade(t, 6.0, 9.6, 0.6, 0.5); if (!w.visible) return null; // Stagger the two lines const local = t - 6.0; const line1 = ovEase.outCubic(ovClamp(local / 0.7, 0, 1)); const line2 = ovEase.outCubic(ovClamp((local - 0.4) / 0.7, 0, 1)); const swipe = ovEase.outQuart(ovClamp(local / 0.9, 0, 1)); return ( <> {/* Gold sweep underline */}

{window.t ? window.t('v.chapter2') : 'Chapter 02 · The shift'}

{window.t ? window.t('v.brand.l1') : 'We solve your'}

{window.t ? window.t('v.brand.l2') : 'bottlenecks.'}

); } // ── Scene D (9.5–13s): Bottleneck chips flip red → green ──────────────── function SceneFlip({ t }) { const w = windowFade(t, 9.4, 13.2, 0.5, 0.6); if (!w.visible) return null; const items = window.t ? [ window.t('v.flip.b1'), window.t('v.flip.b2'), window.t('v.flip.b3'), window.t('v.flip.b4'), window.t('v.flip.b5'), window.t('v.flip.b6'), ] : [ 'Missed calls', 'Inbox chaos', 'No funnel', 'Silent socials', 'Invisible on Google', 'Crew confusion', ]; const local = t - 9.4; return ( <>

{window.t ? window.t('v.flip.h') : 'Bottlenecks → systems'}

{items.map((label, i) => { const flipStart = 0.25 + i * 0.32; const flipT = ovEase.outCubic(ovClamp((local - flipStart) / 0.45, 0, 1)); const appear = ovEase.outCubic(ovClamp((local - flipStart + 0.3) / 0.5, 0, 1)); const flipped = flipT > 0.5; return (

{label} {flipped ? (window.t ? window.t('v.flip.solved') : '✓ solved') : '✕'}

); })}

{/* Left lower-third caption */}

{window.t ? window.t('v.flip.cap') : 'One stack · one team · one price'}

{window.t ? window.t('v.flip.t1') : 'Seven systems'}
{window.t ? window.t('v.flip.t2') : 'that compound.'}

); } // ── Scene E (13–15s): End card — logo, slogan, CTA ────────────────────── function SceneEndCard({ t }) { const local = t - 13.0; if (local < 0) return null; const veil = ovEase.outCubic(ovClamp(local / 0.8, 0, 1)); const t1 = ovEase.outCubic(ovClamp((local - 0.2) / 0.6, 0, 1)); const t2 = ovEase.outCubic(ovClamp((local - 0.5) / 0.6, 0, 1)); const t3 = ovEase.outBack(ovClamp((local - 0.9) / 0.6, 0, 1)); return (

{window.t ? window.t('v.end.l1') : 'We solve your'} {window.t ? window.t('v.end.l2') : 'bottlenecks.'}

{window.t ? window.t('v.end.tag') : 'Home services · Free 14 day trial'}

{window.t ? window.t('v.end.cta') : 'Claim your bottleneck audit →'}

); } // ── Voice loader: pulls cached MP3 from IndexedDB (or fetches from ElevenLabs) ── async function loadAudioBlob(key) { // 1. Try IndexedDB cache try { const blob = await new Promise((resolve) => { const req = indexedDB.open('fastfix-voice', 1); req.onupgradeneeded = () => req.result.createObjectStore('audio'); req.onsuccess = () => { const tx = req.result.transaction('audio', 'readonly'); const g = tx.objectStore('audio').get(key); g.onsuccess = () => resolve(g.result || null); g.onerror = () => resolve(null); }; req.onerror = () => resolve(null); }); return blob; } catch { return null; } } // ── Master ────────────────────────────────────────────────────────────── function HomeServicesOverlayVideo() { const videoRef = React.useRef(null); const audioRef = React.useRef(null); const musicRef = React.useRef(null); const t = useVideoTime(videoRef); const [playing, setPlaying] = React.useState(true); const [muted, setMuted] = React.useState(true); const [duration, setDuration] = React.useState(15); const [showChrome, setShowChrome] = React.useState(true); const [voiceReady, setVoiceReady] = React.useState(false); // Re-render on language change so overlay text refreshes const [, setLangVer] = React.useState(0); React.useEffect(() => { const onLang = () => setLangVer(v => v + 1); window.addEventListener('langchange', onLang); return () => window.removeEventListener('langchange', onLang); }, []); const hideTimerRef = React.useRef(null); // Load voice + music from IndexedDB on mount React.useEffect(() => { let cancelled = false; const urls = []; Promise.all([loadAudioBlob('hero-bg-voice'), loadAudioBlob('hero-bg-music')]).then(([voiceBlob, musicBlob]) => { if (cancelled) return; if (voiceBlob && audioRef.current) { const u = URL.createObjectURL(voiceBlob); urls.push(u); audioRef.current.src = u; audioRef.current.load(); setVoiceReady(true); } if (musicBlob && musicRef.current) { const u = URL.createObjectURL(musicBlob); urls.push(u); musicRef.current.src = u; musicRef.current.volume = 0.32; // ducked under VO musicRef.current.load(); } }); return () => { cancelled = true; urls.forEach((u) => URL.revokeObjectURL(u)); }; }, []); // Keep both audio tracks synced with the video on play/pause/drift React.useEffect(() => { const v = videoRef.current; const a = audioRef.current; const m = musicRef.current; if (!v) return; [a, m].forEach((el) => { if (!el || !el.src) return; el.muted = muted; if (!v.paused && playing) { if (Math.abs(el.currentTime - v.currentTime) > 0.25) el.currentTime = v.currentTime; if (el.paused) el.play().catch(() => {}); } else { if (!el.paused) el.pause(); } }); }); // When user scrubs the video, seek both tracks too React.useEffect(() => { const v = videoRef.current; const a = audioRef.current; const m = musicRef.current; if (!v) return; const onSeek = () => { if (a && a.src) a.currentTime = v.currentTime; if (m && m.src) m.currentTime = v.currentTime; }; v.addEventListener('seeked', onSeek); return () => v.removeEventListener('seeked', onSeek); }, [voiceReady]); // Loop the video manually (so we can also handle weird browsers) React.useEffect(() => { const v = videoRef.current; if (!v) return; const tryPlay = () => v.play().then(() => setPlaying(true)).catch(() => {}); const onMeta = () => { setDuration(v.duration || 15); tryPlay(); }; const onPlay = () => setPlaying(true); const onPause = () => setPlaying(false); v.addEventListener('loadedmetadata', onMeta); v.addEventListener('play', onPlay); v.addEventListener('pause', onPause); tryPlay(); return () => { v.removeEventListener('loadedmetadata', onMeta); v.removeEventListener('play', onPlay); v.removeEventListener('pause', onPause); }; }, []); // Auto-hide chrome after a few seconds of no movement const bumpChrome = React.useCallback(() => { setShowChrome(true); if (hideTimerRef.current) clearTimeout(hideTimerRef.current); hideTimerRef.current = setTimeout(() => setShowChrome(false), 2400); }, []); React.useEffect(() => { bumpChrome(); return () => clearTimeout(hideTimerRef.current); }, [bumpChrome]); const togglePlay = () => { const v = videoRef.current; if (!v) return; if (v.paused) v.play(); else v.pause(); bumpChrome(); }; const toggleMute = () => { const a = audioRef.current; const m = musicRef.current; const next = !muted; setMuted(next); [a, m].forEach((el) => { if (!el) return; el.muted = next; if (!next && el.src) { el.currentTime = videoRef.current?.currentTime || 0; el.play().catch(() => {}); } }); // Toggle browser SpeechSynthesis narration too (works without external audio files) if (typeof window.toggleVoiceover === 'function') { if (next) window.stopVoiceover && window.stopVoiceover(); else window.startVoiceover && window.startVoiceover(); } bumpChrome(); }; const seek = (newT) => { const v = videoRef.current; if (!v) return; v.currentTime = Math.max(0, Math.min(duration - 0.05, newT)); bumpChrome(); }; // Keyboard shortcuts: space play/pause, ← → seek, m mute React.useEffect(() => { const onKey = (e) => { if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return; if (e.code === 'Space') { e.preventDefault(); togglePlay(); } else if (e.code === 'ArrowLeft') { e.preventDefault(); seek((videoRef.current?.currentTime || 0) - (e.shiftKey ? 1 : 0.2)); } else if (e.code === 'ArrowRight') { e.preventDefault(); seek((videoRef.current?.currentTime || 0) + (e.shiftKey ? 1 : 0.2)); } else if (e.key === 'm' || e.key === 'M') { toggleMute(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [duration]); return (