// Nav component — sticky black top bar with pink Contact Us CTA
function Nav() {
  const [open, setOpen] = React.useState(null);
  const menus = [
    { label: "Our Work", items: ["Case Studies", "Client Wins", "Portfolio"] },
    { label: "Services", items: ["Social Media", "Content Creation", "Strategy & Systems", "Engagement"] },
    { label: "About", items: ["Our Story", "Team", "Awards", "Careers"] },
    { label: "Good Stuff", items: ["Blog", "Newsletter", "Podcast", "Freebies"] },
  ];
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" style={{display:'block'}}><img src="../../assets/logo-horizontal-whitepink.png" alt="Chatterkick"/></a>
        <div className="nav-links">
          {menus.map(m => (
            <div key={m.label} style={{position:'relative'}}
              onMouseEnter={()=>setOpen(m.label)}
              onMouseLeave={()=>setOpen(null)}>
              <a href="#">{m.label} <span style={{fontSize:10, opacity:.7}}>▼</span></a>
              {open === m.label && (
                <div style={{position:'absolute', top:'100%', left:-16, marginTop:12, background:'#0a0a0a', border:'1px solid #1f1f1f', minWidth:200, padding:'10px 0'}}>
                  {m.items.map(i => (
                    <a key={i} href="#" style={{display:'block', padding:'8px 20px', fontSize:13, fontWeight:500, textDecoration:'none'}}>{i}</a>
                  ))}
                </div>
              )}
            </div>
          ))}
          <a className="btn btn-primary" style={{color:'#fff', textTransform:'none'}} href="#">Contact Us</a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;