(function() {
  var useState  = React.useState;
  var useEffect = React.useEffect;

  function Nav(props) {
    var active      = props.active;
    var navMap      = props.navMap      || {};
    var authUser    = props.authUser;
    var onLoginClick = props.onLoginClick;
    var onLogout    = props.onLogout;

    var _scrolled = useState(false); var scrolled = _scrolled[0], setScrolled = _scrolled[1];
    var _progress = useState(0);     var progress = _progress[0], setProgress = _progress[1];

    useEffect(function() {
      var onScroll = function() {
        setScrolled(window.scrollY > 40);
        var max = document.documentElement.scrollHeight - window.innerHeight;
        setProgress(max > 0 ? Math.min(1, window.scrollY / max) : 0);
      };
      window.addEventListener('scroll', onScroll, { passive: true });
      return function() { window.removeEventListener('scroll', onScroll); };
    }, []);

    var hover = function() { document.body.classList.add('hov'); };
    var leave = function() { document.body.classList.remove('hov'); };

    var initials = authUser
      ? authUser.name.split(' ').map(function(n){ return n[0]||''; }).join('').slice(0,2).toUpperCase()
      : null;

    // Determine which nav item is "active"
    var isActive = function(link) {
      var screen = navMap[link] || link.toLowerCase();
      if (screen === 'home') return active === 'home' || !['projects','project-detail','ar-demo','funding','community','submit','profile'].includes(active);
      return active === screen || active === screen.replace('-','');
    };

    return (
      <nav id="nav" className={scrolled ? 'scrolled' : ''}>
        <div id="scroll-progress" style={{ transform: 'scaleX(' + progress + ')' }} />
        <div className="nav-brand" style={{ cursor:'none' }}
          onMouseEnter={hover} onMouseLeave={leave}
          onClick={function(){ window.navigate('home'); }}>
          CityBuildR
        </div>
        <div className="nav-links">
          {window.USER_NAV_LINKS.map(function(l) {
            return (
              <button key={l} className={'nl' + (isActive(l) ? ' act' : '')}
                onMouseEnter={hover} onMouseLeave={leave}
                onClick={function(){ window.navigate(navMap[l] || l.toLowerCase()); }}>
                {l}
              </button>
            );
          })}
        </div>
        <div className="nav-right">
          {window.CBDemo && window.CBDemo.on ? (
            <button className="demo-pill" title="Demo mode — in-browser data, no backend. Click to exit."
              onMouseEnter={hover} onMouseLeave={leave}
              onClick={function(){ window.CBDemo.disable(); }}>
              <span className="demo-pill-dot" />DEMO
            </button>
          ) : null}
          {window.CBGameHUD ? <window.CBGameHUD /> : null}
          <div className="live-pill" style={{ cursor:'none' }}
            onMouseEnter={hover} onMouseLeave={leave}
            onClick={function(){ window.navigate('projects', { filter:'live' }); }}>
            <span className="live-dot" />Live in AR
          </div>
          <button className="btn btn-v" style={{ padding:'8px 22px', fontSize:11 }}
            onMouseEnter={hover} onMouseLeave={leave}
            onClick={function(){ window.navigate('ar-demo'); }}>
            Launch AR ↗
          </button>
          {authUser ? (
            <div style={{ display:'flex', alignItems:'center', gap:8 }}>
              <div className="nav-avatar" title={authUser.name+' · click to sign out'}
                onMouseEnter={hover} onMouseLeave={leave}
                onClick={onLogout}
                style={{ cursor:'none', background:'linear-gradient(135deg,var(--violet),var(--cyan))', position:'relative' }}>
                {initials}
              </div>
            </div>
          ) : (
            <button className="btn btn-o" style={{ padding:'8px 18px', fontSize:11 }}
              onMouseEnter={hover} onMouseLeave={leave}
              onClick={onLoginClick}>
              Sign In
            </button>
          )}
        </div>
      </nav>
    );
  }

  window.UserNav = Nav;
})();