// Header navigation component — mobile-ready
function Header({ page, setPage, cartCount, session, onLogout, lang, setLang }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Close menu on page change
  React.useEffect(() => { setMenuOpen(false); }, [page]);

  const t = lang === 'pt' ? {
    home: 'Início', shop: 'Loja', about: 'Sobre Nós', contact: 'Contacto',
    cart: 'Carrinho', login: 'Entrar', logout: 'Sair', account: 'A minha conta', admin: 'Admin'
  } : {
    home: 'Home', shop: 'Shop', about: 'About', contact: 'Contact',
    cart: 'Cart', login: 'Sign In', logout: 'Sign Out', account: 'My Account', admin: 'Admin'
  };

  const navItems = [
    { key: 'home', label: t.home },
    { key: 'shop', label: t.shop },
    { key: 'about', label: t.about },
    { key: 'contact', label: t.contact },
  ];

  const nav = (key) => { setPage(key); setMenuOpen(false); };

  return (
    <>
      <header style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
        background: scrolled || menuOpen ? 'var(--header-bg)' : 'transparent',
        borderBottom: scrolled ? '1px solid var(--border)' : 'none',
        backdropFilter: scrolled || menuOpen ? 'blur(14px)' : 'none',
        transition: 'all 0.3s ease',
        height: 70, display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '0 clamp(16px, 4vw, 40px)'
      }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', flexShrink: 0 }}
          onClick={() => nav('home')}>
          <Logo size={42} />
          <div>
            <div style={{ fontFamily: "'Playfair Display', serif", color: 'var(--cream)', fontSize: 17, fontWeight: 700, lineHeight: 1.1 }}>Dom Papança</div>
            <div style={{ fontFamily: 'Lato, sans-serif', color: 'var(--gold)', fontSize: 8, letterSpacing: 3, textTransform: 'uppercase' }}>Iguarias com Alma</div>
          </div>
        </div>

        {/* Desktop nav */}
        <nav style={{ display: 'flex', gap: 28, alignItems: 'center', '@media(max-width:768px)': { display: 'none' } }}
          className="desktop-nav">
          {navItems.map(item => (
            <button key={item.key} onClick={() => nav(item.key)}
              style={{
                background: 'none', border: 'none', cursor: 'pointer',
                fontFamily: 'Lato, sans-serif', fontSize: 12, letterSpacing: 2,
                textTransform: 'uppercase', color: page === item.key ? 'var(--gold)' : 'var(--cream)',
                fontWeight: page === item.key ? 700 : 400,
                borderBottom: page === item.key ? '1px solid var(--gold)' : '1px solid transparent',
                paddingBottom: 2, transition: 'all 0.2s'
              }}>{item.label}</button>
          ))}
        </nav>

        {/* Right actions */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
          {/* Language */}
          <button onClick={() => setLang(lang === 'pt' ? 'en' : 'pt')}
            style={{ background: 'rgba(212,153,58,0.12)', border: '1px solid rgba(212,153,58,0.35)', borderRadius: 4, color: 'var(--gold)', padding: '4px 9px', fontSize: 11, fontFamily: 'Lato, sans-serif', letterSpacing: 1, cursor: 'pointer', fontWeight: 700 }}>
            {lang === 'pt' ? 'EN' : 'PT'}
          </button>

          {/* Cart */}
          <button onClick={() => nav('cart')}
            style={{ background: 'none', border: 'none', cursor: 'pointer', position: 'relative', fontSize: 22, lineHeight: 1, padding: '4px' }}>
            🛒
            <Badge count={cartCount} />
          </button>

          {/* Desktop account — hidden on mobile via inline media */}
          <div className="desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
            {session ? (
              <>
                {session.role === 'admin' && (
                  <button onClick={() => nav('admin')}
                    style={{ background: 'rgba(212,153,58,0.15)', border: '1px solid rgba(212,153,58,0.4)', borderRadius: 4, color: 'var(--gold)', padding: '5px 12px', fontSize: 11, fontFamily: 'Lato, sans-serif', letterSpacing: 1, cursor: 'pointer', fontWeight: 700, textTransform: 'uppercase' }}>
                    {t.admin}
                  </button>
                )}
                <button onClick={() => nav('account')}
                  style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--cream)', fontSize: 11, fontFamily: 'Lato, sans-serif', letterSpacing: 1, textTransform: 'uppercase' }}>
                  {session.name.split(' ')[0]}
                </button>
                <button onClick={onLogout}
                  style={{ background: 'none', border: '1px solid rgba(212,153,58,0.2)', borderRadius: 4, color: 'var(--dim)', padding: '5px 10px', fontSize: 11, fontFamily: 'Lato, sans-serif', letterSpacing: 1, cursor: 'pointer', textTransform: 'uppercase' }}>
                  {t.logout}
                </button>
              </>
            ) : (
              <button onClick={() => nav('auth')}
                style={{ background: 'rgba(212,153,58,0.15)', border: '1px solid rgba(212,153,58,0.4)', borderRadius: 4, color: 'var(--gold)', padding: '7px 16px', fontSize: 12, fontFamily: 'Lato, sans-serif', letterSpacing: 1, cursor: 'pointer', fontWeight: 700, textTransform: 'uppercase' }}>
                {t.login}
              </button>
            )}
          </div>

          {/* Hamburger */}
          <button className="hamburger" onClick={() => setMenuOpen(o => !o)}
            style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'none', flexDirection: 'column', gap: 5, padding: 6 }}
            aria-label="Menu">
            <span style={{ display: 'block', width: 22, height: 2, background: menuOpen ? 'var(--gold)' : 'var(--cream)', transition: 'all 0.3s', transform: menuOpen ? 'rotate(45deg) translateY(7px)' : 'none' }}></span>
            <span style={{ display: 'block', width: 22, height: 2, background: menuOpen ? 'var(--gold)' : 'var(--cream)', transition: 'all 0.3s', opacity: menuOpen ? 0 : 1 }}></span>
            <span style={{ display: 'block', width: 22, height: 2, background: menuOpen ? 'var(--gold)' : 'var(--cream)', transition: 'all 0.3s', transform: menuOpen ? 'rotate(-45deg) translateY(-7px)' : 'none' }}></span>
          </button>
        </div>
      </header>

      {/* Mobile menu overlay */}
      <div className={`mob-menu${menuOpen ? ' open' : ''}`}>
        {navItems.map(item => (
          <button key={item.key} onClick={() => nav(item.key)} className={page === item.key ? 'active' : ''}>{item.label}</button>
        ))}
        <div style={{ width: 40, height: 1, background: 'rgba(212,153,58,0.3)' }}></div>
        {session ? (
          <>
            {session.role === 'admin' && <button onClick={() => nav('admin')} style={{ color: 'var(--gold)', fontSize: 16 }}>{t.admin}</button>}
            <button onClick={() => nav('account')} style={{ fontSize: 16 }}>{session.name.split(' ')[0]}</button>
            <button onClick={() => { onLogout(); setMenuOpen(false); }} style={{ color: 'var(--dim)', fontSize: 14 }}>{t.logout}</button>
          </>
        ) : (
          <button onClick={() => nav('auth')} style={{ color: 'var(--gold)', fontSize: 16, fontWeight: 700 }}>{t.login}</button>
        )}
      </div>

      <style>{`
        @media (max-width: 768px) {
          .desktop-nav { display: none !important; }
          .hamburger   { display: flex !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { Header });