// 22-category grid for the homepage.
// 4 cols (desktop), 3 (tablet), 2 (small), 1 (phone).
// Tiles alternate between cream and surface-2 by row.

(function () {
  window.CategoryGrid = function CategoryGrid() {
    const cats = window.NAJMAT_DATA.categories;
    return (
      <section className="cat-section" aria-labelledby="cat-grid-h">
        <div className="rail cat-section-head">
          <div className="label-mono">Catalogue</div>
          <h2 id="cat-grid-h">22 categories. 11,894 SKUs.</h2>
          <p className="cat-section-sub">Open a category to see live listings. Categories we're still enriching invite a WhatsApp.</p>
        </div>
        <div className="rail">
          <ul className="cat-grid" role="list">
            {cats.map(c => (
              <li key={c.slug} className="cat-tile-li">
                <a className="cat-tile" href={`#/c/${c.slug}`}>
                  <span className="cat-tile-n label-mono">{c.n}</span>
                  <span className="cat-tile-name">{c.name}</span>
                  <span className="cat-tile-meta label-mono">
                    <span className="tnum">{c.count.toLocaleString()}</span> skus
                    {c.enriched ? null : <span className="cat-tile-soon"> · soon</span>}
                  </span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </section>
    );
  };
})();