// Shared SVG pieces and small helpers
const { useEffect, useRef, useState } = React;
function useInView(options = {}) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const el = ref.current;
// Fallback: if element is already in viewport on mount, reveal immediately
const check = () => {
const r = el.getBoundingClientRect();
const vh = window.innerHeight || document.documentElement.clientHeight;
if (r.top < vh * 0.92 && r.bottom > 0) { setInView(true); return true; }
return false;
};
if (check()) return;
const obs = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); obs.disconnect(); }
}, { threshold: 0.15, ...options });
obs.observe(el);
const onScroll = () => { if (check()) { obs.disconnect(); window.removeEventListener('scroll', onScroll); } };
window.addEventListener('scroll', onScroll, { passive: true });
return () => { obs.disconnect(); window.removeEventListener('scroll', onScroll); };
}, []);
return [ref, inView];
}
function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
const [ref, inView] = useInView();
return (
{children}
);
}
// Count-up with easing
function useCountUp(target, inView, duration = 1800) {
const [n, setN] = useState(0);
useEffect(() => {
if (!inView) return;
let raf, start;
const step = (t) => {
if (!start) start = t;
const p = Math.min(1, (t - start) / duration);
const eased = 1 - Math.pow(1 - p, 3);
setN(Math.floor(eased * target));
if (p < 1) raf = requestAnimationFrame(step);
else setN(target);
};
raf = requestAnimationFrame(step);
return () => cancelAnimationFrame(raf);
}, [inView, target]);
return n;
}
// Brand mark — architectural "DR" monogram (bridge pylon)
function BrandMark({ size = 26 }) {
return (
);
}
// Hero bridge — wide architectural horizon, restrained and iconic
function HeroBridge() {
// Wide aspect — meant to sit full-width behind the headline
// Two pylons, a thin illuminated deck, fine stay cables
return (
);
}
Object.assign(window, { useInView, Reveal, useCountUp, BrandMark, HeroBridge });