/* =========================================================================
   Morning Mob — top navigation
   Slim announcement strip + 52px bar, centered serif wordmark, simple links.
   ========================================================================= */

const MM_NAV_LINKS = [
  ['Shop', 'shop'],
  ['About', 'about'],
  ['Contact', 'contact'],
];

function TopNav({ cartCount, onOpenCart, go, view }) {
  const [banner, setBanner] = useState(true);
  const [menuOpen, setMenuOpen] = useState(false);

  const navLink = {
    fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 400, letterSpacing: '1px',
    color: 'var(--ink)', cursor: 'pointer', background: 'none', border: 'none', padding: 0,
  };
  const iconBtn = {
    width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center',
    background: 'none', border: 'none', color: 'var(--ink)', cursor: 'pointer', position: 'relative',
  };

  const goFromMenu = (route) => { setMenuOpen(false); go(route); };

  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 40, background: 'var(--canvas)' }}>
      {banner && (
        <div style={{ background: 'var(--ink)', color: 'var(--on-primary)', display: 'flex',
          alignItems: 'center', justifyContent: 'center', gap: 14, height: 34, position: 'relative' }}>
          <button onClick={() => go('shop')} className="mm-nav-banner-text" style={{
            fontFamily: 'var(--font-sans)', fontSize: 10.5, fontWeight: 400, letterSpacing: '2px',
            textTransform: 'uppercase', color: 'var(--on-primary)', background: 'none', border: 'none',
            cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 8, whiteSpace: 'nowrap' }}>
            The Mocha Mode Tee — now available
            <Icon name="arrowRight" size={13} />
          </button>
          <button onClick={() => setBanner(false)} aria-label="Dismiss" style={{
            position: 'absolute', right: 10, top: '50%', transform: 'translateY(-50%)',
            background: 'none', border: 'none', color: 'var(--on-primary)', cursor: 'pointer',
            opacity: 0.7, display: 'flex' }}><Icon name="x" size={14} /></button>
        </div>
      )}

      <div className="mm-nav-bar" style={{
        height: 52, borderBottom: '1px solid var(--hairline)',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '0 28px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          <button className="mm-nav-burger" aria-label="Menu" onClick={() => setMenuOpen(true)}
                  style={{ ...iconBtn, display: 'none', marginLeft: -8 }}>
            <Icon name="menu" size={20} />
          </button>
          <nav className="mm-nav-links" style={{ display: 'flex', gap: 24 }}>
            {MM_NAV_LINKS.map(([label, route]) => (
              <button key={route} style={{ ...navLink, color: view === route ? 'var(--muted)' : 'var(--ink)' }}
                      onClick={() => go(route)}>{label}</button>
            ))}
          </nav>
        </div>
        <Wordmark onClick={() => go('home')} />
        <div style={{ display: 'flex', gap: 6, justifyContent: 'flex-end' }}>
          <a href="https://www.instagram.com/morning_mob/" target="_blank" rel="noopener noreferrer"
             style={{ ...iconBtn, textDecoration: 'none', fontFamily: 'var(--font-sans)', fontSize: 11,
               letterSpacing: '1px', width: 'auto', padding: '0 6px' }} aria-label="Instagram">IG</a>
          <button style={iconBtn} aria-label="Cart" onClick={onOpenCart}>
            <Icon name="bag" />
            {cartCount > 0 && (
              <span style={{ position: 'absolute', top: 6, right: 4, fontFamily: 'var(--font-sans)',
                fontSize: 10, fontWeight: 300, color: 'var(--ink)' }}>{cartCount}</span>
            )}
          </button>
        </div>
      </div>

      {/* Mobile menu drawer — slides in from the left (mirrors the cart drawer) */}
      <div onClick={() => setMenuOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 60,
        background: 'rgba(0,0,0,0.18)', opacity: menuOpen ? 1 : 0, pointerEvents: menuOpen ? 'auto' : 'none',
        transition: 'opacity 300ms var(--ease-out)' }} />
      <aside style={{ position: 'fixed', top: 0, left: 0, bottom: 0, width: 300, maxWidth: '82vw', zIndex: 61,
        background: 'var(--canvas)', borderRight: '1px solid var(--hairline)', display: 'flex', flexDirection: 'column',
        transform: menuOpen ? 'translateX(0)' : 'translateX(-100%)', transition: 'transform 300ms var(--ease-out)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '24px 24px 16px', borderBottom: '1px solid var(--hairline)' }}>
          <Eyebrow color="var(--ink)">Menu</Eyebrow>
          <button onClick={() => setMenuOpen(false)} aria-label="Close" style={{ width: 40, height: 40, marginRight: -12, background: 'none', border: 'none', color: 'var(--ink)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}><Icon name="x" /></button>
        </div>
        <nav style={{ display: 'flex', flexDirection: 'column', padding: 24 }}>
          {MM_NAV_LINKS.map(([label, route]) => (
            <button key={route} onClick={() => goFromMenu(route)} style={{
              fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 400, textAlign: 'left',
              color: view === route ? 'var(--muted)' : 'var(--ink)', background: 'none', border: 'none',
              borderBottom: '1px solid var(--hairline)', padding: '16px 0', cursor: 'pointer' }}>{label}</button>
          ))}
          <a href="https://www.instagram.com/morning_mob/" target="_blank" rel="noopener noreferrer"
             style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 400, letterSpacing: '1px',
               textTransform: 'uppercase', color: 'var(--ink)', textDecoration: 'none', padding: '20px 0 0' }}>
            Instagram — @morning_mob
          </a>
        </nav>
      </aside>
    </header>
  );
}
window.TopNav = TopNav;