"use client"; import { useEffect, useState } from "react"; import { ChevronDown } from "lucide-react"; import Image from "next/image"; const roles = [ "Broadcast Systems Integration", "Production Facility Design", "IP & Cloud Production", "Extended Reality Stages", ]; export default function Hero() { const [loaded, setLoaded] = useState(false); const [roleIndex, setRoleIndex] = useState(0); const [displayText, setDisplayText] = useState(""); const [isTyping, setIsTyping] = useState(true); useEffect(() => { const t = setTimeout(() => setLoaded(true), 100); return () => clearTimeout(t); }, []); // Typewriter effect for roles useEffect(() => { const currentRole = roles[roleIndex]; if (isTyping) { if (displayText.length < currentRole.length) { const timer = setTimeout(() => { setDisplayText(currentRole.slice(0, displayText.length + 1)); }, 50); return () => clearTimeout(timer); } else { const timer = setTimeout(() => setIsTyping(false), 2500); return () => clearTimeout(timer); } } else { if (displayText.length > 0) { const timer = setTimeout(() => { setDisplayText(displayText.slice(0, -1)); }, 25); return () => clearTimeout(timer); } else { setRoleIndex((prev) => (prev + 1) % roles.length); setIsTyping(true); } } }, [displayText, isTyping, roleIndex]); return (

{/* Hero background photo */}