/* ============================================================
* components.jsx — VideoBackground, SplitText, Icons, Navbar
* ============================================================ */
/* ---- VideoBackground
Lazily attaches its src when the element scrolls into view. Pass eager
to load immediately (used by the hero so it plays on first paint). ---- */
function VideoBackground({ src, flip = false, opacity = 1, className = "", eager = false }) {
const wrapRef = React.useRef(null);
const [shouldLoad, setShouldLoad] = React.useState(eager);
React.useEffect(() => {
if (shouldLoad) return;
if (!wrapRef.current) return;
if (typeof IntersectionObserver === 'undefined') { setShouldLoad(true); return; }
const el = wrapRef.current;
const io = new IntersectionObserver((entries) => {
if (entries.some((e) => e.isIntersecting)) {
setShouldLoad(true);
io.disconnect();
}
}, { rootMargin: '400px' });
io.observe(el);
// Safety net in case IO doesn't fire (some iframes / older WebKit)
const fallback = setTimeout(() => setShouldLoad(true), 1500);
return () => { io.disconnect(); clearTimeout(fallback); };
}, [shouldLoad]);
return (
{shouldLoad && (
)}
);
}
/* ---- SplitText (GSAP-driven char-by-char fade up)
Accepts a flat array of: strings, , and inline elements like .
Inline elements contribute their text content but tag those chars so the
parent's style (e.g. italic) survives the per-char split. ---- */
function SplitText({ children, className = "", delay = 0, style }) {
const ref = React.useRef(null);
// Recursively pull plain text from any React node — strings, arrays,
// and elements (some runtimes wrap text in helper components, so
// c.props.children may itself be an element).
const extractText = React.useCallback((n) => {
if (n == null || n === false) return '';
if (typeof n === 'string' || typeof n === 'number') return String(n);
if (Array.isArray(n)) return n.map(extractText).join('');
if (n && n.props) return extractText(n.props.children);
return '';
}, []);
// Build an array of lines, where each line is an array of
// { text, style } segments. ends a line; /other elements
// become a segment with their inline style.
const lines = React.useMemo(() => {
const list = Array.isArray(children) ? children : [children];
const out = [];
let cur = [];
list.forEach((c) => {
if (c == null || c === false) return;
if (typeof c === 'string' || typeof c === 'number') {
cur.push({ text: String(c), style: null });
} else if (c && c.type === 'br') {
out.push(cur);
cur = [];
} else if (c && c.props) {
cur.push({
text: extractText(c.props.children),
style: c.props.style || null,
tag: c.type,
});
}
});
out.push(cur);
return out;
}, [children, extractText]);
React.useEffect(() => {
if (!ref.current || !window.gsap) return;
const chars = ref.current.querySelectorAll('.st-char');
window.gsap.set(chars, { yPercent: 110, opacity: 0 });
window.gsap.to(chars, {
yPercent: 0,
opacity: 1,
duration: 1.1,
ease: 'expo.out',
stagger: 0.022,
delay,
});
}, [delay, lines]);
return (