/* global React, ReactDOM, HeroDemo, Ticker, CodePlayground, WebhookConsole, PricingCalc, FAQ */
const { useState, useEffect } = React;

const KPOS_LANG = window.KPOS_LANG || 'ru';
const KK = {
  // Legal documents
  'Публичная оферта': 'Жария оферта',
  'Политика конфиденциальности': 'Құпиялылық саясаты',
  'Согласие на обработку данных': 'Деректерді өңдеуге келісім',
  // Nav
  'Как работает': 'Қалай жұмыс істейді',
  'Безопасность': 'Қауіпсіздік',
  'Разработчикам': 'Әзірлеушілерге',
  'Цены': 'Бағалар',
  'Войти': 'Кіру',
  'Начать': 'Бастау',
  // Hero
  'Приём Kaspi Pay через API · без эквайринга': 'Kaspi Pay-ды API арқылы қабылдау · эквайрингсіз',
  'Принимайте': 'Төлемдерді',
  'платежи через': 'қабылдаңыз —',
  'один': 'бір',
  'Без эквайринга, без банковских договоров, без месяцев согласований. 5 минут от регистрации до первого платежа в продакшене.':
    'Эквайрингсіз, банк шарттарынсыз, айлар бойы келісімдерсіз. Тіркелуден продакшендегі алғашқы төлемге дейін 5 минут.',
  'Создать аккаунт': 'Аккаунт жасау',
  'Как это работает': 'Бұл қалай жұмыс істейді',
  'мин': 'мин',
  'До первого платежа': 'Алғашқы төлемге дейін',
  'Абонентская плата': 'Абоненттік төлем',
  'Комиссия по обороту': 'Айналым бойынша комиссия',
  'Полная документация': 'Толық құжаттама',
  // Problem section
  'Проблема': 'Мәселе',
  '[ онлайн-оплата · РК ]': '[ онлайн-төлем · ҚР ]',
  'Приём платежей не должен': 'Төлем қабылдау',
  'быть': 'мұндай',
  'таким сложным.': 'күрделі болмауы керек.',
  'Каждый бизнес и каждый разработчик проходит через один и тот же мучительный процесс. Мы тоже прошли. Поэтому и сделали kaspipos.':
    'Әрбір бизнес пен әрбір әзірлеуші дәл сол азапты процестен өтеді. Біз де өттік. Сондықтан kaspipos-ты жасадық.',
  'Барьер': 'Кедергі',
  'Отказы.': 'Бас тартулар.',
  'Банки отклоняют большинство заявок на эквайринг. Недели документов — и формальный отказ без объяснений.':
    'Банктер эквайрингке өтінімдердің көпшілігін қабылдамайды. Апталар бойы құжаттар — содан кейін түсіндірмесіз формалды бас тарту.',
  'Среднее ожидание — 6 недель': 'Орташа күту — 6 апта',
  'Бумаги.': 'Қағаздар.',
  'Учредительные документы, сертификаты, финотчётность, бизнес-план, ИНН учредителей — бесконечный список.':
    'Құрылтай құжаттары, сертификаттар, қаржы есептілігі, бизнес-жоспар, құрылтайшылардың ЖСН — шексіз тізім.',
  '20+ документов': '20+ құжат',
  'Месяцы.': 'Айлар.',
  'Согласования, комплаенс, KYB, AML, обмен правками туда-сюда. Деньги, время, нервы — впустую.':
    'Келісімдер, комплаенс, KYB, AML, түзетулермен алмасу. Ақша, уақыт, жүйке — бекерге.',
  'Сжигание Runway': 'Runway-ды жағу',
  'Сборы.': 'Алымдар.',
  'Абонентская плата, минимальные обороты, активация, сертификация терминала — ещё до первой продажи.':
    'Абоненттік төлем, ең төменгі айналымдар, белсендіру, терминал сертификаттауы — алғашқы сатылымға дейін.',
  'Скрытые расходы': 'Жасырын шығындар',
  // How section
  '[ 4 шага · 5 минут ]': '[ 4 қадам · 5 минут ]',
  'От нуля до продакшена': 'Нөлден продакшенге дейін',
  'за': '',
  'пять': 'бес',
  'минут.': 'минут.',
  'Никаких звонков менеджеров, никаких «оставьте заявку — мы перезвоним». Самообслуживание от и до — как у нормальных API-сервисов.':
    'Менеджерлердің қоңыраулары жоқ, «өтінім қалдырыңыз — біз қайта қоңырау шаламыз» жоқ. Толық өзіне-өзі қызмет көрсету — қалыпты API-сервистердегідей.',
  'Войти через Google': 'Google арқылы кіру',
  'Один клик — аккаунт создан. Никаких форм, паспортов и подтверждений по почте.':
    'Бір клик — аккаунт жасалды. Формалар, паспорттар және поштамен растаулар жоқ.',
  'Роль кассира': 'Кассир рөлі',
  'В приложении Kaspi создаёте отдельную роль с минимальными правами. 4 тапа.':
    'Kaspi қосымшасында ең аз құқықтары бар жеке рөл жасайсыз. 4 түрту.',
  'Привязать устройство': 'Құрылғыны байланыстыру',
  'Номер телефона + SMS-код. На выходе — API-ключ kpos_live_…':
    'Телефон нөмірі + SMS-код. Нәтижесінде — kpos_live_… API-кілті.',
  'Первый платёж': 'Алғашқы төлем',
  'POST /qr/create → клиент платит → вебхук в вашу систему. Готово.':
    'POST /qr/create → клиент төлейді → вебхук сіздің жүйеңізге. Дайын.',
  // Trust section
  '[ роль кассира · средства мимо нас ]': '[ кассир рөлі · қаражат бізді айналып ]',
  '«А зачем делиться': '«Kaspi-ге қол жеткізуді',
  'доступом к': 'не үшін',
  'Главный вопрос — и он правильный. Короткий ответ: вы не передаёте пароль, PIN или доступ к деньгам. Только узкая роль кассира.':
    'Басты сұрақ — әрі ол дұрыс. Қысқа жауап: сіз құпиясөзді, PIN-кодты немесе ақшаға қол жеткізуді бермейсіз. Тек шектеулі кассир рөлін.',
  'Роль ·': 'Рөл ·',
  'Кассир': 'Кассир',
  'Принимать платежи через QR': 'QR арқылы төлем қабылдау',
  'разрешено': 'рұқсат етілген',
  'Видеть свою историю операций': 'Өз операцияларының тарихын көру',
  'Возвращать платежи через API': 'API арқылы төлемдерді қайтару',
  'Менять настройки аккаунта': 'Аккаунт параметрлерін өзгерту',
  'запрещено': 'тыйым салынған',
  'Выводить средства со счёта': 'Шоттан қаражатты шығару',
  'Видеть пароль или PIN владельца': 'Иесінің құпиясөзін немесе PIN-ін көру',
  'невозможно': 'мүмкін емес',
  'Что передаётся': 'Не беріледі',
  'Только номер телефона + одноразовый SMS.': 'Тек телефон нөмірі + бір реттік SMS.',
  'Никаких паролей, PIN-кодов или биометрии. Сервис получает только то, что нужно для авторизации именно этой роли — ничего больше.':
    'Құпиясөздер, PIN-кодтар немесе биометрия жоқ. Сервис тек осы рөлді авторизациялау үшін қажет нәрсені ғана алады — басқа ештеңе емес.',
  'Худший сценарий': 'Ең нашар сценарий',
  'Деньги остаются у вас.': 'Ақша сізде қалады.',
  'Даже при полной компрометации сервиса роль кассира физически не позволит кому-либо вывести средства или войти в основной аккаунт.':
    'Сервис толық бұзылған жағдайда да кассир рөлі біреудің қаражатты шығаруына немесе негізгі аккаунтқа кіруіне физикалық тұрғыда жол бермейді.',
  'Деньги — мимо нас': 'Ақша — бізді айналып',
  'Платежи идут напрямую в Kaspi.': 'Төлемдер тікелей Kaspi-ге барады.',
  'Средства покупателей поступают сразу на вашу торговую точку. Сервис передаёт только метаданные о факте оплаты — не сами деньги.':
    'Сатып алушылардың қаражаты бірден сіздің сауда нүктеңізге түседі. Сервис тек төлем фактісі туралы метадеректерді береді — ақшаның өзін емес.',
  'Как двигаются деньги · схема': 'Ақша қалай қозғалады · схема',
  'Покупатель': 'Сатып алушы',
  'Kaspi App': 'Kaspi App',
  'оплата': 'төлем',
  'Kaspi Bank': 'Kaspi Bank',
  'процессинг': 'процессинг',
  'зачисление': 'есепке алу',
  'Ваш счёт': 'Сіздің шотыңыз',
  'торговая точка': 'сауда нүктесі',
  'только метаданные': 'тек метадеректер',
  'без хранения средств': 'қаражатты сақтаусыз',
  // Dev section
  'Для разработчиков': 'Әзірлеушілерге',
  'Чистый REST.': 'Таза REST.',
  'Без': 'Сиқырсыз.',
  'магии.': '',
  'JSON-запросы, JSON-ответы, HMAC-подписи на вебхуках, одноразовые ключи под каждую кассу. Примеры на curl, Node, Python и PHP.':
    'JSON-сұраныстар, JSON-жауаптар, вебхуктардағы HMAC-қолтаңбалар, әр касса үшін жеке кілттер. curl, Node, Python және PHP мысалдары.',
  'Public endpoints · v3': 'Public endpoints · v3',
  'Создать QR-платёж': 'QR-төлем жасау',
  'Статус QR-платежа': 'QR-төлем күйі',
  'Счёт на телефон клиента': 'Клиенттің телефонына шот',
  'Полный или частичный возврат': 'Толық немесе ішінара қайтару',
  'История операций': 'Операциялар тарихы',
  'Проверка сессии Kaspi': 'Kaspi сессиясын тексеру',
  'События приходят': 'Оқиғалар',
  'мгновенно.': 'лезде келеді.',
  'Каждый платёж, отказ или просрочка — отдельный webhook с HMAC-подписью. Ретраи с экспоненциальной задержкой, идемпотентность по event_id, dead-letter очередь после 24 часов.':
    'Әрбір төлем, бас тарту немесе мерзімнің өтуі — HMAC-қолтаңбасы бар жеке webhook. Экспоненциалды кідіріспен қайталаулар, event_id бойынша идемпотенттілік, 24 сағаттан кейін dead-letter кезегі.',
  // Cases section
  'Кому подходит': 'Кімге қолайлы',
  '[ один API · десятки сценариев ]': '[ бір API · ондаған сценарий ]',
  'Один API —': 'Бір API —',
  'десятки': 'ондаған',
  'сценариев приёма.': 'қабылдау сценарийі.',
  'Не важно, продаёте вы через Telegram-бота, в интернет-магазине или присылаете счёт в WhatsApp — везде один и тот же запрос.':
    'Telegram-бот арқылы, интернет-дүкенде сатасыз ба, әлде WhatsApp-та шот жібересіз бе — бәрінде бір ғана сұраныс.',
  'Telegram-боты для онлайн-продаж.': 'Онлайн-сатылымға арналған Telegram-боттар.',
  'Бот формирует QR-ссылку, клиент платит в Kaspi, webhook возвращается боту — товар или цифровой продукт выдаётся автоматически.':
    'Бот QR-сілтемесін жасайды, клиент Kaspi-де төлейді, webhook ботқа қайтады — тауар немесе цифрлық өнім автоматты түрде беріледі.',
  'Интернет-магазины.': 'Интернет-дүкендер.',
  'Кнопка «Оплатить через Kaspi» в любом движке. Webhook закрывает заказ.':
    'Кез келген қозғалтқыштағы «Kaspi арқылы төлеу» түймесі. Webhook тапсырысты жабады.',
  'Подписки SaaS.': 'SaaS жазылымдары.',
  'Продлевайте по webhook.': 'Webhook арқылы ұзартыңыз.',
  'Курьеры.': 'Курьерлер.',
  'Ссылка прямо в приложении доставки.': 'Сілтеме тікелей жеткізу қосымшасында.',
  'Счета по WhatsApp / email.': 'WhatsApp / email арқылы шоттар.',
  'Отправьте платёжную ссылку. Клиент оплачивает через Kaspi — вы получаете подтверждение.':
    'Төлем сілтемесін жіберіңіз. Клиент Kaspi арқылы төлейді — сіз растауды аласыз.',
  'Запуск MVP — день первый.': 'MVP іске қосу — бірінші күн.',
  'Тестируете идею до банковского эквайринга? Подключитесь за 5 минут, принимайте платежи уже сегодня, договоры — потом.':
    'Банк эквайрингіне дейін идеяны тексеріп жатырсыз ба? 5 минутта қосылыңыз, бүгіннің өзінде төлем қабылдаңыз, шарттар — кейін.',
  // Pricing section
  'Цена': 'Баға',
  '[ только успешные платежи ]': '[ тек сәтті төлемдер ]',
  'Платите': 'Тек табыс',
  'только': 'тапқанда',
  'когда зарабатываете.': 'төлеңіз.',
  'Никаких абонентских, активаций, минимальных оборотов и сборов «за установку ключа». Комиссия снимается с успешных транзакций — и снижается по мере роста.':
    'Абоненттік төлемдер, белсендірулер, ең төменгі айналымдар және «кілт орнату» алымдары жоқ. Комиссия сәтті транзакциялардан алынады — әрі өсуіне қарай төмендейді.',
  // Compare section
  'Сравнение': 'Салыстыру',
  '[ почему не банк · почему не конкуренты ]': '[ неге банк емес · неге бәсекелестер емес ]',
  'Почему не банк': 'Неге банк емес',
  'и не': 'және',
  'конкуренты.': 'бәсекелестер емес.',
  'Открытое сравнение — потому что не страшно. Условия конкурентов взяты с публичных тарифов на май 2026 года.':
    'Ашық салыстыру — өйткені қорқынышты емес. Бәсекелестердің шарттары 2026 жылғы мамырдағы жария тарифтерден алынды.',
  'Банк / эквайринг': 'Банк / эквайринг',
  'Подписочный сервис': 'Жазылым сервисі',
  'До первого платежа': 'Алғашқы төлемге дейін',
  'Недели–месяцы': 'Апталар–айлар',
  'Несколько дней': 'Бірнеше күн',
  '5 минут': '5 минут',
  'Абонентская плата': 'Абоненттік төлем',
  'Есть': 'Бар',
  '10–60 тыс. ₸/мес': '10–60 мың ₸/ай',
  '0 ₸': '0 ₸',
  'Лимит платежей': 'Төлем лимиті',
  'По тарифу': 'Тариф бойынша',
  '30–100 в день': 'Күніне 30–100',
  'Без лимитов': 'Лимитсіз',
  'Комиссия': 'Комиссия',
  '% + скрытые': '% + жасырын',
  'Абон. + порог': 'Абон. + шегі',
  '4% → 1%': '4% → 1%',
  'Есть, но сложно': 'Бар, бірақ күрделі',
  'Частично': 'Ішінара',
  'Полный · SDK · документация': 'Толық · SDK · құжаттама',
  'Новые провайдеры': 'Жаңа провайдерлер',
  'Новый договор': 'Жаңа шарт',
  'Не предусмотрено': 'Қарастырылмаған',
  'Без правок в коде': 'Кодты түзетусіз',
  // FAQ section
  'FAQ': 'FAQ',
  '[ всё, что обычно спрашивают ]': '[ әдетте сұралатынның бәрі ]',
  // Final CTA
  '[ google login · 30 секунд ]': '[ google login · 30 секунд ]',
  'Сегодня —': 'Бүгін —',
  'первый': 'сіздің алғашқы',
  'ваш платёж.': 'төлеміңіз.',
  'Документация': 'Құжаттама',
  'Бесплатная регистрация · комиссия только с успешных платежей':
    'Тегін тіркелу · комиссия тек сәтті төлемдерден',
  // Footer
  'Сервис автоматизации онлайн-платежей для бизнеса в Казахстане. Не банк, не платёжная организация, не партнёр Kaspi.':
    'Қазақстандағы бизнес үшін онлайн-төлемдерді автоматтандыру сервисі. Банк емес, төлем ұйымы емес, Kaspi серіктесі емес.',
  'Продукт': 'Өнім',
  'Сценарии': 'Сценарийлер',
  'Ресурсы': 'Ресурстар',
  'Документация API': 'API құжаттамасы',
  'Быстрый старт': 'Жылдам бастау',
  'Коды ошибок': 'Қате кодтары',
  'Поддержка': 'Қолдау',
  'пн–пт · 09:00–21:00 ALA': 'дс–жм · 09:00–21:00 ALA',
  'kaspipos — веб-сервис автоматизации онлайн-платежей для предпринимателей. Сервис не является банком, платёжной организацией или официальным партнёром АО «Kaspi Bank». Денежные средства покупателей не поступают на счета сервиса — оплата уходит напрямую на торговую точку пользователя в инфраструктуре Kaspi.':
    'kaspipos — кәсіпкерлерге арналған онлайн-төлемдерді автоматтандыратын веб-сервис. Сервис банк, төлем ұйымы немесе «Kaspi Bank» АҚ-ның ресми серіктесі болып табылмайды. Сатып алушылардың ақшалай қаражаты сервистің шотына түспейді — төлем тікелей Kaspi инфрақұрылымындағы пайдаланушының сауда нүктесіне барады.',
};
const t = (s) => (KPOS_LANG === 'kk' ? (KK[s] || s) : s);

function LangSwitch() {
  const L = window.KPOS_LANG || 'ru';
  const mk = (code, label) => (
    <button
      key={code}
      onClick={() => window.kposSetLang(code)}
      style={{
        font: "500 11px var(--mono, 'JetBrains Mono', monospace)",
        letterSpacing: '0.04em', padding: '4px 8px', borderRadius: 3,
        cursor: 'pointer', border: 0,
        background: L === code ? 'var(--ink)' : 'transparent',
        color: L === code ? 'var(--paper)' : 'var(--mute)',
      }}
    >{label}</button>
  );
  return (
    <div style={{ display: 'inline-flex', gap: 2, border: '1px solid var(--rule-soft)', borderRadius: 4, padding: 2 }}>
      {mk('ru', 'РУ')}{mk('kk', 'ҚАЗ')}
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────
   Header / nav
   ───────────────────────────────────────────────────────────── */
function Nav() {
  return (
    <header className="site-nav">
      <div className="wrap-wide inner">
        <a href="#top" className="brand">
          <span className="mark" />
          kaspipos<span style={{ color: 'var(--mute)' }}>/api</span>
        </a>
        <nav className="nav-links">
          <a href="#how">{t('Как работает')}</a>
          <a href="#trust">{t('Безопасность')}</a>
          <a href="#dev">{t('Разработчикам')}</a>
          <a href="#price">{t('Цены')}</a>
          <a href="#faq">{t('FAQ')}</a>
        </nav>
        <div className="nav-right">
          <LangSwitch />
          <a href="/login.html" className="btn btn-ghost btn-sm hide-mob">{t('Войти')}</a>
          <a href="/login.html" className="btn btn-acid btn-sm">
            {t('Начать')} <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ─────────────────────────────────────────────────────────────
   Hero
   ───────────────────────────────────────────────────────────── */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap-wide">
        <div className="hero-grid">
          <div>
            <span className="eyebrow-acid">{t('Приём Kaspi Pay через API · без эквайринга')}</span>
            <h1 className="display">
              {t('Принимайте')}<br />
              {t('платежи через')}<br />
              <span className="it">{t('один')}</span> API.
            </h1>
            <p className="lead">
              {t('Без эквайринга, без банковских договоров, без месяцев согласований. 5 минут от регистрации до первого платежа в продакшене.')}
            </p>
            <div className="hero-cta">
              <a href="/login.html" className="btn btn-ink">
                {t('Создать аккаунт')} <span className="arrow">→</span>
              </a>
              <a href="#how" className="btn btn-ghost">
                {t('Как это работает')}
              </a>
            </div>
          </div>
          <HeroDemo />
        </div>

        <div className="hero-meta">
          <div className="cell">
            <div className="v">5<span className="it"> {t('мин')}</span></div>
            <div className="k">{t('До первого платежа')}</div>
          </div>
          <div className="cell">
            <div className="v">0<span className="it"> ₸</span></div>
            <div className="k">{t('Абонентская плата')}</div>
          </div>
          <div className="cell">
            <div className="v">4<span className="it">→</span>1<span className="it">%</span></div>
            <div className="k">{t('Комиссия по обороту')}</div>
          </div>
          <div className="cell">
            <div className="v">REST + <span className="it">hooks</span></div>
            <div className="k">{t('Полная документация')}</div>
          </div>
        </div>
      </div>

      <Ticker />
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Problem
   ───────────────────────────────────────────────────────────── */
const PROBLEMS = [
  {
    n: '01',
    h: 'Отказы.',
    p: 'Банки отклоняют большинство заявок на эквайринг. Недели документов — и формальный отказ без объяснений.',
    strike: 'Среднее ожидание — 6 недель',
  },
  {
    n: '02',
    h: 'Бумаги.',
    p: 'Учредительные документы, сертификаты, финотчётность, бизнес-план, ИНН учредителей — бесконечный список.',
    strike: '20+ документов',
  },
  {
    n: '03',
    h: 'Месяцы.',
    p: 'Согласования, комплаенс, KYB, AML, обмен правками туда-сюда. Деньги, время, нервы — впустую.',
    strike: 'Сжигание Runway',
  },
  {
    n: '04',
    h: 'Сборы.',
    p: 'Абонентская плата, минимальные обороты, активация, сертификация терминала — ещё до первой продажи.',
    strike: 'Скрытые расходы',
  },
];

function ProblemSection() {
  return (
    <section className="sec" id="problem">
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">01</span>
          <span>{t('Проблема')}</span>
          <span className="dot" />
          <span className="meta">{t('[ онлайн-оплата · РК ]')}</span>
        </div>
        <div className="sec-head">
          <h2 className="h-title">
            {t('Приём платежей не должен')}<br />
            {t('быть')} <span className="it">{t('таким сложным.')}</span>
          </h2>
          <p className="right">
            {t('Каждый бизнес и каждый разработчик проходит через один и тот же мучительный процесс. Мы тоже прошли. Поэтому и сделали kaspipos.')}
          </p>
        </div>
        <div className="problem-grid">
          {PROBLEMS.map((p) => (
            <div className="problem-cell" key={p.n}>
              <div className="num">{p.n} / {t('Барьер')}</div>
              <h3>{t(p.h)}</h3>
              <p>{t(p.p)}</p>
              <div className="strike">{t(p.strike)}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   How it works (4 steps, dark)
   ───────────────────────────────────────────────────────────── */
const STEPS = [
  {
    n: '01',
    t: '0:30',
    h: 'Войти через Google',
    p: 'Один клик — аккаунт создан. Никаких форм, паспортов и подтверждений по почте.',
    code: '→ GET /account/google',
  },
  {
    n: '02',
    t: '2:00',
    h: 'Роль кассира',
    p: 'В приложении Kaspi создаёте отдельную роль с минимальными правами. 4 тапа.',
    code: 'Kaspi → Профиль → Роли → +',
  },
  {
    n: '03',
    t: '1:00',
    h: 'Привязать устройство',
    p: 'Номер телефона + SMS-код. На выходе — API-ключ kpos_live_…',
    code: '$ export KPOS_KEY=kpos_live_…',
  },
  {
    n: '04',
    t: '0:30',
    h: 'Первый платёж',
    p: 'POST /qr/create → клиент платит → вебхук в вашу систему. Готово.',
    code: 'POST /qr/create → 201',
  },
];

function HowSection() {
  return (
    <section className="sec sec-dark" id="how">
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">02</span>
          <span>{t('Как это работает')}</span>
          <span className="dot" />
          <span className="meta">{t('[ 4 шага · 5 минут ]')}</span>
        </div>
        <div className="sec-head">
          <h2 className="h-title">
            {t('От нуля до продакшена')}<br />
            {t('за')} <span className="it">{t('пять')}</span> {t('минут.')}
          </h2>
          <p className="right">
            {t('Никаких звонков менеджеров, никаких «оставьте заявку — мы перезвоним». Самообслуживание от и до — как у нормальных API-сервисов.')}
          </p>
        </div>
        <div className="steps">
          {STEPS.map((s) => (
            <div className="step" key={s.n}>
              <div className="step-head">
                <div className="n">{s.n}</div>
                <div className="time">{s.t}</div>
              </div>
              <h3>{t(s.h)}</h3>
              <p>{t(s.p)}</p>
              <div className="code-hint">{s.code}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Trust / cashier role + money flow
   ───────────────────────────────────────────────────────────── */
function TrustSection() {
  return (
    <section className="sec" id="trust">
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">03</span>
          <span>{t('Безопасность')}</span>
          <span className="dot" />
          <span className="meta">{t('[ роль кассира · средства мимо нас ]')}</span>
        </div>
        <div className="sec-head">
          <h2 className="h-title">
            {t('«А зачем делиться')}<br />
            {t('доступом к')} <span className="it">Kaspi</span>?»
          </h2>
          <p className="right">
            {t('Главный вопрос — и он правильный. Короткий ответ: вы не передаёте пароль, PIN или доступ к деньгам. Только узкая роль кассира.')}
          </p>
        </div>

        <div className="trust-grid">
          <div className="role-card">
            <div className="role-head">
              <div className="who">{t('Роль ·')} <b>{t('Кассир')}</b></div>
              <div className="who acc">access · scoped</div>
            </div>
            <div className="perm-row y">
              <span className="mk">✓</span>
              <span className="what">{t('Принимать платежи через QR')}</span>
              <span className="tag">{t('разрешено')}</span>
            </div>
            <div className="perm-row y">
              <span className="mk">✓</span>
              <span className="what">{t('Видеть свою историю операций')}</span>
              <span className="tag">{t('разрешено')}</span>
            </div>
            <div className="perm-row y">
              <span className="mk">✓</span>
              <span className="what">{t('Возвращать платежи через API')}</span>
              <span className="tag">{t('разрешено')}</span>
            </div>
            <div className="perm-row n">
              <span className="mk">✕</span>
              <span className="what">{t('Менять настройки аккаунта')}</span>
              <span className="tag">{t('запрещено')}</span>
            </div>
            <div className="perm-row n">
              <span className="mk">✕</span>
              <span className="what">{t('Выводить средства со счёта')}</span>
              <span className="tag">{t('запрещено')}</span>
            </div>
            <div className="perm-row n">
              <span className="mk">✕</span>
              <span className="what">{t('Видеть пароль или PIN владельца')}</span>
              <span className="tag">{t('невозможно')}</span>
            </div>
          </div>

          <div className="trust-points">
            <div className="trust-point">
              <div className="num">a / {t('Что передаётся')}</div>
              <h4>{t('Только номер телефона + одноразовый SMS.')}</h4>
              <p>
                {t('Никаких паролей, PIN-кодов или биометрии. Сервис получает только то, что нужно для авторизации именно этой роли — ничего больше.')}
              </p>
            </div>
            <div className="trust-point">
              <div className="num">b / {t('Худший сценарий')}</div>
              <h4>{t('Деньги остаются у вас.')}</h4>
              <p>
                {t('Даже при полной компрометации сервиса роль кассира физически не позволит кому-либо вывести средства или войти в основной аккаунт.')}
              </p>
            </div>
            <div className="trust-point">
              <div className="num">c / {t('Деньги — мимо нас')}</div>
              <h4>{t('Платежи идут напрямую в Kaspi.')}</h4>
              <p>
                {t('Средства покупателей поступают сразу на вашу торговую точку. Сервис передаёт только метаданные о факте оплаты — не сами деньги.')}
              </p>
            </div>
          </div>
        </div>

        <div className="flow">
          <div className="flow-head">{t('Как двигаются деньги · схема')}</div>
          <div className="flow-row">
            <div className="flow-node">
              <b>{t('Покупатель')}</b>
              <span>{t('Kaspi App')}</span>
            </div>
            <div className="flow-arrow">
              <div className="lbl">{t('оплата')}</div>
              <div className="line" />
            </div>
            <div className="flow-node">
              <b>{t('Kaspi Bank')}</b>
              <span>{t('процессинг')}</span>
            </div>
            <div className="flow-arrow">
              <div className="lbl">{t('зачисление')}</div>
              <div className="line" />
            </div>
            <div className="flow-node">
              <b>{t('Ваш счёт')}</b>
              <span>{t('торговая точка')}</span>
            </div>
          </div>
          <div className="flow-side">
            <span>kaspipos</span>
            <span>·</span>
            <span><b>{t('только метаданные')}</b></span>
            <span>·</span>
            <span>{t('без хранения средств')}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Developers — code playground + endpoints + webhook console
   ───────────────────────────────────────────────────────────── */
const ENDPOINTS = [
  { m: 'POST', mk: 'post', path: '/api/qr/create', d: 'Создать QR-платёж' },
  { m: 'GET', mk: 'get', path: '/api/qr/status', d: 'Статус QR-платежа' },
  { m: 'POST', mk: 'post', path: '/api/invoice/create', d: 'Счёт на телефон клиента' },
  { m: 'POST', mk: 'post', path: '/api/refund/create', d: 'Полный или частичный возврат' },
  { m: 'POST', mk: 'post', path: '/api/history/operations', d: 'История операций' },
  { m: 'GET', mk: 'get', path: '/api/session/check', d: 'Проверка сессии Kaspi' },
];

function DevSection() {
  return (
    <section className="sec sec-dark" id="dev">
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">04</span>
          <span>{t('Для разработчиков')}</span>
          <span className="dot" />
          <span className="meta">[ REST · webhooks · sdk ]</span>
        </div>
        <div className="sec-head">
          <h2 className="h-title">
            {t('Чистый REST.')}<br />
            <span className="it">{t('Без')}</span> {t('магии.')}
          </h2>
          <p className="right">
            {t('JSON-запросы, JSON-ответы, HMAC-подписи на вебхуках, одноразовые ключи под каждую кассу. Примеры на curl, Node, Python и PHP.')}
          </p>
        </div>

        <div className="dev-grid">
          <CodePlayground />
          <div>
            <div
              style={{
                fontFamily: 'JetBrains Mono',
                fontSize: 11.5,
                letterSpacing: '0.04em',
                textTransform: 'uppercase',
                color: 'rgba(244, 240, 230, 0.55)',
                marginBottom: 12,
              }}
            >
              {t('Public endpoints · v3')}
            </div>
            <div className="endpoint-list" style={{ borderTopColor: 'rgba(244, 240, 230, 0.15)' }}>
              {ENDPOINTS.map((e) => (
                <div
                  className="endpoint"
                  key={e.path + e.m}
                  style={{ borderBottomColor: 'rgba(244, 240, 230, 0.1)' }}
                >
                  <span className={'method ' + e.mk}>{e.m}</span>
                  <div>
                    <div className="path" style={{ color: 'var(--paper)' }}>{e.path}</div>
                    <div className="desc" style={{ color: 'rgba(244, 240, 230, 0.5)' }}>{t(e.d)}</div>
                  </div>
                  <span className="arr" style={{ color: 'rgba(244, 240, 230, 0.5)' }}>→</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="console-grid">
          <div>
            <span className="eyebrow-acid">Webhooks</span>
            <h3
              className="h-title"
              style={{ fontSize: 'clamp(32px, 4vw, 52px)', marginTop: 20, marginBottom: 18 }}
            >
              {t('События приходят')}<br />
              <span className="it">{t('мгновенно.')}</span>
            </h3>
            <p className="body-md" style={{ maxWidth: 440 }}>
              {t('Каждый платёж, отказ или просрочка — отдельный webhook с HMAC-подписью. Ретраи с экспоненциальной задержкой, идемпотентность по event_id, dead-letter очередь после 24 часов.')}
            </p>
            <div
              style={{
                marginTop: 28,
                display: 'flex',
                flexWrap: 'wrap',
                gap: 8,
                fontFamily: 'JetBrains Mono',
                fontSize: 12,
              }}
            >
              {['payment.success', 'payment.failed', 'payment.expired'].map(
                (e) => (
                  <span
                    key={e}
                    style={{
                      padding: '6px 10px',
                      border: '1px solid rgba(244, 240, 230, 0.2)',
                      borderRadius: 3,
                      color: 'rgba(244, 240, 230, 0.75)',
                    }}
                  >
                    {e}
                  </span>
                )
              )}
            </div>
          </div>
          <WebhookConsole />
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Use cases — bento
   ───────────────────────────────────────────────────────────── */
function CasesSection() {
  return (
    <section className="sec" id="cases">
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">05</span>
          <span>{t('Кому подходит')}</span>
          <span className="dot" />
          <span className="meta">{t('[ один API · десятки сценариев ]')}</span>
        </div>
        <div className="sec-head">
          <h2 className="h-title">
            {t('Один API —')} <span className="it">{t('десятки')}</span><br />
            {t('сценариев приёма.')}
          </h2>
          <p className="right">
            {t('Не важно, продаёте вы через Telegram-бота, в интернет-магазине или присылаете счёт в WhatsApp — везде один и тот же запрос.')}
          </p>
        </div>
        <div className="cases">
          <div className="case feat big">
            <div className="top">
              <span className="id">A / featured</span>
              <span className="glyph">⌬</span>
            </div>
            <div>
              <h3>{t('Telegram-боты для онлайн-продаж.')}</h3>
              <p>
                {t('Бот формирует QR-ссылку, клиент платит в Kaspi, webhook возвращается боту — товар или цифровой продукт выдаётся автоматически.')}
              </p>
            </div>
          </div>
          <div className="case med">
            <div className="top">
              <span className="id">B</span>
              <span className="glyph">cart</span>
            </div>
            <div>
              <h3>{t('Интернет-магазины.')}</h3>
              <p>{t('Кнопка «Оплатить через Kaspi» в любом движке. Webhook закрывает заказ.')}</p>
            </div>
          </div>
          <div className="case sm">
            <div className="top">
              <span className="id">C</span>
              <span className="glyph">↻</span>
            </div>
            <div>
              <h3>{t('Подписки SaaS.')}</h3>
              <p>{t('Продлевайте по webhook.')}</p>
            </div>
          </div>

          <div className="case sm">
            <div className="top">
              <span className="id">D</span>
              <span className="glyph">→</span>
            </div>
            <div>
              <h3>{t('Курьеры.')}</h3>
              <p>{t('Ссылка прямо в приложении доставки.')}</p>
            </div>
          </div>
          <div className="case med">
            <div className="top">
              <span className="id">E</span>
              <span className="glyph">invoice</span>
            </div>
            <div>
              <h3>{t('Счета по WhatsApp / email.')}</h3>
              <p>
                {t('Отправьте платёжную ссылку. Клиент оплачивает через Kaspi — вы получаете подтверждение.')}
              </p>
            </div>
          </div>
          <div className="case dark big">
            <div className="top">
              <span className="id">F / launch</span>
              <span className="glyph">mvp_</span>
            </div>
            <div>
              <h3>{t('Запуск MVP — день первый.')}</h3>
              <p>
                {t('Тестируете идею до банковского эквайринга? Подключитесь за 5 минут, принимайте платежи уже сегодня, договоры — потом.')}
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Pricing + comparison
   ───────────────────────────────────────────────────────────── */
function PricingSection() {
  return (
    <section className="sec" id="price" style={{ background: 'var(--paper-2)' }}>
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">06</span>
          <span>{t('Цена')}</span>
          <span className="dot" />
          <span className="meta">{t('[ только успешные платежи ]')}</span>
        </div>
        <div className="sec-head">
          <h2 className="h-title">
            {t('Платите')} <span className="it">{t('только')}</span><br />
            {t('когда зарабатываете.')}
          </h2>
          <p className="right">
            {t('Никаких абонентских, активаций, минимальных оборотов и сборов «за установку ключа». Комиссия снимается с успешных транзакций — и снижается по мере роста.')}
          </p>
        </div>
        <PricingCalc />
      </div>
    </section>
  );
}

const CMP_ROWS = [
  { k: 'До первого платежа', bank: 'Недели–месяцы', sub: 'Несколько дней', us: { x: false, t: '5 минут' } },
  { k: 'Абонентская плата', bank: 'Есть', sub: '10–60 тыс. ₸/мес', us: { x: false, t: '0 ₸' } },
  { k: 'Лимит платежей', bank: 'По тарифу', sub: '30–100 в день', us: { x: false, t: 'Без лимитов' } },
  { k: 'Комиссия', bank: '% + скрытые', sub: 'Абон. + порог', us: { x: false, t: '4% → 1%' } },
  { k: 'REST API + webhooks', bank: 'Есть, но сложно', sub: 'Частично', us: { x: false, t: 'Полный · SDK · документация' } },
  { k: 'Новые провайдеры', bank: 'Новый договор', sub: 'Не предусмотрено', us: { x: false, t: 'Без правок в коде' } },
];

function CompareSection() {
  return (
    <section className="sec">
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">07</span>
          <span>{t('Сравнение')}</span>
          <span className="dot" />
          <span className="meta">{t('[ почему не банк · почему не конкуренты ]')}</span>
        </div>
        <div className="sec-head">
          <h2 className="h-title">
            {t('Почему не банк')}<br />
            {t('и не')} <span className="it">{t('конкуренты.')}</span>
          </h2>
          <p className="right">
            {t('Открытое сравнение — потому что не страшно. Условия конкурентов взяты с публичных тарифов на май 2026 года.')}
          </p>
        </div>
        <table className="cmp-tbl">
          <thead>
            <tr>
              <th></th>
              <th>{t('Банк / эквайринг')}</th>
              <th>{t('Подписочный сервис')}</th>
              <th className="us">kaspipos</th>
            </tr>
          </thead>
          <tbody>
            {CMP_ROWS.map((r) => (
              <tr key={r.k}>
                <td>{t(r.k)}</td>
                <td>
                  <span className="x">✕</span>
                  {t(r.bank)}
                </td>
                <td>
                  <span className="x">~</span>
                  {t(r.sub)}
                </td>
                <td className="us">
                  <span className="v">✓</span>
                  <b>{t(r.us.t)}</b>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   FAQ section wrapper
   ───────────────────────────────────────────────────────────── */
function FaqSection() {
  return (
    <section className="sec" id="faq" style={{ background: 'var(--paper-2)' }}>
      <div className="wrap-wide">
        <div className="section-label">
          <span className="num">08</span>
          <span>{t('FAQ')}</span>
          <span className="dot" />
          <span className="meta">{t('[ всё, что обычно спрашивают ]')}</span>
        </div>
        <FAQ />
      </div>
    </section>
  );
}

/* ─────────────────────────────────────────────────────────────
   Final CTA + footer
   ───────────────────────────────────────────────────────────── */
function FinalCTA() {
  return (
    <section className="cta">
      <div className="wrap-wide">
        <div className="section-label" style={{ color: 'rgba(244, 240, 230, 0.55)', borderTopColor: 'rgba(244, 240, 230, 0.18)' }}>
          <span className="num" style={{ color: 'var(--paper)' }}>09</span>
          <span>{t('Начать')}</span>
          <span className="dot" style={{ background: 'rgba(244, 240, 230, 0.15)' }} />
          <span className="meta">{t('[ google login · 30 секунд ]')}</span>
        </div>
        <h2 className="display" style={{ marginTop: 36 }}>
          {t('Сегодня —')} <span className="it">{t('первый')}</span><br />
          {t('ваш платёж.')}
        </h2>
        <div className="cta-meta">
          <a href="/login.html" className="btn btn-acid">
            {t('Создать аккаунт')} <span className="arrow">→</span>
          </a>
          <a href="#dev" className="btn btn-ghost" style={{ borderColor: 'var(--paper)', color: 'var(--paper)' }}>
            {t('Документация')}
          </a>
          <span className="small">
            {t('Бесплатная регистрация · комиссия только с успешных платежей')}
          </span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="wrap-wide">
        <div className="foot-grid">
          <div>
            <div className="foot-brand">kaspipos/api</div>
            <p style={{ maxWidth: 360 }}>
              {t('Сервис автоматизации онлайн-платежей для бизнеса в Казахстане. Не банк, не платёжная организация, не партнёр Kaspi.')}
            </p>
            <p style={{ marginTop: 12, color: 'rgba(244, 240, 230, 0.45)' }}>© 2026</p>
          </div>
          <div>
            <h5>{t('Продукт')}</h5>
            <a href="#how">{t('Как работает')}</a>
            <a href="#dev">{t('Разработчикам')}</a>
            <a href="#price">{t('Цены')}</a>
            <a href="#cases">{t('Сценарии')}</a>
            <a href="/login.html">{t('Войти')}</a>
          </div>
          <div>
            <h5>{t('Ресурсы')}</h5>
            <a href="/docs.html">{t('Документация API')}</a>
            <a href="/docs.html#start">{t('Быстрый старт')}</a>
            <a href="/docs.html#webhooks">Webhooks</a>
            <a href="/docs.html#errors">{t('Коды ошибок')}</a>
          </div>
          <div>
            <h5>{t('Поддержка')}</h5>
            <p>WhatsApp · +7 700 000-00-00</p>
            <p>support@kaspipos.kz</p>
            <p>{t('пн–пт · 09:00–21:00 ALA')}</p>
          </div>
        </div>
        <div className="disclaimer">
          <div>
            <div className="foot-legal">
              <a href="/offer.html">{t('Публичная оферта')}</a>
              <a href="/privacy.html">{t('Политика конфиденциальности')}</a>
              <a href="/consent.html">{t('Согласие на обработку данных')}</a>
            </div>
            {t('kaspipos — веб-сервис автоматизации онлайн-платежей для предпринимателей. Сервис не является банком, платёжной организацией или официальным партнёром АО «Kaspi Bank». Денежные средства покупателей не поступают на счета сервиса — оплата уходит напрямую на торговую точку пользователя в инфраструктуре Kaspi.')}
          </div>
          <div className="big">pos/api</div>
        </div>
      </div>
    </footer>
  );
}

/* ─────────────────────────────────────────────────────────────
   App + Tweaks
   ───────────────────────────────────────────────────────────── */

const ACCENT_MAP = {
  '#d4ff3e': '#b8e62a', // acid
  '#ffc046': '#e6a626', // amber
  '#7cf2d6': '#4dd9b6', // cyan
  '#ff7a5b': '#e6573a', // coral
};
const ACCENT_OPTIONS = Object.keys(ACCENT_MAP);

const PAPERS = {
  cream: { paper: '#f4f0e6', paper2: '#ece6d7' },
  paper: { paper: '#f5f4f0', paper2: '#ece9e1' },
  ash: { paper: '#e7e4dc', paper2: '#d9d4c8' },
  ink: { paper: '#16161a', paper2: '#1f1f24', dark: true },
};

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "accent": "#ff7a5b",
  "paper": "cream"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULS);

  useEffect(() => {
    const root = document.documentElement;
    const acid = tweaks.accent || '#d4ff3e';
    root.style.setProperty('--acid', acid);
    root.style.setProperty('--acid-deep', ACCENT_MAP[acid] || acid);
    const pap = PAPERS[tweaks.paper] || PAPERS.cream;
    root.style.setProperty('--paper', pap.paper);
    root.style.setProperty('--paper-2', pap.paper2);
    if (pap.dark) {
      root.style.setProperty('--ink', '#f4f0e6');
      root.style.setProperty('--ink-2', '#e6e0cf');
      root.style.setProperty('--mute', '#9a978f');
      root.style.setProperty('--faint', '#6b6a64');
      root.style.setProperty('--rule-soft', 'rgba(244, 240, 230, 0.15)');
    } else {
      root.style.setProperty('--ink', '#0f0f10');
      root.style.setProperty('--ink-2', '#1c1c1e');
      root.style.setProperty('--mute', '#6b6a64');
      root.style.setProperty('--faint', '#a8a5a0');
      root.style.setProperty('--rule-soft', '#d8d2c2');
    }
  }, [tweaks.accent, tweaks.paper]);

  return (
    <>
      <Nav />
      <Hero />
      <ProblemSection />
      <HowSection />
      <TrustSection />
      <DevSection />
      <CasesSection />
      <PricingSection />
      <CompareSection />
      <FaqSection />
      <FinalCTA />
      <Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Accent">
          <window.TweakColor
            label="Acid color"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={ACCENT_OPTIONS}
          />
        </window.TweakSection>
        <window.TweakSection label="Paper">
          <window.TweakRadio
            label="Background"
            value={tweaks.paper}
            onChange={(v) => setTweak('paper', v)}
            options={[
              { value: 'cream', label: 'Cream' },
              { value: 'paper', label: 'Paper' },
              { value: 'ash', label: 'Ash' },
              { value: 'ink', label: 'Ink' },
            ]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);