/* eslint-disable */
// Услуги — 4 направления с якорями. Раскрытое: infra (DevOps).

const SERVICES = [
  {
    id: "infra",
    title: "Поддержка ИТ-инфраструктуры",
    eyebrow: "01 / Инфраструктура и DevOps",
    lead: "Берём на себя серверы, сети, мониторинг, CI/CD и информационную безопасность. Подходит, если у вас нет своего сильного админа или хочется сфокусировать его на профильных задачах.",
    desc: [
      "Настраиваем on-prem и облако, выстраиваем процесс изменений и резервное копирование.",
      "Закрываем мониторинг с дежурствами и реакцией по SLA. Описываем регламенты, чтобы не зависеть от одного человека.",
      "Проводим аудит безопасности и помогаем закрывать уязвимости — без громких слов про «киберустойчивость»."
    ],
    stack: [
      ["Linux", "семейство серверных ОС"],
      ["Kubernetes", "система оркестрации контейнеров"],
      ["Docker", "контейнеризация приложений"],
      ["Ansible", "автоматизация конфигурации серверов"],
      ["Prometheus / Grafana", "мониторинг и визуализация метрик"],
      ["GitLab CI", "сборка и деплой кода"],
      ["Nginx / HAProxy", "веб- и балансировщики нагрузки"],
      ["PostgreSQL", "реляционная СУБД"]
    ],
    formats: [
      { kind: "Пакет поддержки", price: "от 90 000 ₽/мес", note: "SLA 4 ч, 20 включённых часов" },
      { kind: "Час дежурного DevOps", price: "от 3 500 ₽", note: "сверх пакета или разово" },
      { kind: "Аудит инфраструктуры", price: "от 180 000 ₽", note: "разовый, отчёт и план работ" }
    ]
  },
  {
    id: "1c",
    title: "1С",
    eyebrow: "02 / Разработка и сопровождение",
    lead: "Сопровождение, доработка и интеграции 1С. Без переписывания типовой ради переписывания.",
    desc: [
      "Сопровождение конфигураций УТ, ERP, ЗУП. Закрытие месяца без героизма.",
      "Доработки и интеграции с маркетплейсами, 1С-Битрикс, EDI, банками, CRM.",
      "Обновления типовой с разбором конфликтов. Документация изменений."
    ],
    stack: [
      ["1С:Предприятие 8.3", "платформа"],
      ["УТ / ERP / ЗУП", "типовые конфигурации"],
      ["EDI", "электронный документооборот с контрагентами"],
      ["REST / SOAP", "интеграционные протоколы"],
      ["1С-Коннект", "техподдержка пользователей"]
    ],
    formats: [
      { kind: "Пакет сопровождения", price: "от 60 000 ₽/мес", note: "20 часов методолога+разработчика" },
      { kind: "Час 1С-разработчика", price: "от 2 800 ₽", note: "разовая доработка / интеграция" }
    ]
  },
  {
    id: "web",
    title: "Веб-разработка",
    eyebrow: "03 / Продукты, B2B-порталы, личные кабинеты",
    lead: "Делаем внутренние и B2B-продукты: личные кабинеты, порталы партнёров, CRM-настройки, e-com бэкофисы.",
    desc: [
      "Считаем не страницы, а пользовательские задачи. Дизайн делаем сами или работаем с вашими дизайнерами.",
      "Бэкенд на Python/Node, фронт на TypeScript. Авторизация, роли, аудит действий.",
      "Подключаемся к 1С и складскому учёту, чтобы пользователь работал в одном окне."
    ],
    stack: [
      ["TypeScript", "типизированный JavaScript для фронта и бэка"],
      ["Next.js", "React-фреймворк"],
      ["FastAPI", "Python-фреймворк для API"],
      ["PostgreSQL", "реляционная СУБД"],
      ["Redis", "in-memory кэш и очереди"]
    ],
    formats: [
      { kind: "MVP-продукт", price: "от 600 000 ₽", note: "фикс 6–10 недель" },
      { kind: "Час разработки", price: "от 2 800 ₽", note: "доработки и поддержка" }
    ]
  },
  {
    id: "ai",
    title: "ИИ / Python / видеоаналитика",
    eyebrow: "04 / ML, LLM, компьютерное зрение",
    lead: "Делаем ML-пайплайны, LLM-агенты на корпоративные данные и видеоаналитику для офлайн-точек.",
    desc: [
      "Классификация диалогов и обращений, скоринг, факторный анализ — на ваших данных.",
      "LLM-агенты: автоматизация отчётов, ответов в саппорте, поиска по корпоративной базе.",
      "Видеоаналитика в магазине: трафик, очереди, зоны интереса, метрики конверсии."
    ],
    stack: [
      ["Python", "основной язык ML"],
      ["PyTorch", "фреймворк глубокого обучения"],
      ["OpenCV", "библиотека компьютерного зрения"],
      ["Whisper", "распознавание речи"],
      ["LangChain", "обвязка для LLM-агентов"],
      ["Triton", "сервинг ML-моделей"],
      ["Airflow", "оркестрация ETL и пайплайнов"]
    ],
    formats: [
      { kind: "Пилот ML-задачи", price: "от 350 000 ₽", note: "4–6 недель, отчёт + прототип" },
      { kind: "Час ML-инженера", price: "от 3 200 ₽", note: "почасовая доработка" }
    ]
  }
];

const ServiceSection = ({ s }) => (
  <section id={s.id} className="section" style={{ scrollMarginTop: 88 }}>
    <div className="shell">
      <SectionNode label={s.eyebrow} />
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56, marginTop: 24 }} className="srv-grid">
        <div>
          <h2 className="t-h1" style={{ margin: 0, maxWidth: "16ch" }}>{s.title}</h2>
          <p className="t-body-lg muted" style={{ marginTop: 16, maxWidth: "44ch" }}>{s.lead}</p>
          {s.desc.map((p, i) => (
            <p key={i} className="t-body" style={{ color: "var(--ink-2)", marginTop: 12, maxWidth: "48ch" }}>{p}</p>
          ))}
          <div style={{ marginTop: 24, display: "flex", gap: 10 }}>
            <a href="#/contacts" className="btn btn-primary btn-sm">Обсудить направление</a>
          </div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <div>
            <div className="t-eyebrow" style={{ marginBottom: 12 }}>Стек и пояснения</div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 10, overflow: "hidden" }}>
              {s.stack.map(([k, v]) => (
                <div key={k} style={{ padding: 14, background: "var(--surface)" }}>
                  <div className="t-mono" style={{ color: "var(--red)", fontSize: 13 }}>{k}</div>
                  <div className="t-small dim" style={{ marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          <div>
            <div className="t-eyebrow" style={{ marginBottom: 12 }}>Формат сотрудничества</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
              {s.formats.map((f) => (
                <div key={f.kind} className="card flat" style={{ padding: 18, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                  <div>
                    <div style={{ fontWeight: 500 }}>{f.kind}</div>
                    <div className="t-small dim" style={{ marginTop: 2 }}>{f.note}</div>
                  </div>
                  <div className="t-mono" style={{ color: "var(--red)", fontSize: 16 }}>{f.price}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 920px) { .srv-grid { grid-template-columns: 1fr !important; gap: 24px !important; } }`}</style>
    </div>
  </section>
);

const ServicesPage = () => (
  <main className="page" data-screen-label="Services">
    <div className="shell">
      <Breadcrumb items={[{ label: "Главная", href: "#/" }, { label: "Услуги" }]} />
      <PageHeader
        eyebrow="услуги"
        title="Четыре направления. Один договор. Один SLA."
        lead="Каждое направление можно взять отдельно или собрать комплексное ИТ-сопровождение. Стоимость и формат — ниже по разделам."
        actions={[
          <a key="c" href="#/contacts" className="btn btn-primary">Получить расчёт</a>,
          <a key="a" href="#/approach" className="btn btn-ghost">Как мы работаем</a>
        ]}
      />
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 8, paddingBottom: 24, borderBottom: "1px solid var(--line)" }}>
        {SERVICES.map((s) => (
          <a key={s.id} href={`#/services#${s.id}`} className="chip" style={{ padding: "10px 14px", fontSize: 13 }}>
            ↘ {s.title}
          </a>
        ))}
      </div>
    </div>
    {SERVICES.map((s) => <ServiceSection key={s.id} s={s} />)}
    <section className="section shell">
      <ContactStrip />
    </section>
  </main>
);

Object.assign(window, { ServicesPage, SERVICES });