function Nav() {
  const items = ['Episodes', 'About', 'Book', 'Speaking', 'Contact'];
  return (
    <nav style={navStyles.bar}>
      <a href="#" style={navStyles.brand}>
        <img src="./assets/dr-lazar-show-wordmark.png" alt="The Dr. Lazar Show" style={navStyles.brandImg}/>
      </a>
      <ul style={navStyles.list}>
        {items.map(i => <li key={i}><a href="#" style={navStyles.link}>{i}</a></li>)}
      </ul>
      <div style={navStyles.right}>
        <span style={navStyles.live}><span className="live-dot" style={{display:'inline-block',width:8,height:8,borderRadius:'50%',background:'#B11E2A',marginRight:8,verticalAlign:'middle'}}></span>LIVE TUE 9PM ET</span>
        <a href="#" className="btn btn-primary">Listen now</a>
      </div>
    </nav>
  );
}

const navStyles = {
  bar: {display:'flex',alignItems:'center',justifyContent:'space-between',padding:'18px 48px',borderBottom:'1px solid var(--line-1)',background:'rgba(14,14,16,0.85)',backdropFilter:'blur(12px)',position:'sticky',top:0,zIndex:10},
  brand: {textDecoration:'none',display:'flex',alignItems:'center',height:56},
  brandImg: {height:48,width:'auto',display:'block'},
  list: {display:'flex',gap:32,listStyle:'none',margin:0,padding:0},
  link: {fontFamily:'var(--font-sans)',fontSize:13,fontWeight:600,letterSpacing:'.06em',textTransform:'uppercase',color:'var(--fg-1)',textDecoration:'none'},
  right: {display:'flex',alignItems:'center',gap:18},
  live: {fontFamily:'var(--font-mono)',fontSize:11,color:'var(--fg-2)',letterSpacing:'.1em'},
};

window.Nav = Nav;