// TopNav — fixed top bar with gold shell, nav links, SSO button
function TopNav({ authed, pilot, onAuth, onSignOut, activeSection }) {
  const linkClass = (id) => (activeSection === id ? 'active' : '');
  return (
    <nav className="topnav">
      <div className="topnav-mark">
        <img src="/assets/logo-gold-shell.png" alt="Big Yoshi" />
        <div className="topnav-mark-text">
          <div className="topnav-corp">BIG YOSHI</div>
          <div className="topnav-alliance">// ENERGY INC.</div>
        </div>
      </div>
      <div className="topnav-links">
        <a href="#hq" className={linkClass('hq')}>// HQ</a>
        <a href="#doctrine" className={linkClass('doctrine')}>// DOCTRINE</a>
        <a href="#ops" className={linkClass('ops')}>// OPS</a>
        <a href="#join" className={linkClass('join')}>// JOIN</a>
      </div>
      {authed ? (
        <div className="topnav-pilot">
          <div className="pilot-online" />
          <span className="pilot-name">{pilot}</span>
          <button className="pilot-signout" onClick={onSignOut}>SIGN OUT</button>
        </div>
      ) : (
        <button className="topnav-sso" onClick={onAuth}>
          <span className="sso-mark">EVE</span>
          <span>SIGN IN</span>
        </button>
      )}
    </nav>
  );
}
window.TopNav = TopNav;