/* Morph menu — single nav for all viewports.
The rotating Beigman logo (top-right corner) acts as the trigger; clicking
it morphs a frosted-glass navy panel out from the logo's corner. Click the
logo again, click outside the panel, or press Esc to reverse the animation.
Replaces the old SideNav (desktop) + MobileNav fullscreen overlay. The
trigger button markup is identical to before — the existing logo video is
untouched. Only the overlay was redesigned. */
const NAV_ITEMS = [
{ id: "holistic-approach", label: "Holistic Approach" },
{ id: "projects", label: "Projects" },
{ id: "performance", label: "Performance Solutions" },
{ id: "process", label: "Roadmap" },
{ id: "services", label: "Services" },
{ id: "contact", label: "Contact" },
];
function useScrolled(offset = 40) {
const [y, setY] = React.useState(0);
React.useEffect(() => {
const onScroll = () => setY(window.scrollY);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return y > offset;
}
/* Scroll-direction listener: visible at the very top or while scrolling up,
hidden while scrolling down. rAF-throttled, small dead-zone to avoid jitter. */
function useScrollDirection() {
const [show, setShow] = React.useState(true);
React.useEffect(() => {
let last = window.scrollY;
let raf = 0;
const update = () => {
const y = window.scrollY;
if (y < 12) setShow(true);
else if (y > last + 4) setShow(false);
else if (y < last - 4) setShow(true);
last = y;
raf = 0;
};
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
window.addEventListener('scroll', onScroll, { passive: true });
return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
}, []);
return show;
}
/* Glassmorphic floating island — centered pill at the top, desktop only.
Hides on scroll-down, reappears on scroll-up. Coexists with the morph
logo trigger (top-right) which still owns the full overlay menu. */
function HeaderNav() {
const show = useScrollDirection();
return (
);
}
/* Persistent conversion CTA — hidden while inside the hero, fades in once
the user scrolls past it. Inner anchor reuses .m3-fill-btn for the premium
organic copper fill + lift on hover (origin follows the cursor via motion.js). */
function FloatingCTA() {
const [visible, setVisible] = React.useState(false);
React.useEffect(() => {
let raf = 0;
const update = () => { setVisible(window.scrollY >= window.innerHeight * 0.92); raf = 0; };
const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
update();
window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', update);
return () => {
window.removeEventListener('scroll', onScroll);
window.removeEventListener('resize', update);
if (raf) cancelAnimationFrame(raf);
};
}, []);
return (