/* eslint-disable */
// Подход, Команда, О компании.

const ApproachPage = () => {
  const blocks = [
    {
      n: "01", t: "SLA",
      d: "Время реакции и устранения зашито в договор. Регламент по приоритетам: критическая ошибка — реакция в течение 15 минут, средний приоритет — в течение 4 часов в рабочее время.",
      example: "Для пакета поддержки P1 — реакция 15 мин, восстановление до 2 ч; P2 — 1 ч / 8 ч; P3 — 4 ч / 1 раб. день."
    },
    {
      n: "02", t: "Тикетная система",
      d: "Все обращения — через Битрикс24. Одна точка входа. Любой сотрудник заказчика может посмотреть статус, не дёргая руководителя.",
      example: "Каналы: веб-форма, e-mail, Telegram-бот, телефон. Любой канал создаёт тикет с тем же ID."
    },
    {
      n: "03", t: "Ежемесячная отчётность",
      d: "В первую неделю месяца присылаем отчёт за прошлый месяц. Закрытые задачи, потраченные часы, что планируем дальше.",
      example: "Формат: PDF + ссылка на тикеты. Кому: ИТ-директору и финансам. Тон: цифры, без воды."
    },
    {
      n: "04", t: "Тихий режим",
      d: "В пиковые периоды клиента (распродажи, отчётные периоды, релизы) — никаких изменений в продакшене. Только реактивная поддержка.",
      example: "Список «тихих» периодов согласуем заранее на квартал и фиксируем в графике релизов."
    },
    {
      n: "05", t: "Конфиденциальность",
      d: "NDA — стандартно. Доступы — по принципу минимально необходимого. Все ноутбуки разработчиков с шифрованием диска и MDM.",
      example: "Ротация доступов при выходе человека с проекта — в течение того же дня."
    },
    {
      n: "06", t: "Передача прав на результат",
      d: "Исключительные права на разработанный код и материалы переходят к заказчику в момент оплаты. Прописано в договоре. Без «лицензий на использование».",
      example: "Передача — в формате репозитория и подписанного акта. Без «закрытых» компонентов на нашей стороне."
    },
    {
      n: "07", t: "Гибридная модель оплаты",
      d: "Регулярные задачи — пакетом или по часам. Проектная разработка — фиксированной ценой. Выбираете на старте или меняете формат раз в квартал.",
      example: "Пакет 20 ч/мес + почасовая ставка сверху. Или фикс на проект. Или комбинация."
    }
  ];
  return (
    <main className="page" data-screen-label="Approach">
      <div className="shell">
        <Breadcrumb items={[{ label: "Главная", href: "#/" }, { label: "Подход" }]} />
        <PageHeader
          eyebrow="подход"
          title="Как устроена работа"
          lead="Без тайных регламентов и бесконечных созвонов. Семь точек, по которым клиент всегда понимает, что происходит."
        />
      </div>
      <section className="section shell" style={{ paddingTop: 0 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }} className="appr-grid">
          {blocks.map((b, i) => (
            <div key={b.n} style={{
              padding: 32, background: "var(--surface)",
              borderLeft: i % 2 ? "1px solid var(--line)" : "none",
              borderTop: i >= 2 ? "1px solid var(--line)" : "none"
            }}>
              <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
                <span className="t-mono" style={{ color: "var(--red)", fontSize: 14 }}>{b.n}</span>
                <h3 className="t-h2" style={{ margin: 0 }}>{b.t}</h3>
              </div>
              <p style={{ marginTop: 14, color: "var(--ink-2)", maxWidth: "52ch" }}>{b.d}</p>
              <div className="t-mono" style={{ marginTop: 16, padding: 14, background: "var(--surface-2)", border: "1px dashed var(--line-strong)", borderRadius: 8, color: "var(--ink-2)", fontSize: 13 }}>
                <span style={{ color: "var(--red)" }}>{">"}</span> {b.example}
              </div>
            </div>
          ))}
        </div>
        <style>{`@media (max-width: 920px) { .appr-grid { grid-template-columns: 1fr !important; }
          .appr-grid > div { border-left: none !important; }
          .appr-grid > div:not(:first-child) { border-top: 1px solid var(--line) !important; }
        }`}</style>
      </section>
      <section className="section shell"><ContactStrip /></section>
    </main>
  );
};


const TeamPage = () => {
  const roles = [
    { t: "Технический директор", d: "Архитектура решений, защита бюджета, управленческий совет." },
    { t: "Руководитель проектов", d: "Сроки, риски, коммуникация с заказчиком." },
    { t: "DevOps-инженеры", d: "Инфраструктура, CI/CD, мониторинг, дежурство по SLA." },
    { t: "Инженер по ИБ", d: "Аудит, контроль доступов, реакция на инциденты." },
    { t: "1С-разработчики", d: "Сопровождение УТ/ERP/ЗУП, доработки, интеграции." },
    { t: "1С-методолог", d: "Методология учёта, постановка задач разработке." },
    { t: "Веб-разработчики", d: "Фронт + бэк: TypeScript, Python. Личные кабинеты, B2B-порталы." },
    { t: "ML / Python-инженеры", d: "ML-пайплайны, видеоаналитика, LLM-агенты." },
    { t: "Аналитик / бизнес-анализ", d: "Сбор требований, постановка задач, документация." },
    { t: "QA-инженер", d: "Регрессионное и интеграционное тестирование." }
  ];
  return (
    <main className="page" data-screen-label="Team">
      <div className="shell">
        <Breadcrumb items={[{ label: "Главная", href: "#/" }, { label: "Команда" }]} />
        <PageHeader
          eyebrow="команда"
          title="Без фотографий и имён. Только роли."
          lead="Так попросил клиент — и нам это удобно. Команда меняется, договорный SLA — нет. Состав ниже — текущая конфигурация направлений; конкретный набор подбирается под проект."
        />
        <div style={{ display: "flex", gap: 16, marginBottom: 32, flexWrap: "wrap" }}>
          <span className="badge badge-red badge-dot">аккредитация Минцифры № 75271</span>
          <span className="badge">Омск</span>
        </div>
        <div className="grid-3" style={{ gap: 14 }}>
          {roles.map((r) => (
            <div key={r.t} className="card" style={{ padding: 22, display: "flex", flexDirection: "column", gap: 8 }}>
              <h3 className="t-h3" style={{ margin: 0 }}>{r.t}</h3>
              <p className="t-small muted" style={{ margin: 0 }}>{r.d}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56 }}>
          <SectionNode label="экспертиза и стек" />
          <div style={{ marginTop: 18, display: "flex", flexWrap: "wrap", gap: 8 }}>
            {["Linux", "Kubernetes", "Docker", "Ansible", "Prometheus", "Grafana", "GitLab CI",
              "PostgreSQL", "Redis", "ClickHouse", "Nginx", "HAProxy",
              "1С:Предприятие 8.3", "УТ", "ERP", "ЗУП", "EDI",
              "TypeScript", "Next.js", "React", "Node.js",
              "Python", "FastAPI", "PyTorch", "OpenCV", "Whisper", "LangChain", "Airflow", "Triton",
              "Битрикс24", "Битрикс CMS"].map((s) => (
              <span key={s} className="chip" style={{ padding: "8px 12px", fontSize: 13 }}>{s}</span>
            ))}
          </div>
        </div>
      </div>
      <section className="section shell"><ContactStrip /></section>
    </main>
  );
};

const AboutPage = () => (
  <main className="page" data-screen-label="About">
    <div className="shell">
      <Breadcrumb items={[{ label: "Главная", href: "#/" }, { label: "О компании" }]} />
      <PageHeader
        eyebrow="о компании"
        title="ООО «Дикий Маркс»"
        lead="С 2023 года. ИТ-подразделение полного цикла для бизнеса в России."
      />
      <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "start" }} className="about-grid">
        <div>
          <h2 className="t-h2" style={{ margin: 0 }}>Миссия одной фразой</h2>
          <p className="t-body-lg" style={{ marginTop: 14, color: "var(--ink-2)" }}>
            Делать так, чтобы бизнес мог покупать ИТ-функцию целиком —
            прозрачно, по договору, без построения собственного отдела.
          </p>

          <h2 className="t-h2" style={{ marginTop: 36 }}>Откуда мы</h2>
          <p style={{ marginTop: 12, color: "var(--ink-2)", maxWidth: "60ch" }}>
            Команда сложилась из in-house ИТ-подразделения розничной сети. Отсюда — понимание того,
            как реально устроен ритейл и B2B-операции: учётные системы, кассы, склад, маркетплейсы,
            интеграции, регламенты. И понимание того, как должна выглядеть ИТ-функция, чтобы её можно
            было показать собственнику.
          </p>
        </div>
        <aside className="card" style={{ padding: 28 }}>
          <div className="t-eyebrow" style={{ color: "var(--red)" }}>аккредитация</div>
          <h3 className="t-h2" style={{ margin: "10px 0 0" }}>№ 75271</h3>
          <p className="t-small muted" style={{ marginTop: 10 }}>
            Решение о включении в реестр аккредитованных ИТ-компаний:
            АО-20250627-28724382759-3 от 02.07.2025.
          </p>
          <a href="https://www.gosuslugi.ru/itorgs" target="_blank" rel="noreferrer" className="btn btn-ghost btn-sm" style={{ marginTop: 16 }}>
            Запись в реестре Минцифры ↗
          </a>
          <hr style={{ border: "none", borderTop: "1px solid var(--line)", margin: "24px 0" }} />
          <div className="t-eyebrow" style={{ marginBottom: 10 }}>реквизиты</div>
          <dl style={{ margin: 0, display: "grid", gridTemplateColumns: "auto 1fr", gap: "8px 16px", fontSize: 14 }}>
            <dt className="dim">Полное наименование</dt><dd>ООО «Дикий Маркс»</dd>
            <dt className="dim">ИНН</dt><dd className="t-mono">5505070369</dd>
            <dt className="dim">КПП</dt><dd className="t-mono">550301001</dd>
            <dt className="dim">ОГРН</dt><dd className="t-mono">1235500000108</dd>
            <dt className="dim">Юр. адрес</dt><dd>644099, Омск, ул. Карла Либкнехта, 35, помещ. 7П</dd>
            <dt className="dim">Основной ОКВЭД</dt><dd className="t-mono">62.01</dd>
          </dl>
          <a href="#/mincifry" className="btn btn-link" style={{ marginTop: 16 }}>Полные сведения для Минцифры →</a>
        </aside>
        <style>{`@media (max-width: 920px) { .about-grid { grid-template-columns: 1fr !important; } }`}</style>
      </div>
    </div>
    <section className="section shell"><ContactStrip /></section>
  </main>
);

Object.assign(window, { ApproachPage, TeamPage, AboutPage });