// Hero — World-Class Dynamic Hero with Video, Particles & Animated Text const { useState, useEffect, useRef, useCallback, useMemo } = React; const slides = [ { titleLine1: 'WELCOME TO', titleHighlight: 'AEQ SAFETY', subtitle: 'Your One-Stop Safety & Engineering Solution Provider', accent: '#fbbf24' }, { titleLine1: 'SME-DELIVERED', titleHighlight: 'TRAINING', subtitle: 'Industry Specific Training Modules Delivered by Subject Matter Experts ( SMEs ) with Practical Sessions', accent: '#06b6d4' }, { titleLine1: 'NICHE INDUSTRY', titleHighlight: 'PROGRAMS', subtitle: 'HAZOP | Process Safety | Heavy Machinery for Mining, Quarry & Stockpiles | Agricultural Machineries for Plantation & Dairy Farms', accent: '#10b981' }, { titleLine1: 'CIMAH REPORTING', titleHighlight: '20+ YEARS', subtitle: 'Control of Industrial Major Accident Hazards Reporting with Over 20 Years Experience from Various Chemical Industries', accent: '#8b5cf6' }, { titleLine1: 'REGIONAL', titleHighlight: 'COVERAGE', subtitle: 'Operating Across Malaysia, Indonesia & Singapore', accent: '#f59e0b' } ]; function Hero({ t }) { const [current, setCurrent] = useState(0); const [isPaused, setIsPaused] = useState(false); const [isLoaded, setIsLoaded] = useState(false); const [mousePos, setMousePos] = useState({ x: 0.5, y: 0.5 }); const heroRef = useRef(null); // Floating particles const particles = useMemo(() => { return Array.from({ length: 40 }, (_, i) => ({ id: i, size: Math.random() * 4 + 2, left: Math.random() * 100, top: Math.random() * 100, duration: Math.random() * 25 + 20, delay: Math.random() * 15, opacity: Math.random() * 0.4 + 0.1 })); }, []); // Auto-advance slides - FAST (3 seconds) useEffect(() => { if (isPaused) return; const timeout = setTimeout(() => { setCurrent((prev) => (prev + 1) % slides.length); }, 3000); return () => clearTimeout(timeout); }, [current, isPaused]); // Set loaded after initial render useEffect(() => { setTimeout(() => setIsLoaded(true), 100); }, []); // Mouse parallax const handleMouseMove = useCallback((e) => { if (!heroRef.current) return; const rect = heroRef.current.getBoundingClientRect(); setMousePos({ x: (e.clientX - rect.left) / rect.width, y: (e.clientY - rect.top) / rect.height }); }, []); // Single video plays continuously const videoRef = useRef(null); useEffect(() => { if (videoRef.current) { videoRef.current.play().catch(() => {}); } }, []); const goTo = useCallback((index) => setCurrent(index), []); const next = useCallback(() => setCurrent((prev) => (prev + 1) % slides.length), []); const prev = useCallback(() => setCurrent((prev) => (prev - 1 + slides.length) % slides.length), []); const currentSlide = slides[current]; return (

setIsPaused(true)} onMouseLeave={() => setIsPaused(false)} onMouseMove={handleMouseMove} > {/* Single Video Background */}

{/* Animated Color Morphs */}

{/* Floating Particles */}

{particles.map(p => (

))}

{/* Content */}

{/* Animated Label */}

SAFETY EXCELLENCE SINCE 2013

{/* Main Title with Word Animation */}

{currentSlide.titleLine1.split(' ').map((word, i) => ( {word} {' '} ))} {currentSlide.titleHighlight.split(' ').map((word, i) => ( {word} {' '} ))}