// Site header — charcoal strip, 64px tall.
// Logo (lowercase + orange period) on the left, nav links centre,
// phone link + WhatsApp icon on the right.

(function () {
  const NAV = [
    { href: '#/',         label: 'Catalogue' },
    { href: '#/brands',   label: 'Brands'    },
    { href: '#/trade',    label: 'Trade'     },
    { href: '#/contact',  label: 'Contact'   },
  ];

  window.SiteHeader = function SiteHeader() {
    const b = window.NAJMAT_DATA.brand;
    return (
      <header className="site-header" role="banner">
        <div className="rail site-header-inner">
          <a href="#/" className="site-header-logo" aria-label="najmat — home">
            <window.Logo tone="reverse" size={22} />
          </a>
          <nav className="site-header-nav" aria-label="Primary">
            {NAV.map(item => (
              <a key={item.href} href={item.href} className="site-header-link">{item.label}</a>
            ))}
          </nav>
          <div className="site-header-contact">
            <a href={`tel:+${b.mobileDigits}`} className="site-header-phone" aria-label={`Call ${b.mobile}`}>
              {window.Icon.phone({ size: 14 })}
              <span>{b.mobile}</span>
            </a>
            <a
              href={window.waUrl()}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Message us on WhatsApp"
              className="site-header-wa"
            >
              {window.Icon.whatsapp({ size: 18 })}
            </a>
          </div>
        </div>
      </header>
    );
  };
})();