// Hero, edge-to-edge video contained in a rounded frame with white margin.
// Style modeled on ELB Learning: white page, inset video panel, overlay headline + CTAs.
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;
function TypedLoop({ words, typeSpeed = 65, deleteSpeed = 35, pauseFull = 1400, pauseEmpty = 300 }) {
const [i, setI] = useStateH(0);
const [text, setText] = useStateH('');
const [phase, setPhase] = useStateH('typing'); // typing | pausing | deleting
useEffectH(() => {
let t;
const current = words[i];
if (phase === 'typing') {
if (text.length < current.length) {
t = setTimeout(() => setText(current.slice(0, text.length + 1)), typeSpeed);
} else {
t = setTimeout(() => setPhase('deleting'), pauseFull);
}
} else if (phase === 'deleting') {
if (text.length > 0) {
t = setTimeout(() => setText(current.slice(0, text.length - 1)), deleteSpeed);
} else {
t = setTimeout(() => {
setI((i + 1) % words.length);
setPhase('typing');
}, pauseEmpty);
}
}
return () => clearTimeout(t);
}, [text, phase, i, words]);
return (
{text}
);
}
function Hero({ tweaks }) {
const [mounted, setMounted] = useStateH(false);
const videoRef = useRefH(null);
useEffectH(() => {
const r = requestAnimationFrame(() => setMounted(true));
const t = setTimeout(() => setMounted(true), 80);
return () => { cancelAnimationFrame(r); clearTimeout(t); };
}, []);
return (
{/* Video well — autoplay is conditional on the user's reduced-motion preference.
When prefers-reduced-motion is "reduce" we omit autoPlay so the poster stays
visible (the video element pauses on the first frame). */}
{/* Legibility scrim, stronger at bottom for copy */}
{/* Content */}
{/* Headline + typing loop */}
Drive Real Business Results Through
{/* CTAs row, under the headline, left-aligned */}