/* VOLZAR — Catalog page */
function SeriesCard({ s }) {
  const { go } = useNav();
  return (
    <Card tone="white" radius="lg" padding="clamp(22px,2.6vw,28px)" className="hovercard reveal" onClick={() => go("product", null, s.slug)}
      style={{ display: "flex", flexDirection: "column", gap: 14, height: "100%" }}>
      <div><Badge variant="teal">совместима с Sulzer {s.sulzer}</Badge></div>
      <H3 style={{ fontSize: 22 }}>{s.name}</H3>
      <p style={{ fontSize: 14, color: "var(--text-body)", lineHeight: 1.55, minHeight: 84 }}>{s.catalogDesc}</p>
      <div className="num" style={{ display: "flex", flexWrap: "wrap", gap: 8, borderTop: "1px solid var(--border-subtle)", paddingTop: 14 }}>
        {s.tags.map((sp) => <Badge key={sp} variant="neutral">{sp}</Badge>)}
      </div>
      <div style={{ marginTop: "auto", fontWeight: 600, fontSize: 14, color: "var(--blue-500)" }}>Характеристики →</div>
    </Card>
  );
}

function CatalogPage() {
  const { go } = useNav();
  return (
    <div>
      <div className="wrap"><div className="crumbs"><a onClick={() => go("home")}>Главная</a><span className="sep">/</span>Продукты</div></div>
      <PageHero eyebrow="Каталог" title="Насосы VOLZAR для промышленности"
        lead="Пять базовых серий центробежных насосов, взаимозаменяемых с соответствующими сериями Sulzer. Подбор конкретного типоразмера — под вашу рабочую точку." />
      <section className="sec sec-white">
        <div className="wrap">
          <div className="grid-3">
            {(window.PRODUCTS || []).map((s) => <SeriesCard key={s.slug} s={s} />)}
            <Card tone="tint" radius="lg" padding="clamp(22px,2.6vw,28px)" bordered={false} className="hovercard reveal"
              onClick={() => go("home", "lead")}
              style={{ border: "1px dashed var(--blue-500)", display: "flex", flexDirection: "column", gap: 12, justifyContent: "center", alignItems: "center", textAlign: "center" }}>
              <H3 style={{ color: "var(--blue-500)" }}>Не нашли модель?</H3>
              <p style={{ fontSize: 14, color: "var(--text-body)", lineHeight: 1.5 }}>Пришлите модель Sulzer или рабочие параметры — подберём аналог и ЗИП.</p>
              <div style={{ fontWeight: 600, fontSize: 14, color: "var(--blue-500)" }}>Запросить подбор →</div>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
}
window.CatalogPage = CatalogPage;