/* Nav · Hero · Marquee */
function Nav({ scrolled, active, onNav }) {
const links = [
['about', 'Über uns'], ['services', 'Leistungen'], ['projects', 'Projekte'],
['process', 'Ablauf'], ['why', 'Warum wir'], ['contact', 'Kontakt'],
];
const [menuOpen, setMenuOpen] = React.useState(false);
React.useEffect(() => {
const prev = document.body.style.overflow;
if (menuOpen) document.body.style.overflow = 'hidden';
else document.body.style.overflow = prev || '';
const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
document.addEventListener('keydown', onKey);
return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev || ''; };
}, [menuOpen]);
const go = (id) => { setMenuOpen(false); onNav(id); };
return (
<>
);
}
function Hero({ onNav }) {
return (
Bau · Sanierung · Service
Wir bauen,
was bleibt.
);
}
/* Scroll-scrubbed, frame-by-frame cinematic hero video.
currentTime is driven by scroll progress and eased toward the
target each frame so seeking feels smooth rather than steppy. */
function HeroVideo() {
const videoRef = React.useRef(null);
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const v = videoRef.current;
if (!v) return;
let dur = 0, ready = false;
let target = 0, current = 0;
const computeProgress = () => {
const hero = document.getElementById('top');
if (!hero) return 0;
const rect = hero.getBoundingClientRect();
// Scrub through the whole clip over the first ~90% of a viewport
// of scroll, finishing while the video is still on screen.
const range = Math.max(window.innerHeight * 0.9, 1);
const scrolled = Math.min(Math.max(-rect.top, 0), range);
return scrolled / range;
};
const seek = (p) => { if (ready) { try { v.currentTime = p * dur; } catch (e) {} } };
// rAF smoothing eases the seek between scroll events for buttery
// motion. If rAF is throttled (backgrounded tab), the scroll handler
// still seeks directly, so playback never stalls.
let rafId = 0;
const tick = () => {
current += (target - current) * 0.18;
if (Math.abs(target - current) < 0.0005) { current = target; rafId = 0; return; }
seek(current);
rafId = requestAnimationFrame(tick);
};
const onScroll = () => {
target = computeProgress();
setProgress(target);
seek(target); // direct, always works
if (!rafId) rafId = requestAnimationFrame(tick); // smooth if available
};
const onMeta = () => { dur = v.duration || 8; ready = true; current = target = computeProgress(); seek(current); setProgress(current); };
if (v.readyState >= 1) onMeta();
v.addEventListener('loadedmetadata', onMeta);
// iOS/Safari only allow seeking after a (muted) play gesture.
const pr = v.play(); if (pr && pr.catch) pr.then(() => v.pause()).catch(() => {});
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
onScroll();
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', onScroll);
v.removeEventListener('loadedmetadata', onMeta);
if (rafId) cancelAnimationFrame(rafId);
};
}, []);
return (
Colosseum · Zerfall & Wiederaufbau
);
}
/* Three concentric rotating rings + a ring of orange "stones". */
function Colosseum() {
const stones = Array.from({ length: 24 });
return (
{stones.map((_, i) => (
))}
);
}
function Marquee() {
const words = ['Abriss', 'Entkernung', 'Sanierung', 'Renovierung', 'Trockenbau', 'Malerarbeiten', 'Bodenarbeiten', 'Reinigung'];
const all = [...words, ...words];
return (
);
}
Object.assign(window, { Nav, Hero, Marquee });