/* global React */
function TopNav() {
  const [open, setOpen] = React.useState(false);
  const close = () => setOpen(false);
  const linkStyle = {
    fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 47,
    padding: '30px 51px', borderRadius: 999, cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 6,
  };
  return (
    <header style={{position:'sticky', top:0, zIndex:50, background:'var(--paper)', borderBottom:'2px solid var(--ink)'}}>
      <div className="container" style={{display:'flex', alignItems:'center', justifyContent:'space-between', padding:'16px 32px'}}>
        <a href="#" style={{display:'flex', alignItems:'center', gap:10}}>
          <img src="../../assets/mark.svg" alt="House Rules" style={{height:42}}/>
          <span className="t-wordmark" style={{fontSize:28}}>House Rules<span style={{color:'var(--card-red)'}}>.</span></span>
        </a>
        {/* Desktop nav */}
        <nav className="nav-desktop-links" style={{display:'flex', alignItems:'center', gap:4}}>
          <a href="#picker" style={linkStyle}>Decks</a>
          <a href="#how" style={linkStyle}>How Easy Is It?</a>
          <a href="#examples" style={linkStyle}>Examples</a>
          <a href="#picker" className="btn btn-primary" style={{padding:'21px 36px', fontSize:27, marginLeft:8}}>Start your deck</a>
        </nav>
        {/* Hamburger — mobile only */}
        <button className="nav-hamburger" onClick={()=>setOpen(o=>!o)} aria-label="Menu">
          <span/><span/><span/>
        </button>
      </div>
      {/* Mobile dropdown */}
      <div className={`nav-mobile-menu${open ? ' is-open' : ''}`} style={open ? {} : {display:'none'}}>
        <a href="#picker" onClick={close}>Decks</a>
        <a href="#how" onClick={close}>How Easy Is It?</a>
        <a href="#examples" onClick={close}>Examples</a>
        <a href="#picker" className="mob-cta" onClick={close}>Start your deck →</a>
      </div>
    </header>
  );
}

window.TopNav = TopNav;