function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const items = ['The Night', 'What’s Included', 'The Offer', 'Guarantee', 'FAQ'];
  const ids   = ['future',     'mechanism',       'offer',      'guarantee', 'faq'];

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
  };

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: '14px 40px',
      background: scrolled ? 'rgba(11,11,12,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(10px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(198,165,92,.22)' : '1px solid transparent',
      display: 'flex', alignItems: 'center', gap: 28,
      transition: 'background 400ms cubic-bezier(0.22,0.61,0.36,1), border-color 400ms',
    }}>
      <a href="#top" style={{ cursor: 'pointer', border: 0, display: 'flex', alignItems: 'center', gap: 14 }}>
        <img src="assets/logo-white-full.png" style={{ height: 44, display: 'block' }} />
      </a>
      <div style={{
        paddingLeft: 18, marginLeft: 4, borderLeft: '1px solid rgba(232,201,121,.3)',
        fontFamily: 'Jost, sans-serif', fontWeight: 500, fontSize: 10,
        letterSpacing: '0.28em', textTransform: 'uppercase', color: '#E8C979',
        lineHeight: 1.3,
      }}>
        Executive<br/>Entertainment Night
      </div>
      <div style={{ flex: 1 }} />
      <div style={{ display: 'flex', gap: 28 }} className="nav-links">
        {items.map((label, i) => (
          <a key={label} onClick={() => scrollTo(ids[i])} style={{
            fontFamily: 'Jost, sans-serif', fontWeight: 500, fontSize: 11,
            letterSpacing: '0.22em', textTransform: 'uppercase',
            color: '#F6F1E6', cursor: 'pointer', border: 0, paddingBottom: 2,
          }}
          onMouseEnter={e => e.currentTarget.style.color = '#E8C979'}
          onMouseLeave={e => e.currentTarget.style.color = '#F6F1E6'}
          >{label}</a>
        ))}
      </div>
      <Button variant="primary" size="sm" onClick={() => scrollTo('cta')}>Book A Tour</Button>
    </nav>
  );
}
window.Nav = Nav;