const { useState, useEffect, useRef } = React;
// ── Shared hook ───────────────────────────────────────────────
function useReveal() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const obs = new IntersectionObserver(
([entry]) => { if (entry.isIntersecting) el.classList.add('revealed'); },
{ threshold: 0.05, rootMargin: '0px 0px -40px 0px' }
);
obs.observe(el);
return () => obs.disconnect();
}, []);
return ref;
}
// ── Icons ─────────────────────────────────────────────────────
function IconArrow() {
return ;
}
function IconPlay() {
return ;
}
function IconSpotify() {
return ;
}
function IconMusic() {
return ;
}
function IconCalendar() {
return ;
}
// ── Navbar ────────────────────────────────────────────────────
function Navbar() {
const [scrolled, setScrolled] = useState(false);
const [mobileOpen, setMobileOpen] = useState(false);
const { user, openModal } = useAuth();
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
window.addEventListener('scroll', onScroll);
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
{ label: 'About', href: '#about' },
{ label: 'Music', href: '#music' },
{ label: 'Shows', href: '#shows' },
{ label: 'Contact', href: '#contact' },
];
return (
);
}
Object.assign(window, { Navbar, useReveal, IconArrow, IconPlay, IconSpotify, IconMusic, IconCalendar });