// Sticky nav with frosted glass; adapts to dark sections
function Nav() {
const [scrolled, setScrolled] = React.useState(false);
const [onDark, setOnDark] = React.useState(false);
const [time, setTime] = React.useState('');
React.useEffect(() => {
const t = () => {
const d = new Date();
setTime(d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }));
};
t();
const id = setInterval(t, 30000);
return () => clearInterval(id);
}, []);
React.useEffect(() => {
const onScroll = () => {
setScrolled(window.scrollY > 40);
// Detect if nav overlaps a dark section
const darkEls = document.querySelectorAll('[data-nav-dark]');
let dark = false;
darkEls.forEach(el => {
const r = el.getBoundingClientRect();
if (r.top <= 40 && r.bottom >= 68) dark = true;
});
setOnDark(dark);
};
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
{ label: 'Products', href: '#products', n: '01' },
{ label: 'How', href: '#how', n: '02' },
{ label: 'Owners', href: '#owners', n: '03' },
{ label: 'Record', href: '#record', n: '04' },
];
const smoothScrollTo = (e) => {
const href = e.currentTarget.getAttribute('href');
if (!href || !href.startsWith('#') || href === '#') return;
const target = document.getElementById(href.slice(1));
if (!target) return;
e.preventDefault();
const navH = window.scrollY > 40 ? 60 : 72;
const top = target.getBoundingClientRect().top + window.scrollY - navH + 1;
window.scrollTo({ top, behavior: 'smooth' });
if (history.pushState) history.pushState(null, '', href);
};
return (
<>
);
}
window.Nav = Nav;