function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMobile = useBreakpoint();

  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) => {
    setMenuOpen(false);
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 72, behavior: 'smooth' });
  };

  const bg = (scrolled || menuOpen) ? 'rgba(11,11,12,0.95)' : 'transparent';

  return (
    <>
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
        padding: isMobile ? '12px 20px' : '14px 40px',
        background: bg,
        backdropFilter: (scrolled || menuOpen) ? 'blur(10px)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(198,165,92,.22)' : '1px solid transparent',
        display: 'flex', alignItems: 'center', gap: 14,
        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' }}>
          <img src="assets/logo-white-full.png" style={{ height: isMobile ? 36 : 44, display: 'block' }} />
        </a>

        {!isMobile && (
          <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 }} />

        {isMobile ? (
          <button
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Toggle menu"
            style={{
              background: 'none', border: 0, cursor: 'pointer',
              padding: '6px 4px', color: '#E8C979',
              fontFamily: 'Jost, sans-serif', fontSize: 26, lineHeight: 1,
            }}
          >{menuOpen ? '×' : '☰'}</button>
        ) : (
          <>
            <div style={{ display: 'flex', gap: 28 }}>
              {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>

      {isMobile && menuOpen && (
        <div style={{
          position: 'fixed', top: 60, left: 0, right: 0, zIndex: 99,
          background: 'rgba(11,11,12,0.98)',
          borderBottom: '1px solid rgba(198,165,92,.3)',
          padding: '16px 20px 28px',
        }}>
          {items.map((label, i) => (
            <div key={label} style={{ borderBottom: '1px solid rgba(198,165,92,.12)' }}>
              <a onClick={() => scrollTo(ids[i])} style={{
                display: 'block', padding: '16px 0',
                fontFamily: 'Jost, sans-serif', fontWeight: 500, fontSize: 13,
                letterSpacing: '0.22em', textTransform: 'uppercase',
                color: '#F6F1E6', cursor: 'pointer',
              }}>{label}</a>
            </div>
          ))}
          <div style={{ marginTop: 20 }}>
            <Button variant="primary" size="md" block onClick={() => scrollTo('cta')}>Book A Tour</Button>
          </div>
        </div>
      )}
    </>
  );
}
window.Nav = Nav;