// Fixed header — logo lockup with byline, section links, gold triage CTA.
// Scroll-spy highlights the active section; mobile collapses to a sheet.
function Nav() {
const links = [
{ label: 'The Problem', id: '#problem' },
{ label: 'Services', id: '#services' },
{ label: 'Methodology', id: '#methodology' },
{ label: 'About', id: '#about' },
];
const [active, setActive] = React.useState('#problem');
const [scrolled, setScrolled] = React.useState(false);
const [menu, setMenu] = React.useState(false);
React.useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 12);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
React.useEffect(() => {
const ids = links.map((l) => l.id.slice(1));
const onScroll = () => {
const mid = window.innerHeight * 0.4;
let current = ids[0];
for (const id of ids) {
const el = document.getElementById(id);
if (el && el.getBoundingClientRect().top <= mid) current = id;
}
setActive('#' + current);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const go = (e, id) => {
e.preventDefault();
setMenu(false);
const t = document.querySelector(id);
if (t) t.scrollIntoView({ behavior: 'auto', block: 'start' });
};
const LogoLockup = (
go(e, '#top')}>
Franz Schöning
Principal Enterprise Architect
);
return (
{LogoLockup}