'use client';

export default function TelegramBotDocsPage() {
  return (
    <div className="mx-auto max-w-4xl py-8 px-4">
      <style>{`
        .doc h1 { font-size: 2rem; font-weight: 800; margin-bottom: 0.5rem; color: #1a1a2e; }
        .doc h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; color: #1a1a2e; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; }
        .doc h3 { font-size: 1.15rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #374151; }
        .doc h4 { font-size: 1rem; font-weight: 600; margin-top: 1.25rem; margin-bottom: 0.25rem; color: #4b5563; }
        .doc p { margin: 0.5rem 0; line-height: 1.7; color: #374151; }
        .doc ul, .doc ol { margin: 0.5rem 0 0.5rem 1.5rem; color: #374151; }
        .doc li { margin: 0.25rem 0; line-height: 1.6; }
        .doc code { background: #f3f4f6; padding: 0.15rem 0.4rem; border-radius: 4px; font-size: 0.875rem; color: #7c3aed; }
        .doc pre { background: #1e1e2e; color: #cdd6f4; padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 0.75rem 0; font-size: 0.8rem; line-height: 1.5; }
        .doc pre code { background: none; color: inherit; padding: 0; }
        .doc table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.9rem; }
        .doc th { background: #f9fafb; padding: 0.6rem 0.75rem; text-align: left; font-weight: 600; border: 1px solid #e5e7eb; }
        .doc td { padding: 0.5rem 0.75rem; border: 1px solid #e5e7eb; vertical-align: top; }
        .doc .tip { background: #ecfdf5; border-left: 4px solid #10b981; padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; }
        .doc .warn { background: #fffbeb; border-left: 4px solid #f59e0b; padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; }
        .doc .info { background: #eff6ff; border-left: 4px solid #3b82f6; padding: 0.75rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; }
      `}</style>

      <div className="doc">
        <h1>Модуль «Telegram-бот»</h1>
        <p style={{ color: '#6b7280', fontSize: '1.1rem' }}>
          Конструктор чат-бот сценариев для Telegram. Пользовательская документация MyFitCRM.
        </p>

        {/* ──────────────────────────────────────────── */}
        <h2>1. Обзор</h2>
        <p>
          Модуль позволяет создавать Telegram-ботов, которые автоматически общаются с клиентами по
          заданному сценарию. Сценарий — это цепочка шагов (нод), сохранённых в формате JSON. Бот
          выполняет их в реальном времени: отправляет сообщения, ждёт ответы, проверяет условия,
          начисляет бонусы, создаёт сделки в CRM.
        </p>

        <h3>Что можно сделать</h3>
        <ul>
          <li>Создать бота и подключить его по токену из @BotFather</li>
          <li>Собрать сценарий общения из 6 типов блоков (нод)</li>
          <li>Запустить реферальную программу «Пригласи друга — получи бонус»</li>
          <li>Вести таблицу подписчиков с фильтрами</li>
          <li>Отправлять рассылки по сегментам аудитории</li>
          <li>Получать уведомления о событиях бота на внешние URL (вебхуки)</li>
          <li>Смотреть аналитику: воронка, рост, источники трафика</li>
        </ul>

        <h3>Роли с доступом</h3>
        <p>
          Модуль доступен ролям <code>Админ клуба</code> и <code>Суперадминистратор</code>.
        </p>

        {/* ──────────────────────────────────────────── */}
        <h2>2. Быстрый старт</h2>

        <h3>Шаг 1. Создайте бота в Telegram</h3>
        <ol>
          <li>
            Откройте <code>@BotFather</code> в Telegram
          </li>
          <li>
            Отправьте <code>/newbot</code>
          </li>
          <li>Задайте имя и username бота</li>
          <li>
            Скопируйте токен (формат: <code>123456:ABC-DEF...</code>)
          </li>
        </ol>

        <h3>Шаг 2. Добавьте бота в CRM</h3>
        <ol>
          <li>
            Перейдите в <b>Telegram-бот</b> в боковом меню
          </li>
          <li>
            Нажмите <b>«Создать бота»</b>
          </li>
          <li>Введите название и вставьте токен</li>
          <li>CRM проверит токен и определит @username автоматически</li>
        </ol>

        <h3>Шаг 3. Создайте сценарий</h3>
        <ol>
          <li>
            Откройте бота → <b>Сценарий</b>
          </li>
          <li>
            Нажмите <b>«Новый»</b> и задайте название
          </li>
          <li>Используйте визуальный редактор или JSON-режим для построения сценария</li>
          <li>
            Нажмите <b>«Проверить»</b> для валидации
          </li>
          <li>
            Нажмите <b>«Опубликовать»</b>
          </li>
        </ol>

        <h3>Шаг 4. Активируйте бота</h3>
        <ol>
          <li>Вернитесь на страницу бота</li>
          <li>
            Нажмите <b>«Включить»</b> — CRM зарегистрирует webhook в Telegram
          </li>
          <li>Бот начнёт принимать сообщения и выполнять сценарий</li>
        </ol>

        <div className="tip">
          <b>Совет:</b> протестируйте бота сами — отправьте ему <code>/start</code> в Telegram и
          пройдите весь сценарий.
        </div>

        {/* ──────────────────────────────────────────── */}
        <h2>3. Конструктор сценариев</h2>

        <h3>3.1. Структура сценария</h3>
        <p>Сценарий состоит из:</p>
        <ul>
          <li>
            <b>Переменные</b> — данные, которые бот запоминает в процессе (имя, телефон, счётчик
            приглашений)
          </li>
          <li>
            <b>Ноды</b> — блоки сценария, соединённые связями
          </li>
          <li>
            <b>Стартовая нода</b> — с неё начинается диалог при <code>/start</code>
          </li>
        </ul>

        <h3>3.2. Типы нод</h3>

        <table>
          <thead>
            <tr>
              <th>Тип</th>
              <th>Цвет</th>
              <th>Назначение</th>
              <th>Ожидает ответ?</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>message</code>
              </td>
              <td style={{ color: '#3b82f6' }}>Синий</td>
              <td>Отправить сообщение с текстом и кнопками</td>
              <td>Да (если есть кнопки)</td>
            </tr>
            <tr>
              <td>
                <code>input</code>
              </td>
              <td style={{ color: '#14b8a6' }}>Бирюзовый</td>
              <td>Запросить данные у пользователя (текст, телефон, email)</td>
              <td>Да</td>
            </tr>
            <tr>
              <td>
                <code>condition</code>
              </td>
              <td style={{ color: '#f59e0b' }}>Жёлтый</td>
              <td>Проверить условие и направить в нужную ветку</td>
              <td>Нет (автопереход)</td>
            </tr>
            <tr>
              <td>
                <code>action</code>
              </td>
              <td style={{ color: '#a855f7' }}>Фиолетовый</td>
              <td>Выполнить действие: установить переменную, вебхук, сделка в CRM</td>
              <td>Нет (автопереход)</td>
            </tr>
            <tr>
              <td>
                <code>delay</code>
              </td>
              <td style={{ color: '#f97316' }}>Оранжевый</td>
              <td>Подождать N минут/часов/дней, отправить напоминание</td>
              <td>Пауза</td>
            </tr>
            <tr>
              <td>
                <code>referral</code>
              </td>
              <td style={{ color: '#ec4899' }}>Розовый</td>
              <td>Генерация реферальной ссылки, отслеживание приглашённых</td>
              <td>Нет (автопереход)</td>
            </tr>
          </tbody>
        </table>

        {/* ──────────────────────────────────────────── */}
        <h3>3.3. Нода «Сообщение» (message)</h3>
        <p>Отправляет текст пользователю. Поддерживает HTML-форматирование и кнопки.</p>

        <h4>Параметры</h4>
        <table>
          <thead>
            <tr>
              <th>Поле</th>
              <th>Тип</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>text</code>
              </td>
              <td>строка</td>
              <td>
                Текст сообщения (HTML: &lt;b&gt;, &lt;i&gt;, &lt;a&gt;). Поддерживает переменные{' '}
                <code>{'{{имя}}'}</code>
              </td>
            </tr>
            <tr>
              <td>
                <code>buttons</code>
              </td>
              <td>массив</td>
              <td>Кнопки (см. ниже)</td>
            </tr>
            <tr>
              <td>
                <code>buttonsLayout</code>
              </td>
              <td>строка</td>
              <td>
                <code>inline</code> — под сообщением, <code>reply</code> — клавиатура,{' '}
                <code>remove</code> — убрать клавиатуру
              </td>
            </tr>
          </tbody>
        </table>

        <h4>Типы кнопок</h4>
        <table>
          <thead>
            <tr>
              <th>action</th>
              <th>Что делает</th>
              <th>target</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>goto</code>
              </td>
              <td>Переход на другую ноду</td>
              <td>ID ноды</td>
            </tr>
            <tr>
              <td>
                <code>url</code>
              </td>
              <td>Открыть ссылку</td>
              <td>URL</td>
            </tr>
            <tr>
              <td>
                <code>share_contact</code>
              </td>
              <td>Кнопка «Поделиться контактом»</td>
              <td>—</td>
            </tr>
          </tbody>
        </table>

        <pre>
          <code>
            {JSON.stringify(
              {
                id: 'welcome',
                type: 'message',
                data: {
                  text: 'Привет, {{user_name}}! Выберите действие:',
                  buttons: [
                    { text: 'Узнать больше', action: 'goto', target: 'info' },
                    { text: 'Наш сайт', action: 'url', target: 'https://example.com' },
                  ],
                  buttonsLayout: 'inline',
                },
              },
              null,
              2,
            )}
          </code>
        </pre>

        {/* ──────────────────────────────────────────── */}
        <h3>3.4. Нода «Ввод» (input)</h3>
        <p>Запрашивает данные у пользователя и сохраняет в переменную.</p>

        <table>
          <thead>
            <tr>
              <th>Поле</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>prompt</code>
              </td>
              <td>Текст вопроса</td>
            </tr>
            <tr>
              <td>
                <code>inputType</code>
              </td>
              <td>
                <code>text</code>, <code>phone</code>, <code>email</code>, <code>choice</code>
              </td>
            </tr>
            <tr>
              <td>
                <code>saveAs</code>
              </td>
              <td>Имя переменной для сохранения ответа</td>
            </tr>
            <tr>
              <td>
                <code>requestContact</code>
              </td>
              <td>Показать кнопку «Поделиться контактом» (для phone)</td>
            </tr>
            <tr>
              <td>
                <code>validation</code>
              </td>
              <td>Regex для проверки ввода</td>
            </tr>
            <tr>
              <td>
                <code>errorMessage</code>
              </td>
              <td>Сообщение при невалидном вводе</td>
            </tr>
            <tr>
              <td>
                <code>choices</code>
              </td>
              <td>
                Массив вариантов для типа <code>choice</code>
              </td>
            </tr>
          </tbody>
        </table>

        <pre>
          <code>
            {JSON.stringify(
              {
                id: 'get_phone',
                type: 'input',
                data: {
                  prompt: 'Оставьте номер телефона:',
                  inputType: 'phone',
                  saveAs: 'phone',
                  requestContact: true,
                  validation: '^\\+?[0-9]{10,15}$',
                  errorMessage: 'Неверный формат телефона',
                },
                next: 'thank_you',
              },
              null,
              2,
            )}
          </code>
        </pre>

        {/* ──────────────────────────────────────────── */}
        <h3>3.5. Нода «Условие» (condition)</h3>
        <p>Проверяет переменные и направляет пользователя в нужную ветку.</p>

        <h4>Поддерживаемые операторы</h4>
        <p>
          <code>==</code>, <code>!=</code>, <code>&gt;=</code>, <code>&lt;=</code>,{' '}
          <code>&gt;</code>, <code>&lt;</code>
        </p>

        <pre>
          <code>
            {JSON.stringify(
              {
                id: 'check_count',
                type: 'condition',
                data: {
                  rules: [
                    { condition: 'invited_count >= 2', target: 'bonus_granted' },
                    { condition: 'invited_count == 1', target: 'one_more' },
                  ],
                  default: 'send_link',
                },
              },
              null,
              2,
            )}
          </code>
        </pre>

        <p>
          Правила проверяются сверху вниз. Первое совпадение — переход. Если ничего не совпало —{' '}
          <code>default</code>.
        </p>

        {/* ──────────────────────────────────────────── */}
        <h3>3.6. Нода «Действие» (action)</h3>
        <p>Выполняет одно или несколько действий без отправки сообщения.</p>

        <table>
          <thead>
            <tr>
              <th>Тип действия</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>set_variable</code>
              </td>
              <td>Установить значение переменной</td>
            </tr>
            <tr>
              <td>
                <code>webhook</code>
              </td>
              <td>Отправить HTTP-запрос на внешний URL</td>
            </tr>
            <tr>
              <td>
                <code>crm_deal</code>
              </td>
              <td>Создать сделку в CRM</td>
            </tr>
            <tr>
              <td>
                <code>grant_bonus</code>
              </td>
              <td>Отметить подписчика как получившего бонус</td>
            </tr>
            <tr>
              <td>
                <code>set_consent</code>
              </td>
              <td>Установить согласие на рассылку</td>
            </tr>
          </tbody>
        </table>

        <pre>
          <code>
            {JSON.stringify(
              {
                id: 'create_deal',
                type: 'action',
                data: {
                  actions: [
                    { type: 'set_variable', variable: 'bonus_granted', value: true },
                    { type: 'grant_bonus' },
                    { type: 'crm_deal', fields: { name: '{{user_name}}', phone: '{{phone}}' } },
                    { type: 'set_consent', mailingConsent: true },
                  ],
                },
                next: 'thank_you',
              },
              null,
              2,
            )}
          </code>
        </pre>

        {/* ──────────────────────────────────────────── */}
        <h3>3.7. Нода «Задержка» (delay)</h3>
        <p>
          Ставит паузу. Через указанное время отправляет напоминание или переходит к следующей ноде.
        </p>

        <table>
          <thead>
            <tr>
              <th>Поле</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>duration</code>
              </td>
              <td>
                Время ожидания: <code>10m</code>, <code>1h</code>, <code>24h</code>, <code>3d</code>
              </td>
            </tr>
            <tr>
              <td>
                <code>cancelOn</code>
              </td>
              <td>
                Условие отмены (например, <code>invited_count &gt;= 2</code>). Если условие
                выполнено к моменту срабатывания — напоминание не отправляется
              </td>
            </tr>
            <tr>
              <td>
                <code>message</code>
              </td>
              <td>Текст и кнопки напоминания</td>
            </tr>
          </tbody>
        </table>

        {/* ──────────────────────────────────────────── */}
        <h3>3.8. Нода «Реферал» (referral)</h3>
        <p>Генерирует персональную реферальную ссылку и отслеживает приглашённых друзей.</p>

        <table>
          <thead>
            <tr>
              <th>Поле</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>generateLink</code>
              </td>
              <td>
                Создать ссылку (доступна как <code>{'{{referral_link}}'}</code>)
              </td>
            </tr>
            <tr>
              <td>
                <code>trackVariable</code>
              </td>
              <td>
                Переменная-счётчик (обычно <code>invited_count</code>)
              </td>
            </tr>
            <tr>
              <td>
                <code>targetCount</code>
              </td>
              <td>Сколько друзей нужно пригласить</td>
            </tr>
            <tr>
              <td>
                <code>onReach</code>
              </td>
              <td>ID ноды, на которую перейдёт пользователь при достижении цели</td>
            </tr>
            <tr>
              <td>
                <code>friendStartNode</code>
              </td>
              <td>ID ноды, с которой начнётся сценарий для приглашённого друга</td>
            </tr>
          </tbody>
        </table>

        <div className="info">
          <b>Как работает реферальная ссылка:</b> когда друг переходит по ссылке, он попадает на{' '}
          <code>friendStartNode</code> вместо обычного приветствия. Реферер получает уведомление и,
          при достижении цели, переходит на <code>onReach</code>.
        </div>

        {/* ──────────────────────────────────────────── */}
        <h3>3.9. Переменные</h3>
        <p>
          Переменные — это данные, которые бот запоминает для каждого подписчика. Они доступны для
          подстановки в тексты через <code>{'{{имя_переменной}}'}</code> и для проверки в условиях.
        </p>

        <h4>Встроенные переменные</h4>
        <table>
          <thead>
            <tr>
              <th>Переменная</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>referral_link</code>
              </td>
              <td>Персональная реферальная ссылка (после ноды referral)</td>
            </tr>
            <tr>
              <td>
                <code>crm_deal_id</code>
              </td>
              <td>ID созданной сделки (после action crm_deal)</td>
            </tr>
            <tr>
              <td>
                <code>crm_deal_number</code>
              </td>
              <td>Номер сделки</td>
            </tr>
            <tr>
              <td>
                <code>is_friend</code>
              </td>
              <td>
                <code>true</code> если пользователь пришёл по реферальной ссылке
              </td>
            </tr>
            <tr>
              <td>
                <code>referrer_id</code>
              </td>
              <td>ID пригласившего подписчика</td>
            </tr>
          </tbody>
        </table>

        <h4>Пользовательские переменные</h4>
        <p>
          Объявляются в разделе <code>variables</code> сценария с типом и значением по умолчанию:
        </p>
        <pre>
          <code>
            {JSON.stringify(
              {
                variables: {
                  user_name: { type: 'string', default: '' },
                  invited_count: { type: 'number', default: 0 },
                  bonus_granted: { type: 'boolean', default: false },
                },
              },
              null,
              2,
            )}
          </code>
        </pre>

        {/* ──────────────────────────────────────────── */}
        <h2>4. Визуальный редактор</h2>
        <p>
          Сценарий можно строить в визуальном режиме — перетаскивая ноды на холст и соединяя их
          связями.
        </p>

        <h3>Основные действия</h3>
        <table>
          <thead>
            <tr>
              <th>Действие</th>
              <th>Как</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Добавить ноду</td>
              <td>Нажмите кнопку нужного типа на панели вверху</td>
            </tr>
            <tr>
              <td>Соединить ноды</td>
              <td>Потяните от правого порта одной ноды к левому порту другой</td>
            </tr>
            <tr>
              <td>Редактировать ноду</td>
              <td>Кликните по ноде — откроется панель свойств справа</td>
            </tr>
            <tr>
              <td>Удалить ноду</td>
              <td>Выберите ноду → кнопка «Удалить» в панели свойств</td>
            </tr>
            <tr>
              <td>Переместить</td>
              <td>Перетащите ноду мышью</td>
            </tr>
            <tr>
              <td>Навигация</td>
              <td>Скролл для зума, MiniMap в правом нижнем углу</td>
            </tr>
            <tr>
              <td>Переключить режим</td>
              <td>Кнопки «Визуальный» / «JSON» над редактором</td>
            </tr>
          </tbody>
        </table>

        <div className="warn">
          <b>Важно:</b> после редактирования нажмите <b>«Сохранить»</b>, затем <b>«Опубликовать»</b>
          . Черновик не влияет на работающего бота.
        </div>

        {/* ──────────────────────────────────────────── */}
        <h2>5. Подписчики</h2>
        <p>
          Каждый пользователь, написавший боту, становится подписчиком. Данные хранятся в таблице.
        </p>

        <h3>Поля подписчика</h3>
        <table>
          <thead>
            <tr>
              <th>Поле</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Chat ID</td>
              <td>Уникальный ID чата в Telegram</td>
            </tr>
            <tr>
              <td>Имя / Фамилия</td>
              <td>Из профиля Telegram</td>
            </tr>
            <tr>
              <td>Username</td>
              <td>@username, если есть</td>
            </tr>
            <tr>
              <td>Телефон</td>
              <td>Если поделился контактом</td>
            </tr>
            <tr>
              <td>Зарегистрирован</td>
              <td>Нажал /start</td>
            </tr>
            <tr>
              <td>Бонус получен</td>
              <td>Отметка о начислении бонуса</td>
            </tr>
            <tr>
              <td>Согласие на рассылку</td>
              <td>Дал ли согласие (через action set_consent)</td>
            </tr>
            <tr>
              <td>Подписан</td>
              <td>Не заблокировал бота</td>
            </tr>
            <tr>
              <td>Источник</td>
              <td>Откуда пришёл: referral, qr, website и т.д.</td>
            </tr>
            <tr>
              <td>Приглашено</td>
              <td>Сколько друзей пригласил</td>
            </tr>
            <tr>
              <td>Дата регистрации</td>
              <td>Когда впервые написал /start</td>
            </tr>
          </tbody>
        </table>

        <h3>Фильтры</h3>
        <p>
          Таблица поддерживает фильтрацию по: подписке, бонусу, согласию на рассылку, и текстовый
          поиск по имени/телефону.
        </p>

        {/* ──────────────────────────────────────────── */}
        <h2>6. Рассылки</h2>
        <p>Массовая отправка сообщений подписчикам с выбором аудитории.</p>

        <h3>Создание рассылки</h3>
        <ol>
          <li>
            Откройте бота → <b>Рассылки</b> → <b>«Новая рассылка»</b>
          </li>
          <li>Введите название и текст сообщения (HTML)</li>
          <li>Настройте фильтры аудитории</li>
          <li>
            Нажмите <b>«Показать количество получателей»</b> для превью
          </li>
          <li>
            Сохраните → нажмите <b>«Отправить»</b>
          </li>
        </ol>

        <h3>Фильтры аудитории</h3>
        <table>
          <thead>
            <tr>
              <th>Фильтр</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Клубы</td>
              <td>Только подписчики конкретных клубов</td>
            </tr>
            <tr>
              <td>Подписка</td>
              <td>Подписаны / отписались</td>
            </tr>
            <tr>
              <td>Согласие на рассылку</td>
              <td>Дали / не дали согласие</td>
            </tr>
            <tr>
              <td>Бонус</td>
              <td>Получили / не получили</td>
            </tr>
            <tr>
              <td>Источник</td>
              <td>referral, qr, website, ...</td>
            </tr>
            <tr>
              <td>Приглашено (мин.)</td>
              <td>Минимальное количество приглашённых друзей</td>
            </tr>
            <tr>
              <td>Дата регистрации от/до</td>
              <td>Диапазон дат</td>
            </tr>
            <tr>
              <td>Теги</td>
              <td>Произвольные теги для сегментации</td>
            </tr>
          </tbody>
        </table>

        <h3>Статусы рассылки</h3>
        <table>
          <thead>
            <tr>
              <th>Статус</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>DRAFT</code>
              </td>
              <td>Черновик — можно редактировать</td>
            </tr>
            <tr>
              <td>
                <code>SCHEDULED</code>
              </td>
              <td>Запланирована на дату</td>
            </tr>
            <tr>
              <td>
                <code>SENDING</code>
              </td>
              <td>Отправляется (прогресс виден в реальном времени)</td>
            </tr>
            <tr>
              <td>
                <code>COMPLETED</code>
              </td>
              <td>Завершена</td>
            </tr>
            <tr>
              <td>
                <code>CANCELLED</code>
              </td>
              <td>Отменена</td>
            </tr>
          </tbody>
        </table>

        <div className="tip">
          <b>Rate limit:</b> бот отправляет ~25 сообщений в секунду, соблюдая лимиты Telegram API.
          Рассылка на 10 000 подписчиков займёт ~7 минут.
        </div>

        {/* ──────────────────────────────────────────── */}
        <h2>7. Вебхуки (уведомления на внешние URL)</h2>
        <p>Бот может отправлять HTTP-запросы на ваши URL при наступлении событий.</p>

        <h3>Доступные события</h3>
        <table>
          <thead>
            <tr>
              <th>Событие</th>
              <th>Когда срабатывает</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <code>subscriber.created</code>
              </td>
              <td>Новый подписчик нажал /start</td>
            </tr>
            <tr>
              <td>
                <code>subscriber.blocked</code>
              </td>
              <td>Подписчик заблокировал бота</td>
            </tr>
            <tr>
              <td>
                <code>subscriber.phone_shared</code>
              </td>
              <td>Подписчик поделился номером телефона</td>
            </tr>
            <tr>
              <td>
                <code>referral.invited</code>
              </td>
              <td>Друг перешёл по реферальной ссылке</td>
            </tr>
            <tr>
              <td>
                <code>referral.completed</code>
              </td>
              <td>Условие реферальной программы выполнено</td>
            </tr>
            <tr>
              <td>
                <code>bonus.granted</code>
              </td>
              <td>Бонус начислен подписчику</td>
            </tr>
            <tr>
              <td>
                <code>lead.created</code>
              </td>
              <td>Заявка (выбор клуба / запись)</td>
            </tr>
            <tr>
              <td>
                <code>broadcast.completed</code>
              </td>
              <td>Рассылка завершена</td>
            </tr>
            <tr>
              <td>
                <code>scenario.completed</code>
              </td>
              <td>Подписчик прошёл сценарий до конца</td>
            </tr>
          </tbody>
        </table>

        <h3>Формат запроса</h3>
        <pre>
          <code>{`POST https://your-url.com/webhook
Content-Type: application/json
X-TgBot-Signature: <HMAC-SHA256 подпись>
X-TgBot-Event: subscriber.created

{
  "event": "subscriber.created",
  "timestamp": "2026-03-19T12:00:00Z",
  "bot_id": "uuid",
  "data": {
    "subscriber": {
      "id": "uuid",
      "chatId": "123456",
      "firstName": "Иван"
    }
  }
}`}</code>
        </pre>

        <p>
          Подпись: <code>HMAC-SHA256(secret, body)</code>. Secret генерируется при создании вебхука
          и показывается однократно.
        </p>

        {/* ──────────────────────────────────────────── */}
        <h2>8. Аналитика</h2>
        <p>Страница аналитики показывает ключевые метрики бота.</p>

        <h3>Метрики подписчиков</h3>
        <ul>
          <li>Всего / Активных / Заблокировали</li>
          <li>С телефоном / Получили бонус / Дали согласие на рассылку</li>
        </ul>

        <h3>Метрики рефералов</h3>
        <ul>
          <li>Всего приглашено друзей</li>
          <li>Количество рефереров (кто пригласил хоть одного)</li>
          <li>Среднее количество приглашений на реферера</li>
        </ul>

        <h3>Воронка</h3>
        <p>
          Показывает, сколько подписчиков находятся на каждой ноде сценария. Позволяет выявить, где
          пользователи «застревают».
        </p>

        <h3>Рост за 30 дней</h3>
        <p>Столбчатая диаграмма ежедневного прироста подписчиков.</p>

        <h3>Источники трафика</h3>
        <p>Топ-10 источников: referral, qr, website, social и другие.</p>

        {/* ──────────────────────────────────────────── */}
        <h2>9. Пример: реферальный бот фитнес-клуба</h2>
        <p>Готовый сценарий для Powerhouse Gym (24 ноды):</p>

        <h3>Схема</h3>
        <pre>
          <code>{`Клиент:
  /start → Приветствие → Оффер "Фитнес другу"
    → Реферальная ссылка → Ожидание (напоминание 30мин)
    → Проверка count → Бонус → Запись (телефон) → Спасибо

Друг (по реф. ссылке):
  /start → "Вас пригласили!" → Выбор клуба (5 вариантов)
    → Карточка клуба → Запись → Спасибо`}</code>
        </pre>

        <h3>Переменные</h3>
        <ul>
          <li>
            <code>invited_count</code> — счётчик приглашённых
          </li>
          <li>
            <code>selected_club</code> — выбранный клуб
          </li>
          <li>
            <code>phone</code> — номер телефона
          </li>
          <li>
            <code>referral_link</code> — персональная ссылка
          </li>
          <li>
            <code>bonus_granted</code> — бонус начислен
          </li>
        </ul>

        <div className="info">
          <b>Этот сценарий доступен как шаблон.</b> Скопируйте JSON из{' '}
          <code>fixtures/powerhouse-referral.json</code> и вставьте в JSON-редактор сценария.
        </div>

        {/* ──────────────────────────────────────────── */}
        <h2>10. API Reference</h2>

        <h3>Боты</h3>
        <table>
          <thead>
            <tr>
              <th>Метод</th>
              <th>Путь</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/bots</td>
              <td>Создать бота</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/bots</td>
              <td>Список ботов</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/bots/:id</td>
              <td>Детали бота</td>
            </tr>
            <tr>
              <td>PATCH</td>
              <td>/telegram-bot/bots/:id</td>
              <td>Обновить бота</td>
            </tr>
            <tr>
              <td>DELETE</td>
              <td>/telegram-bot/bots/:id</td>
              <td>Удалить бота</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/bots/:id/activate</td>
              <td>Включить (webhook)</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/bots/:id/deactivate</td>
              <td>Выключить</td>
            </tr>
          </tbody>
        </table>

        <h3>Сценарии</h3>
        <table>
          <thead>
            <tr>
              <th>Метод</th>
              <th>Путь</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/scenarios</td>
              <td>Создать</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/scenarios</td>
              <td>Список</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/scenarios/:id</td>
              <td>Получить с JSON</td>
            </tr>
            <tr>
              <td>PATCH</td>
              <td>/telegram-bot/scenarios/:id</td>
              <td>Обновить JSON</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/scenarios/:id/publish</td>
              <td>Опубликовать</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/scenarios/:id/validate</td>
              <td>Валидировать</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/scenarios/:id/duplicate</td>
              <td>Дублировать</td>
            </tr>
            <tr>
              <td>DELETE</td>
              <td>/telegram-bot/scenarios/:id</td>
              <td>Удалить</td>
            </tr>
          </tbody>
        </table>

        <h3>Подписчики</h3>
        <table>
          <thead>
            <tr>
              <th>Метод</th>
              <th>Путь</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/bots/:botId/subscribers</td>
              <td>Список с фильтрами</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/bots/:botId/subscribers/stats</td>
              <td>Статистика</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/bots/:botId/analytics</td>
              <td>Полная аналитика</td>
            </tr>
          </tbody>
        </table>

        <h3>Рассылки</h3>
        <table>
          <thead>
            <tr>
              <th>Метод</th>
              <th>Путь</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/broadcasts</td>
              <td>Создать</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/broadcasts</td>
              <td>Список</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/broadcasts/:id</td>
              <td>Статус</td>
            </tr>
            <tr>
              <td>PATCH</td>
              <td>/telegram-bot/broadcasts/:id</td>
              <td>Обновить (DRAFT)</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/broadcasts/:id/send</td>
              <td>Запустить</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/broadcasts/:id/cancel</td>
              <td>Отменить</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/broadcasts/preview-count</td>
              <td>Превью аудитории</td>
            </tr>
          </tbody>
        </table>

        <h3>Вебхуки</h3>
        <table>
          <thead>
            <tr>
              <th>Метод</th>
              <th>Путь</th>
              <th>Описание</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/bots/:botId/webhooks</td>
              <td>Создать подписку</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/bots/:botId/webhooks</td>
              <td>Список</td>
            </tr>
            <tr>
              <td>GET</td>
              <td>/telegram-bot/bots/:botId/webhooks/events</td>
              <td>Доступные события</td>
            </tr>
            <tr>
              <td>PATCH</td>
              <td>/telegram-bot/bots/:botId/webhooks/:id</td>
              <td>Обновить</td>
            </tr>
            <tr>
              <td>DELETE</td>
              <td>/telegram-bot/bots/:botId/webhooks/:id</td>
              <td>Удалить</td>
            </tr>
            <tr>
              <td>POST</td>
              <td>/telegram-bot/bots/:botId/webhooks/:id/test</td>
              <td>Тест</td>
            </tr>
          </tbody>
        </table>

        {/* ──────────────────────────────────────────── */}
        <h2>11. FAQ</h2>

        <h3>Можно ли подключить несколько ботов к одному клубу?</h3>
        <p>Да, количество ботов не ограничено. Каждый бот может иметь свой сценарий.</p>

        <h3>Что будет, если я изменю сценарий?</h3>
        <p>
          Изменения вступают в силу после публикации. Подписчики, которые уже находятся в процессе
          прохождения, продолжат с текущей ноды. Если нода была удалена — бот вернёт их на старт.
        </p>

        <h3>Как узнать, что друг пришёл по реферальной ссылке?</h3>
        <p>
          Реферер получает автоматическое уведомление в чат с именем друга и обновлённым счётчиком.
        </p>

        <h3>Можно ли отправить рассылку только тем, кто дал согласие?</h3>
        <p>Да, используйте фильтр «Согласие на рассылку = Дали» при создании рассылки.</p>

        <h3>Как интегрировать бота с внешней CRM (Битрикс24, amoCRM)?</h3>
        <p>
          Используйте вебхуки: подпишитесь на нужные события и обрабатывайте их на своей стороне.
          Или используйте action <code>webhook</code> в сценарии для отправки данных в любую
          систему.
        </p>

        <h3>Бот перестал отвечать. Что делать?</h3>
        <ol>
          <li>Проверьте, что бот активен (зелёный статус)</li>
          <li>Проверьте, что сценарий опубликован</li>
          <li>Проверьте, что токен действителен (не отозван в @BotFather)</li>
          <li>Попробуйте деактивировать и активировать бота заново</li>
        </ol>

        <div
          style={{
            marginTop: '3rem',
            borderTop: '1px solid #e5e7eb',
            paddingTop: '1rem',
            color: '#9ca3af',
            fontSize: '0.85rem',
          }}
        >
          <p>MyFitCRM — Модуль «Telegram-бот» v1.0 | Документация обновлена: 19.03.2026</p>
        </div>
      </div>
    </div>
  );
}
