const ProblemSection = () => { const sectionRef = React.useRef(null); const videoRef = React.useRef(null); const [visible, setVisible] = React.useState(false); const [videoLoaded, setVideoLoaded] = React.useState(false); const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768); const [brokenActive, setBrokenActive] = React.useState(-1); const [goodActive, setGoodActive] = React.useState(-1); const brokenFlow = ['Traffic', 'Listing', 'Interest', 'Drop-off']; const goodFlow = ['Traffic', 'Inquiry', 'Response', 'Booking', 'Viewing']; React.useEffect(() => { const h = () => setIsMobile(window.innerWidth < 768); window.addEventListener('resize', h); return () => window.removeEventListener('resize', h); }, []); React.useEffect(() => { const observer = new IntersectionObserver( ([e]) => { if (e.isIntersecting) { setVisible(true); observer.disconnect(); } }, { threshold: 0.12 } ); if (sectionRef.current) observer.observe(sectionRef.current); return () => observer.disconnect(); }, []); React.useEffect(() => { const vid = videoRef.current; if (!vid) return; vid.muted = true; vid.playsInline = true; const tryPlay = () => vid.play().catch(() => {}); vid.addEventListener('canplay', tryPlay); vid.addEventListener('loadeddata', () => setVideoLoaded(true)); tryPlay(); return () => vid.removeEventListener('canplay', tryPlay); }, []); // Start sequential node glow animations once the section is visible React.useEffect(() => { if (!visible) return; let bInterval, gInterval; // Delay start so entrance animations finish first const t1 = setTimeout(() => { setBrokenActive(0); bInterval = setInterval(() => { setBrokenActive(prev => (prev + 1) % brokenFlow.length); }, 950); }, 900); const t2 = setTimeout(() => { setGoodActive(0); gInterval = setInterval(() => { setGoodActive(prev => (prev + 1) % goodFlow.length); }, 820); }, 1300); return () => { clearTimeout(t1); clearTimeout(t2); clearInterval(bInterval); clearInterval(gInterval); }; }, [visible]); // --- Node renderers --- function renderBrokenNode(step, i) { const isActive = i === brokenActive; const isLast = i === brokenFlow.length - 1; return (
{step}
{i < brokenFlow.length - 1 && ( )}
); } function renderGoodNode(step, i) { const isActive = i === goodActive; const isLast = i === goodFlow.length - 1; return (
{step}
{i < goodFlow.length - 1 && ( )}
); } return (
); }; Object.assign(window, { ProblemSection });