/* VOLZAR — Service page */
const SVC_FULL = [
  ["01", "Шеф-монтаж и пусконаладка", "Ввод оборудования в эксплуатацию силами наших инженеров на вашем объекте."],
  ["02", "Первые два ТО — бесплатно", "Плановое техническое обслуживание включено в условия поставки."],
  ["03", "Склад ЗИП в Актобе", "Бесперебойная поставка ремкомплектов и запчастей с локального склада."],
  ["04", "Диагностика и техаудит", "Профессиональная оценка состояния насосных систем предприятия."],
  ["05", "Гарантийное обслуживание", "Гарантия и подтверждение взаимозаменяемости с оригиналом."],
  ["06", "Обслуживание чужого оборудования", "Поддерживаем парк OEM-насосов, закупленных ранее у других поставщиков."],
];
const STEPS = [
  ["Этап 1 · сейчас", "Контрактное OEM", "Производство на сертифицированном зарубежном заводе."],
  ["Этап 2 · 0–6 мес.", "Сборка в РК", "Запуск промышленной сборки на территории Казахстана."],
  ["Этап 3 · 6–18 мес.", "Местное содержание", "Поэтапное увеличение доли казахстанских компонентов."],
  ["Этап 4 · 18–24 мес.", "Углубление", "Дальнейшая локализация узлов и сервисной базы."],
];

function ServicePage() {
  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="Сервис и поддержка в Казахстане"
        lead="Полное инженерное сопровождение на всём жизненном цикле оборудования — от ввода в эксплуатацию до планового обслуживания и поставки ЗИП. Работаем как с насосами VOLZAR, так и с оборудованием других производителей."
        cta="Заказать выезд инженера" ctaSection="lead" />

      <section className="sec sec-white">
        <div className="wrap">
          <SectionHead eyebrow="Что входит" title="Сервисное сопровождение" />
          <div className="grid-3" style={{ rowGap: 32 }}>
            {SVC_FULL.map(([k, h, p]) => (
              <div key={k} className="reveal" style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                <div className="display num" style={{ fontSize: 13, color: "var(--blue-500)" }}>{k}</div>
                <h3 style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 17, color: "var(--graphite-900)" }}>{h}</h3>
                <p style={{ fontSize: 14, color: "var(--text-body)", lineHeight: 1.5 }}>{p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="sec sec-sand">
        <div className="wrap">
          <SectionHead eyebrow="Стратегия локализации" title="План развития производства в РК"
            lead="Поэтапный рост локального содержания — стабильность поставок и сильный местный партнёр." />
          <div className="grid-4">
            {STEPS.map(([n, h, p]) => (
              <Card key={n} tone="white" radius="lg" className="reveal" style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                <div className="display num" style={{ fontSize: 12.5, color: "var(--blue-500)", letterSpacing: "0.03em" }}>{n}</div>
                <h3 style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 16, color: "var(--graphite-900)", marginTop: 6 }}>{h}</h3>
                <p style={{ fontSize: 13.5, color: "var(--text-body)", lineHeight: 1.5 }}>{p}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      <LeadForm eyebrow="Заявка · сервис" title="Нужен сервис или ЗИП?"
        lead="Опишите оборудование и задачу — организуем выезд инженера, диагностику или поставку запчастей."
        fields="point" showContacts={true} />
    </div>
  );
}
window.ServicePage = ServicePage;