// About us — direction-B section that sits between Hero and Category grid.
// Two-column layout: text left, 2×2 stats grid right. Stats from data.js.

(function () {
  window.AboutUs = function AboutUs() {
    const b = window.NAJMAT_DATA.brand;
    return (
      <section className="about-section" aria-labelledby="about-h">
        <div className="rail about-inner">
          <div className="about-text">
            <div className="label-mono">About najmat</div>
            <h2 id="about-h" className="about-h">
              A Dubai trade yard.{' '}
              <span className="about-h-accent">Stocked, priced, delivered.</span>
            </h2>
            <p className="about-body">
              Najmat Almadina has been Dubai's building-materials yard since {b.foundedYear}. Hardware, fasteners, electrical, plumbing, paint, tools — {b.categoryCount} categories from {b.brandsCount} of the trade's most-asked manufacturers, all on-shelf in Al Quoz Industrial Area 1. Trade pricing on account, walk-in pricing at the counter, same-day delivery in Dubai.
            </p>
          </div>
          <div className="about-stats" role="list" aria-label="Catalogue facts">
            <div className="about-stat" role="listitem">
              <strong className="tnum">{b.skuCount.toLocaleString()}</strong>
              <span>products available</span>
            </div>
            <div className="about-stat" role="listitem">
              <strong className="tnum">{b.brandsCount}</strong>
              <span>brands stocked</span>
            </div>
            <div className="about-stat" role="listitem">
              <strong className="tnum">{b.categoryCount}</strong>
              <span>categories</span>
            </div>
            <div className="about-stat" role="listitem">
              <strong>7/7</strong>
              <span>emirates served</span>
            </div>
          </div>
        </div>
      </section>
    );
  };
})();