/* eslint-disable */
// Продукты: список + 3 страницы продукта (HR, Аудиобейджи, Видеоаналитика).
// Аудиобейджи — основной разворот.

const PRODUCTS = {
  badges: {
    title: "Аудиобейджи",
    tagline: "Слышим каждый разговор продавец–покупатель. Без выборок и интуиции.",
    lead: "Носимое устройство и сервис для записи диалогов в розничной точке. Записи разбираются автоматически: качество обслуживания, соблюдение скриптов, KPI продавцов и тренеров.",
    scenarios: [
      "Розничная сеть. Раньше — выборочный ручной контроль 2% разговоров. Теперь — 100% покрытие, отчёт по магазину каждое утро.",
      "Сеть автосалонов. Тренер обучения видит, какие скрипты реально применяются, а какие — нет, и где провалы по этапам сделки.",
      "Финансовые услуги. Контроль фраз, обязательных по регламенту: согласие на обработку, раскрытие условий, дисклеймеры."
    ],
    steps: [
      "Бейдж с микрофоном и зарядной базой выдаётся продавцу в начале смены.",
      "Аудио шифруется на устройстве и в конце смены сливается на базу.",
      "ASR-модель (Whisper) транскрибирует, разметка по этапам сделки.",
      "Аналитика и отчёты — в личном кабинете и в виде писем/Telegram."
    ],
    inside: [
      "Носимый бейдж: 8 ч записи, 90 г, степень защиты IP54",
      "Зарядная база-доковая станция (8 / 16 / 32 слота)",
      "Локальный сервер обработки (on-prem) или SaaS",
      "ASR на русском (с пунктуацией и шумоподавлением)",
      "Разметка этапов: приветствие, выявление потребности, презентация, работа с возражениями, закрытие",
      "KPI продавцов и тренеров обучения",
      "Алерты по обязательным фразам / запрещённым формулировкам",
      "Выгрузка в 1С / CRM / Excel"
    ],
    pricing: [
      ["Бейдж (устройство)", "от 18 000 ₽/шт"],
      ["Зарядная база на 16 слотов", "от 65 000 ₽"],
      ["SaaS-обработка", "от 950 ₽ в мес. за бейдж"],
      ["On-prem сервер обработки", "от 850 000 ₽, разово"]
    ]
  },
  video: {
    title: "Видеоаналитика конверсии",
    tagline: "Сколько людей зашло, сколько подошло к витрине, сколько купило.",
    lead: "Подключаем существующие IP-камеры в торговом зале. Считаем трафик, время в зонах, очереди на кассе, метрики конверсии «вход → касса».",
    scenarios: [
      "Сеть из 10 магазинов. Хотим понимать, где трафик не конвертится — и почему.",
      "Один флагманский салон. Меняем мерчандайзинг и хотим измерять эффект, а не верить продавцам.",
      "Управляющий получает утренний отчёт: трафик, конверсия, аномалии."
    ],
    steps: [
      "Подключаем существующие IP-камеры (RTSP).",
      "Размечаем зоны: вход, прикассовая, витрины, примерочная.",
      "CV-модель считает уникальных людей и переходы между зонами.",
      "Сводим с чеками из 1С — получаем чистую конверсию."
    ],
    inside: [
      "Подсчёт трафика по входам (deduplicated)",
      "Карта зон интереса и времени в каждой",
      "Очереди и время ожидания на кассе",
      "Конверсия «вход → касса» (с привязкой к чеку)",
      "Аномалии и алерты",
      "Экспорт в BI и 1С"
    ],
    pricing: [
      ["Подключение точки (до 6 камер)", "от 90 000 ₽, разово"],
      ["Обработка SaaS", "от 7 500 ₽ в мес. за точку"],
      ["On-prem сервер", "от 480 000 ₽, разово"]
    ]
  }
};

const ProductsListPage = () => (
  <main className="page" data-screen-label="Products">
    <div className="shell">
      <Breadcrumb items={[{ label: "Главная", href: "#/" }, { label: "Продукты" }]} />
      <PageHeader
        eyebrow="продукты"
        title="Собственные ИТ-продукты"
        lead="Три продукта, которые мы делаем сами. Все три планируются к включению в Реестр российского ПО."
      />
      <div className="grid-3" style={{ marginTop: 8 }}>
        {Object.entries(PRODUCTS).map(([id, p], idx) => (
          <a key={id} href={`#/product/${id}`} className="card" style={{
            color: "var(--ink)", textDecoration: "none", padding: 28, position: "relative",
            display: "flex", flexDirection: "column", gap: 14, minHeight: 280
          }}>
            <CornerTrace corner="tr" />
            <div className="t-eyebrow" style={{ color: "var(--red)" }}>{String(idx + 1).padStart(2, "0")}</div>
            <h3 className="t-h2" style={{ margin: 0 }}>{p.title}</h3>
            <p className="muted" style={{ margin: 0 }}>{p.tagline}</p>
            <div style={{ marginTop: "auto", display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 12 }}>
              <span className="badge">В Реестре: планируется</span>
              <span className="t-small" style={{ color: "var(--steel)" }}>Открыть →</span>
            </div>
          </a>
        ))}
      </div>
    </div>
    <section className="section shell">
      <ContactStrip />
    </section>
  </main>
);

const ProductPage = ({ id }) => {
  const p = PRODUCTS[id];
  if (!p) return <NotFound />;
  return (
    <main className="page" data-screen-label={`Product:${id}`}>
      <div className="shell">
        <Breadcrumb items={[
          { label: "Главная", href: "#/" },
          { label: "Продукты", href: "#/products" },
          { label: p.title }
        ]} />
        {/* Hero */}
        <header style={{ padding: "48px 0 24px" }}>
          <span className="badge badge-red badge-dot">продукт · в Реестре: планируется</span>
          <h1 className="t-d2" style={{ margin: "16px 0", maxWidth: "16ch" }}>{p.title}</h1>
          <p className="t-body-lg muted" style={{ margin: 0, maxWidth: "44ch" }}>{p.tagline}</p>
          <p className="t-body" style={{ marginTop: 14, color: "var(--ink-2)", maxWidth: "52ch" }}>{p.lead}</p>
          <div style={{ marginTop: 28, display: "flex", gap: 10, flexWrap: "wrap" }}>
            <a href="#/contacts" className="btn btn-primary">Запросить демо</a>
            <a href="#/contacts" className="btn btn-ghost">Получить расчёт</a>
          </div>
        </header>
      </div>

      {/* scenarios */}
      <section className="section shell">
        <SectionNode label="какую задачу решает" />
        <div className="grid-3" style={{ marginTop: 24 }}>
          {p.scenarios.map((s, i) => (
            <div key={i} className="card flat" style={{ padding: 24 }}>
              <div className="t-mono" style={{ color: "var(--red)" }}>сценарий {i + 1}</div>
              <p style={{ margin: "10px 0 0", color: "var(--ink-2)" }}>{s}</p>
            </div>
          ))}
        </div>
      </section>

      {/* how it works */}
      <section className="section shell">
        <SectionNode label="как это работает" />
        <ol style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gridTemplateColumns: `repeat(${p.steps.length}, 1fr)`, gap: 0, border: "1px solid var(--line)", borderRadius: 14, overflow: "hidden" }} className="steps-grid" data-cols={p.steps.length}>
          {p.steps.map((step, i) => (
            <li key={i} style={{ padding: 24, borderLeft: i ? "1px solid var(--line)" : "none", background: "var(--surface)" }}>
              <div className="t-mono" style={{ color: "var(--red)" }}>{String(i + 1).padStart(2, "0")}</div>
              <p className="t-small" style={{ margin: "10px 0 0", color: "var(--ink-2)" }}>{step}</p>
            </li>
          ))}
        </ol>
        <style>{`
          @media (max-width: 1100px) { .steps-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .steps-grid > li { border-top: 1px solid var(--line); }
            .steps-grid > li:nth-child(2n+1) { border-left: none !important; }
          }
          @media (max-width: 540px) { .steps-grid { grid-template-columns: 1fr !important; }
            .steps-grid > li { border-left: none !important; border-top: 1px solid var(--line); }
          }
        `}</style>
      </section>

      {/* inside */}
      <section className="section shell">
        <SectionNode label="что внутри" />
        <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 12 }} className="inside-grid">
          {p.inside.map((it, i) => (
            <li key={i} style={{ display: "flex", gap: 12, padding: "14px 16px", border: "1px solid var(--line)", borderRadius: 8, background: "var(--surface)" }}>
              <span className="node" style={{ marginTop: 8, flexShrink: 0 }} />
              <span style={{ color: "var(--ink)" }}>{it}</span>
            </li>
          ))}
          <style>{`@media (max-width: 720px) { .inside-grid { grid-template-columns: 1fr !important; } }`}</style>
        </ul>
      </section>

      {/* pricing */}
      <section className="section shell">
        <SectionNode label="стоимость и подключение" />
        <table className="tbl" style={{ marginTop: 24, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden" }}>
          <thead><tr><th style={{ paddingLeft: 18 }}>Вариант</th><th style={{ paddingRight: 18, textAlign: "right" }}>Стоимость</th></tr></thead>
          <tbody>
            {p.pricing.map(([k, v]) => (
              <tr key={k}>
                <td style={{ paddingLeft: 18 }}>{k}</td>
                <td className="t-mono" style={{ color: "var(--red)", textAlign: "right", paddingRight: 18 }}>{v}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <p className="t-small dim" style={{ marginTop: 12 }}>
          Цены — заглушки на момент публикации. Финальная смета — после короткого брифа.
        </p>
      </section>

      {/* registry status */}
      <section className="section shell">
        <div className="card" style={{ padding: 28, display: "flex", justifyContent: "space-between", gap: 24, alignItems: "center", flexWrap: "wrap" }}>
          <div>
            <div className="t-eyebrow" style={{ color: "var(--red)" }}>Статус в Реестре российского ПО</div>
            <div className="t-h2" style={{ margin: "10px 0 0" }}>Планируется к включению</div>
            <p className="t-small dim" style={{ margin: "8px 0 0", maxWidth: "60ch" }}>
              Исключительные права принадлежат ООО «Дикий Маркс». Способ передачи прав использования — лицензионный
              договор или подписка SaaS, точные условия — по запросу.
            </p>
          </div>
          <a href="#/contacts" className="btn btn-primary">Запросить условия</a>
        </div>
      </section>

      <section className="section shell"><ContactStrip /></section>
    </main>
  );
};

const NotFound = () => (
  <main className="page shell" style={{ padding: "120px 0", textAlign: "center" }}>
    <div className="t-mono dim">404</div>
    <h1 className="t-h1" style={{ marginTop: 12 }}>Страница не найдена</h1>
    <p className="muted" style={{ marginTop: 12 }}>Похоже, страница переехала или ссылка устарела.</p>
    <div style={{ marginTop: 20 }}><a href="#/" className="btn btn-primary">На главную</a></div>
  </main>
);

Object.assign(window, { ProductsListPage, ProductPage, PRODUCTS, NotFound });