// Website UI kit — Nav. Always-dark varsity bar: flame wordmark + page links + theme toggle + CTA.
const { Button } = window.TechSales110_c20112;

function Nav({ onJoin, theme, onToggleTheme }) {
  const link = { color: 'var(--cream)', fontWeight: 500, fontSize: 14, textDecoration: 'none', fontFamily: 'var(--font-body)', opacity: 0.88 };
  const isHome = window.location.pathname === '/' || window.location.pathname === '/index.html';
  return (
    <nav data-theme="dark" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(20,10,13,.94)', backdropFilter: 'var(--blur-nav)',
      borderBottom: '1px solid var(--maroon)',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', padding: '12px 22px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="/" style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 'none', color: 'var(--cream)', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 23, letterSpacing: '.01em', textTransform: 'uppercase', textDecoration: 'none' }}>
          <img src="assets/flame.svg" height="28" alt="" />
          <span style={{ whiteSpace: 'nowrap' }}>Tech Sales&nbsp;<span style={{ color: 'var(--gold)' }}>110</span></span>
        </a>
        <div className="nav-links" style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <a href="/about" className="navlink nav-hide" style={link}>About</a>
          <a href="https://Podcast.TechSales110.com" target="_blank" rel="noopener noreferrer" className="navlink nav-hide" style={link}>Podcast</a>

          <button className="theme-toggle" onClick={onToggleTheme} aria-label="Toggle light and dark" style={{ color: 'var(--cream)' }}>
            <span style={{ fontSize: 14 }}>{theme === 'light' ? '☾' : '☀'}</span>
            {theme === 'light' ? 'Dark' : 'Light'}
          </button>
          <Button variant="primary" size="sm" as="a" href={isHome ? '#join' : '/#join'} onClick={isHome ? onJoin : undefined}>
            Go Pro · <span style={{ textDecoration: 'line-through', opacity: 0.6 }}>$5</span> $0
          </Button>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;