import { useEffect, useState, lazy, Suspense } from 'react';
// Lazy load FloatingPaths - it's just decoration and shouldn't block initial render
const FloatingPaths = lazy(() => import('./FloatingPaths').then(m => ({ default: m.FloatingPaths })));
const GlobalBackground = () => {
const [scrollPosition, setScrollPosition] = useState(0);
const [showPaths, setShowPaths] = useState(false);
useEffect(() => {
const handleScroll = () => {
setScrollPosition(window.scrollY * 0.001);
};
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Delay loading FloatingPaths until after initial render
useEffect(() => {
const timer = setTimeout(() => setShowPaths(true), 2000);
return () => clearTimeout(timer);
}, []);
return (
<>
{/* Background layer - behind everything */}
{/* Gradient overlay */}
{/* FloatingPaths layer - lazy loaded after 2s */}
{showPaths && (
)}
{/* Simple animated lines with CSS */}
{/* Grid overlay */}
);
};
export default GlobalBackground;