function Nav({ onRegister, onPalette, palette }) {
	const [scrolled, setScrolled] = React.useState(false);
	const { isMobile } = useBreakpoint();

	React.useEffect(() => {
		const f = () => setScrolled(window.scrollY > 40);
		f();
		window.addEventListener('scroll', f, { passive: true });
		return () => window.removeEventListener('scroll', f);
	}, []);

	const linkStyle = {
		color: 'var(--hero-text, #fff)',
		fontFamily: 'var(--ff-body)',
		fontSize: 12,
		fontWeight: 600,
		letterSpacing: '0.16em',
		textTransform: 'uppercase',
		textDecoration: 'none',
		padding: '6px 2px',
	};

	const linkStyleScrolled = { ...linkStyle, color: 'var(--ink)' };

	const items = [
		['The Experience', '#experience'],
		['Schedule', '#schedule'],
		['Instructors', '#instructors'],
		['Pricing', '#pricing'],
		['FAQ', '#faq'],
	];

	return (
		<nav style={{
			position: 'fixed',
			top: 0, left: 0, right: 0,
			zIndex: 50,
			padding: scrolled
				? `14px ${isMobile ? 20 : 36}px`
				: `${isMobile ? 16 : 24}px ${isMobile ? 20 : 40}px`,
			display: 'flex',
			alignItems: 'center',
			justifyContent: 'space-between',
			background: scrolled ? 'rgba(253,246,238,0.86)' : 'transparent',
			backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
			WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
			borderBottom: scrolled ? '1px solid rgba(0,0,0,0.06)' : 'none',
			transition: 'all .3s ease',
		}}>
			<a href="#top" style={{ textDecoration: 'none', color: scrolled ? 'var(--ink)' : 'var(--hero-text, #fff)' }}>
				<div style={{
					fontFamily: 'var(--ff-display)',
					fontWeight: 900,
					fontSize: isMobile ? 17 : 20,
					letterSpacing: '-0.02em',
					lineHeight: 1,
				}}>
					Expression<span style={{ fontStyle: 'italic', fontWeight: 400, fontFamily: 'var(--ff-display-italic)' }}> Lab</span>
				</div>
				{!isMobile && (
					<div className="mono" style={{ fontSize: 9, opacity: 0.7, marginTop: 2, letterSpacing: '0.22em' }}>
						YOUTH WORKSHOP · 2026
					</div>
				)}
			</a>
			<div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 12 : 28 }}>
				{!isMobile && (
					<div style={{ display: 'flex', gap: 26 }} className="nav-links">
						{items.map(([label, href]) => (
							<a key={href} href={href} style={scrolled ? linkStyleScrolled : linkStyle}
								onMouseEnter={e => e.currentTarget.style.color = 'var(--pink)'}
								onMouseLeave={e => e.currentTarget.style.color = scrolled ? 'var(--ink)' : 'var(--hero-text, #fff)'}
							>{label}</a>
						))}
					</div>
				)}
				<button className="btn btn-primary" onClick={onRegister} style={{ padding: isMobile ? '10px 16px' : '12px 22px', fontSize: 12 }}>
					{isMobile ? 'Register →' : 'Reserve Spot →'}
				</button>
			</div>
		</nav>
	);
}
window.Nav = Nav;