/* VOLZAR — Product page (data-driven, одна страница на любую серию) */
const PRODUCTS = [
  {
    slug: "akm", name: "Серия АКМ", sulzer: "MCE", photo: "assets/pump-akm.png",
    tags: ["Q до 940 л/с", "H до 250 м", "t° до 180 °C"],
    catalogDesc: "Насосы для среднеконсистентных суспензий до 18% сухого вещества — волокнистых и абразивных смесей с высоким газосодержанием.",
    intro: "Центробежные насосы для перекачки среднеконсистентных суспензий до 18% сухого вещества — волокнистых и абразивных смесей с высоким газосодержанием. Сохранены геометрия, материалы и присоединительные размеры — установка без переделок обвязки.",
    specs: [
      ["Тип", "центробежный, для суспензий"],
      ["Производительность, Q", "до 940 л/с"],
      ["Напор, H", "до 250 м"],
      ["Рабочее давление", "до 25 бар"],
      ["Температура среды", "до 180 °C"],
      ["Напорный патрубок", "50–400 мм"],
      ["Частота вращения", "до 3600 об/мин"],
      ["Совместимость", "Sulzer MCE"],
    ],
    app: [
      ["Среды", "волокнистые и абразивные суспензии"],
      ["Консистенция", "до 18% сухого вещества"],
      ["Отрасли", "ЦБП, химия, переработка"],
      ["Корпус / колесо", "под среду (нерж., дуплекс)*"],
      ["Уплотнение", "одинарное / двойное*"],
    ],
  },
  {
    slug: "ans", name: "Серия ANS", sulzer: "SNS", photo: null,
    tags: ["Q до 1400 м³/ч", "H до 160 м", "до 16 бар"],
    catalogDesc: "Процессный насос с торцевым (консольным) входом. Лидер по энергоэффективности в классе процессных насосов; превосходит требования ISO 5199.",
    intro: "Процессный центробежный насос с торцевым (консольным) входом. Один из лидеров по энергоэффективности в своём классе — превосходит требования ISO 5199. Полная взаимозаменяемость по присоединительным размерам и характеристикам.",
    specs: [
      ["Тип", "консольный процессный (end-suction)"],
      ["Производительность, Q", "до 1400 м³/ч"],
      ["Напор, H", "до 160 м"],
      ["Рабочее давление", "до 16 бар"],
      ["Температура среды", "до 120 °C"],
      ["Напорный патрубок", "25–125 мм"],
      ["Частота вращения", "до 3600 об/мин"],
      ["Совместимость", "Sulzer SNS"],
    ],
    app: [
      ["Среды", "чистые и слабозагрязнённые жидкости"],
      ["Энергоэффективность", "превышает требования ISO 5199"],
      ["Отрасли", "химия, водоснабжение, общая промышленность"],
      ["Корпус / колесо", "под среду (чугун, нерж.)*"],
      ["Уплотнение", "одинарное / двойное*"],
    ],
  },
  {
    slug: "akw", name: "Серия AKW", sulzer: "WPP", photo: "assets/pump-akw.png",
    tags: ["Q до 7000 м³/ч", "H до 110 м", "t° до 180 °C"],
    catalogDesc: "Горизонтальные одноступенчатые насосы с осевым входом для абразивных, вязких, волокнистых и газонасыщенных жидкостей. Устойчивы к эрозии.",
    intro: "Горизонтальные одноступенчатые центробежные насосы с осевым входом для абразивных, вязких, волокнистых и газонасыщенных жидкостей. Износостойкие исполнения проточной части обеспечивают устойчивость к эрозии и длительный ресурс.",
    specs: [
      ["Тип", "горизонтальный одноступенчатый, осевой вход"],
      ["Производительность, Q", "до 7000 м³/ч"],
      ["Напор, H", "до 110 м"],
      ["Рабочее давление", "до 16 бар"],
      ["Температура среды", "до 180 °C"],
      ["Напорный патрубок", "32–600 мм"],
      ["Частота вращения", "до 3600 об/мин"],
      ["Совместимость", "Sulzer WPP"],
    ],
    app: [
      ["Среды", "абразивные, вязкие, волокнистые, газонасыщенные"],
      ["Стойкость", "к эрозии и абразивному износу"],
      ["Отрасли", "ЦБП, ГОК, переработка"],
      ["Корпус / колесо", "износостойкие сплавы*"],
      ["Уплотнение", "одинарное / двойное*"],
    ],
  },
  {
    slug: "ake", name: "Серия AKE", sulzer: "EPP", photo: null,
    tags: ["Q до 6100 м³/ч", "H до 160 м", "t° до 210 °C"],
    catalogDesc: "Одноступенчатый горизонтальный насос для горячих, чистых и слегка загрязнённых жидкостей при повышенных температурах и давлениях. Центровка корпуса по оси.",
    intro: "Одноступенчатый горизонтальный насос для горячих, чистых и слегка загрязнённых жидкостей при повышенных температурах и давлениях. Центровка корпуса по оси обеспечивает стабильность при тепловых деформациях.",
    specs: [
      ["Тип", "одноступенчатый горизонтальный"],
      ["Производительность, Q", "до 6100 м³/ч"],
      ["Напор, H", "до 160 м"],
      ["Рабочее давление", "до 25 бар"],
      ["Температура среды", "до 210 °C"],
      ["Напорный патрубок", "65–500 мм"],
      ["Частота вращения", "до 3600 об/мин"],
      ["Совместимость", "Sulzer EPP"],
    ],
    app: [
      ["Среды", "горячие, чистые и слабозагрязнённые жидкости"],
      ["Особенность", "центровка корпуса по оси (горячий монтаж)"],
      ["Отрасли", "энергетика, химия, нефтепереработка"],
      ["Корпус / колесо", "под температуру и среду*"],
      ["Уплотнение", "одинарное / двойное*"],
    ],
  },
  {
    slug: "dmbn", name: "Серия DMBN", sulzer: "MBN", photo: null,
    tags: ["Q до 700 м³/ч", "H до 900 м", "до 100 бар"],
    catalogDesc: "Многоступенчатый секционный насос для высокого давления. Энергетика, водоснабжение, промышленность и системы обратного осмоса.",
    intro: "Многоступенчатый секционный насос для высокого давления. Применяется в энергетике, водоснабжении, промышленности и системах обратного осмоса, где требуются большой напор и стабильная работа на длительном ресурсе.",
    specs: [
      ["Тип", "многоступенчатый секционный"],
      ["Производительность, Q", "до 700 м³/ч"],
      ["Напор, H", "до 900 м"],
      ["Рабочее давление", "до 100 бар"],
      ["Температура среды", "до 180 °C"],
      ["Напорный патрубок", "от 150 мм"],
      ["Частота вращения", "до 6000 об/мин"],
      ["Совместимость", "Sulzer MBN"],
    ],
    app: [
      ["Среды", "чистые жидкости высокого давления"],
      ["Применение", "котловое питание, обратный осмос, нагнетание"],
      ["Отрасли", "энергетика, водоснабжение, промышленность"],
      ["Корпус / колесо", "под давление и среду*"],
      ["Уплотнение", "одинарное / двойное*"],
    ],
  },
];
window.PRODUCTS = PRODUCTS;
const getProduct = (slug) => PRODUCTS.find((p) => p.slug === slug) || PRODUCTS[0];
window.getProduct = getProduct;

function SpecRows({ rows }) {
  return (
    <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14.5 }}>
      <tbody>
        {rows.map(([k, v], i) => (
          <tr key={i}>
            <th style={{ textAlign: "left", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)", width: "48%", color: "var(--text-muted)", fontWeight: 500, verticalAlign: "top" }}>{k}</th>
            <td style={{ textAlign: "left", padding: "12px 0", borderBottom: "1px solid var(--border-subtle)", fontWeight: 600, color: "var(--graphite-900)" }}>{v}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

function ProductPage() {
  const { go, product } = useNav();
  const p = getProduct(product);
  return (
    <div>
      <div className="wrap"><div className="crumbs">
        <a onClick={() => go("home")}>Главная</a><span className="sep">/</span>
        <a onClick={() => go("catalog")}>Продукты</a><span className="sep">/</span>{p.name}
      </div></div>

      <section className="sec sec-white" style={{ paddingBottom: 0 }}>
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }} data-prodtop>
          {p.photo ? (
            <div className="reveal" style={{ background: "var(--surface-alt)", borderRadius: "var(--radius-xl)", display: "flex", alignItems: "center", justifyContent: "center", height: "clamp(280px,34vw,400px)", padding: 24 }}>
              <img src={p.photo} alt={"Насос VOLZAR " + p.name} loading="lazy" style={{ width: "100%", maxWidth: 420, height: "auto", display: "block" }} />
            </div>
          ) : (
            <image-slot id={"prod-photo-" + p.slug} className="reveal" style={{ width: "100%", height: "clamp(280px,34vw,400px)", borderRadius: "var(--radius-xl)" }}
              shape="rounded" radius="20" placeholder={"Фото / чертёж насоса " + p.name.replace("Серия ", "")}></image-slot>
          )}
          <div className="prod-facts reveal" style={{ display: "flex", flexDirection: "column", gap: 18 }}>
            <div><Badge variant="blue">⇄ Совместима с Sulzer {p.sulzer}</Badge></div>
            <h1 className="display" style={{ fontSize: "clamp(28px,3.6vw,42px)" }}>Насосы VOLZAR {p.name.toLowerCase().replace("серия", "серии")}</h1>
            <p className="lead">{p.intro}</p>
            <Card tone="white" radius="lg" padding="24px">
              <div className="display" style={{ fontSize: 22, color: "var(--graphite-900)" }}>Цена и срок — по запросу</div>
              <div style={{ fontSize: 14, color: "var(--text-muted)", marginTop: 6 }}>Стоимость зависит от типоразмера, исполнения и комплектации.</div>
              <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 18 }}>
                <Button variant="primary" arrow onClick={() => go(null, "lead")}>Запросить КП</Button>
                <Button variant="secondary" onClick={() => go(null, "lead")}>Опросный лист</Button>
              </div>
            </Card>
          </div>
        </div>
      </section>

      <section className="sec sec-white">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }} data-prodtop>
          <div className="reveal">
            <Eyebrow>Технические характеристики</Eyebrow>
            <H3 style={{ fontSize: 24, margin: "4px 0 14px" }}>Основные параметры</H3>
            <SpecRows rows={p.specs} />
          </div>
          <div className="reveal">
            <Eyebrow>Применение и материалы</Eyebrow>
            <H3 style={{ fontSize: 24, margin: "4px 0 14px" }}>Где работает</H3>
            <SpecRows rows={p.app} />
            <p style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 12 }}>* подбирается под конкретный процесс.</p>
          </div>
        </div>
      </section>

      {/* Другие серии */}
      <section className="sec sec-sand">
        <div className="wrap">
          <SectionHead eyebrow="Линейка" title="Другие серии VOLZAR" />
          <div className="grid-4">
            {PRODUCTS.filter((x) => x.slug !== p.slug).map((x) => (
              <Card key={x.slug} tone="white" radius="lg" padding="22px 20px" className="hovercard reveal"
                onClick={() => go("product", null, x.slug)}
                style={{ display: "flex", flexDirection: "column", gap: 10, minHeight: 150 }}>
                <Badge variant="teal">Sulzer {x.sulzer}</Badge>
                <H3 style={{ fontSize: 19 }}>{x.name}</H3>
                <div style={{ marginTop: "auto", fontWeight: 600, fontSize: 13.5, color: "var(--blue-500)" }}>Характеристики →</div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <LeadForm eyebrow={"Заявка · " + p.name.toLowerCase()} title="Запросить цену и срок"
        lead="Пришлём коммерческое предложение, опросный лист и срок изготовления под вашу комплектацию."
        fields="point" okText="КП пришлём в течение рабочего дня." showContacts={false} />
    </div>
  );
}
window.ProductPage = ProductPage;