// ============================================================
// Header — sticky, 72px. Translucent-free, solid white.
// Brand mark + wordmark, primary nav, search/account/cart icons.
// ============================================================

function JmHeader({ active, onNavigate, onSearchOpen, onAccountOpen, cartCount, onOpenCart, onOpenMobile, lang, onToggleLang }) {
  const t = JM.t[lang];
  const items = [
    { id: 'shop',        label: t['nav.shop'] },
    { id: 'collections', label: t['nav.collections'] },
    { id: 'bestsellers', label: t['nav.bestsellers'] },
    { id: 'about',       label: t['nav.about'] },
    { id: 'contact',     label: t['nav.contact'] },
  ];

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  return (
    <header className="jm-web-header" data-screen-label="Header">
      <div className="jm-web-header__inner">
        <button className="jm-web-header__hamburger" onClick={onOpenMobile} aria-label="Mở menu">
          <i data-lucide="menu" className="jm-icon"></i>
        </button>

        <button className="jm-web-header__brand" onClick={() => onNavigate({ view: 'home' })} aria-label="Trang chủ JESMEE">
          <img className="jm-logo" src="src/assets/logo-jesmee.png" alt="JESMEE" width="136" height="50"/>
        </button>

        <nav className="jm-web-header__nav">
          {items.map(item => (
            <a key={item.id}
               className={`jm-web-header__link ${active === item.id ? 'is-active' : ''}`}
               href={JM.hrefFor({ view: item.id })}
               onClick={(e) => { e.preventDefault(); onNavigate({ view: item.id }); }}>
              {item.label}
            </a>
          ))}
        </nav>

        <div className="jm-web-header__icons">
          <button className="jm-web-header__lang" onClick={onToggleLang} aria-label="Đổi ngôn ngữ">
            <span className={lang === 'vi' ? 'is-active' : ''}>VN</span>
            <span aria-hidden="true">·</span>
            <span className={lang === 'en' ? 'is-active' : ''}>EN</span>
          </button>
          <button className="jm-web-header__icon" aria-label="Tìm kiếm" onClick={onSearchOpen}><i data-lucide="search" className="jm-icon"></i></button>
          {JM.orderingOn() && <button className="jm-web-header__icon jm-web-header__cart" aria-label="Giỏ hàng" onClick={onOpenCart}>
            <i data-lucide="shopping-bag" className="jm-icon"></i>
            {cartCount > 0 && <span className="jm-web-header__dot">{cartCount}</span>}
          </button>}
        </div>
      </div>
    </header>
  );
}

window.JmHeader = JmHeader;