// src/pages-info.jsx — About, Services, Contacts pages

// ─────────────────────────────────────────────────────────────
// PAGE HEADER (common for sub-pages)
// ─────────────────────────────────────────────────────────────

function PageHeader({ num, tag, title, lead, breadcrumb }) {
  return (
    <section className="section section--first" style={{ paddingTop: 72, paddingBottom: 80 }}>
      <div className="wrap">
        {breadcrumb && (
          <div className="t-caption" style={{ marginBottom: 36 }}>
            {breadcrumb}
          </div>
        )}
        <div style={{ display: "flex", gap: 16, alignItems: "center", marginBottom: 32 }}>
          <span className="section-num">{num}</span>
          <span className="section-tag">{tag}</span>
        </div>
        <h1 className="t-h1" style={{ marginBottom: 28, maxWidth: 980 }}>{title}</h1>
        {lead && <p className="t-lead" style={{ maxWidth: 720 }}>{lead}</p>}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// ABOUT PAGE
// ─────────────────────────────────────────────────────────────

function AboutPage({ navigate }) {
  return (
    <div className="page-enter" data-screen-label="About">
      <PageHeader
        num="/02"
        tag="О компании"
        title="Привозим то, что нужно — в условиях, в которых это считается сложным."
        lead="ACCORD GROUP — B2B-компания по импорту, экспорту и международной логистике. Работаем с клиентами из РБ, РФ и СНГ, которым нужны нестандартные поставки и практичные решения."
        breadcrumb={<span><a href="./" onClick={(ev) => { ev.preventDefault(); navigate("home"); }} style={{cursor:"pointer"}}>Главная</a> &nbsp;/&nbsp; О компании</span>}
      />

      {/* Two-column manifest */}
      <section className="section" data-screen-label="About / Manifest">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }} className="about-cols">
            <div>
              <span className="section-tag" style={{ marginBottom: 24 }}>Кто мы</span>
              <h2 className="t-h2" style={{ marginTop: 24, marginBottom: 32 }}>
                Команда практиков, а не отдел продаж.
              </h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
                <p className="t-body" style={{ fontSize: 17 }}>
                  Работаем в импорте и закупках с командами, у которых уже горел заказ, отказал поставщик или закрылся привычный коридор. Не продаём слайды — собираем то, что реально доходит до склада.
                </p>
                <p className="t-body" style={{ fontSize: 17 }}>
                  Берёмся за задачи, у которых нет шаблонного решения: новые маршруты, альтернативные поставщики, нестандартные документы.
                </p>
              </div>
            </div>
            <div>
              <span className="section-tag" style={{ marginBottom: 24 }}>Что мы делаем</span>
              <h2 className="t-h2" style={{ marginTop: 24, marginBottom: 32 }}>
                От поиска поставщика до прибытия груза.
              </h2>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  "Подбираем поставщиков в ЕС, Азии и на смежных рынках.",
                  "Организуем закупку: согласование цен, контракт, оплата.",
                  "Проектируем маршрут и сопровождаем логистику.",
                  "Готовим документы, помогаем с таможенным оформлением.",
                  "Закрываем сделку как агент или как принципал.",
                ].map((line, i) => (
                  <div key={i} style={{ display: "flex", gap: 16, alignItems: "flex-start", padding: "12px 0", borderTop: i === 0 ? "1px solid var(--line)" : "none", borderBottom: "1px solid var(--line)" }}>
                    <span className="mono" style={{ color: "var(--accent)", fontSize: 12, paddingTop: 4 }}>0{i + 1}</span>
                    <span style={{ fontSize: 16 }}>{line}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <style>{`
            @media (max-width: 920px) {
              .about-cols { grid-template-columns: 1fr !important; gap: 56px !important; }
            }
          `}</style>
        </div>
      </section>

      {/* Принципы — большие карточки */}
      <section className="section" data-screen-label="About / Principles" style={{ background: "var(--bg-1)" }}>
        <div className="wrap">
          <SectionHead
            num="01"
            tag="Принципы работы"
            title="То, что мы делаем по умолчанию"
            lead="Не маркетинговые обещания, а правила, по которым устроена работа внутри. Если вы тоже работаете так — мы совпадём."
          />
          <div className="grid grid--2">
            {[
              {
                title: "Конфиденциальность",
                desc: "NDA по умолчанию — до обсуждения задачи. Не публикуем имена клиентов, поставщиков, бренды и маршруты. Кейсы — только в обезличенной форме.",
              },
              {
                title: "Гибкость, а не процедуры",
                desc: "Не отказываем по причине \"нет такой услуги в матрице\". Если задача в зоне нашей компетенции — собираем под неё решение.",
              },
              {
                title: "Практический подход",
                desc: "Сначала проверяем, что схема реально работает: документально, логистически и коммерчески. Только потом предлагаем клиенту.",
              },
              {
                title: "Прозрачная экономика",
                desc: "Даём диапазон стоимости и сроков до старта. Объясняем, из чего складывается цена и где находятся риски удорожания.",
              },
            ].map((p, i) => (
              <Reveal key={i} delay={i * 0.06} className="card" style={{ padding: "44px 36px" }}>
                <div className="mono" style={{ fontSize: 12, color: "var(--accent)", marginBottom: 24 }}>
                  {String(i + 1).padStart(2, "0")} / 04
                </div>
                <h3 className="t-h3" style={{ marginBottom: 14 }}>{p.title}</h3>
                <p className="t-body">{p.desc}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Чем мы отличаемся от посредника */}
      <section className="section" data-screen-label="About / Versus">
        <div className="wrap">
          <SectionHead
            num="02"
            tag="Чем мы отличаемся"
            title={'Не «один из посредников»'}
            lead="Прямое сравнение того, что обычно получает клиент — и того, что получает у нас. Без приукрашиваний."
          />
          <div style={{
            border: "1px solid var(--line)",
            borderRadius: 6,
            overflow: "hidden",
          }}>
            {[
              ["Скорость ответа", "1–3 рабочих дня", "До 4 рабочих часов на первичную оценку"],
              ["Прозрачность маршрута", "\"Привезём, дальше расскажем\"", "Сначала логика и риски — потом запуск"],
              ["Подбор поставщика", "1 контакт, без альтернатив", "2–3 поставщика на сравнение"],
              ["Документы", "На усмотрение клиента", "Берём в работу, ведём вместе"],
              ["Конфиденциальность", "По запросу", "NDA с первого касания, по умолчанию"],
            ].map((row, i, arr) => (
              <div key={i} style={{
                display: "grid",
                gridTemplateColumns: "1.2fr 1.4fr 1.4fr",
                gap: 0,
                borderBottom: i < arr.length - 1 ? "1px solid var(--line)" : "none",
              }} className="vs-row">
                <div style={{ padding: "22px 24px", fontWeight: 500, fontSize: 15 }}>{row[0]}</div>
                <div style={{ padding: "22px 24px", color: "var(--text-dim)", fontSize: 15, borderLeft: "1px solid var(--line)", borderRight: "1px solid var(--line)" }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--text-dimmer)", display: "block", marginBottom: 6 }}>обычно</span>
                  {row[1]}
                </div>
                <div style={{ padding: "22px 24px", fontSize: 15 }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--accent)", display: "block", marginBottom: 6 }}>у нас</span>
                  {row[2]}
                </div>
              </div>
            ))}
            <style>{`
              @media (max-width: 720px) {
                .vs-row { grid-template-columns: 1fr !important; }
                .vs-row > div { border: none !important; padding: 16px 20px !important; }
                .vs-row > div + div { border-top: 1px solid var(--line) !important; }
              }
            `}</style>
          </div>
        </div>
      </section>

      {/* Audience */}
      <section className="section" data-screen-label="About / Audience">
        <div className="wrap">
          <SectionHead
            num="03"
            tag="С кем работаем"
            title="Для кого мы — правильный партнёр"
          />
          <div className="grid grid--3">
            {[
              { title: "Импортёры", desc: "Компании, которым нужно регулярно или разово привезти товар из ЕС, Азии или смежных рынков." },
              { title: "Производства", desc: "Заводы и сборочные предприятия, которым нужны компоненты, оборудование или сырьё." },
              { title: "Закупщики", desc: "Отделы закупок, которым нужна альтернатива пропавшему поставщику или нетипичный маршрут." },
            ].map((a, i) => (
              <Reveal key={i} delay={i * 0.06} style={{ padding: "28px 0", borderTop: "1px solid var(--accent-line)" }}>
                <h3 className="t-h3" style={{ marginBottom: 12 }}>{a.title}</h3>
                <p className="t-body" style={{ fontSize: 15 }}>{a.desc}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <HomeCTA navigate={navigate} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// SERVICES PAGE
// ─────────────────────────────────────────────────────────────

const SERVICES_DETAILED = [
  {
    num: "01",
    slug: "purchase",
    title: "Закупки под заказ",
    short: "Поиск и организация закупки товаров под конкретную потребность клиента.",
    for: "Импортёры, производства, отделы закупок, которым нужен товар с конкретными характеристиками.",
    solves: [
      "Не получается найти товар на привычных площадках.",
      "Поставщики срываются или меняют условия в процессе.",
      "Нужен товар по нестандартным спецификациям.",
    ],
    process: ["Принимаем ТЗ", "Подбираем поставщиков", "Согласуем условия", "Закупаем и доставляем"],
  },
  {
    num: "02",
    slug: "supplier",
    title: "Подбор поставщика",
    short: "Поиск потенциальных поставщиков, первичная коммуникация, оценка коммерческих условий.",
    for: "Компании, у которых выпал основной поставщик, или которые ищут альтернативу по цене или географии.",
    solves: [
      "Нужны 2–3 альтернативы на сравнение.",
      "Нужно проверить надёжность нового контрагента.",
      "Нужен поставщик в \"непривычном\" регионе.",
    ],
    process: ["Анализ рынка", "Шорт-лист поставщиков", "Первичные переговоры", "Передача контакта клиенту"],
  },
  {
    num: "03",
    slug: "logistics",
    title: "Международная логистика",
    short: "Подбор маршрута, организация доставки, расчёт логистических расходов в условиях ограничений.",
    for: "Импортёры, которым нужно перевезти груз из/в страну с непростой логистикой.",
    solves: [
      "Закрылся привычный маршрут — нужна альтернатива.",
      "Нужен мультимодальный маршрут с просчитанной экономикой.",
      "Нужен расчёт стоимости и сроков до начала закупки.",
    ],
    process: ["Анализ груза и маршрута", "Подбор вариантов", "Расчёт и согласование", "Сопровождение перевозки"],
  },
  {
    num: "04",
    slug: "import-export",
    title: "Импорт / экспорт",
    short: "Сопровождение поставок между странами, организация сделки, помощь с документами.",
    for: "Компании, которым нужен партнёр по всей цепочке от контракта до таможни.",
    solves: [
      "Нет ресурса вести сделку и логистику параллельно.",
      "Нужно правильно оформить документы под конкретный товар и страну.",
      "Нужно учесть актуальные ограничения и риски.",
    ],
    process: ["Структура сделки", "Контракт и документы", "Закупка и логистика", "Таможенное оформление"],
  },
  {
    num: "05",
    slug: "agency",
    title: "Агентирование",
    short: "Работа по агентской модели от имени или в интересах клиента.",
    for: "Клиенты, которым нужно вести сделку через посредника по юридическим, налоговым или операционным причинам.",
    solves: [
      "Нужен контрагент в другой стране.",
      "Нужно держать сделку через нейтральную сторону.",
      "Нужно ускорить запуск без открытия собственной структуры.",
    ],
    process: ["Согласование схемы", "Оформление агентского", "Ведение сделки", "Отчётность"],
  },
  {
    num: "06",
    slug: "consulting",
    title: "Консультирование",
    short: "Консультации по вариантам поставки, рискам, структуре сделки, логистике и экономике.",
    for: "Тех, кому нужно понять, реалистично ли вообще привезти товар, прежде чем запускать сделку.",
    solves: [
      "Не хватает экспертизы по конкретному рынку.",
      "Нужно понять, какие маршруты и схемы вообще доступны.",
      "Нужно оценить риски до принятия решения.",
    ],
    process: ["Брифинг", "Анализ", "Письменное заключение", "Опц. — сопровождение сделки"],
  },
];

function ServicesPage({ navigate }) {
  return (
    <div className="page-enter" data-screen-label="Services">
      <PageHeader
        num="/03"
        tag="Услуги"
        title="Шесть направлений работы — одна точка входа."
        lead="Можно зайти в любой точке цепочки: только подбор поставщика, только логистика, только консультация. Или взять задачу целиком — от ТЗ до прибытия груза."
        breadcrumb={<span><a href="./" onClick={(ev) => { ev.preventDefault(); navigate("home"); }} style={{cursor:"pointer"}}>Главная</a> &nbsp;/&nbsp; Услуги</span>}
      />

      {/* Anchored nav of services */}
      <section style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--bg-1)", position: "sticky", top: 96, zIndex: 50 }}>
        <div className="wrap" style={{ overflowX: "auto" }}>
          <div style={{ display: "flex", gap: 0, minWidth: "max-content" }}>
            {SERVICES_DETAILED.map((s) => (
              <a key={s.slug} href={`#${s.slug}`} style={{
                padding: "18px 20px",
                fontSize: 13,
                fontFamily: "var(--font-ui), ui-sans-serif, sans-serif",
                letterSpacing: "0.04em",
                textTransform: "uppercase",
                color: "var(--text-dim)",
                borderRight: "1px solid var(--line)",
                whiteSpace: "nowrap",
                cursor: "pointer",
                transition: "color 0.18s ease, background 0.18s ease",
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "var(--bg-2)"; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = "var(--text-dim)"; e.currentTarget.style.background = "transparent"; }}>
                <span style={{ color: "var(--accent)", marginRight: 8 }}>{s.num}</span>{s.title}
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Service blocks */}
      {SERVICES_DETAILED.map((s, i) => (
        <ServiceDetailBlock key={s.slug} service={s} index={i} navigate={navigate} />
      ))}

      <HomeCTA navigate={navigate} />
    </div>
  );
}

function ServiceDetailBlock({ service, index, navigate }) {
  const s = service;
  return (
    <section id={s.slug} className="section" data-screen-label={`Services / ${s.title}`} style={{ background: index % 2 === 1 ? "var(--bg-1)" : "transparent" }}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80 }} className="svc-grid">
          <div style={{ position: "sticky", top: 160, alignSelf: "start" }}>
            <span className="mono" style={{ fontSize: 14, color: "var(--accent)", display: "block", marginBottom: 32 }}>{s.num} / 06</span>
            <h2 className="t-h2" style={{ marginBottom: 24, letterSpacing: "-0.025em" }}>{s.title}</h2>
            <p className="t-lead" style={{ marginBottom: 32 }}>{s.short}</p>
            <Button onClick={() => navigate("request")}>Оставить заявку <ArrowIcon /></Button>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
            <Reveal>
              <div className="t-caption" style={{ marginBottom: 16, color: "var(--accent)" }}>Для кого</div>
              <p style={{ fontSize: 18, lineHeight: 1.5 }}>{s.for}</p>
            </Reveal>

            <Reveal delay={0.05}>
              <div className="t-caption" style={{ marginBottom: 16, color: "var(--accent)" }}>Какую задачу решает</div>
              <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
                {s.solves.map((line, i) => (
                  <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: "14px 0", borderTop: "1px solid var(--line)" }}>
                    <span style={{ color: "var(--accent)", fontSize: 12, paddingTop: 6 }}>●</span>
                    <span style={{ fontSize: 16 }}>{line}</span>
                  </li>
                ))}
              </ul>
            </Reveal>

            <Reveal delay={0.1}>
              <div className="t-caption" style={{ marginBottom: 16, color: "var(--accent)" }}>Как это устроено</div>
              <div style={{
                display: "grid",
                gridTemplateColumns: "repeat(4, 1fr)",
                gap: 0,
                border: "1px solid var(--line)",
                borderRadius: 4,
                overflow: "hidden",
              }} className="proc-mini">
                {s.process.map((p, i, arr) => (
                  <div key={i} style={{
                    padding: "18px 18px 22px",
                    borderRight: i < arr.length - 1 ? "1px solid var(--line)" : "none",
                  }}>
                    <span className="mono" style={{ color: "var(--accent)", fontSize: 11, display: "block", marginBottom: 14 }}>
                      0{i + 1}
                    </span>
                    <span style={{ fontSize: 14, fontWeight: 500, lineHeight: 1.3 }}>{p}</span>
                  </div>
                ))}
              </div>
              <style>{`
                @media (max-width: 720px) {
                  .proc-mini { grid-template-columns: 1fr 1fr !important; }
                  .proc-mini > * { border-right: none !important; border-bottom: 1px solid var(--line); }
                  .proc-mini > *:nth-child(2n) { border-right: 1px solid var(--line) !important; }
                }
              `}</style>
            </Reveal>
          </div>
        </div>
        <style>{`
          @media (max-width: 920px) {
            .svc-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
            .svc-grid > div:first-child { position: static !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────
// CONTACTS PAGE
// ─────────────────────────────────────────────────────────────

function ContactsPage({ navigate }) {
  return (
    <div className="page-enter" data-screen-label="Contacts">
      <PageHeader
        num="/04"
        tag="Контакты"
        title="Один контакт — одно решение."
        lead="Опишите запрос в форме, напишите на email, в Telegram или позвоните. Возьмёмся за обсуждение в течение 4 рабочих часов."
        breadcrumb={<span><a href="./" onClick={(ev) => { ev.preventDefault(); navigate("home"); }} style={{cursor:"pointer"}}>Главная</a> &nbsp;/&nbsp; Контакты</span>}
      />

      <section className="section" data-screen-label="Contacts / Channels">
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 64 }} className="contacts-grid">
            <div style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 6, overflow: "hidden" }}>
              {[
                {
                  label: "Email",
                  value: "hello@accordgroup.by",
                  href: "mailto:hello@accordgroup.by",
                  hint: "Заявки, обсуждение задач, документы",
                  icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M2 4h14v10H2zM2 5l7 5 7-5" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>,
                },
                {
                  label: "Telegram",
                  value: "@accord_supply",
                  href: "https://t.me/accord_supply",
                  hint: "Быстрая связь и уточнение по заявке",
                  icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M16 3L2 9l5 2 1 4 3-3 4 3 1-12z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>,
                },
                {
                  label: "Телефон",
                  value: "+375 44 727 50 17",
                  href: "tel:+375447275017",
                  hint: "Звонки и мессенджеры в рабочее время",
                  icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M5.1 2.5l1.7 3.3-1.3 1.3c.9 1.8 2.4 3.3 4.2 4.2l1.3-1.3 3.3 1.7-.6 2.7c-.1.5-.6.9-1.1.9C7.2 15.3 2.7 10.8 2.7 5.4c0-.5.4-1 .9-1.1l1.5-.3z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round"/></svg>,
                },
                {
                  label: "NDA",
                  value: "По запросу до обсуждения",
                  href: "mailto:hello@accordgroup.by?subject=NDA",
                  hint: "Высылаем шаблон или подписываем ваш",
                  icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 6V4h12v2M3 8h12v6H3zM6 11h6" stroke="currentColor" strokeWidth="1.5"/></svg>,
                },
              ].map((c, i) => (
                <a key={i} href={c.href || "#request"} onClick={(ev) => { if (!c.href) { ev.preventDefault(); navigate("request"); } }} style={{
                  background: "var(--bg-0)",
                  padding: "32px 28px",
                  display: "grid",
                  gridTemplateColumns: "40px 1fr auto",
                  gap: 20,
                  alignItems: "center",
                  cursor: "pointer",
                  transition: "background 0.18s ease",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.background = "var(--bg-2)")}
                onMouseLeave={(e) => (e.currentTarget.style.background = "var(--bg-0)")}>
                  <span style={{
                    width: 40, height: 40, borderRadius: 4,
                    border: "1px solid var(--accent-line)",
                    background: "var(--accent-soft)",
                    color: "var(--accent)",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}>{c.icon}</span>
                  <div>
                    <div className="t-caption" style={{ marginBottom: 6 }}>{c.label}</div>
                    <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 2 }}>{c.value}</div>
                    <div style={{ fontSize: 13, color: "var(--text-dim)" }}>{c.hint}</div>
                  </div>
                  <ArrowIcon />
                </a>
              ))}
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 32 }}>
              <div className="card" style={{ padding: 28 }}>
                <div className="t-caption" style={{ color: "var(--accent)", marginBottom: 16 }}>Часы работы</div>
                <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 6 }}>Пн—Сб, 09:00—22:00</div>
                <div style={{ fontSize: 14, color: "var(--text-dim)" }}>GMT+3 / Минск / Москва</div>
                <div style={{ marginTop: 18, padding: "12px 14px", background: "var(--bg-2)", borderRadius: 4, fontSize: 13, lineHeight: 1.5, color: "var(--text-mid)" }}>
                  Заявки за пределами рабочих часов попадают в очередь и берутся в работу в течение первого часа следующего рабочего дня.
                </div>
              </div>

              <div className="card" style={{ padding: 28 }}>
                <div className="t-caption" style={{ color: "var(--accent)", marginBottom: 16 }}>География</div>
                <div style={{ fontSize: 16, lineHeight: 1.6 }}>
                  Принимаем заявки от компаний из <strong>РБ, РФ и стран СНГ</strong>. Закупаем и привозим из ЕС, Азии и смежных рынков.
                </div>
              </div>

              <div className="card" style={{ padding: 28 }}>
                <div className="t-caption" style={{ color: "var(--accent)", marginBottom: 16 }}>Юридическая информация</div>
                <div style={{ fontSize: 14, color: "var(--text-mid)", lineHeight: 1.6 }}>
                  Реквизиты компании и юридические условия высылаем по запросу после первичного обсуждения задачи и подписания NDA.
                </div>
              </div>
            </div>
          </div>
          <style>{`
            @media (max-width: 920px) {
              .contacts-grid { grid-template-columns: 1fr !important; }
            }
          `}</style>
        </div>
      </section>

      <section className="section" data-screen-label="Contacts / CTA-form" style={{ background: "var(--bg-1)" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }} className="contact-cta">
            <div>
              <h2 className="t-h2" style={{ marginBottom: 24 }}>
                Удобнее заполнить форму?
              </h2>
              <p className="t-lead">
                В форме указано всё, что нам нужно для первичной оценки задачи. Уйдёт 2–3 минуты, ответ — в течение 4 рабочих часов.
              </p>
            </div>
            <div style={{ display: "flex", justifyContent: "flex-end" }}>
              <Button size="lg" onClick={() => navigate("request")}>
                Открыть форму заявки <ArrowIcon />
              </Button>
            </div>
          </div>
          <style>{`
            @media (max-width: 720px) {
              .contact-cta { grid-template-columns: 1fr !important; gap: 24px !important; }
              .contact-cta > div:last-child { justify-content: flex-start !important; }
            }
          `}</style>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  PageHeader, AboutPage, ServicesPage, ContactsPage, SERVICES_DETAILED,
});