/* VOLZAR — О компании */
const ABOUT_FACTS = [
  ["18 000 м²", "общая площадь завода"],
  ["10 000 м²", "производственный цех"],
  ["25 лет", "опыт производства"],
  ["120+", "сотрудников"],
  ["18", "ведущих инженеров"],
  ["100%", "взаимозаменяемость с Sulzer"],
];

const VALUES = [
  ["Немецкие стандарты", "Геометрия, материалы, КПД и ресурс — на уровне оригинала. Точный контроль на каждом этапе производства."],
  ["Честная цена", "Та же инженерия без премии за бренд: ниже CAPEX закупки и стоимость владения на горизонте эксплуатации."],
  ["Локальный партнёр", "Склад ЗИП, сервис и гарантия в Казахстане. Поэтапная локализация сборки и производства в РК."],
];

function AboutPage() {
  const { go } = useNav();
  return (
    <div>
      <div className="wrap"><div className="crumbs"><a onClick={() => go("home")}>Главная</a><span className="sep">/</span>О компании</div></div>

      <PageHero eyebrow="О компании · ТОО «ISAN TRADE»"
        title="Инженерная альтернатива Sulzer из Казахстана"
        lead="Молодой, динамично развивающийся бренд промышленного насосного оборудования. Продукция разрабатывается и выпускается на базе контрактного производства по немецкой технологии — это аналог насосов Sulzer с сохранением геометрии, материалов, КПД и ресурса."
        cta="Связаться с нами" ctaSection="lead" />

      {/* О бренде: текст + фото */}
      <section className="sec sec-white">
        <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center" }} data-fac>
          <div className="reveal">
            <Eyebrow>О бренде VOLZAR</Eyebrow>
            <H2>Производство с 25-летним опытом</H2>
            <p className="lead" style={{ marginTop: 12 }}>Изделия выпускаются на современном заводе, работающем по немецкой технологии, с точным контролем каждого этапа производства насосов, полностью совместимых с Sulzer.</p>
            <p className="body" style={{ marginTop: 14 }}>Фактическая площадь завода составляет 18 000 м², из которых 10 000 м² занимает производственный цех. В компании работают более 120 сотрудников, включая 18 ведущих технических инженеров с опытом в насосной промышленности.</p>
            <p className="body" style={{ marginTop: 14 }}>Сегодня бренд VOLZAR ориентирован на потребности предприятий Казахстана и стран СНГ в водоснабжении, энергетике, химической, нефтяной и перерабатывающей промышленности.</p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 24 }}>
              {["ISO 2858 / 5199", "API 610", "ISO 14001", "FAT-испытания"].map((c) => <Badge key={c} variant="neutral">{c}</Badge>)}
            </div>
          </div>
          <image-slot id="about-factory" style={{ width: "100%", height: "clamp(280px,34vw,420px)", borderRadius: "var(--radius-xl)" }}
            shape="rounded" radius="20" placeholder="Фото производства / цеха"></image-slot>
        </div>
      </section>

      {/* Факты — синяя островная полоса */}
      <section className="sec sec-sand" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <BlueIsland arrow={false} radius="xl" padding="clamp(26px,4vw,40px)" className="reveal">
            <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: "28px 18px" }} className="trust-grid">
              {ABOUT_FACTS.map(([v, l]) => (
                <div key={l} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span className="display num" style={{ fontSize: "clamp(18px,1.6vw,24px)", color: "#fff", letterSpacing: "0.01em" }}>{v}</span>
                  <span style={{ fontSize: 12.5, color: "var(--text-on-blue-soft)", lineHeight: 1.3 }}>{l}</span>
                </div>
              ))}
            </div>
          </BlueIsland>
        </div>
      </section>

      {/* Миссия и цель */}
      <section className="sec sec-white">
        <div className="wrap">
          <SectionHead eyebrow="Зачем мы существуем" title="Миссия и цель" />
          <div className="grid-2">
            <Card tone="white" radius="lg" padding="clamp(24px,3vw,32px)" className="reveal">
              <div className="display" style={{ fontSize: 13, letterSpacing: "0.06em", color: "var(--blue-500)", marginBottom: 12 }}>НАША МИССИЯ</div>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: "var(--graphite-900)" }}>Заменить дорогостоящий импорт качественной продукцией собственного бренда, созданной по немецким стандартам и адаптированной к условиям Казахстана.</p>
            </Card>
            <BlueIsland radius="lg" arrow padding="clamp(24px,3vw,32px)" className="reveal">
              <div className="display" style={{ fontSize: 13, letterSpacing: "0.06em", color: "var(--text-on-blue-soft)", marginBottom: 12 }}>НАША ЦЕЛЬ</div>
              <p style={{ fontSize: 18, lineHeight: 1.55, color: "#fff" }}>Мы — альтернатива Sulzer: то же качество, но честная цена. Стать выбором №1 для промышленных предприятий в Казахстане и за его пределами.</p>
            </BlueIsland>
          </div>
        </div>
      </section>

      {/* Ценности */}
      <section className="sec sec-sand">
        <div className="wrap">
          <SectionHead eyebrow="Принципы" title="На чём стоит бренд"
            lead="Инженерия уровня оригинала без переплаты за бренд — и локальный партнёр, который рядом." />
          <div className="grid-3" style={{ rowGap: 32 }}>
            {VALUES.map(([h, p], i) => (
              <div key={h} className="reveal" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                <div className="display num" style={{ fontSize: 13, color: "var(--blue-500)" }}>{String(i + 1).padStart(2, "0")}</div>
                <h3 style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 18, color: "var(--graphite-900)" }}>{h}</h3>
                <p style={{ fontSize: 14.5, color: "var(--text-body)", lineHeight: 1.55 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <LeadForm eyebrow="Заявка" title="Обсудим вашу задачу"
        lead="Расскажите о парке оборудования или конкретной модели Sulzer — предложим совместимое решение, срок изготовления и условия."
        fields="full" />
    </div>
  );
}
window.AboutPage = AboutPage;