const { useState: useState_h, useRef: useRef_h, useEffect: useEffect_h } = React; // Particle starfield + connecting lines on hero canvas function Starfield() { const ref = useRef_h(null); useEffect_h(() => { const canvas = ref.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let w, h, dpr; const stars = []; const N = 110; function resize() { dpr = Math.min(window.devicePixelRatio || 1, 2); w = canvas.clientWidth; h = canvas.clientHeight; canvas.width = w * dpr; canvas.height = h * dpr; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } resize(); window.addEventListener('resize', resize); for (let i = 0; i < N; i++) { stars.push({ x: Math.random() * w, y: Math.random() * h, z: Math.random() * 0.8 + 0.2, vx: (Math.random() - 0.5) * 0.15, vy: (Math.random() - 0.5) * 0.15, r: Math.random() * 1.4 + 0.3, }); } let raf = 0; function tick() { ctx.clearRect(0, 0, w, h); // soft gradient overlay const grd = ctx.createRadialGradient(w * 0.7, h * 0.4, 0, w * 0.7, h * 0.4, Math.max(w, h) * 0.6); grd.addColorStop(0, 'rgba(0, 240, 255, 0.05)'); grd.addColorStop(1, 'rgba(0,0,0,0)'); ctx.fillStyle = grd; ctx.fillRect(0, 0, w, h); for (const s of stars) { s.x += s.vx; s.y += s.vy; if (s.x < 0) s.x = w; if (s.x > w) s.x = 0; if (s.y < 0) s.y = h; if (s.y > h) s.y = 0; ctx.beginPath(); ctx.arc(s.x, s.y, s.r * s.z, 0, Math.PI * 2); ctx.fillStyle = `rgba(${180 + 75 * s.z}, ${230 + 25 * s.z}, 255, ${0.25 + s.z * 0.5})`; ctx.fill(); } // connecting lines for nearby stars for (let i = 0; i < stars.length; i++) { for (let j = i + 1; j < stars.length; j++) { const a = stars[i], b = stars[j]; const dx = a.x - b.x, dy = a.y - b.y; const d2 = dx * dx + dy * dy; if (d2 < 110 * 110) { const o = (1 - d2 / (110 * 110)) * 0.18; ctx.strokeStyle = `rgba(0, 240, 255, ${o})`; ctx.lineWidth = 0.6; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.stroke(); } } } raf = requestAnimationFrame(tick); } raf = requestAnimationFrame(tick); return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); }; }, []); return ; } // Live waveform visual for hero agent (decorative) function Waveform({ bars = 28, color = '#00F0FF' }) { const [t, setT] = useState_h(0); useEffect_h(() => { let raf; let last = performance.now(); const tick = (now) => { if (now - last > 60) { setT((x) => x + 1); last = now; } raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return (
{Array.from({ length: bars }).map((_, i) => { const h = 6 + Math.abs(Math.sin((t + i) * 0.45 + i)) * 38; return (
); })}
); } function HeroAgentCard() { const { t } = useLang(); const photo = (typeof AGENT_PHOTOS !== 'undefined') ? AGENT_PHOTOS['PRIYA'] : null; const [calling, setCalling] = useState_h(false); const [elapsed, setElapsed] = useState_h(0); const videoRef = useRef_h(null); const playedOnce = useRef_h(false); const [hovering, setHovering] = useState_h(false); useEffect_h(() => { if (!calling) { setElapsed(0); return; } const id = setInterval(() => setElapsed((s) => s + 1), 1000); return () => clearInterval(id); }, [calling]); // S38: bridge React UI state to webcall.js (LiveKit) events useEffect_h(() => { const onConnected = () => setCalling(true); const onEnded = () => setCalling(false); const onError = (e) => { setCalling(false); alert((e && e.detail) || 'Call failed'); }; const onTryCall = () => window.dispatchEvent(new CustomEvent('hunara-call-start')); window.addEventListener('hunara-call-connected', onConnected); window.addEventListener('hunara-call-ended', onEnded); window.addEventListener('hunara-call-error', onError); window.addEventListener('try-call', onTryCall); return () => { window.removeEventListener('hunara-call-connected', onConnected); window.removeEventListener('hunara-call-ended', onEnded); window.removeEventListener('hunara-call-error', onError); window.removeEventListener('try-call', onTryCall); }; }, []); // Play video once on mount; pause when it ends; loop only while hovering. useEffect_h(() => { const v = videoRef.current; if (!v) return; const onEnded = () => { playedOnce.current = true; if (hovering) { try { v.currentTime = 0; v.play().catch(() => {}); } catch (e) {} } else { v.pause(); } }; v.addEventListener('ended', onEnded); // initial autoplay try { v.currentTime = 0; v.play().catch(() => {}); } catch (e) {} return () => v.removeEventListener('ended', onEnded); }, []); // React to hover changes once initial play is done useEffect_h(() => { const v = videoRef.current; if (!v) return; if (hovering) { try { v.play().catch(() => {}); } catch (e) {} } else if (playedOnce.current) { try { v.pause(); } catch (e) {} } }, [hovering]); const fmt = (s) => `${String(Math.floor(s/60)).padStart(2,'0')}:${String(s%60).padStart(2,'0')}`; return (
setHovering(true)} onMouseLeave={() => setHovering(false)} className="relative rounded-3xl overflow-hidden" style={{ width: 'min(440px, 92vw)', height: 'min(620px, 78vh)', background: 'linear-gradient(180deg, #0a0a14, #06060B)', border: '1px solid rgba(255,255,255,0.10)', boxShadow: '0 30px 80px -30px rgba(0,240,255,0.45), 0 1px 0 rgba(255,255,255,0.05) inset', }} > {/* Background media — fills the whole card */}
{photo && photo.video ? (