// Plazify · Страница «О компании» (/about/)
// Truth-страница: кто мы и почему нам можно доверять. Не продающая, без CTA.
// Reuses the approved Plazify primitives (Section, Eyebrow, MIcon, track) and the
// existing visual patterns: soft wide card, .feat-card light grid, dark HITL block,
// lilac panel. No new design system, no new tokens, no new assets.
// Content source: plazify_about_copy.md. Requisites: canonical shared footer values.

/* ---- 3. Что мы создаём — 4-item concept grid (concepts present in the MD) ---- */
const ABOUT_BUILD = [
  {
    icon: 'message',
    t: 'Клиентский сервис',
    d: 'Модуль поддержки коммуникаций с клиентами для разных отраслей. Он объединяет конфигурации AI-инструментов и интеграций на базе LLM и ML, помогает сотрудникам поддержки готовить ответы на обращения и отзывы, сохранять тон коммуникации и быстрее обрабатывать типовые сценарии.',
  },
  {
    icon: 'layers',
    t: 'Управление поставками и остатками',
    d: 'Модуль планирования поставок и контроля складских остатков на базе ML и анализа больших данных. Он анализирует продажи, остатки, динамику спроса и внешние факторы — погоду, позицию в выдаче, цену и другие сигналы — формируя рекомендации по управлению складом и снижению рисков дефицита или излишков.',
  },
  {
    icon: 'chart',
    t: 'Маркетинг и продвижение',
    d: 'Модуль для управления продвижением и оценки эффективности рекламных кампаний. На базе ML и LLM он объединяет инструменты анализа конкурентной динамики, подготовки рекламных материалов, работы с позиционированием и принятия решений на основе накопленных данных.',
  },
  {
    icon: 'tag',
    t: 'Работа с документами',
    d: 'Модуль поддержки back office для обработки документов и корпоративных знаний. На базе OCR, LLM и ML он извлекает данные из файлов, поддерживает поиск и ответы по базе знаний, помогает работать с регламентами, отчетами и документацией, сохраняя требования к точности, стабильности и скорости.',
  },
];

/* ---- 4. Наш подход — dark HITL pattern (exact MD paragraphs) ---- */
const ABOUT_APPROACH = [
  {
    icon: 'sliders',
    t: 'Research-first',
    d: 'При создании продуктов мы всегда идём по пути research-first: сначала разбираемся в данных и процессах клиента, проектируем — и только потом автоматизируем, тестируя решения вместе с заказчиком. Мы должны улучшать бизнес-процесс, а не ломать его.',
  },
  {
    icon: 'check',
    t: 'Human-in-the-Loop',
    d: 'Мы придерживаемся подхода безопасного и контролируемого внедрения AI: AI готовит ответы, прогнозы и рекомендации, но критичные действия подтверждает человек. Мы не строим «чёрный ящик» — Plazify готовит рекомендации, ответы и прогнозы, но пользователь сохраняет контроль над публикацией, поставками и настройками автоматизации.',
  },
  {
    icon: 'shield',
    t: 'Production-grade',
    d: 'Модули Plazify разрабатываются на технология платформы DataDial, которые уже работают в других отраслях и проверены временем. Это помогает нам упростить разработку и сокращает срок запуска и ускоряет доставку технологий для внедрения нашим клиентам в разных отраслях.',
  },
];

/* ---- 5. Опыт за пределами маркетплейсов — 5-card light grid (exact MD bullets) ---- */
const ABOUT_BEYOND = [
  { icon: 'tag', t: 'Обработка документов', d: 'OCR, парсинг, извлечение сущностей, RAG по корпусам документации.' },
  { icon: 'chart', t: 'ML и прогнозная аналитика', d: 'Модели спроса, рисков и отклонений от плана на разнородных источниках данных.' },
  { icon: 'layers', t: 'Интеграционные системы', d: 'Соединение существующих систем заказчика — ERP, CRM, BI — через AI-слой, без замены текущего ПО.' },
  { icon: 'message', t: 'Клиентский сервис', d: 'AI-ассистенты, которые готовят ответы для команд, работающих с клиентами.' },
  { icon: 'check', t: 'Базы знаний', d: 'Поиск и ответы по корпоративным данным.' },
];

/* ---- 6. Технологическая база — lilac panel rows (exact MD bullets) ---- */
const ABOUT_TECH = [
  { icon: 'chart', t: 'AI/ML-модели для анализа отзывов и прогнозирования спроса' },
  { icon: 'message', t: 'RAG и обработка данных для работы с текстами и знаниями' },
  { icon: 'layers', t: 'Интеграции с внешними системами и API' },
  { icon: 'sliders', t: 'Аналитическое хранение данных и ML-пайплайны' },
  { icon: 'check', t: 'Модульная архитектура для масштабирования продукта' },
];

/* ---- 7. Документы для контактного блока ---- */
const ABOUT_DOCS = [
  { label: 'Политика конфиденциальности', href: '/privacy-policy/' },
  { label: 'Пользовательское соглашение', href: '/user-agreement/' },
  { label: 'Согласие на обработку Cookies', href: '/cookies/' },
  { label: 'Согласие на обработку персональных данных', href: '/personal-data-consent/' },
];

function AboutHeroGlyph() {
  return (
    <svg
      className="about-hero-stage-logo-svg"
      width="140"
      height="140"
      viewBox="730 340 180 180"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
    >
      <defs>
        <radialGradient
          id="aboutGlyphFillA"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(-35.0589 -102.234 132.033 -55.1611 820.573 431.139)"
        >
          <stop stopColor="#FFFFFF" stopOpacity="0.86" />
          <stop offset="0.46" stopColor="#F2EEFF" stopOpacity="0.78" />
          <stop offset="1" stopColor="#C8BFFF" stopOpacity="0.56" />
        </radialGradient>

        <radialGradient
          id="aboutGlyphFillB"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="matrix(66.9782 98.4346 -68.4215 56.8606 826.329 434.604)"
        >
          <stop stopColor="#FFFFFF" stopOpacity="0.82" />
          <stop offset="0.56" stopColor="#E8E1FF" stopOpacity="0.72" />
          <stop offset="1" stopColor="#B9A8FF" stopOpacity="0.52" />
        </radialGradient>
      </defs>

      <path
        d="M874.974 383.811C874.974 374.162 867.584 366.308 858.387 366.308H808.572C780.396 366.308 758.758 389.084 758.758 418.873V471.438C758.758 481.088 766.201 488.942 775.345 488.942C784.489 488.942 791.932 481.088 791.932 471.438V418.873C791.932 408.382 798.631 401.37 808.519 401.37H858.334C867.478 401.37 874.921 393.516 874.921 383.867L874.974 383.811Z"
        fill="url(#aboutGlyphFillA)"
        opacity="0.84"
      />
      <path
        d="M870.193 459.149L846.747 434.409C840.261 427.565 829.735 427.565 823.302 434.409C816.816 441.254 816.816 452.361 823.302 459.149L846.747 483.889C853.233 490.734 863.76 490.734 870.193 483.889C876.679 477.045 876.679 465.938 870.193 459.149Z"
        fill="url(#aboutGlyphFillB)"
        opacity="0.78"
      />
    </svg>
  );
}

function AboutHeroWordmark() {
  return (
    <svg
      viewBox="0 0 285 50"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
    >
      <path d="M16.87 27.4399C18.07 26.7699 19.01 25.8599 19.7 24.6899C20.39 23.5199 20.73 22.2099 20.73 20.7399C20.73 19.2699 20.39 18.0499 19.7 16.9199C19.01 15.7999 18.06 14.9199 16.85 14.2699C15.64 13.6299 14.29 13.2999 12.8 13.2999H2.29999V36.6299H7.69999V28.4299H10.61L15.23 36.6299H21.7L16.47 27.6199C16.6 27.5599 16.74 27.4999 16.87 27.4299V27.4399ZM7.70999 18.0399H11.81C12.52 18.0399 13.13 18.1599 13.63 18.4099C14.13 18.6499 14.51 18.9999 14.78 19.4599C15.05 19.9199 15.18 20.4399 15.18 21.0399C15.18 21.6399 15.06 22.1699 14.83 22.6399C14.6 23.1099 14.26 23.4699 13.83 23.7199C13.4 23.9799 12.89 24.0999 12.31 24.0999H7.70999V18.0299V18.0399Z" />
      <path d="M36.43 21.1199C36.11 20.6999 35.75 20.2999 35.33 19.9599C34.8 19.5299 34.18 19.1899 33.48 18.9399C32.78 18.6999 32.01 18.5699 31.16 18.5699C29.63 18.5699 28.26 18.9599 27.06 19.7499C25.86 20.5399 24.92 21.6199 24.23 22.9999C23.54 24.3799 23.2 25.9699 23.2 27.7699C23.2 29.5699 23.54 31.0999 24.23 32.4899C24.92 33.8799 25.85 34.9699 27.01 35.7599C28.18 36.5499 29.5 36.9399 30.99 36.9399C31.79 36.9399 32.55 36.8199 33.26 36.5699C33.97 36.3299 34.61 35.9899 35.19 35.5699C35.62 35.2499 35.99 34.8899 36.32 34.4999V36.6399H41.72V18.9399H36.42V21.1199H36.43ZM34.6 31.8699C34 32.2499 33.29 32.4399 32.47 32.4399C31.65 32.4399 30.98 32.2499 30.39 31.8699C29.8 31.4899 29.34 30.9499 29.01 30.2499C28.68 29.5499 28.51 28.7199 28.51 27.7699C28.51 26.8199 28.68 25.9899 29.01 25.2899C29.34 24.5899 29.8 24.0499 30.39 23.6599C30.98 23.2699 31.67 23.0799 32.47 23.0799C33.27 23.0799 34 23.2699 34.6 23.6599C35.2 24.0499 35.67 24.5899 36 25.2899C36.33 25.9899 36.5 26.8199 36.5 27.7699C36.5 28.7199 36.33 29.5499 36 30.2499C35.67 30.9499 35.2 31.4899 34.6 31.8699Z" />
      <path d="M58.36 20.68C58.1 20.42 57.82 20.17 57.49 19.94C56.89 19.52 56.22 19.19 55.49 18.94C54.76 18.7 53.99 18.57 53.19 18.57C51.63 18.57 50.26 18.97 49.06 19.77C47.86 20.57 46.92 21.66 46.23 23.05C45.54 24.44 45.2 26.02 45.2 27.8C45.2 29.58 45.54 31.16 46.23 32.55C46.92 33.94 47.86 35.03 49.05 35.82C50.24 36.61 51.6 37 53.13 37C53.95 37 54.73 36.88 55.48 36.65C56.22 36.42 56.88 36.11 57.46 35.72C57.92 35.41 58.29 35.06 58.61 34.67L58.76 36.63H63.73V11.98H58.36V20.68ZM58.01 30.31C57.69 31.02 57.23 31.58 56.63 31.98C56.03 32.38 55.32 32.58 54.5 32.58C53.68 32.58 52.97 32.38 52.38 31.98C51.79 31.58 51.33 31.02 51 30.31C50.67 29.6 50.5 28.77 50.5 27.81C50.5 26.85 50.67 25.99 51 25.28C51.33 24.57 51.79 24.01 52.38 23.61C52.97 23.21 53.67 23.01 54.5 23.01C55.33 23.01 56.03 23.21 56.63 23.61C57.23 24.01 57.69 24.57 58.01 25.28C58.33 25.99 58.49 26.84 58.49 27.81C58.49 28.78 58.33 29.6 58.01 30.31Z" />
      <path d="M73.86 18.9399H68.53V36.6399H73.86V18.9399Z" />
      <path d="M71.19 9.94995C70.21 9.94995 69.43 10.21 68.86 10.72C68.28 11.23 67.99 11.89 67.99 12.69C67.99 13.58 68.27 14.26 68.84 14.74C69.41 15.22 70.19 15.46 71.19 15.46C72.19 15.46 72.94 15.21 73.51 14.69C74.08 14.18 74.36 13.51 74.36 12.69C74.36 11.82 74.08 11.15 73.53 10.67C72.97 10.19 72.2 9.94995 71.2 9.94995H71.19Z" />
      <path d="M96.09 36.6399L89.68 27.6599L95.75 18.9399H89.46L86.89 23.7799L83.66 18.9399H77.26L83.59 27.5899L77.09 36.6399H83.39L86.34 31.4699L89.76 36.6399H96.09Z" />
      <path d="M119.46 24.61C118.74 24.03 117.88 23.54 116.89 23.14C115.9 22.74 114.8 22.42 113.57 22.17C113.04 22.08 112.53 21.96 112.04 21.82C111.55 21.68 111.12 21.5 110.74 21.29C110.36 21.08 110.06 20.84 109.84 20.57C109.62 20.3 109.51 19.98 109.51 19.6C109.51 19.18 109.64 18.82 109.91 18.52C110.18 18.22 110.55 17.99 111.03 17.82C111.51 17.65 112.08 17.57 112.75 17.57C113.42 17.57 114.02 17.67 114.63 17.87C115.24 18.07 115.82 18.36 116.36 18.74C116.9 19.12 117.41 19.6 117.88 20.17L121.38 16.8C120.82 15.96 120.15 15.23 119.36 14.63C118.57 14.03 117.63 13.57 116.53 13.25C115.43 12.93 114.11 12.77 112.58 12.77C111.42 12.77 110.31 12.94 109.25 13.29C108.18 13.63 107.24 14.12 106.43 14.76C105.62 15.4 104.97 16.15 104.5 17.03C104.02 17.91 103.78 18.87 103.78 19.91C103.78 20.89 103.94 21.77 104.25 22.56C104.56 23.35 105.03 24.05 105.67 24.66C106.3 25.27 107.1 25.79 108.05 26.21C109 26.63 110.13 26.99 111.42 27.28C111.89 27.37 112.34 27.47 112.79 27.6C113.23 27.72 113.66 27.87 114.06 28.03C114.46 28.2 114.8 28.38 115.09 28.58C115.38 28.78 115.61 29.01 115.77 29.28C115.93 29.55 116.02 29.85 116.02 30.18C116.02 30.62 115.89 31 115.62 31.3C115.35 31.6 114.98 31.83 114.49 31.98C114 32.13 113.46 32.21 112.86 32.21C111.66 32.21 110.5 31.96 109.38 31.44C108.26 30.93 107.14 29.93 106.03 28.44L102.6 32.34C103.35 33.3 104.21 34.12 105.17 34.82C106.12 35.52 107.22 36.05 108.45 36.42C109.68 36.79 111.07 36.97 112.6 36.97C114.38 36.97 115.95 36.68 117.32 36.09C118.69 35.5 119.76 34.65 120.55 33.52C121.34 32.4 121.73 31.03 121.73 29.4C121.73 28.36 121.54 27.44 121.15 26.65C120.76 25.86 120.21 25.18 119.48 24.6L119.46 24.61Z" />
      <path d="M134.21 28.3101C134.03 28.8401 133.86 29.3301 133.7 29.7901C133.65 29.6201 133.6 29.4501 133.54 29.2701C133.36 28.7601 133.17 28.2801 132.97 27.8401L129.24 18.9401H123.21L131.1 36.1501L127.64 44.3001H132.94L136.01 36.6301L143.54 18.9301H137.47L134.2 28.2901L134.21 28.3101Z" />
      <path d="M158 28.21C157.56 27.72 156.96 27.3 156.2 26.94C155.44 26.59 154.54 26.26 153.5 25.97C152.66 25.73 151.99 25.52 151.5 25.35C151.01 25.18 150.66 25.03 150.43 24.9C150.21 24.77 150.03 24.6 149.91 24.4C149.79 24.2 149.73 23.99 149.73 23.77C149.73 23.55 149.77 23.35 149.86 23.19C149.95 23.03 150.08 22.88 150.26 22.76C150.44 22.64 150.65 22.55 150.91 22.49C151.17 22.43 151.46 22.41 151.79 22.41C152.23 22.41 152.72 22.5 153.26 22.68C153.79 22.86 154.31 23.1 154.81 23.4C155.31 23.7 155.76 24.04 156.16 24.42L158.96 21.29C158.36 20.74 157.68 20.26 156.91 19.86C156.14 19.46 155.32 19.15 154.43 18.93C153.54 18.71 152.61 18.6 151.63 18.6C150.72 18.6 149.84 18.73 148.98 18.98C148.12 19.24 147.37 19.61 146.71 20.1C146.05 20.59 145.53 21.17 145.14 21.83C144.75 22.5 144.56 23.24 144.56 24.06C144.56 24.77 144.68 25.41 144.93 25.98C145.17 26.55 145.52 27.06 145.96 27.53C146.45 28.02 147.08 28.45 147.84 28.81C148.61 29.18 149.51 29.49 150.56 29.76C151.29 29.96 151.89 30.14 152.36 30.29C152.83 30.45 153.16 30.58 153.36 30.69C153.76 30.93 153.96 31.28 153.96 31.72C153.96 31.94 153.92 32.14 153.83 32.3C153.74 32.46 153.61 32.61 153.45 32.73C153.28 32.85 153.08 32.95 152.83 33.01C152.59 33.08 152.31 33.11 152 33.11C151.22 33.11 150.4 32.95 149.53 32.63C148.66 32.31 147.89 31.8 147.2 31.11L143.97 33.91C144.75 34.84 145.8 35.59 147.12 36.14C148.44 36.69 149.97 36.97 151.7 36.97C153.12 36.97 154.39 36.72 155.5 36.22C156.61 35.72 157.48 35.03 158.12 34.15C158.75 33.27 159.07 32.27 159.07 31.13C159.07 30.55 158.98 30.01 158.8 29.51C158.62 29.01 158.36 28.57 158 28.19V28.21Z" />
      <path d="M169.03 14.48H163.7V18.95H160.57V23.62H163.7V32.65C163.7 34.86 165.49 36.65 167.7 36.65H172.47V31.98H169.04V23.61H172.47V18.94H169.04V14.47L169.03 14.48Z" />
      <path d="M190.12 21.1101C189.36 20.3101 188.47 19.6901 187.44 19.2401C186.41 18.8001 185.27 18.5701 184.02 18.5701C182.71 18.5701 181.5 18.8001 180.4 19.2501C179.3 19.7101 178.35 20.3501 177.55 21.1801C176.75 22.0101 176.13 23.0001 175.68 24.1301C175.24 25.2601 175.01 26.5101 175.01 27.8601C175.01 29.6201 175.41 31.1801 176.21 32.5401C177.01 33.9001 178.13 34.9801 179.58 35.7701C181.02 36.5601 182.72 36.9501 184.68 36.9501C185.48 36.9501 186.28 36.8501 187.1 36.6701C187.92 36.4901 188.7 36.2001 189.48 35.8201C190.26 35.4401 190.99 34.9501 191.68 34.3501L189.18 30.8201C188.49 31.3501 187.85 31.7301 187.26 31.9501C186.67 32.1701 186 32.2801 185.24 32.2801C184.15 32.2801 183.21 32.0801 182.42 31.6801C181.63 31.2801 181.03 30.7201 180.62 30.0001C180.43 29.6701 180.29 29.3001 180.19 28.9201H192.34L192.37 27.4901C192.41 26.2001 192.24 25.0101 191.84 23.9201C191.44 22.8301 190.86 21.8901 190.11 21.0901L190.12 21.1101ZM180.49 25.0601C180.8 24.4101 181.26 23.9101 181.87 23.5601C182.48 23.2201 183.22 23.0401 184.09 23.0401C184.71 23.0401 185.27 23.1601 185.76 23.4101C186.25 23.6501 186.64 23.9901 186.94 24.4301C187.24 24.8601 187.41 25.3601 187.46 25.9101V25.9401H180.2C180.28 25.6201 180.37 25.3201 180.5 25.0601H180.49Z" />
      <path d="M222.7 21.88C222.22 20.79 221.52 19.98 220.58 19.43C219.65 18.89 218.48 18.61 217.08 18.61C216.52 18.61 215.95 18.69 215.35 18.84C214.75 19 214.17 19.22 213.62 19.52C213.06 19.82 212.56 20.19 212.1 20.62C211.74 20.96 211.45 21.34 211.2 21.74C210.94 21.17 210.64 20.68 210.29 20.28C209.76 19.69 209.13 19.26 208.42 19C207.71 18.73 206.92 18.6 206.05 18.6C205.47 18.6 204.9 18.68 204.33 18.83C203.76 18.99 203.22 19.21 202.7 19.51C202.18 19.81 201.71 20.18 201.3 20.63C201.16 20.78 201.05 20.94 200.93 21.1L200.82 18.93H195.75V36.63H201.12V26.07C201.12 25.65 201.2 25.26 201.35 24.9C201.51 24.55 201.72 24.23 202 23.97C202.28 23.71 202.61 23.49 203 23.34C203.39 23.18 203.82 23.11 204.28 23.11C204.81 23.11 205.28 23.23 205.68 23.48C206.08 23.72 206.38 24.08 206.58 24.55C206.78 25.02 206.88 25.58 206.88 26.25V36.65H212.25V26.12C212.25 25.68 212.33 25.28 212.48 24.92C212.63 24.57 212.85 24.25 213.13 23.99C213.41 23.72 213.74 23.51 214.13 23.36C214.52 23.2 214.95 23.13 215.41 23.13C215.99 23.13 216.47 23.25 216.86 23.48C217.25 23.71 217.54 24.06 217.74 24.53C217.94 25 218.04 25.59 218.04 26.3V36.66H223.41V25.86C223.41 24.31 223.17 22.98 222.69 21.89L222.7 21.88Z" />
    </svg>
  );
}

function AboutHeroStageScene() {
  return (
    <div className="about-hero-stage-scene" aria-hidden="true">
      <div className="about-hero-stage-canvas">
        <div className="about-hero-stage-ambient" />
        <div className="about-hero-stage-rear-glow" />
        <div className="about-hero-stage-plane" />
        <div className="about-hero-stage-plane-core" />
        <div className="about-hero-stage-edge-glow" />
        <div className="about-hero-stage-edge" />
        <div className="about-hero-stage-logo-halo" />
        <div className="about-hero-stage-logo">
          <AboutHeroGlyph />
          <div className="about-hero-stage-wordmark" data-text="Radix System" aria-hidden="true">
            Radix System
          </div>
        </div>
        <div className="about-hero-stage-bottom-fade" />
      </div>
    </div>
  );
}

function getExperienceOffset(index, activeIndex, total) {
  let offset = index - activeIndex;
  const half = Math.floor(total / 2);

  if (offset > half) offset -= total;
  if (offset < -half) offset += total;

  return offset;
}

function getExperiencePosition(offset) {
  if (offset === 0) return 'center';
  if (offset === -1) return 'left-1';
  if (offset === 1) return 'right-1';
  if (offset === -2) return 'left-2';
  if (offset === 2) return 'right-2';
  return 'hidden';
}

function ExperienceCarousel() {
  const [activeIndex, setActiveIndex] = React.useState(0);
  const [isPaused, setIsPaused] = React.useState(false);
  const total = ABOUT_BEYOND.length;

  React.useEffect(() => {
    const reduceMotion =
      window.matchMedia &&
      window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    if (reduceMotion || isPaused) return undefined;

    const timer = window.setInterval(() => {
      setActiveIndex((current) => (current + 1) % total);
    }, 3600);

    return () => window.clearInterval(timer);
  }, [isPaused, total]);

  return (
    <div
      className="about-experience-carousel"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
      onFocus={() => setIsPaused(true)}
      onBlur={() => setIsPaused(false)}
      aria-label="Опыт за пределами маркетплейсов"
    >
      <div className="about-experience-stage">
        {ABOUT_BEYOND.map((item, index) => {
          const offset = getExperienceOffset(index, activeIndex, total);
          const position = getExperiencePosition(offset);
          const isActive = offset === 0;

          return (
            <button
              key={item.t}
              type="button"
              className={`about-experience-card ${isActive ? 'is-active' : ''}`}
              data-position={position}
              onClick={() => setActiveIndex(index)}
              aria-label={`Показать направление: ${item.t}`}
              aria-pressed={isActive}
            >
              <span className="about-experience-card-icon">
                <MIcon name={item.icon} size={24} color="#5E3EE5" stroke={2} />
              </span>
              <span className="about-experience-card-title">{item.t}</span>
              <span className="about-experience-card-text">{item.d}</span>
            </button>
          );
        })}
      </div>

      <div className="about-experience-dots" aria-hidden="true">
        {ABOUT_BEYOND.map((item, index) => (
          <button
            key={item.t}
            type="button"
            className={`about-experience-dot ${index === activeIndex ? 'is-active' : ''}`}
            onClick={() => setActiveIndex(index)}
            tabIndex={-1}
          />
        ))}
      </div>
    </div>
  );
}

function AboutPage() {
  return (
    <div className="about-page">

      {/* ============ 1. Hero ============ */}
      <section className="about-hero">
        <div className="about-hero-inner">
          <Eyebrow>О компании</Eyebrow>
          <h1 className="plz-h1" style={{ margin: '18px 0 0', fontSize: 56, lineHeight: 1.04, letterSpacing: '-0.045em', maxWidth: 980 }}>
            Plazify — AI-платформа для селлеров Wildberries
          </h1>
          <p className="plz-lead" style={{ margin: '24px auto 0', maxWidth: 820, fontSize: 19, lineHeight: 1.55 }}>
            Мы помогаем селлерам автоматизировать ответы на отзывы, анализировать товары,
            прогнозировать спрос и управлять поставками на основе данных.
          </p>
        </div>
        <AboutHeroStageScene />
      </section>

      {/* ============ 2. Кто мы ============ */}
      <section className="about-section-first" style={{ paddingLeft: 40, paddingRight: 40 }}>
        <div className="about-shell">
          <div className="about-wide-card">
            <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Кто мы</h2>
            <p className="plz-body" style={{ margin: '20px 0 0', fontSize: 18, lineHeight: 1.6, maxWidth: 880 }}>
              Radix System — IT-компания, основанная в 2023 году. Мы начинали с разработки
              систем управления данными — и именно там получили глубокую экспертизу в работе
              с данными. Поняв, что это хороший фундамент для работы с технологиями ИИ и
              протестировав решения на собственном опыте, мы начали строить AI-продукты и
              создавать решения для наших клиентов.
            </p>
          </div>
        </div>
      </section>

      {/* ============ 3. Что мы создаём ============ */}
      <section className="about-section" style={{ paddingLeft: 40, paddingRight: 40 }}>
        <div className="about-shell">
          <div className="about-text-rail about-copy-block">
            <h2 className="plz-h2 sec-h2">Что мы создаём</h2>

            <p className="plz-body">
              Мы создаём AI-платформу для операционной автоматизации бизнеса в различных сферах,
              в том числе в e-commerce — торговле на маркетплейсах. В Plazify, опираясь на наш
              опыт и наработки, мы сфокусировались на решениях для клиентского сервиса, работы
              с поставками и остатками и прогнозной аналитики. Мы создали для вас модули:
              автоматизация ответов на отзывы и коммуникации с клиентами, аналитика товаров и
              прогнозная аналитика для прогнозирования продаж и контроля остатков — на основе
              технологий машинного обучения (ML) и передовых языковых моделей (LLM).
            </p>

            <p className="plz-body">
              Эти решения опираются на технологическую базу, которую команда создавала не только
              в e-commerce: те же подходы мы применяем в медицине, ретейле и дистрибуции,
              строительстве и других сферах.
            </p>
          </div>

          <div className="about-create-grid">
            {ABOUT_BUILD.map((c, i) => (
              <div key={i} className="feat-card about-card about-create-card">
                <span className="about-icon" style={{ width: 48, height: 48, borderRadius: 14, background: '#F4F5FE', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flex: '0 0 auto' }}>
                  <MIcon name={c.icon} size={22} color="#5E3EE5" stroke={2} />
                </span>
                <h3 className="plz-h4" style={{ margin: 0, fontSize: 18 }}>{c.t}</h3>
                <p className="plz-body" style={{ margin: 0, fontSize: 15, lineHeight: 1.5 }}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============ 4. Наш подход (dark HITL pattern) ============ */}
      <section className="about-dark-section">
        <div style={{ position: 'absolute', top: -80, left: '50%', transform: 'translateX(-50%)', width: 540, height: 320, background: 'radial-gradient(circle, rgba(94,62,229,.4), transparent 70%)', filter: 'blur(40px)', pointerEvents: 'none' }} />
        <div className="about-dark-inner">
          <div className="about-dark-header" style={{ position: 'relative' }}>
            <Eyebrow dark>Наш подход</Eyebrow>
            <h2 className="plz-h2 sec-h2" style={{ color: '#fff', margin: '20px 0 16px' }}>Как мы строим продукты</h2>
            <p style={{ margin: 0, fontFamily: 'var(--plz-font-head)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,.66)' }}>
              Безопасное и контролируемое внедрение AI: сначала разбираемся в данных и процессах,
              а критичные действия всегда остаются за человеком.
            </p>
          </div>
          <div className="about-dark-card-grid">
            {[ABOUT_APPROACH[1], ABOUT_APPROACH[0], ABOUT_APPROACH[2]].map((s) => {
              const isFeatured = s.t === 'Human-in-the-Loop';

              return (
                <div
                  key={s.t}
                  className={`about-dark-card ${isFeatured ? 'about-dark-card-featured' : ''}`}
                >
                  <div className="about-dark-card-head">
                    <span className="about-dark-card-icon">
                      <MIcon name={s.icon} size={20} color="#fff" stroke={2} />
                    </span>
                    <h3 className="about-dark-card-title">{s.t}</h3>
                  </div>
                  <p className="about-dark-card-text">{s.d}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ============ 5. Опыт за пределами маркетплейсов ============ */}
      <section className="about-section about-experience-section" style={{ paddingLeft: 40, paddingRight: 40 }}>
        <div className="about-shell">
          <div className="about-text-rail about-copy-block">
            <h2 className="plz-h2 sec-h2">Опыт за пределами маркетплейсов</h2>
            <p className="plz-body">
              Маркетплейсы — одна из областей применения наших моделей. Те же подходы лежат
              в основе проектов в других направлениях:
            </p>
          </div>

          <ExperienceCarousel />
        </div>
      </section>

      {/* ============ 6. Технологическая база (lilac panel) ============ */}
      <section className="about-section" style={{ paddingLeft: 40, paddingRight: 40 }}>
        <div style={{ maxWidth: 1040, margin: '0 auto' }}>
        <div className="about-section-header">
          <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Технологическая база</h2>
        </div>
        <div className="about-tech-panel">
          <div className="about-bullet-list" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {ABOUT_TECH.map((b, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 16, background: '#fff', borderRadius: 16, padding: '18px 20px', boxShadow: '0 6px 14px -10px rgba(77,42,223,.35)' }}>
                <span style={{ width: 40, height: 40, borderRadius: 12, flex: '0 0 auto', background: '#F4F5FE', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <MIcon name={b.icon} size={20} color="#5E3EE5" stroke={2} />
                </span>
                <span style={{ fontFamily: 'var(--plz-font-head)', fontWeight: 600, fontSize: 15.5, lineHeight: 1.4, color: '#1A1043' }}>{b.t}</span>
              </div>
            ))}
          </div>
        </div>
        </div>
      </section>

      {/* ============ 7. Контакты / реквизиты ============ */}
      <section id="contacts" className="about-section-large" style={{ paddingLeft: 40, paddingRight: 40 }}>
        <div style={{ maxWidth: 1040, margin: '0 auto' }}>
        <div className="about-section-header-text">
          <h2 className="plz-h2 sec-h2" style={{ margin: 0 }}>Контакты и реквизиты</h2>
        </div>
        <div className="about-contact-card" style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 32 }}>
          <div>
            <h3 className="plz-h4" style={{ margin: 0, fontSize: 20 }}>ООО «Система Координат» <span style={{ color: '#95959E', fontWeight: 500 }}>(Radix System)</span></h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 18, fontFamily: 'var(--plz-font-head)', fontSize: 15.5, lineHeight: 1.55, color: '#5C5C62' }}>
              <span>ИНН: 6200003169 · КПП: 773101001 · ОГРН: 1246200001850</span>
              <span>г. Москва, ИЦ «Сколково», Большой бульвар, 42 стр. 1</span>
              <span style={{ marginTop: 6 }}>
                <a href="mailto:support@plazify.ru" style={{ color: '#5E3EE5', textDecoration: 'none', fontWeight: 600 }}>support@plazify.ru</a>
                {' · '}
                <a href="tel:+74951466615" style={{ color: '#5E3EE5', textDecoration: 'none', fontWeight: 600 }}>+7 (495) 146-66-15</a>
              </span>
            </div>
          </div>
          <div className="about-doc-links">
            <span style={{ fontFamily: 'var(--plz-font-head)', fontWeight: 700, fontSize: 14, color: '#95959E', display: 'block', marginBottom: 14 }}>Документы</span>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {ABOUT_DOCS.map((d) => (
                <a key={d.href} href={d.href} onClick={() => track('footer_link', { to: d.href })} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, textDecoration: 'none', fontFamily: 'var(--plz-font-head)', fontWeight: 500, fontSize: 15.5, lineHeight: 1.4, color: '#202023' }}>
                  <MIcon name="arrowRight" size={16} color="#5E3EE5" stroke={2} />
                  <span>{d.label}</span>
                </a>
              ))}
            </div>
          </div>
        </div>
        </div>
      </section>

    </div>
  );
}

Object.assign(window, { AboutPage });
