// Brand strip — the trade brands Najmat stocks, shown as a typographic
// wordmark wall.
//
// We deliberately do NOT hotlink third-party logo CDNs (Brandfetch's
// path-based hotlinking is now blocked and requires a client ID, and
// republishing brand logos carries the same IP questions as product
// photos). A clean, uniform wordmark wall is more reliable and on-brand
// for Direction B. To use real logos later, get a Brandfetch client ID
// and render <img> per cell — the data already carries {name, domain}.
//
// At rest: muted steel (the wall reads as a unit). On hover: name inks
// in and the cell bg lifts to --paper.

(function () {
  window.BrandStrip = function BrandStrip() {
    const brands = window.NAJMAT_DATA.brands;
    return (
      <section className="brand-strip" aria-labelledby="brand-strip-h">
        <div className="rail brand-strip-inner">
          <div className="brand-strip-head">
            <div className="label-mono">Stocked brands</div>
            <h2 id="brand-strip-h" className="brand-strip-h">
              {brands.length} of the trade's most-asked manufacturers, always on shelf.
            </h2>
          </div>
          <ul className="brand-list" role="list">
            {brands.map(b => (
              <li key={b.name} className="brand-cell" title={b.name}>
                <span className="brand-name">{b.name}</span>
              </li>
            ))}
          </ul>
        </div>
      </section>
    );
  };
})();