// Thin info bar above the main header — mobile + email + hours + WhatsApp.
// Charcoal-deep surface so it visually anchors above the regular charcoal header.

(function () {
  window.TopBar = function TopBar() {
    const b = window.NAJMAT_DATA.brand;
    return (
      <div className="topbar" role="complementary" aria-label="Contact at a glance">
        <div className="rail topbar-inner">
          <div className="topbar-left">
            <a href={`tel:+${b.mobileDigits}`} className="topbar-link tnum" aria-label={`Call mobile ${b.mobile}`}>
              {window.Icon.phone({ size: 12 })}
              <span>{b.mobile}</span>
            </a>
            <span className="topbar-sep" aria-hidden="true">·</span>
            <a href={`mailto:${b.email}`} className="topbar-link" aria-label={`Email ${b.email}`}>
              {window.Icon.mail({ size: 12 })}
              <span>{b.email}</span>
            </a>
            <span className="topbar-sep topbar-sep-hours" aria-hidden="true">·</span>
            <span className="topbar-hours">{b.hoursLabel}</span>
          </div>
          <div className="topbar-right">
            <a
              href={window.waUrl()}
              target="_blank"
              rel="noopener noreferrer"
              aria-label="Message us on WhatsApp"
              className="topbar-wa"
            >
              {window.Icon.whatsapp({ size: 14 })}
              <span>WhatsApp</span>
            </a>
          </div>
        </div>
      </div>
    );
  };
})();