// slides-7.jsx — услуга «Автоматизация бизнеса» (слайды 33-38).
// Идут сразу после слайда 32 «AI-стек», перед P.S. AI (39).
//
//   S_AIStory          — hook + наш кейс: «+30% маржа от оптимизации 6 отделов»
//   S_AIClients        — результат клиентов: «+20% уже на старте»
//   S_AIMarket         — факт-сдвиг рынка: 5% мира + парадигма за 3 мес
//   S_AISplit          — развилка: компании с AI vs динозавры
//   S_AIOfferGuarantee — оффер по себестоимости + сильная гарантия с возвратом
//   S_AICTA            — финальный призыв: бесплатный аудит
//
// Дизайн-система: только токены и компоненты, которые уже используются
// в slides-6.jsx (S_AITools / S_AIWink). Никаких новых стилей и палитры.
// Все тёмные слайды на var(--c-ink) с ember-акцентами.
//
// [TBD] маркеры — цифры эффекта + параметры гарантии + CTA-контакт.
// Артём заменит реальными значениями (см. HANDOFF.md).

// ─────────────── S33: HOOK + НАШ КЕЙС ───────────────
// «Внедрили себе → +30% маржа за счёт оптимизации 6 отделов».
// Большая цифра справа, 6 отделов крупно снизу.
function S_AIStory({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;

  const departments = [
    { t: 'Производство',  d: 'Автоматизировали на 40% настройку Яндекс Директа, Авито и работы по дизайну.' },
    { t: 'Финансы',       d: 'Автоматизация управленческого учёта. Отказались от нудных Excel-таблиц и убрали десятки рутинных операций' },
    { t: 'Юр. отдел',     d: 'Автоматическая генерация договоров, итоговых актов, дополнительных соглашений и отдельный трекер со статусом подписания' },
    { t: 'Менеджмент',    d: 'Разработка собственной системы управления агентством, что помогло сократить кол-во рутинных задач и нагрузку на проджект-менеджеров' },
    { t: 'Маркетинг',     d: 'Разработка отдельной программы для полной автоматизации холодных рассылок, презентаций, сайта, SEO' },
    { t: 'Продажи',       d: 'Автоматизация работы CRM, замена отдела контроля качества ИИ, аналитика работы скриптов' },
  ];

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={33} label="Наш кейс" />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 36, minHeight: 0 }}>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.35fr) minmax(0, 1fr)', gap: 40, alignItems: 'stretch' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22, justifyContent: 'center' }}>
          <Eyebrow color={A.main}>появление нового направления</Eyebrow>
          <SectionTitle color="#fff" size={62}>
            Следом за&nbsp;переходом нашей компании на&nbsp;ИИ мы&nbsp;решили открыть направление по&nbsp;автоматизации других бизнесов
          </SectionTitle>
          <p style={{ fontFamily: 'var(--ff-body)', fontSize: 19, lineHeight: 1.5, color: 'var(--c-fog)', margin: 0, maxWidth: 640 }}>
            Прошли через автоматизацию собственного бизнеса в&nbsp;6&nbsp;отделах&nbsp;— увидели эффект на&nbsp;цифрах. Упаковали процесс в&nbsp;услугу для&nbsp;других компаний.
          </p>
        </div>

        {/* Гигантская ember-плашка с одной KPI-цифрой */}
        <div style={{
          background: A.main,
          borderRadius: 'var(--r-xl)',
          padding: '28px 32px',
          display: 'flex', flexDirection: 'column', gap: 8,
          justifyContent: 'space-between',
          boxShadow: '0 16px 48px rgba(255,90,31,0.30)',
          minWidth: 0, overflow: 'hidden',
        }}>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase', margin: 0 }}>
            на&nbsp;собственном бизнесе
          </p>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 132, letterSpacing: '-0.04em', lineHeight: 0.85, color: '#fff' }}>
            30%
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.4, color: '#fff', margin: 0 }}>
            На&nbsp;своём примере смогли повысить маржинальность услуг на&nbsp;30% за&nbsp;счёт оптимизации процессов разных отделов. А&nbsp;результаты наших клиентов выросли после внедрения на&nbsp;старте на&nbsp;20%.
          </p>
        </div>
      </div>

      {/* 6 отделов в строку */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, marginTop: 'auto', paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.10)' }}>
        <Eyebrow color={A.main}>где автоматизировали внутри Эталона</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, minmax(0, 1fr))', gap: 20 }}>
          {departments.map((d, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6, minWidth: 0 }}>
              <h4 style={{ fontFamily: 'var(--ff-display)', fontWeight: 600, fontSize: 18, lineHeight: 1.15, color: '#fff', letterSpacing: '-0.01em', margin: 0 }}>{d.t}</h4>
              <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, color: 'var(--c-fog)', letterSpacing: '0.02em', lineHeight: 1.45, margin: 0 }} dangerouslySetInnerHTML={{ __html: d.d }} />
            </div>
          ))}
        </div>
      </div>

    </div>
  </SlideFrame>;
}

// ─────────────── S34: РЕЗУЛЬТАТ КЛИЕНТОВ ───────────────
// Одна общая цифра по клиентам которым уже внедрили AI на старте.
function S_AIClients({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;

  const wins = [
    { t: 'Скорость рутины',         d: 'Часовые задачи решаются за&nbsp;минуты — освобождает команду под рост' },
    { t: 'Качество данных',         d: 'AI ловит ошибки в&nbsp;учёте и&nbsp;документах раньше, чем&nbsp;это видит человек' },
    { t: 'Прогнозируемость',        d: 'P&L и&nbsp;воронка обновляются ежедневно — решения на&nbsp;свежих цифрах' },
  ];

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={34} label="Кейсы клиентов" />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 36, minHeight: 0, justifyContent: 'center' }}>

      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.2fr) minmax(0, 1fr)', gap: 40, alignItems: 'stretch' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22, justifyContent: 'center' }}>
          <Eyebrow color={A.main}>результаты клиентов</Eyebrow>
          <SectionTitle color="#fff" size={68}>
            <H bg={A.main} fg="#fff">+20%</H> уже<br/>на&nbsp;старте
          </SectionTitle>
          <p style={{ fontFamily: 'var(--ff-body)', fontSize: 19, lineHeight: 1.5, color: 'var(--c-fog)', margin: 0, maxWidth: 640 }}>
            После внедрения AI на&nbsp;первых клиентских проектах ключевые метрики выросли уже в&nbsp;первые недели&nbsp;— не&nbsp;через год, не&nbsp;через полгода.
          </p>
        </div>

        {/* Ascending bar chart — рост по неделям, последний столбик ember +20% */}
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 'var(--r-xl)',
          padding: '24px 28px 20px',
          display: 'flex', flexDirection: 'column', gap: 14,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.06em', color: 'var(--c-fog)', textTransform: 'uppercase', margin: 0 }}>
              рост по&nbsp;неделям
            </p>
            <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.06em', color: A.main, textTransform: 'uppercase' }}>
              [эффект]
            </span>
          </div>

          {/* Bar chart: 5 столбиков ascending */}
          <div style={{ display: 'flex', alignItems: 'flex-end', gap: 10, height: 220, paddingTop: 10 }}>
            {[
              { h: 60,  label: '1' },
              { h: 95,  label: '2' },
              { h: 135, label: '3' },
              { h: 170, label: '4' },
              { h: 205, label: '5', highlight: true },
            ].map((bar, i) => (
              <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, justifyContent: 'flex-end', height: '100%' }}>
                <div style={{
                  width: '100%',
                  height: bar.h,
                  background: bar.highlight ? A.main : 'rgba(255,255,255,0.14)',
                  borderRadius: '6px 6px 0 0',
                  boxShadow: bar.highlight ? '0 -4px 24px rgba(255,90,31,0.45)' : 'none',
                  transition: 'height 0.4s ease',
                  position: 'relative',
                }}>
                  {bar.highlight && (
                    <div style={{
                      position: 'absolute', top: -28, left: '50%', transform: 'translateX(-50%)',
                      fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 22,
                      color: '#fff', letterSpacing: '-0.02em', whiteSpace: 'nowrap',
                    }}>
                      +20%
                    </div>
                  )}
                </div>
                <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, color: bar.highlight ? A.main : 'var(--c-fog)', letterSpacing: '0.06em' }}>
                  нед.&nbsp;{bar.label}
                </span>
              </div>
            ))}
          </div>

          <p style={{ fontSize: 14, lineHeight: 1.4, color: 'var(--c-fog)', margin: 0, paddingTop: 8, borderTop: '1px solid rgba(255,255,255,0.08)' }}>
            Эффект продолжает расти по&nbsp;мере масштабирования внедрения.
          </p>
        </div>
      </div>

      {/* 3 общих win'а от внедрения у клиентов */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.10)' }}>
        <Eyebrow color={A.main}>что меняется в&nbsp;первые недели</Eyebrow>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 28 }}>
          {wins.map((w, i) => (
            <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <h4 style={{ fontFamily: 'var(--ff-display)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, color: '#fff', letterSpacing: '-0.01em', margin: 0 }}>{w.t}</h4>
              <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 13, color: 'var(--c-fog)', letterSpacing: '0.03em', lineHeight: 1.5, margin: 0 }} dangerouslySetInnerHTML={{ __html: w.d }} />
            </div>
          ))}
        </div>
      </div>

    </div>
  </SlideFrame>;
}

// ─────────────── S35: ФАКТ-СДВИГ РЫНКА ───────────────
// Подводка к развилке (слайд 36): «бизнес уже разделён».
// Две якорные цифры с разных источников: 90% без AI (Census BTOS,
// официальная статистика США) + выгода внедривших (McKinsey 2025).
function S_AIMarket({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={35} label="Контекст рынка" />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 36, minHeight: 0 }}>

      {/* HERO: заголовок + объяснение */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 1500 }}>
        <Eyebrow color={A.main}>два мира бизнеса</Eyebrow>
        <SectionTitle color="#fff" size={76}>
          Российский бизнес уже <H bg={A.main} fg="#fff">разделился</H>
        </SectionTitle>
        <p style={{ fontFamily: 'var(--ff-body)', fontSize: 21, lineHeight: 1.45, color: 'var(--c-fog)', margin: 0, maxWidth: 1300 }}>
          Часть компаний уже встроила AI в&nbsp;ключевые процессы и&nbsp;опережает рынок по&nbsp;марже и&nbsp;скорости. У&nbsp;остальных AI пока не&nbsp;часть инфраструктуры. Разрыв между двумя группами растёт каждый месяц.
        </p>
      </div>

      {/* Две stat-карточки контраста: без AI vs с AI */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 28, flex: 1, alignItems: 'stretch', minHeight: 0 }}>

        {/* Card A — без AI: 2 из 3 российских компаний */}
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 'var(--r-xl)',
          padding: '32px 36px',
          display: 'flex', flexDirection: 'column', gap: 16,
        }}>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.08em', color: 'var(--c-fog)', textTransform: 'uppercase', margin: 0 }}>
            бизнес без&nbsp;AI
          </p>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 132, letterSpacing: '-0.04em', lineHeight: 0.85, color: '#fff' }}>
            66%
          </div>
          <p style={{ fontFamily: 'var(--ff-body)', fontSize: 18, lineHeight: 1.4, color: '#fff', margin: 0 }}>
            российских компаний <strong style={{ fontWeight: 700 }}>пока не&nbsp;внедряли AI</strong> в&nbsp;ключевые процессы. AI ещё не&nbsp;стал частью их&nbsp;инфраструктуры&nbsp;— и&nbsp;это пока преимущество для&nbsp;тех, кто успеет внедрить раньше.
          </p>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.04em', color: 'var(--c-fog)', margin: 'auto 0 0', opacity: 0.85, lineHeight: 1.45 }}>
            Источник:{' '}
            <a
              href="https://yakovpartners.ru/publications/ai-2025/"
              target="_blank"
              rel="noopener noreferrer"
              style={{ color: A.main, textDecoration: 'underline', textUnderlineOffset: 3 }}
            >
              Яков и&nbsp;Партнёры × Яндекс · ИИ в&nbsp;России 2025
            </a>
            . 34% компаний активно внедряют AI&nbsp;— остальные 66% либо в&nbsp;планах, либо пока не&nbsp;думали.
          </p>
        </div>

        {/* Card B — с AI: выгода для внедривших */}
        <div style={{
          background: A.main,
          borderRadius: 'var(--r-xl)',
          padding: '32px 36px',
          display: 'flex', flexDirection: 'column', gap: 16,
          boxShadow: '0 16px 48px rgba(255,90,31,0.30)',
        }}>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.92)', textTransform: 'uppercase', margin: 0 }}>
            бизнес с&nbsp;AI
          </p>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 78, letterSpacing: '-0.03em', lineHeight: 0.9, color: '#fff' }}>
              −10-20%
            </div>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, letterSpacing: '0.04em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase' }}>
              расходы
            </div>
          </div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap', borderTop: '1px solid rgba(255,255,255,0.25)', paddingTop: 16 }}>
            <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 78, letterSpacing: '-0.03em', lineHeight: 0.9, color: '#fff' }}>
              +&gt;10%
            </div>
            <div style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, letterSpacing: '0.04em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase' }}>
              выручка
            </div>
          </div>
          <p style={{ fontFamily: 'var(--ff-body)', fontSize: 16, lineHeight: 1.4, color: '#fff', margin: 0 }}>
            По&nbsp;данным McKinsey, в&nbsp;IT, производстве и&nbsp;поддержке многие компании фиксируют <strong style={{ fontWeight: 700 }}>−10-20% расходов</strong> от&nbsp;внедрения AI; в&nbsp;маркетинге, продажах и&nbsp;стратегии&nbsp;— значительная доля показывает <strong style={{ fontWeight: 700 }}>&gt;10% к&nbsp;выручке</strong>.
          </p>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.04em', color: 'rgba(255,255,255,0.85)', margin: 'auto 0 0', lineHeight: 1.45 }}>
            Источник:{' '}
            <a
              href="https://www.mckinsey.com/capabilities/quantumblack/our-insights/the-state-of-ai"
              target="_blank"
              rel="noopener noreferrer"
              style={{ color: '#fff', textDecoration: 'underline', textUnderlineOffset: 3, fontWeight: 600 }}
            >
              McKinsey &amp; Company · The State of AI in&nbsp;2025
            </a>
            , опрос 1&nbsp;933 компаний из&nbsp;10+ отраслей.
          </p>
        </div>

      </div>

      {/* Мостик к слайду 36 */}
      <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 14, letterSpacing: '0.06em', color: A.main, textTransform: 'uppercase', margin: 0 }}>
        окно возможностей ещё открыто&nbsp;— но&nbsp;закрывается каждый месяц
      </p>

    </div>
  </SlideFrame>;
}

// ─────────────── S36: РАЗВИЛКА «С AI vs Динозавры» ───────────────
// Две колонки контраста. Слева — компании которые внедрили, справа — те кто
// остался на старой парадигме. Внизу — финальный вердикт.
function S_AISplit({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;

  const withAI = [
    'Оптимизируют расходы&nbsp;— поднимают маржинальность',
    'Меньше команда, но&nbsp;больше результаты&nbsp;— рутина на&nbsp;агентах',
    'Новая эра команд: 1&nbsp;руководитель + десятки агентов вместо&nbsp;10+ нанятых людей',
    'Сэкономленные деньги реинвестируете в&nbsp;маркетинг и&nbsp;рост',
    'Наличие автоматизаций в&nbsp;бизнесе как конкуретное преимущество',
  ];

  const withoutAI = [
    'Маржа сжимается&nbsp;— рынок давит ценой, а&nbsp;налоги только повышаются',
    'Лучшие сотрудники выгорают на&nbsp;рутине и&nbsp;уходят',
    'Каждый рост&nbsp;= новый найм + ФОТ + риск увольнения',
    'ФОТ съедает прибыль&nbsp;— на&nbsp;маркетинг не&nbsp;остаётся',
    'Конкуренты с&nbsp;AI предлагают то&nbsp;же дешевле&nbsp;— клиенты уходят',
  ];

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={36} label="Развилка" />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 32, minHeight: 0 }}>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        <Eyebrow color={A.main}>что происходит с&nbsp;бизнесом прямо сейчас</Eyebrow>
        <SectionTitle color="#fff" size={68}>
          Бизнес <H bg={A.main} fg="#fff">разделяется</H>. На&nbsp;каком вы&nbsp;краю?
        </SectionTitle>
      </div>

      {/* 2 колонки контраста */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 24, flex: 1, minHeight: 0 }}>

        {/* Левая — с AI */}
        <div style={{
          background: A.main,
          borderRadius: 'var(--r-xl)',
          padding: '32px 36px',
          display: 'flex', flexDirection: 'column', gap: 18,
          boxShadow: '0 16px 48px rgba(255,90,31,0.30)',
          position: 'relative', overflow: 'hidden',
        }}>
          {/* Декоративная стрелка-вверх в углу */}
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeOpacity="0.18" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ position: 'absolute', top: 16, right: 16, pointerEvents: 'none' }} aria-hidden="true">
            <polyline points="6 12 12 6 18 12"/>
            <polyline points="6 18 12 12 18 18"/>
            <line x1="12" y1="6" x2="12" y2="22"/>
          </svg>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.08em', color: 'rgba(255,255,255,0.85)', textTransform: 'uppercase', margin: 0 }}>
            компании с&nbsp;AI
          </p>
          <h3 style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 36, lineHeight: 1.1, color: '#fff', letterSpacing: '-0.02em', margin: 0 }}>
            Кто внедрил ИИ
          </h3>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {withAI.map((w, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3 }} aria-hidden="true">
                  <polyline points="20 6 9 17 4 12"/>
                </svg>
                <span style={{ fontFamily: 'var(--ff-body)', fontSize: 17, lineHeight: 1.4, color: '#fff' }} dangerouslySetInnerHTML={{ __html: w }} />
              </li>
            ))}
          </ul>
        </div>

        {/* Правая — без AI */}
        <div style={{
          background: 'rgba(255,255,255,0.04)',
          border: '1px solid rgba(255,255,255,0.12)',
          borderRadius: 'var(--r-xl)',
          padding: '32px 36px',
          display: 'flex', flexDirection: 'column', gap: 18,
          position: 'relative', overflow: 'hidden',
        }}>
          {/* Декоративная стрелка-вниз в углу */}
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeOpacity="0.10" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ position: 'absolute', top: 16, right: 16, pointerEvents: 'none' }} aria-hidden="true">
            <polyline points="6 6 12 12 18 6"/>
            <polyline points="6 12 12 18 18 12"/>
            <line x1="12" y1="2" x2="12" y2="18"/>
          </svg>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.08em', color: 'var(--c-fog)', textTransform: 'uppercase', margin: 0 }}>
            работают как раньше
          </p>
          <h3 style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 36, lineHeight: 1.1, color: '#fff', letterSpacing: '-0.02em', margin: 0, opacity: 0.9 }}>
            Кто не&nbsp;внедрил ИИ
          </h3>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 10 }}>
            {withoutAI.map((w, i) => (
              <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--c-fog)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 3, opacity: 0.7 }} aria-hidden="true">
                  <line x1="18" y1="6" x2="6" y2="18"/>
                  <line x1="6" y1="6" x2="18" y2="18"/>
                </svg>
                <span style={{ fontFamily: 'var(--ff-body)', fontSize: 17, lineHeight: 1.4, color: 'var(--c-fog)' }} dangerouslySetInnerHTML={{ __html: w }} />
              </li>
            ))}
          </ul>
        </div>

      </div>

      {/* Финальный вердикт */}
      <div style={{ paddingTop: 18, borderTop: '1px solid rgba(255,255,255,0.10)' }}>
        <p style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 28, lineHeight: 1.2, color: '#fff', margin: 0, letterSpacing: '-0.02em' }}>
          Третьего на&nbsp;этом рынке <span style={{ color: A.main }}>не&nbsp;будет</span>.
        </p>
      </div>

    </div>
  </SlideFrame>;
}

// ─────────────── S37: ОФФЕР + ГАРАНТИЯ ───────────────
// Один слайд со всем коммерческим: что внутри пилота, цена («по
// себестоимости»), гарантия с возвратом денег, обязательства.
function S_AIOfferGuarantee({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;

  const inside = [
    { t: 'Аудит процессов',     d: 'карта где AI даст эффект в&nbsp;деньгах' },
    { t: 'Дорожная карта',      d: 'таблица с&nbsp;планируемыми возвратом инвестиций: сколько вложили и&nbsp;по&nbsp;итогу заработали. Информация по&nbsp;бюджету, составу работ' },
    { t: 'MVP и запуск',   d: '2–4 недели · 2-3 ключевые автоматизации в&nbsp;продакшене' },
    { t: 'Обучение + поддержка',d: 'ваша команда работает с&nbsp;AI самостоятельно после пилота. Мы бесплатно предоставляем обучение' },
  ];

  const obligations = [
    'Не&nbsp;достигли согласованной метрики&nbsp;— 100% возврат',
    'Фиксированная стоимость пилота, без новых счетов',
    'NDA + IP остаётся у&nbsp;вашей компании',
    'Прямой доступ к&nbsp;собственнику, а&nbsp;не&nbsp;к&nbsp;аккаунт-менеджеру',
  ];

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={37} label="Условия" />
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 28, minHeight: 0 }}>

      {/* HERO: оффер слева + гарантия справа */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 32, alignItems: 'stretch' }}>

        {/* Левая — что внутри + цена */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <Eyebrow color={A.main}>что входит в&nbsp;пилот</Eyebrow>
          <SectionTitle color="#fff" size={48}>
            Предлагаем AI-внедрение<br/>со&nbsp;скидкой в&nbsp;<H bg={A.main} fg="#fff">40%</H>
          </SectionTitle>
          <p style={{ fontFamily: 'var(--ff-body)', fontSize: 17, lineHeight: 1.5, color: 'var(--c-fog)', margin: 0 }}>
            Срок <strong style={{ color: '#fff', fontWeight: 600 }}>4–6 недель</strong>. Мы&nbsp;активно планируем растить кол-во кейсов с&nbsp;компаниями, где фиксируем результаты после внедрения AI. Поэтому предлагаем нашу работу по&nbsp;себестоимости.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 8 }}>
            {inside.map((item, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.3fr)', gap: 24, padding: '18px 0', borderTop: '1px solid rgba(255,255,255,0.12)', alignItems: 'baseline' }}>
                <h4 style={{ fontFamily: 'var(--ff-display)', fontWeight: 600, fontSize: 24, lineHeight: 1.2, color: '#fff', letterSpacing: '-0.015em', margin: 0 }}>{item.t}</h4>
                <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 16, color: 'var(--c-fog)', letterSpacing: '0.02em', lineHeight: 1.5, margin: 0 }} dangerouslySetInnerHTML={{ __html: item.d }} />
              </div>
            ))}
          </div>
        </div>

        {/* Правая — восходящая лестница из 4 этапов: визуальная метафора
            пилота. 4 точки от низа-слева к верху-справа, последняя — крупный
            ember-glow (финал = результат). Соединительные линии-пунктир. */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          minHeight: 0, position: 'relative',
        }}>
          <svg
            viewBox="0 0 600 600"
            style={{ width: '100%', height: 'auto', maxHeight: 560, display: 'block' }}
            aria-hidden="true"
          >
            <defs>
              <radialGradient id="emberFinal" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor={A.main} stopOpacity="1"/>
                <stop offset="55%" stopColor={A.main} stopOpacity="0.55"/>
                <stop offset="100%" stopColor={A.main} stopOpacity="0"/>
              </radialGradient>
              <filter id="emberFinalGlow" x="-50%" y="-50%" width="200%" height="200%">
                <feGaussianBlur stdDeviation="16" result="blur"/>
                <feMerge>
                  <feMergeNode in="blur"/>
                  <feMergeNode in="SourceGraphic"/>
                </feMerge>
              </filter>
            </defs>

            {/* Тонкая координатная сетка-фон (8 горизонтальных линий, low opacity) */}
            <g stroke="#fff" strokeOpacity="0.04" strokeWidth="1">
              {[120, 195, 270, 345, 420, 495].map(y => (
                <line key={y} x1="40" y1={y} x2="560" y2={y} />
              ))}
            </g>

            {/* Соединительные линии между этапами (пунктир, нарастающая яркость) */}
            <g fill="none" strokeLinecap="round" strokeDasharray="6 8">
              <line x1="100" y1="500" x2="240" y2="395" stroke="#fff" strokeOpacity="0.18" strokeWidth="2"/>
              <line x1="240" y1="395" x2="380" y2="280" stroke="#fff" strokeOpacity="0.32" strokeWidth="2.4"/>
              <line x1="380" y1="280" x2="500" y2="140" stroke={A.main} strokeOpacity="0.65" strokeWidth="3"/>
            </g>

            {/* Этап 1 — самая нижняя, маленькая, white-low */}
            <circle cx="100" cy="500" r="14" fill="#fff" fillOpacity="0.22"/>
            <circle cx="100" cy="500" r="6" fill="#fff" fillOpacity="0.55"/>

            {/* Этап 2 — побольше */}
            <circle cx="240" cy="395" r="18" fill="#fff" fillOpacity="0.32"/>
            <circle cx="240" cy="395" r="8" fill="#fff" fillOpacity="0.75"/>

            {/* Этап 3 — ember half-tone */}
            <circle cx="380" cy="280" r="24" fill={A.main} fillOpacity="0.55"/>
            <circle cx="380" cy="280" r="11" fill={A.main}/>

            {/* Этап 4 — финальный, большой ember с glow */}
            <circle cx="500" cy="140" r="90" fill="url(#emberFinal)" filter="url(#emberFinalGlow)"/>
            <circle cx="500" cy="140" r="42" fill={A.main}/>
            <circle cx="500" cy="140" r="18" fill="#fff" fillOpacity="0.95"/>
            {/* Декоративные искры вокруг финальной точки */}
            <g stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeOpacity="0.6">
              <line x1="500" y1="40" x2="500" y2="65"/>
              <line x1="500" y1="215" x2="500" y2="240"/>
              <line x1="400" y1="140" x2="425" y2="140"/>
              <line x1="575" y1="140" x2="600" y2="140"/>
            </g>

            {/* Подписи "01..04" под точками — мини-индикаторы прогресса */}
            <g fill="var(--c-fog)" fontFamily="var(--ff-mono)" fontSize="14" letterSpacing="2">
              <text x="100" y="540" textAnchor="middle">01</text>
              <text x="240" y="435" textAnchor="middle">02</text>
              <text x="380" y="320" textAnchor="middle" fill={A.main}>03</text>
              <text x="500" y="265" textAnchor="middle" fill="#fff" fontWeight="700">04</text>
            </g>

            {/* Линии-связи от ядра к крупным узлам */}
            <g stroke={A.main} strokeWidth="1.2" strokeOpacity="0.35" strokeLinecap="round">
              <line x1="300" y1="300" x2="444" y2="240"/>
              <line x1="300" y1="300" x2="156" y2="360"/>
              <line x1="300" y1="300" x2="380" y2="448"/>
            </g>
          </svg>
        </div>

      </div>

    </div>
  </SlideFrame>;
}

// ─────────────── S38: CTA «Бесплатный аудит» ───────────────
function S_AICTA({ accent }) {
  const A = ACCENT_MAP[accent] || ACCENT_MAP.ember;

  // 3 буллета «На выходе:» — текст 1:1 с правок Артёма + Lucide-style иконки.
  const outputs = [
    {
      // Zap — мгновенный эффект «уже на этой неделе»
      icon: <><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></>,
      t: 'Узнаете, как начать внедрение AI в&nbsp;свой бизнес, чтобы получить эффект <strong>уже на&nbsp;этой неделе</strong>;',
    },
    {
      // Wallet — экономия
      icon: <><path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4z"/></>,
      t: 'Сколько поможет сэкономить вам автоматизация;',
    },
    {
      // Wrench — рабочие практики/инструменты
      icon: <><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></>,
      t: 'Узнаете <strong>рабочие практики</strong> по&nbsp;AI и&nbsp;получите практический опыт;',
    },
  ];

  return <SlideFrame bg="var(--c-ink)" color="#fff">
    <PageHeader dark num={38} label="Старт" />

    {/* Декоративные dots + большая стрелка справа */}
    <svg aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', pointerEvents: 'none', opacity: 0.5 }} viewBox="0 0 1920 1080" preserveAspectRatio="none">
      <defs>
        <pattern id="ctaDots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="1.4" fill="var(--c-ember)" opacity="0.18"/>
        </pattern>
      </defs>
      <rect width="1920" height="1080" fill="url(#ctaDots)"/>
    </svg>

    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 32, minHeight: 0, justifyContent: 'center', position: 'relative', zIndex: 1 }}>

      {/* HERO: текст слева + 6 пиктограмм отделов справа */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.55fr) minmax(0, 1fr)', gap: 56, alignItems: 'start' }}>

        {/* LEFT — заголовок + параграф + «На выходе» с иконками */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
          <Eyebrow color={A.main}>как начать</Eyebrow>
          <SectionTitle color="#fff" size={72}>
            Приглашаем на&nbsp;<H bg={A.main} fg="#fff">бесплатную экскурсию</H> в&nbsp;свой бизнес
          </SectionTitle>
          <p style={{ fontFamily: 'var(--ff-body)', fontSize: 19, lineHeight: 1.5, color: 'var(--c-fog)', margin: 0 }}>
            Артём, основатель агентства, проведёт экскурсию для&nbsp;вас по&nbsp;6&nbsp;автоматизированным отделам: производство, маркетинг, финансы, юридическая часть, продажи, менеджмент. Покажем <strong style={{ color: '#fff', fontWeight: 600 }}>рабочие инструменты и&nbsp;«внутрянку»</strong>.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 4 }}>
            <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.06em', color: A.main, textTransform: 'uppercase', margin: 0 }}>
              На&nbsp;выходе:
            </p>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {outputs.map((o, i) => (
                <li key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{
                    flexShrink: 0,
                    width: 36, height: 36,
                    borderRadius: 10,
                    background: 'rgba(255,90,31,0.14)',
                    border: '1px solid rgba(255,90,31,0.35)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke={A.main} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      {o.icon}
                    </svg>
                  </span>
                  <span style={{ fontFamily: 'var(--ff-body)', fontSize: 17, lineHeight: 1.45, color: 'var(--c-fog)', paddingTop: 6 }} dangerouslySetInnerHTML={{ __html: o.t.replace(/<strong>/g, '<strong style="color:#fff;font-weight:600">') }} />
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* RIGHT — абстрактная AI-orbit композиция (не дублирует список отделов) */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 18, position: 'relative' }}>
          <svg viewBox="0 0 480 460" width="100%" style={{ maxWidth: 520, height: 'auto', display: 'block' }} aria-hidden="true">
            <defs>
              <radialGradient id="aictaCoreGlow" cx="50%" cy="50%" r="50%">
                <stop offset="0%" stopColor={A.main} stopOpacity="0.55"/>
                <stop offset="55%" stopColor={A.main} stopOpacity="0.10"/>
                <stop offset="100%" stopColor={A.main} stopOpacity="0"/>
              </radialGradient>
            </defs>

            {/* Декоративные звёздочки в углах */}
            <g fill={A.main} opacity="0.55">
              <path d="M40 60 l3 -10 l3 10 l10 3 l-10 3 l-3 10 l-3 -10 l-10 -3 z" transform="scale(0.7) translate(20 0)"/>
              <path d="M430 90 l2.5 -8 l2.5 8 l8 2.5 l-8 2.5 l-2.5 8 l-2.5 -8 l-8 -2.5 z" opacity="0.7"/>
              <path d="M60 380 l2 -7 l2 7 l7 2 l-7 2 l-2 7 l-2 -7 l-7 -2 z"/>
              <path d="M420 380 l3 -10 l3 10 l10 3 l-10 3 l-3 10 l-3 -10 l-10 -3 z" opacity="0.6"/>
            </g>

            {/* Радиальное свечение центра */}
            <circle cx="240" cy="230" r="170" fill="url(#aictaCoreGlow)"/>

            {/* 3 орбиты — концентрические dashed-кольца */}
            <g fill="none" stroke={A.main} strokeWidth="1">
              <circle cx="240" cy="230" r="90"  opacity="0.45" strokeDasharray="2 6"/>
              <circle cx="240" cy="230" r="140" opacity="0.32" strokeDasharray="2 8"/>
              <circle cx="240" cy="230" r="195" opacity="0.20" strokeDasharray="2 10"/>
            </g>

            {/* Точки-агенты на орбитах — без подписей, чистая декорация */}
            <g fill={A.main}>
              {/* Внутренняя орбита r=90 */}
              <circle cx="330" cy="230" r="5"/>
              <circle cx="178" cy="167" r="3.5" opacity="0.75"/>
              <circle cx="195" cy="308" r="4" opacity="0.85"/>

              {/* Средняя орбита r=140 */}
              <circle cx="240" cy="90"  r="6"/>
              <circle cx="370" cy="305" r="4.5" opacity="0.80"/>
              <circle cx="115" cy="280" r="4" opacity="0.70"/>

              {/* Внешняя орбита r=195 */}
              <circle cx="240" cy="35"  r="5"  opacity="0.65"/>
              <circle cx="425" cy="280" r="3.5" opacity="0.55"/>
              <circle cx="80"  cy="335" r="4.5" opacity="0.60"/>
              <circle cx="395" cy="120" r="3" opacity="0.50"/>
            </g>

            {/* Тонкие соединительные линии — center → ключевые узлы */}
            <g stroke={A.main} strokeWidth="1" opacity="0.40" strokeLinecap="round">
              <line x1="240" y1="230" x2="330" y2="230"/>
              <line x1="240" y1="230" x2="240" y2="90"/>
              <line x1="240" y1="230" x2="195" y2="308"/>
            </g>

            {/* Центральный AI-узел: ember-circle + sparkle */}
            <g>
              <circle cx="240" cy="230" r="46" fill={A.main} style={{ filter: 'drop-shadow(0 16px 48px rgba(255,90,31,0.55))' }}/>
              <circle cx="240" cy="230" r="46" fill="none" stroke="#fff" strokeWidth="1.5" opacity="0.20"/>
              {/* Sparkle (4-конечная звезда) */}
              <path d="M240 198 L246 224 L272 230 L246 236 L240 262 L234 236 L208 230 L234 224 Z" fill="#fff"/>
              {/* Маленький акцент */}
              <circle cx="262" cy="208" r="3.5" fill="#fff" opacity="0.85"/>
            </g>
          </svg>

          {/* Tagline-плашка под orb */}
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '10px 18px',
            background: 'rgba(255,255,255,0.04)',
            border: '1px solid rgba(255,255,255,0.12)',
            borderRadius: 999,
          }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: A.main, boxShadow: `0 0 12px ${A.main}` }}/>
            <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.08em', color: '#fff', textTransform: 'uppercase' }}>
              1 неделя &nbsp;·&nbsp; бесплатно &nbsp;·&nbsp; без презентаций
            </span>
          </div>
        </div>

      </div>

      {/* CONTACT блоки внизу */}
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.6fr) minmax(0, 1fr)', gap: 28, alignItems: 'stretch' }}>
        <div style={{
          background: A.main,
          borderRadius: 'var(--r-xl)',
          padding: '28px 36px',
          display: 'flex', flexDirection: 'column', gap: 12,
          justifyContent: 'center',
          boxShadow: '0 24px 64px rgba(255,90,31,0.40)',
          minWidth: 0, minHeight: 0, overflow: 'hidden',
        }}>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 12, letterSpacing: '0.06em', color: 'rgba(255,255,255,0.92)', textTransform: 'uppercase', margin: 0 }}>
            написать собственнику напрямую
          </p>
          <div style={{ fontFamily: 'var(--ff-display)', fontWeight: 800, fontSize: 52, letterSpacing: '-0.03em', lineHeight: 0.95, color: '#fff', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>
            @artempapst
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.45, color: '#fff', margin: 0 }}>
            Telegram&nbsp;— отвечаю в&nbsp;течение дня. Можно сразу прикрепить ссылку на&nbsp;ваш сайт или CRM&nbsp;— подготовлю первичный взгляд к&nbsp;звонку.
          </p>
        </div>

        <div style={{
          background: 'rgba(255,255,255,0.06)',
          border: '1px solid rgba(255,255,255,0.15)',
          borderRadius: 'var(--r-xl)',
          padding: '24px 28px',
          display: 'flex', flexDirection: 'column', gap: 14,
          justifyContent: 'center',
          minWidth: 0, minHeight: 0, overflow: 'hidden',
        }}>
          <p style={{ fontFamily: 'var(--ff-mono)', fontSize: 11, letterSpacing: '0.06em', color: 'var(--c-fog)', textTransform: 'uppercase', margin: 0 }}>
            альтернативные каналы
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.05em', color: 'var(--c-fog)', textTransform: 'uppercase' }}>мессенджер</span>
              <span style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 20, color: '#fff', letterSpacing: '-0.01em', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>MAX:&nbsp;+7&nbsp;906&nbsp;913&nbsp;00&nbsp;37</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
              <span style={{ fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.05em', color: 'var(--c-fog)', textTransform: 'uppercase' }}>почта</span>
              <span style={{ fontFamily: 'var(--ff-display)', fontWeight: 700, fontSize: 20, color: '#fff', letterSpacing: '-0.01em', wordBreak: 'break-word', overflowWrap: 'anywhere' }}>papstartem07@gmail.com</span>
            </div>
          </div>
        </div>
      </div>

    </div>
  </SlideFrame>;
}

Object.assign(window, { S_AIStory, S_AIClients, S_AIMarket, S_AISplit, S_AIOfferGuarantee, S_AICTA });