// Hero — cream surface, big two-line headline, search slot, three stats.
// No motion, no photo, sub-30KB total weight.

(function () {
  window.Hero = function Hero({ children }) {
    const b = window.NAJMAT_DATA.brand;
    const yrs = new Date().getFullYear() - b.foundedYear;
    return (
      <section className="hero" aria-labelledby="hero-h">
        <div className="rail hero-inner">
          <h1 id="hero-h" className="hero-h">
            Building materials.<br/>
            <span className="hero-h-accent">Delivered to site.</span>
          </h1>
          <p className="hero-sub">
            {b.tagline.toLowerCase()} for contractors and homeowners across the U.A.E.
            walk-in pricing at the showroom; trade pricing on account.
          </p>
          <div className="hero-search-slot">{children}</div>
          <div className="hero-secondary">
            <span className="label-mono">or, if you have a project:</span>
            <a href="#quote" className="hero-quote-cta">
              Get a quote
              <span aria-hidden="true">→</span>
            </a>
          </div>
          <ul className="hero-stats" aria-label="Storefront facts">
            <li><strong className="tnum">{b.skuCount.toLocaleString()}</strong><span>products in stock</span></li>
            <li><strong className="tnum">{b.categoryCount}</strong><span>categories</span></li>
            <li><strong>{yrs}</strong><span>years in dubai · since {b.foundedYear}</span></li>
          </ul>
        </div>
      </section>
    );
  };
})();