// Site footer — deeper ink (#0F0F0B), 4-column block, legal line at bottom.

(function () {
  window.SiteFooter = function SiteFooter() {
    const b = window.NAJMAT_DATA.brand;
    const top8 = window.NAJMAT_DATA.categories.slice(0, 8);
    const year = new Date().getFullYear();
    return (
      <footer className="site-footer" role="contentinfo">
        <div className="rail site-footer-inner">
          <div className="site-footer-col">
            <window.Logo tone="reverse" size={28} />
            <p className="site-footer-tag">{b.tagline}</p>
            <window.WhatsAppButton variant="primary" />
          </div>

          <div className="site-footer-col">
            <div className="label-mono site-footer-h">Catalogue</div>
            <ul className="site-footer-list">
              {top8.map(c => (
                <li key={c.slug}><a href={`#/c/${c.slug}`}>{c.name}</a></li>
              ))}
              <li className="site-footer-more"><a href="#/">All 22 categories →</a></li>
            </ul>
          </div>

          <div className="site-footer-col">
            <div className="label-mono site-footer-h">Najmat</div>
            <ul className="site-footer-list">
              <li><a href="#/about">About</a></li>
              <li><a href="#/trade">Trade account</a></li>
              <li><a href="#/contact">Contact</a></li>
              <li><a href={window.waUrl()} target="_blank" rel="noopener noreferrer">WhatsApp</a></li>
            </ul>
          </div>

          <div className="site-footer-col">
            <div className="label-mono site-footer-h">Visit · Call · Mail</div>
            <p className="site-footer-block">{b.address}</p>
            <p className="site-footer-block">{b.hoursLabel} · {b.hoursClosedLabel}</p>
            <p className="site-footer-block">
              <a href={`tel:+${b.mobileDigits}`} className="tnum">{b.mobile}</a><br/>
              <a href={`mailto:${b.email}`}>{b.email}</a>
            </p>
          </div>
        </div>

        <div className="rail site-footer-legal">
          © {year} {b.legalName.toLowerCase()} · {b.addressShort}
        </div>
      </footer>
    );
  };
})();