// Homepage — assembles: Hero → CategoryGrid → BrandStrip → Featured → Delivery → AboutUs → QuoteForm → TrustStrip.
// Footer is added by Site wrapper; header is already at the top.
// About-us moved lower so the page leads with catalog density before the company narrative.

(function () {
  window.HomePage = function HomePage() {
    // Show first product of each enriched category, plus fill remainder — a
    // sampler that shows the catalogue's breadth rather than 8 of the same kind.
    const all = window.NAJMAT_DATA.products;
    const enrichedSlugs = window.NAJMAT_DATA.categories.filter(c => c.enriched).map(c => c.slug);
    const firstByCat = enrichedSlugs.map(slug => all.find(p => p.category === slug)).filter(Boolean);
    const remaining = all.filter(p => !firstByCat.includes(p)).slice(0, Math.max(0, 8 - firstByCat.length));
    const products = [...firstByCat, ...remaining].slice(0, 8);
    return (
      <>
        <window.Hero>
          <window.HeroSearch />
        </window.Hero>

        <window.CategoryGrid />

        <window.BrandStrip />

        <section className="featured" aria-labelledby="featured-h">
          <div className="rail featured-head">
            <div className="label-mono">From the hardware shelves</div>
            <h2 id="featured-h">Eight things people walk in for today.</h2>
          </div>
          <div className="rail">
            <div className="product-grid">
              {products.map(p => (
                <window.ProductCard key={p.sku} product={p} />
              ))}
            </div>
          </div>
        </section>

        <window.Delivery />

        <window.AboutUs />

        <window.QuoteForm />

        <window.TrustStrip />
      </>
    );
  };
})();