/* VOLZAR — Home page */
function HomeHero() {
  const { go } = useNav();
  return (
    <section className="sec-sand" style={{ paddingTop: 64, paddingBottom: "calc(64px + clamp(28px,6vw,64px))" }}>
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1.12fr 0.88fr", gap: 52, alignItems: "center" }} data-hero>
        <div>
          <Eyebrow>ТОО «ISAN TRADE» · Актобе, Казахстан</Eyebrow>
          <h1 className="display reveal" style={{ fontSize: "clamp(32px,4.6vw,56px)", maxWidth: "19ch", margin: "0 0 20px" }}>
            Инженерная альтернатива промышленным насосам Sulzer
          </h1>
          <p className="lead reveal">Полная взаимозаменяемость по геометрии, материалам и характеристикам. Срок изготовления 12–14 недель вместо 20–24, гарантия и сервис в Казахстане.</p>
          <p className="reveal" style={{ fontWeight: 700, color: "var(--graphite-900)", marginTop: 10, fontSize: 17 }}>Снижение затрат. Контроль рисков. Локальный сервис.</p>
          <div className="reveal" style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
            <Button variant="primary" size="lg" arrow onClick={() => go(null, "lead")}>Подобрать насос</Button>
            <Button variant="secondary" size="lg" onClick={() => go("catalog")}>Каталог серий</Button>
          </div>
        </div>

        <BlueIsland radius="xl" arrow padding="clamp(26px,3vw,34px)" className="reveal" style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <div className="display" style={{ fontSize: 12, letterSpacing: "0.16em", color: "var(--text-on-blue-soft)" }}>Совместимая замена</div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr", alignItems: "center", gap: 12 }}>
            <div style={{ border: "1px solid var(--border-on-blue)", borderRadius: "var(--radius-md)", padding: "16px 14px" }}>
              <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-on-blue-soft)", fontWeight: 600 }}>Sulzer</div>
              <div className="display" style={{ fontSize: 22, color: "#fff", marginTop: 6 }}>MCE</div>
            </div>
            <div style={{ fontSize: 24, color: "#fff", fontWeight: 700 }}>⇄</div>
            <div style={{ background: "#fff", borderRadius: "var(--radius-md)", padding: "16px 14px" }}>
              <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--blue-500)", fontWeight: 600 }}>Volzar</div>
              <div className="display" style={{ fontSize: 22, color: "var(--graphite-900)", marginTop: 6 }}>АКМ</div>
            </div>
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "8px 18px", borderTop: "1px solid var(--border-on-blue)", paddingTop: 16 }}>
            {["геометрия", "материалы", "КПД", "присоед. размеры"].map((t) => (
              <span key={t} style={{ display: "inline-flex", gap: 6, alignItems: "center", fontSize: 13, color: "var(--text-on-blue-soft)" }}>
                <span style={{ color: "#fff", fontWeight: 800 }}>✓</span>{t}
              </span>
            ))}
          </div>
        </BlueIsland>
      </div>
    </section>
  );
}

const OEM_PAINS = ["Высокая стоимость закупки и запчастей", "Срок поставки 20–24 недели", "Дорогое сервисное обслуживание", "Полная зависимость от одного производителя", "Риск простоя в ожидании комплектов ЗИП"];
const VOLZAR_WINS = ["Взаимозаменяемость с оригиналом без переделок", "Срок изготовления 12–14 недель", "Запчасти и ремкомплекты дешевле на 30–40%", "Локальный склад и сервис в Актобе", "Независимость и управляемость парка"];

function ProblemSolution() {
  return (
    <section className="sec sec-white">
      <div className="wrap">
        <SectionHead eyebrow="Зачем уходить от единственного поставщика"
          title="Скорость ремонта и доступность важнее бренда на шильдике"
          lead="Зависимость от одного OEM-производителя превращает каждый простой в прямые потери. VOLZAR снимает эту зависимость, сохраняя характеристики оборудования." />
        <div className="grid-2">
          <Card tone="white" radius="lg" padding="clamp(24px,3vw,32px)" className="reveal">
            <H3 style={{ marginBottom: 18 }}>Оригинальное OEM-оборудование</H3>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 12 }}>
              {OEM_PAINS.map((t) => (
                <li key={t} style={{ display: "flex", gap: 11, alignItems: "flex-start", fontSize: 15, color: "var(--text-body)" }}>
                  <span style={{ color: "var(--red-500)", fontWeight: 800, lineHeight: 1.4 }}>—</span>{t}
                </li>
              ))}
            </ul>
          </Card>
          <BlueIsland radius="lg" arrow={false} padding="clamp(24px,3vw,32px)" className="reveal">
            <H3 tone="light" style={{ marginBottom: 18 }}>Насосы VOLZAR</H3>
            <BulletList tone="light" marker="arrow" items={VOLZAR_WINS} />
          </BlueIsland>
        </div>
      </div>
    </section>
  );
}

const KPI = [
  ["12–14", "недель — срок изготовления вместо 20–24"],
  ["−30–50%", "совокупная стоимость владения (TCO)"],
  ["−30%", "операционные расходы (OPEX)"],
  ["−30–40%", "запчасти и ремкомплекты"],
];
function Economics() {
  return (
    <section className="sec sec-sand">
      <div className="wrap">
        <SectionHead eyebrow="Экономика владения" title="Где предприятие экономит" />
        <div className="grid-4">
          {KPI.map(([v, l]) => (
            <Card key={l} tone="white" radius="lg" className="reveal" style={{ display: "flex", flexDirection: "column", gap: 10 }}>
              <Stat value={v} label="" />
              <span style={{ fontSize: 14, color: "var(--text-body)", lineHeight: 1.5 }}>{l}</span>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

function SeriesTable() {
  const { go } = useNav();
  return (
    <section className="sec sec-white">
      <div className="wrap">
        <SectionHead eyebrow="Линейка" title="Серии насосов и совместимость"
          lead="Каждая серия VOLZAR взаимозаменяема с соответствующей серией Sulzer по присоединительным размерам и рабочим характеристикам." />
        <div className="reveal" style={{ overflowX: "auto" }}>
          <ComparisonTable
            style={{ minWidth: 880 }}
            columns={[
              { key: "v", label: "Серия VOLZAR", highlight: true },
              { key: "s", label: "Sulzer" },
              { key: "q", label: "Производит.", align: "right" },
              { key: "h", label: "Напор", align: "right" },
              { key: "p", label: "Давление", align: "right" },
              { key: "t", label: "Темп.", align: "right" },
              { key: "d", label: "Патрубок", align: "right" },
              { key: "r", label: "Об/мин", align: "right" },
            ]}
            rows={[
              { v: "АКМ", s: "MCE", q: "до 940 л/с", h: "до 250 м", p: "до 25 бар", t: "до 180 °C", d: "50–400 мм", r: "до 3600" },
              { v: "ANS", s: "SNS", q: "до 1400 м³/ч", h: "до 160 м", p: "до 16 бар", t: "до 120 °C", d: "25–125 мм", r: "до 3600" },
              { v: "AKW", s: "WPP", q: "до 7000 м³/ч", h: "до 110 м", p: "до 16 бар", t: "до 180 °C", d: "32–600 мм", r: "до 3600" },
              { v: "AKE", s: "EPP", q: "до 6100 м³/ч", h: "до 160 м", p: "до 25 бар", t: "до 210 °C", d: "65–500 мм", r: "до 3600" },
              { v: "DMBN", s: "MBN", q: "до 700 м³/ч", h: "до 900 м", p: "до 100 бар", t: "до 180 °C", d: "от 150 мм", r: "до 6000" },
            ]}
          />
        </div>
        <p style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 12 }}>Полная таблица типоразмеров и подбор под рабочую точку — по запросу.</p>
        <div style={{ marginTop: 22 }}><Button variant="primary" arrow onClick={() => go("catalog")}>Открыть каталог серий</Button></div>
      </div>
    </section>
  );
}

const INDUSTRIES = [
  "Целлюлозно-бумажная", "Энергетика", "Нефтехимия и химия", "ГОК и металлургия",
  "Водоснабжение и водоотведение", "Экология и переработка", "Пожаротушение", "Пищевая и фармацевтика",
];
function IndustriesGrid() {
  const { go } = useNav();
  return (
    <section className="sec sec-sand">
      <div className="wrap">
        <SectionHead eyebrow="Применения" title="Решения по отраслям"
          lead="Подбираем исполнение под среду, давление и износостойкость конкретного процесса." />
        <div className="grid-4">
          {INDUSTRIES.map((name, i) => (
            <Card key={name} tone="white" radius="lg" padding="22px 20px" className="ind-tile reveal" onClick={() => go("industry")}
              style={{ minHeight: 150, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div className="display num ind-num" style={{ fontSize: 13, color: "var(--blue-500)", letterSpacing: "0.04em" }}>{String(i + 1).padStart(2, "0")}</div>
              <div>
                <h3 className="ind-name" style={{ fontFamily: "var(--font-body)", fontWeight: 700, fontSize: 16, color: "var(--graphite-900)", marginTop: 14 }}>{name}</h3>
                <div className="ind-go" style={{ fontSize: 12.5, color: "var(--text-muted)", marginTop: 10, fontWeight: 500 }}>смотреть →</div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

const SERVICES = [
  ["01", "Шеф-монтаж и пусконаладка", "Ввод в эксплуатацию силами наших инженеров."],
  ["02", "Первые два ТО — бесплатно", "Плановое обслуживание включено в поставку."],
  ["03", "Локальный склад ЗИП", "Быстрая логистика ремкомплектов и запчастей."],
  ["04", "Диагностика и техаудит", "Оценка состояния насосных систем на объекте."],
  ["05", "Гарантия взаимозаменяемости", "Совпадение характеристик с оригиналом подтверждается."],
  ["06", "Обслуживание чужого оборудования", "Поддержим парк, закупленный ранее у других."],
];
function ServiceTeaser() {
  const { go } = useNav();
  return (
    <section className="sec sec-white">
      <div className="wrap">
        <SectionHead eyebrow="Сервис в Казахстане" title="Поддержка на всём жизненном цикле"
          lead="Обслуживаем не только насосы VOLZAR, но и установленное у вас оборудование других производителей." />
        <div className="grid-3" style={{ rowGap: 32 }}>
          {SERVICES.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 style={{ marginTop: 34 }}><Button variant="secondary" arrow onClick={() => go("service")}>Подробнее о сервисе</Button></div>
      </div>
    </section>
  );
}

function Factory() {
  return (
    <section className="sec sec-sand" id="factory">
      <div className="wrap" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }} data-fac>
        <div className="reveal">
          <Eyebrow>Завод и качество</Eyebrow>
          <H2>Производство с 25-летним опытом</H2>
          <p className="lead" style={{ marginTop: 12 }}>Контрактное OEM-производство на сертифицированном заводе с контролем качества на каждом этапе. Заводские приёмочные испытания (FAT) и инспекции — по запросу заказчика.</p>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginTop: 22 }}>
            {["ISO 2858 / 5199", "API 610", "ISO 14001", "OHSAS 18001", "FAT-испытания"].map((c) => <Badge key={c} variant="neutral">{c}</Badge>)}
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "24px 40px", marginTop: 30 }}>
            <Stat value="18 000 м²" label="общая площадь" tone="graphite" />
            <Stat value="120+" label="сотрудников" tone="graphite" />
            <Stat value="18" label="ведущих инженеров" tone="graphite" />
          </div>
        </div>
        <image-slot id="factory-photo" style={{ width: "100%", height: "clamp(240px,30vw,360px)", borderRadius: "var(--radius-xl)" }}
          shape="rounded" radius="20" placeholder="Фото производства / цеха"></image-slot>
      </div>
    </section>
  );
}

function Pilot() {
  const { go } = useNav();
  return (
    <section className="sec sec-white">
      <div className="wrap">
        <BlueIsland radius="2xl" arrow={false} padding="clamp(28px,4vw,44px)" className="reveal">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 30, flexWrap: "wrap" }} data-pilot>
            <div style={{ maxWidth: "60ch" }}>
              <H3 tone="light" style={{ fontSize: 26, marginBottom: 8 }}>Начните с пилотного проекта: 1–3 насоса</H3>
              <p style={{ color: "var(--text-on-blue-soft)", fontSize: 16, lineHeight: 1.55 }}>Подтвердите надёжность и экономику на своём объекте перед масштабированием парка. Полное инженерное сопровождение и совместная фиксация показателей.</p>
            </div>
            <Button variant="onblue" size="lg" arrow onClick={() => go(null, "lead")}>Запросить пилот</Button>
          </div>
        </BlueIsland>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <div>
      <HomeHero />
      <TrustBand />
      <ProblemSolution />
      <Economics />
      <SeriesTable />
      <IndustriesGrid />
      <ServiceTeaser />
      <Factory />
      <Pilot />
      <LeadForm eyebrow="Заявка" title="Подберём насос под вашу задачу"
        lead="Укажите модель Sulzer или рабочие параметры — пришлём подбор, срок изготовления и условия. Отвечаем в течение рабочего дня."
        fields="full" />
    </div>
  );
}
window.HomePage = HomePage;