// Site header — sticky, wordmark + nav + theme toggle.
const SiteHeader = ({ active, onNavigate, theme, onToggleTheme }) => {
const [scrolled, setScrolled] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 16);
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const NavLink = ({ id, children }) => (
{ e.preventDefault(); onNavigate(id); }}
style={{
color: active === id ? 'var(--ink)' : 'var(--ink-3)',
textDecoration: 'none',
fontSize: 14,
padding: '6px 0',
borderBottom: active === id ? '1px solid var(--ink)' : '1px solid transparent',
transition: 'color 120ms var(--ease-out), border-color 120ms var(--ease-out)',
whiteSpace: 'nowrap',
}}
onMouseEnter={(e) => { if (active !== id) e.currentTarget.style.color = 'var(--ink)'; }}
onMouseLeave={(e) => { if (active !== id) e.currentTarget.style.color = 'var(--ink-3)'; }}
>
{children}
);
return (
);
};
window.SiteHeader = SiteHeader;