// Header — sticky on scroll. Logo left, anchor nav center, primary CTA right.
function Header({ route, setRoute }) {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 8);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const navItem = (label, target) => (
{
if (target === 'how' || target === 'home') {
e.preventDefault();
setRoute(target);
window.scrollTo({ top: 0 });
}
}}
style={{
color: 'var(--charcoal-700)',
textDecoration: 'none',
fontSize: 15,
fontWeight: 400,
padding: '8px 12px',
borderRadius: 'var(--radius-md)',
}}
>
{label}
);
return (
);
}
window.Header = Header;