// Catalog page — full grid of every product. No filters, no search, no sort.

function CatalogPage() {
  useLang();
  return (
    <main className="catalog">
      <section className="catalog-hero">
        <div className="catalog-hero-grid">
          <div>
            <div className="eyebrow">{t("nav.catalog")} · {PRODUCTS.length} {t("catalog.countSuffix")}</div>
            <h1 className="page-title">{(TEXTS.catalog?.title) || "Коллекция"}<br/><em>{(TEXTS.catalog?.titleItalic) || "декоративных покрытий"}</em></h1>
          </div>
          <p className="catalog-lede">{(TEXTS.catalog?.lede)}</p>
        </div>
      </section>

      <section className="catalog-results">
        <div className="catalog-grid">
          {PRODUCTS.map(p => (
            <div key={p.slug} className="cat-card-wrap">
              <Link to={`/product/${p.slug}`} className="cat-card">
                <div className="cat-swatch">
                  {p.cover ? (
                    <img
                      className="cat-cover"
                      src={p.cover}
                      alt={p.name}
                      loading="lazy"
                      onError={e => { e.currentTarget.style.display = "none"; }}
                    />
                  ) : (
                    <Swatch product={p}/>
                  )}
                  <div className="cat-swatch-actions">
                    <QuoteToggleBtn product={p} className="cat-quote-btn"/>
                  </div>
                </div>
                <div className="cat-body">
                  <div className="cat-row">
                    <h3>{p.name}</h3>
                    <span className="cat-arrow">→</span>
                  </div>
                  <p className="cat-effect">{p.effect}</p>
                  <p className="cat-tag-line">{p.tagline}</p>
                </div>
              </Link>
            </div>
          ))}
        </div>

        {PRODUCTS.length === 0 && (
          <div className="catalog-empty">
            <div className="catalog-empty-mark">○</div>
            <h3>{t("catalog.empty.title")}</h3>
            <p>{t("catalog.empty.body")}</p>
          </div>
        )}
      </section>
    </main>
  );
}

window.CatalogPage = CatalogPage;