'use client';

import { useRef } from 'react';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft,
  FileDown,
  Printer,
  Table2,
  Target,
  TrendingUp,
  TrendingDown,
  Star,
  Globe,
  DollarSign,
  Users,
  CheckCircle2,
  XCircle,
  AlertTriangle,
  Lightbulb,
  BarChart3,
  Shield,
  Smartphone,
  Phone,
  Zap,
} from 'lucide-react';
import { cn } from '@/lib/cn';

const LAST_UPDATE = '20 февраля 2026';

/* ─────────────── DATA ─────────────── */

interface Competitor {
  name: string;
  country: string;
  website: string;
  targetMarket: string;
  pricing: string;
  pricingDetails: string[];
  clients: string;
  rating: string;
  ratingSource: string;
  features: string[];
  strengths: string[];
  weaknesses: string[];
  keyDifferentiator: string;
}

const competitors: Competitor[] = [
  {
    name: '1С:Фитнес клуб',
    country: '🇷🇺 Россия',
    website: 'fitness1c.ru',
    targetMarket: 'От малых студий до крупных сетей',
    pricing: '2 660 – 7 210 ₽/мес (облако)',
    pricingDetails: [
      'Старт: 2 660 ₽/мес (1 рабочее место)',
      'Бизнес: 7 210 ₽/мес (2 места, +3 800 ₽ за доп.)',
      'ПРОФ лицензия: от 57 000 ₽ (разовая)',
      'КОРП лицензия: от 90 000 – 102 600 ₽',
      'WhatsApp: +2 660 ₽/мес',
      'Приложение клиента: +5 740 ₽/мес',
      'Приложение тренера: +5 000 – 13 000 ₽/мес',
    ],
    clients: '6 000+',
    rating: '4.0 / 5',
    ratingSource: 'a2is.ru, CRMindex',
    features: [
      'CRM с воронками и триггерами',
      '120+ встроенных отчётов',
      'IP-телефония (50+ провайдеров)',
      'Мессенджеры (WA, TG, Viber, VK)',
      'Управление финансами, POS, фитнес-бар',
      'СКУД (только КОРП)',
      'KPI менеджеров',
      'Франшиза',
      'Облако + on-premise',
    ],
    strengths: [
      'Лидер рынка РФ — каждый 3-й клуб (16+ лет, с 2005)',
      'Самый богатый функционал на рынке (120+ отчётов)',
      'Глубокая интеграция в экосистему 1С (бухгалтерия, HR)',
      'Крупные клиенты: XFit, World Class, Crocus Fitness',
      'Облако и локальная установка на выбор',
    ],
    weaknesses: [
      'Сложный интерфейс, долгое обучение персонала',
      'Медленная техподдержка (3–5 часов ожидания)',
      'Дорого с учётом доп. модулей (приложения, WA)',
      'Баги (автозавершение, доставка чеков)',
      'Устаревший дизайн по сравнению с облачными конкурентами',
    ],
    keyDifferentiator: 'Лидер рынка РФ, экосистема 1С',
  },
  {
    name: 'Mobifitness',
    country: '🇷🇺 Россия',
    website: 'mobifitness.ru',
    targetMarket: 'Россия и СНГ, средние клубы',
    pricing: '1 990 – 9 700 ₽/мес',
    pricingDetails: [
      'Минимальное приложение: 1 990 ₽/мес',
      'Приложение без лояльности: 3 490 ₽/мес',
      'Полное приложение: 5 490 ₽/мес',
      'Полный пакет (все продукты): 9 700 ₽/мес',
      'Тренер (от 3 чел): 690 ₽/мес',
      'Без доплат за клиентов / локации',
    ],
    clients: '4 000+',
    rating: '4.5 / 5',
    ratingSource: 'CRMindex, picktech',
    features: [
      'Облачная CRM + брендированные мобильные приложения',
      'Онлайн-запись и оплата',
      'Автоворонки с триггерами',
      'Email/SMS/Push-маркетинг',
      'NPS-опросы, семейные аккаунты',
      'Программа лояльности',
      'Расчёт зарплат',
      'Мессенджеры (WA, TG)',
    ],
    strengths: [
      '9+ лет на рынке (с 2014), зрелая платформа',
      '4 000+ клиентов, 305 000+ конечных пользователей',
      'Фиксированная цена — без доплат за клиентов/локации',
      'Быстрое облачное развёртывание',
      'Комплексное решение: CRM + приложение + запись + оплата',
    ],
    weaknesses: [
      'Только облако — нет on-premise',
      'Критические фичи (частичные возвраты) долго не реализуются',
      'Продвинутые функции только на дорогих тарифах',
      'Ограниченная кастомизация по сравнению с 1С',
      'Дорого для мелких студий (~9 700 ₽/мес за полный пакет)',
    ],
    keyDifferentiator: 'All-in-one, брендированные приложения',
  },
  {
    name: 'Fitbase',
    country: '🇷🇺 Россия',
    website: 'fitbase.io',
    targetMarket: 'Малые и средние студии, йога, танцы',
    pricing: '1 590 – 4 990 ₽/мес',
    pricingDetails: [
      'Подписка на 2 года: 1 590 ₽/мес',
      'Подписка на 1 год: 1 990 ₽/мес',
      'Подписка на 3 мес: 2 990 ₽/мес',
      'Подписка на 1 мес: 4 990 ₽',
      'Lite: 25 авт. действий',
      'Standard: 40 авт. действий + приложение тренера',
      'PRO: безлимит + BI-дашборд + Open API',
    ],
    clients: '450+',
    rating: '5.0 / 5',
    ratingSource: 'CRMindex (247 отзывов)',
    features: [
      'CRM с настраиваемыми воронками',
      'Онлайн-запись (виджет)',
      'Финансовый учёт',
      'Приложение для клиентов и тренеров',
      'Рекуррентные платежи',
      'СКУД (Sigur, Avitech, PocketKey — PRO)',
      'Telegram-бот для менеджеров',
      'BI-дашборд (PRO)',
      'Open API (PRO)',
    ],
    strengths: [
      'Лучшее соотношение цена/качество на рынке РФ',
      'Признание «Лидер 2025» в категории спорт и фитнес',
      'Быстрая настройка за 15 минут',
      '247 отзывов с оценкой 5/5 на CRMindex',
      'Простой и чистый интерфейс',
    ],
    weaknesses: [
      'Маленькая доля рынка (450+ центров vs 6 000+ у 1С)',
      'Lite-тариф ограничен (25 авт. действий)',
      'Open API только на PRO',
      'Слабо подходит для крупных мультифилиальных сетей',
      'На рынке с 2018 — менее зрелая платформа',
    ],
    keyDifferentiator: 'Лучшая цена и рейтинг среди РФ',
  },
  {
    name: 'YCLIENTS',
    country: '🇷🇺 Россия',
    website: 'yclients.com',
    targetMarket: 'Мультиверикаль: салоны, фитнес, школы',
    pricing: '694 – 810 ₽/мес',
    pricingDetails: [
      'От 694 ₽/мес (годовая подписка)',
      'Бонусы: бесплатные 0.5–1.5 года на длинных планах',
      'Мультивертикаль: фитнес, салоны, медицина, авто',
    ],
    clients: '42 000+',
    rating: '4.3 / 5',
    ratingSource: 'a2is.ru, CRMindex',
    features: [
      'Онлайн-запись',
      'Клиентская база',
      'Финансы и аналитика',
      'SMS/Email рассылки',
      'Мобильное приложение',
      'Интеграции с кассами',
      '16M+ записей в месяц',
    ],
    strengths: [
      'Самый дешёвый вариант на рынке (от 694 ₽/мес)',
      'Огромная база: 42 000+ бизнесов',
      '13 лет на рынке',
      'Мультивертикальность — гибкость',
      'Хорошая онлайн-запись',
    ],
    weaknesses: [
      'Не специализирован под фитнес (генералист)',
      'Нет глубоких фитнес-функций (KPI тренеров, воронки)',
      'Интерфейс не всегда интуитивен',
      'Слабая аналитика для фитнеса',
      'Нет SIP-телефонии',
    ],
    keyDifferentiator: 'Самый дешёвый, мультивертикаль',
  },
  {
    name: 'Mindbody',
    country: '🌍 Международный',
    website: 'mindbody.com',
    targetMarket: '130+ стран: залы, спа, салоны, велнес',
    pricing: '$129 – $699/мес',
    pricingDetails: [
      'Starter: $129/мес',
      'Accelerate: $259–289/мес',
      'Ultimate: $349–499/мес',
      'Ultimate Plus: $699/мес (своё приложение)',
      'Скрытые сборы за процессинг платежей',
      'Цены регулярно растут (x4 за 4 года — жалобы)',
    ],
    clients: '60 000+',
    rating: '4.0 / 5',
    ratingSource: 'Capterra (2 700 отзывов)',
    features: [
      'Расписание с листом ожидания',
      'Запись через сайт, Facebook, мобильное',
      'Автоматизированный email/SMS-маркетинг',
      'Управление персоналом (зарплаты, права)',
      'POS и процессинг платежей',
      'Marketplace для привлечения клиентов',
      'Виртуальные тренировки',
      'Своё приложение (Ultimate Plus)',
      'Интеграция с носимыми устройствами',
    ],
    strengths: [
      'Крупнейшая платформа в мире: 60 000+ бизнесов в 130+ странах',
      'Встроенный marketplace для привлечения клиентов',
      'Самый полный набор функций в индустрии',
      'Купил ClassMonkey (февраль 2025) — расширение',
      'Огромная экосистема интеграций',
    ],
    weaknesses: [
      'Очень дорого — цены постоянно растут',
      'Сложный интерфейс, крутая кривая обучения',
      'Плохая поддержка (по отзывам 2025–2026)',
      'Запутанная структура доп. платежей',
      'Не подходит для российского рынка (нет 1С, нет ₽)',
    ],
    keyDifferentiator: 'Глобальный лидер, marketplace',
  },
  {
    name: 'Glofox (ABC Fitness)',
    country: '🌍 Международный',
    website: 'glofox.com',
    targetMarket: 'Бутик-студии: йога, пилатес, CrossFit',
    pricing: '$100 – $600+/мес',
    pricingDetails: [
      'От ~$100/мес для бутик-студий',
      'До $300–600+/мес с доп. модулями',
      'Кастомный enterprise-тариф',
      'Цена «зафиксирована навсегда»',
      'Нет публичной страницы цен',
    ],
    clients: '30 000+',
    rating: '4.4 / 5',
    ratingSource: 'Capterra (344 отзыва)',
    features: [
      'Управление членствами',
      'Расписание и ёмкость',
      'Процессинг платежей (Stripe)',
      'Брендированное приложение',
      'Портал онлайн-записи',
      'Маркетинговая автоматизация',
      'Аналитика и отчёты',
      'СКУД-интеграция',
    ],
    strengths: [
      'Часть ABC Fitness Solutions — сильный бэкинг',
      '30 000+ клиентов глобально',
      'Лучший UI/UX в отрасли',
      'Бесшовная интеграция со Stripe',
      'Брендированное мобильное приложение',
    ],
    weaknesses: [
      'Нет прозрачных цен (только через продажи)',
      'Скрытые сборы и неожиданный НДС',
      'Функции могут быть переусложнены',
      'Жалобы на случайную деактивацию аккаунтов',
      'Не подходит для РФ (нет 1С, нет рублёвых платежей)',
    ],
    keyDifferentiator: 'Лучший UX, ABC Fitness',
  },
  {
    name: 'Gymdesk',
    country: '🌍 Международный',
    website: 'gymdesk.com',
    targetMarket: 'Малые залы, единоборства, CrossFit',
    pricing: '$75 – $200/мес',
    pricingDetails: [
      'MicroGym: $75/мес (до ~50 членов)',
      'Small Gym: $100/мес',
      'Medium Gym: $150/мес',
      'Large Gym: $200/мес',
      'Enterprise: кастом',
      'Все функции на всех тарифах (без гейтинга)',
      'Без скрытых сборов, 30 дней бесплатно',
    ],
    clients: 'N/A',
    rating: '4.8 / 5',
    ratingSource: 'Capterra (146 отзывов)',
    features: [
      'Управление членствами',
      'Автоматический биллинг',
      'Учёт посещаемости',
      'Расписание и онлайн-запись',
      'Конструктор сайта',
      'Управление товарами',
      'Лидогенерация',
      'Удалённое управление дверьми',
      'Мобильное приложение',
    ],
    strengths: [
      'Прозрачные цены — все функции на всех тарифах',
      'Наивысший рейтинг удовлетворённости (4.8–4.9/5)',
      'Отличная поддержка',
      'Нет привязки к собственному платёжному процессору',
      'Простой в освоении',
    ],
    weaknesses: [
      'Ограниченные возможности аналитики',
      'Меньше интеграций чем у Mindbody/Glofox',
      'Мобильное приложение слабее десктопа',
      'Нет расчёта зарплат',
      'Не масштабируется для крупных сетей',
    ],
    keyDifferentiator: 'Высшая удовлетворённость, прозрачность',
  },
];

interface ComparisonRow {
  feature: string;
  fitcrm: 'yes' | 'no' | 'partial' | 'planned';
  oneC: 'yes' | 'no' | 'partial';
  mobifitness: 'yes' | 'no' | 'partial';
  fitbase: 'yes' | 'no' | 'partial';
  mindbody: 'yes' | 'no' | 'partial';
  glofox: 'yes' | 'no' | 'partial';
}

const featureComparison: ComparisonRow[] = [
  { feature: 'Мобильное приложение тренера', fitcrm: 'yes', oneC: 'partial', mobifitness: 'partial', fitbase: 'partial', mindbody: 'no', glofox: 'no' },
  { feature: 'Встроенная SIP-телефония', fitcrm: 'yes', oneC: 'partial', mobifitness: 'no', fitbase: 'no', mindbody: 'no', glofox: 'no' },
  { feature: 'Воронка продаж (фитнес)', fitcrm: 'yes', oneC: 'yes', mobifitness: 'yes', fitbase: 'yes', mindbody: 'partial', glofox: 'partial' },
  { feature: 'Multi-tenancy SaaS', fitcrm: 'yes', oneC: 'no', mobifitness: 'partial', fitbase: 'partial', mindbody: 'yes', glofox: 'yes' },
  { feature: 'Модульная лицензия', fitcrm: 'yes', oneC: 'partial', mobifitness: 'no', fitbase: 'partial', mindbody: 'no', glofox: 'no' },
  { feature: 'Интеграция с 1С', fitcrm: 'yes', oneC: 'yes', mobifitness: 'no', fitbase: 'no', mindbody: 'no', glofox: 'no' },
  { feature: 'Webhooks API', fitcrm: 'yes', oneC: 'no', mobifitness: 'no', fitbase: 'partial', mindbody: 'partial', glofox: 'partial' },
  { feature: 'Open API (REST)', fitcrm: 'yes', oneC: 'partial', mobifitness: 'no', fitbase: 'partial', mindbody: 'yes', glofox: 'yes' },
  { feature: 'Push-уведомления (9 типов)', fitcrm: 'yes', oneC: 'partial', mobifitness: 'yes', fitbase: 'partial', mindbody: 'yes', glofox: 'yes' },
  { feature: 'Рейтинг тренеров', fitcrm: 'yes', oneC: 'partial', mobifitness: 'no', fitbase: 'no', mindbody: 'no', glofox: 'no' },
  { feature: 'Спящие клиенты (автодетект)', fitcrm: 'yes', oneC: 'partial', mobifitness: 'partial', fitbase: 'no', mindbody: 'partial', glofox: 'no' },
  { feature: '6 ролей с RBAC', fitcrm: 'yes', oneC: 'partial', mobifitness: 'partial', fitbase: 'no', mindbody: 'partial', glofox: 'partial' },
  { feature: 'Координатор (распределение)', fitcrm: 'yes', oneC: 'partial', mobifitness: 'no', fitbase: 'no', mindbody: 'no', glofox: 'no' },
  { feature: 'Email-рассылки (5 типов)', fitcrm: 'yes', oneC: 'yes', mobifitness: 'yes', fitbase: 'partial', mindbody: 'yes', glofox: 'yes' },
  { feature: 'Панель админа клуба', fitcrm: 'yes', oneC: 'yes', mobifitness: 'partial', fitbase: 'partial', mindbody: 'yes', glofox: 'yes' },
  { feature: 'Суперадмин платформы', fitcrm: 'yes', oneC: 'no', mobifitness: 'no', fitbase: 'no', mindbody: 'partial', glofox: 'partial' },
  { feature: '2FA (TOTP)', fitcrm: 'yes', oneC: 'no', mobifitness: 'no', fitbase: 'no', mindbody: 'partial', glofox: 'no' },
  { feature: 'Онлайн-оплата', fitcrm: 'planned', oneC: 'yes', mobifitness: 'yes', fitbase: 'yes', mindbody: 'yes', glofox: 'yes' },
  { feature: 'СКУД-интеграция', fitcrm: 'planned', oneC: 'yes', mobifitness: 'no', fitbase: 'partial', mindbody: 'no', glofox: 'partial' },
  { feature: 'Программа лояльности', fitcrm: 'planned', oneC: 'yes', mobifitness: 'yes', fitbase: 'partial', mindbody: 'yes', glofox: 'partial' },
  { feature: 'Marketplace для клиентов', fitcrm: 'no', oneC: 'no', mobifitness: 'no', fitbase: 'partial', mindbody: 'yes', glofox: 'no' },
  { feature: 'Виртуальные тренировки', fitcrm: 'no', oneC: 'no', mobifitness: 'no', fitbase: 'no', mindbody: 'yes', glofox: 'partial' },
];

interface MarketTrend {
  title: string;
  description: string;
  relevance: 'high' | 'medium' | 'low';
}

const marketTrends: MarketTrend[] = [
  { title: 'Cloud-first архитектура', description: 'Облачные решения доминируют. On-premise уходит в прошлое, кроме enterprise/compliance.', relevance: 'high' },
  { title: 'AI-персонализация', description: 'AI для персонализации тренировок, прогноз оттока, аналитика дохода. Рынок AI в фитнесе: $9.8B → $46B к 2034.', relevance: 'high' },
  { title: 'Гибридный формат', description: 'Совмещение офлайн + онлайн тренировок. Гибридные члены остаются на 3 мес дольше. 85% ожидают цифровой доступ.', relevance: 'medium' },
  { title: 'Mobile-first UX', description: 'Брендированные приложения — must-have. Клубы с приложением: +20% удержание клиентов.', relevance: 'high' },
  { title: 'Интеграция с носимыми устройствами', description: '70% пользователей используют данные с устройств. Рынок wearables → $265B к 2026.', relevance: 'medium' },
  { title: 'CRM-driven удержание', description: 'CRM повышает удержание на 27%. Автолояльность: +25% retention, +15-20% ARPU.', relevance: 'high' },
  { title: 'Консолидация рынка', description: 'Mindbody купил ClassMonkey (02/2025), Glofox стал частью ABC Fitness. Продолжение M&A.', relevance: 'medium' },
  { title: 'Usage-based pricing', description: 'Тренд к тарификации по использованию (SMS, API-вызовы, хранилище) вместо фиксированных цен.', relevance: 'high' },
  { title: 'Мультиканальные коммуникации', description: 'WhatsApp, Telegram, push — обязательны (не только email/SMS). РФ рынок особо сильный в мессенджерах.', relevance: 'high' },
  { title: 'Open API / Экстенсивность', description: 'Растущий спрос на открытые API и вебхуки для интеграций со сторонними системами.', relevance: 'high' },
];

interface GapItem {
  feature: string;
  priority: 'critical' | 'high' | 'medium';
  competitors: string;
  effort: string;
  impact: string;
}

const gaps: GapItem[] = [
  { feature: 'Онлайн-оплата и эквайринг', priority: 'critical', competitors: '1С, Mobifitness, Fitbase, Mindbody, Glofox', effort: 'Средний', impact: 'Без оплаты нельзя монетизировать клубы' },
  { feature: 'СКУД-интеграция (турникеты)', priority: 'high', competitors: '1С (КОРП), Fitbase (PRO)', effort: 'Средний', impact: 'Ключевой запрос крупных клубов' },
  { feature: 'Программа лояльности', priority: 'high', competitors: 'Mobifitness, 1С, Mindbody', effort: 'Средний', impact: '+25% удержание, +15% ARPU' },
  { feature: 'AI-аналитика и прогноз оттока', priority: 'high', competitors: 'Virtuagym (AI), Mindbody (частично)', effort: 'Высокий', impact: 'Ключевой тренд 2025–2026' },
  { feature: 'Marketplace / каталог клубов', priority: 'medium', competitors: 'Mindbody (уникальный), Fitbase (Fitmost)', effort: 'Высокий', impact: 'Канал привлечения клиентов' },
  { feature: 'Виртуальные тренировки (онлайн)', priority: 'medium', competitors: 'Mindbody, Glofox (частично)', effort: 'Средний', impact: 'Гибридная модель, +3 мес retention' },
  { feature: 'NPS-опросы и обратная связь', priority: 'medium', competitors: 'Mobifitness, Mindbody', effort: 'Низкий', impact: 'Улучшение сервиса, снижение оттока' },
  { feature: 'Конструктор сайта для клуба', priority: 'medium', competitors: 'Gymdesk, YCLIENTS', effort: 'Средний', impact: 'Удобство для малых клубов без сайта' },
  { feature: 'Расчёт зарплат тренеров', priority: 'high', competitors: '1С, Mobifitness', effort: 'Средний', impact: 'Востребовано HR-отделами клубов' },
  { feature: 'Запись звонков (SIP)', priority: 'medium', competitors: '1С (50+ провайдеров)', effort: 'Средний', impact: 'Контроль качества обслуживания' },
];

interface Advantage {
  title: string;
  description: string;
  icon: 'phone' | 'smartphone' | 'shield' | 'zap' | 'target' | 'users';
}

const uniqueAdvantages: Advantage[] = [
  { title: 'Встроенная SIP-телефония', description: 'Единственный CRM на рынке РФ со встроенным SIP-клиентом. Тренер звонит с CallerID клуба прямо из приложения — не раскрывая личный номер.', icon: 'phone' },
  { title: 'Trainer-first мобильный UX', description: 'Мобильное приложение спроектировано для тренера как основной рабочий инструмент: воронка, расписание, клиенты, статистика, звонки — всё в одном.', icon: 'smartphone' },
  { title: 'Multi-tenancy + RLS', description: 'Единственная архитектура с PostgreSQL Row-Level Security для изоляции данных клубов. Масштабирование до DB-per-tenant и K8s namespace без переписывания кода.', icon: 'shield' },
  { title: 'Модульное лицензирование', description: 'Pay-per-module модель: клуб платит только за нужные функции (SIP, webhooks, email, 1С). Прозрачнее чем у Mindbody/Glofox с их скрытыми сборами.', icon: 'zap' },
  { title: 'Глубокая интеграция с 1С', description: 'Двусторонняя синхронизация с 1С:Фитнес клуб — при этом современный облачный интерфейс. Лучшее из двух миров: данные 1С + UX SaaS.', icon: 'target' },
  { title: '6-ролевая RBAC система', description: 'Тренер, Координатор, Фитнес-менеджер, Администратор рецепции, Админ клуба, Суперадмин — полная ролевая матрица с гранулярными правами.', icon: 'users' },
];

const marketStats = {
  marketSize2025: '$2.5B',
  marketSize2033: '$6.93B',
  cagr: '18.64%',
  aiMarket2024: '$9.8B',
  aiMarket2034: '$46B',
  hybridRetention: '+3 мес',
  crmRetentionBoost: '+27%',
  mobileRetention: '+20%',
};

/* ─────────────── HELPERS ─────────────── */

const statusIcon = (val: 'yes' | 'no' | 'partial' | 'planned') => {
  switch (val) {
    case 'yes': return <CheckCircle2 className="h-4 w-4 text-green-600 mx-auto" />;
    case 'no': return <XCircle className="h-4 w-4 text-red-400 mx-auto" />;
    case 'partial': return <div className="h-4 w-4 rounded-full border-2 border-yellow-500 bg-yellow-100 mx-auto" />;
    case 'planned': return <Clock className="h-4 w-4 text-blue-500 mx-auto" />;
  }
};

function Clock(props: { className?: string }) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" className={props.className}>
      <circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
    </svg>
  );
}

const priorityColors = {
  critical: { bg: 'bg-red-50', text: 'text-red-700', border: 'border-red-200', label: 'Критичный' },
  high: { bg: 'bg-orange-50', text: 'text-orange-700', border: 'border-orange-200', label: 'Высокий' },
  medium: { bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200', label: 'Средний' },
};

const relevanceColors = {
  high: { bg: 'bg-red-50', text: 'text-red-700', label: 'Высокая' },
  medium: { bg: 'bg-yellow-50', text: 'text-yellow-700', label: 'Средняя' },
  low: { bg: 'bg-gray-50', text: 'text-gray-500', label: 'Низкая' },
};

const advantageIcons = {
  phone: Phone,
  smartphone: Smartphone,
  shield: Shield,
  zap: Zap,
  target: Target,
  users: Users,
};

/* ─────────────── COMPONENT ─────────────── */

export default function CompetitorAnalysisDocument() {
  const router = useRouter();
  const contentRef = useRef<HTMLDivElement>(null);

  const handleDownloadPdf = async () => {
    const el = contentRef.current;
    if (!el) return;
    const html2canvas = (await import('html2canvas-pro')).default;
    const { jsPDF } = await import('jspdf');
    const canvas = await html2canvas(el, { scale: 2, useCORS: true });
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const pdfW = pdf.internal.pageSize.getWidth();
    const pdfH = pdf.internal.pageSize.getHeight();
    const imgW = pdfW - 16;
    const imgH = (canvas.height * imgW) / canvas.width;
    let y = 8;
    let page = 0;
    while (y < imgH + 8) {
      if (page > 0) pdf.addPage();
      pdf.addImage(imgData, 'PNG', 8, 8 - y + 8 * (page === 0 ? 0 : 1), imgW, imgH);
      y += pdfH - 16;
      page++;
    }
    pdf.save('fitcrm-competitor-analysis.pdf');
  };

  const handleDownloadExcel = async () => {
    const XLSX = await import('xlsx');
    const wb = XLSX.utils.book_new();

    // Sheet 1: Обзор конкурентов
    const overviewData = competitors.map((c) => ({
      'Компания': c.name,
      'Страна': c.country,
      'Сайт': c.website,
      'Целевой рынок': c.targetMarket,
      'Цены': c.pricing,
      'Клиенты': c.clients,
      'Рейтинг': c.rating,
      'Источник': c.ratingSource,
      'Ключевое отличие': c.keyDifferentiator,
    }));
    const ws1 = XLSX.utils.json_to_sheet(overviewData);
    ws1['!cols'] = [{ wch: 20 }, { wch: 16 }, { wch: 20 }, { wch: 30 }, { wch: 25 }, { wch: 10 }, { wch: 10 }, { wch: 20 }, { wch: 30 }];
    XLSX.utils.book_append_sheet(wb, ws1, 'Обзор конкурентов');

    // Sheet 2: Сравнение функций
    const featureData = featureComparison.map((row) => ({
      'Функция': row.feature,
      'MyFitCRM': row.fitcrm === 'yes' ? '✅' : row.fitcrm === 'partial' ? '⚠️' : row.fitcrm === 'planned' ? '🔜' : '❌',
      '1С:Фитнес': row.oneC === 'yes' ? '✅' : row.oneC === 'partial' ? '⚠️' : '❌',
      'Mobifitness': row.mobifitness === 'yes' ? '✅' : row.mobifitness === 'partial' ? '⚠️' : '❌',
      'Fitbase': row.fitbase === 'yes' ? '✅' : row.fitbase === 'partial' ? '⚠️' : '❌',
      'Mindbody': row.mindbody === 'yes' ? '✅' : row.mindbody === 'partial' ? '⚠️' : '❌',
      'Glofox': row.glofox === 'yes' ? '✅' : row.glofox === 'partial' ? '⚠️' : '❌',
    }));
    const ws2 = XLSX.utils.json_to_sheet(featureData);
    ws2['!cols'] = [{ wch: 35 }, { wch: 10 }, { wch: 12 }, { wch: 14 }, { wch: 10 }, { wch: 12 }, { wch: 10 }];
    XLSX.utils.book_append_sheet(wb, ws2, 'Сравнение функций');

    // Sheet 3: Что не хватает
    const gapData = gaps.map((g) => ({
      'Функция': g.feature,
      'Приоритет': priorityColors[g.priority].label,
      'У конкурентов': g.competitors,
      'Трудоёмкость': g.effort,
      'Влияние': g.impact,
    }));
    const ws3 = XLSX.utils.json_to_sheet(gapData);
    ws3['!cols'] = [{ wch: 35 }, { wch: 14 }, { wch: 40 }, { wch: 14 }, { wch: 45 }];
    XLSX.utils.book_append_sheet(wb, ws3, 'Что не хватает');

    // Sheet 4: Сильные/слабые стороны
    const swData = competitors.flatMap((c) => [
      ...c.strengths.map((s) => ({ 'Компания': c.name, 'Тип': 'Сильная сторона', 'Описание': s })),
      ...c.weaknesses.map((w) => ({ 'Компания': c.name, 'Тип': 'Слабая сторона', 'Описание': w })),
    ]);
    const ws4 = XLSX.utils.json_to_sheet(swData);
    ws4['!cols'] = [{ wch: 20 }, { wch: 16 }, { wch: 60 }];
    XLSX.utils.book_append_sheet(wb, ws4, 'SWOT');

    // Sheet 5: Тренды рынка
    const trendData = marketTrends.map((t) => ({
      'Тренд': t.title,
      'Описание': t.description,
      'Релевантность': relevanceColors[t.relevance].label,
    }));
    const ws5 = XLSX.utils.json_to_sheet(trendData);
    ws5['!cols'] = [{ wch: 30 }, { wch: 70 }, { wch: 14 }];
    XLSX.utils.book_append_sheet(wb, ws5, 'Тренды рынка');

    XLSX.writeFile(wb, 'fitcrm-competitor-analysis.xlsx');
  };

  return (
    <div>
      <button
        onClick={() => router.push('/documents')}
        className="flex items-center gap-2 text-sm text-muted hover:text-gray-900 mb-6 transition-colors"
      >
        <ArrowLeft className="h-4 w-4" />
        Все документы
      </button>

      <div ref={contentRef} className="bg-card rounded-xl shadow-sm border border-border overflow-hidden">
        {/* Header */}
        <div className="px-8 py-6 border-b border-border">
          <div className="flex items-start justify-between">
            <div className="flex items-center gap-3">
              <div className="bg-orange-50 p-2.5 rounded-lg">
                <Target className="h-6 w-6 text-orange-600" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">
                  Анализ конкурентов — CRM для фитнес-клубов
                </h1>
                <p className="text-sm text-muted mt-1">
                  Дата: {LAST_UPDATE} | {competitors.length} конкурентов | {featureComparison.length} функций
                </p>
              </div>
            </div>
            <div className="flex gap-2 print:hidden">
              <button
                onClick={() => void handleDownloadPdf()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <FileDown className="h-4 w-4" />
                Скачать PDF
              </button>
              <button
                onClick={() => void handleDownloadExcel()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <Table2 className="h-4 w-4" />
                Скачать Excel
              </button>
              <button
                onClick={() => window.print()}
                className="flex items-center gap-2 border border-border bg-card text-gray-700 px-4 py-2 rounded-xl text-sm font-medium hover:bg-background transition-colors"
              >
                <Printer className="h-4 w-4" />
                Печать
              </button>
            </div>
          </div>
        </div>

        <div className="px-8 py-6 space-y-10">

          {/* ── Market Overview Metrics ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <BarChart3 className="h-5 w-5 text-blue-600" />
              Обзор рынка
            </h2>
            <div className="grid grid-cols-4 gap-4">
              <div className="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl p-4 text-center">
                <p className="text-2xl font-bold text-blue-700">{marketStats.marketSize2025}</p>
                <p className="text-xs text-muted mt-1">Рынок 2025</p>
              </div>
              <div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl p-4 text-center">
                <p className="text-2xl font-bold text-purple-700">{marketStats.marketSize2033}</p>
                <p className="text-xs text-muted mt-1">Прогноз 2033</p>
              </div>
              <div className="bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl p-4 text-center">
                <p className="text-2xl font-bold text-green-700">{marketStats.cagr}</p>
                <p className="text-xs text-muted mt-1">CAGR роста</p>
              </div>
              <div className="bg-gradient-to-br from-orange-50 to-amber-50 rounded-xl p-4 text-center">
                <p className="text-2xl font-bold text-orange-700">{marketStats.crmRetentionBoost}</p>
                <p className="text-xs text-muted mt-1">CRM → Retention</p>
              </div>
            </div>
          </div>

          {/* ── Competitor Cards ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Globe className="h-5 w-5 text-indigo-600" />
              Конкуренты — детальный анализ
            </h2>
            <div className="space-y-6">
              {competitors.map((c) => (
                <div key={c.name} className="border border-border rounded-xl overflow-hidden">
                  {/* Competitor header */}
                  <div className="bg-gray-50 px-6 py-4 flex items-center justify-between">
                    <div>
                      <h3 className="text-base font-bold text-gray-900">{c.name}</h3>
                      <p className="text-sm text-muted">{c.country} · {c.website} · {c.targetMarket}</p>
                    </div>
                    <div className="flex items-center gap-4">
                      <div className="text-right">
                        <p className="text-sm font-semibold text-gray-900">{c.pricing}</p>
                        <p className="text-xs text-muted">Клиенты: {c.clients}</p>
                      </div>
                      <div className="bg-white border border-border rounded-lg px-3 py-1.5 text-center">
                        <p className="text-sm font-bold text-yellow-600 flex items-center gap-1">
                          <Star className="h-3.5 w-3.5 fill-yellow-400 text-yellow-400" />
                          {c.rating}
                        </p>
                        <p className="text-[10px] text-muted">{c.ratingSource}</p>
                      </div>
                    </div>
                  </div>

                  <div className="px-6 py-4 grid grid-cols-3 gap-6">
                    {/* Features */}
                    <div>
                      <h4 className="text-xs font-semibold text-muted uppercase tracking-wider mb-2">Функционал</h4>
                      <ul className="space-y-1">
                        {c.features.map((f, i) => (
                          <li key={i} className="text-sm text-gray-700 flex items-start gap-1.5">
                            <span className="text-gray-400 mt-1">·</span>
                            {f}
                          </li>
                        ))}
                      </ul>
                    </div>

                    {/* Strengths */}
                    <div>
                      <h4 className="text-xs font-semibold text-green-700 uppercase tracking-wider mb-2 flex items-center gap-1">
                        <TrendingUp className="h-3.5 w-3.5" />
                        Сильные стороны
                      </h4>
                      <ul className="space-y-1">
                        {c.strengths.map((s, i) => (
                          <li key={i} className="text-sm text-gray-700 flex items-start gap-1.5">
                            <CheckCircle2 className="h-3.5 w-3.5 text-green-500 shrink-0 mt-0.5" />
                            {s}
                          </li>
                        ))}
                      </ul>
                    </div>

                    {/* Weaknesses */}
                    <div>
                      <h4 className="text-xs font-semibold text-red-700 uppercase tracking-wider mb-2 flex items-center gap-1">
                        <TrendingDown className="h-3.5 w-3.5" />
                        Слабые стороны
                      </h4>
                      <ul className="space-y-1">
                        {c.weaknesses.map((w, i) => (
                          <li key={i} className="text-sm text-gray-700 flex items-start gap-1.5">
                            <XCircle className="h-3.5 w-3.5 text-red-400 shrink-0 mt-0.5" />
                            {w}
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>

                  {/* Pricing details */}
                  <div className="px-6 py-3 bg-gray-50/50 border-t border-border">
                    <h4 className="text-xs font-semibold text-muted uppercase tracking-wider mb-2 flex items-center gap-1">
                      <DollarSign className="h-3.5 w-3.5" />
                      Тарифы
                    </h4>
                    <div className="flex flex-wrap gap-2">
                      {c.pricingDetails.map((p, i) => (
                        <span key={i} className="text-xs bg-white border border-border rounded-md px-2 py-1 text-gray-600">
                          {p}
                        </span>
                      ))}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* ── Summary Comparison Table ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Table2 className="h-5 w-5 text-purple-600" />
              Сводная таблица конкурентов
            </h2>
            <div className="overflow-x-auto">
              <table className="w-full text-sm border-collapse">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Компания</th>
                    <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Страна</th>
                    <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Цена/мес</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border">Клиенты</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border">Рейтинг</th>
                    <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Ключевое отличие</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="bg-orange-50/50 font-medium">
                    <td className="px-3 py-2 border border-border text-primary font-bold">MyFitCRM (мы)</td>
                    <td className="px-3 py-2 border border-border">🇷🇺 Россия</td>
                    <td className="px-3 py-2 border border-border">от 2 000 ₽/мес</td>
                    <td className="px-3 py-2 border border-border text-center">Запуск</td>
                    <td className="px-3 py-2 border border-border text-center">—</td>
                    <td className="px-3 py-2 border border-border">SIP, trainer-first, multi-tenancy</td>
                  </tr>
                  {competitors.map((c) => (
                    <tr key={c.name} className="hover:bg-gray-50/50">
                      <td className="px-3 py-2 border border-border font-medium text-gray-900">{c.name}</td>
                      <td className="px-3 py-2 border border-border text-gray-600">{c.country}</td>
                      <td className="px-3 py-2 border border-border text-gray-600">{c.pricing}</td>
                      <td className="px-3 py-2 border border-border text-center text-gray-600">{c.clients}</td>
                      <td className="px-3 py-2 border border-border text-center">
                        <span className="flex items-center justify-center gap-1 text-yellow-600">
                          <Star className="h-3 w-3 fill-yellow-400 text-yellow-400" />
                          {c.rating}
                        </span>
                      </td>
                      <td className="px-3 py-2 border border-border text-gray-600">{c.keyDifferentiator}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* ── Feature Comparison Matrix ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-2 flex items-center gap-2">
              <CheckCircle2 className="h-5 w-5 text-green-600" />
              Матрица функций: MyFitCRM vs конкуренты
            </h2>
            <div className="flex items-center gap-4 mb-4 text-xs text-muted">
              <span className="flex items-center gap-1"><CheckCircle2 className="h-3.5 w-3.5 text-green-600" /> Есть</span>
              <span className="flex items-center gap-1"><div className="h-3.5 w-3.5 rounded-full border-2 border-yellow-500 bg-yellow-100" /> Частично</span>
              <span className="flex items-center gap-1"><XCircle className="h-3.5 w-3.5 text-red-400" /> Нет</span>
              <span className="flex items-center gap-1"><Clock className="h-3.5 w-3.5 text-blue-500" /> Планируется</span>
            </div>
            <div className="overflow-x-auto">
              <table className="w-full text-sm border-collapse">
                <thead>
                  <tr className="bg-gray-50">
                    <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Функция</th>
                    <th className="text-center px-3 py-2.5 font-bold text-primary border border-border bg-orange-50/50 w-20">MyFitCRM</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-20">1С</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-20">Mobi</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-20">Fitbase</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-20">Mind</th>
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-20">Glofox</th>
                  </tr>
                </thead>
                <tbody>
                  {featureComparison.map((row, i) => (
                    <tr key={i} className="hover:bg-gray-50/50">
                      <td className="px-3 py-2 border border-border text-gray-900">{row.feature}</td>
                      <td className="px-3 py-2 border border-border bg-orange-50/30">{statusIcon(row.fitcrm)}</td>
                      <td className="px-3 py-2 border border-border">{statusIcon(row.oneC)}</td>
                      <td className="px-3 py-2 border border-border">{statusIcon(row.mobifitness)}</td>
                      <td className="px-3 py-2 border border-border">{statusIcon(row.fitbase)}</td>
                      <td className="px-3 py-2 border border-border">{statusIcon(row.mindbody)}</td>
                      <td className="px-3 py-2 border border-border">{statusIcon(row.glofox)}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* ── Unique Advantages ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Zap className="h-5 w-5 text-yellow-500" />
              Уникальные преимущества MyFitCRM
            </h2>
            <div className="grid grid-cols-3 gap-4">
              {uniqueAdvantages.map((a) => {
                const Icon = advantageIcons[a.icon];
                return (
                  <div key={a.title} className="bg-gradient-to-br from-orange-50/80 to-white border border-orange-200 rounded-xl p-4">
                    <div className="flex items-center gap-2 mb-2">
                      <div className="bg-primary/10 p-1.5 rounded-lg">
                        <Icon className="h-4 w-4 text-primary" />
                      </div>
                      <h4 className="text-sm font-bold text-gray-900">{a.title}</h4>
                    </div>
                    <p className="text-xs text-gray-600 leading-relaxed">{a.description}</p>
                  </div>
                );
              })}
            </div>
          </div>

          {/* ── Market Trends ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <TrendingUp className="h-5 w-5 text-green-600" />
              Тренды рынка 2025–2026
            </h2>
            <div className="grid grid-cols-2 gap-3">
              {marketTrends.map((t) => {
                const rel = relevanceColors[t.relevance];
                return (
                  <div key={t.title} className="border border-border rounded-lg p-3 flex items-start gap-3">
                    <div className={cn('shrink-0 text-[10px] font-semibold px-2 py-0.5 rounded-full', rel.bg, rel.text)}>
                      {rel.label}
                    </div>
                    <div>
                      <h4 className="text-sm font-semibold text-gray-900">{t.title}</h4>
                      <p className="text-xs text-gray-600 mt-0.5">{t.description}</p>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>

          {/* ── What We're Missing ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <AlertTriangle className="h-5 w-5 text-orange-500" />
              Что нам не хватает — Gap Analysis
            </h2>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Функция</th>
                  <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-24">Приоритет</th>
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Есть у конкурентов</th>
                  <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-28">Трудоёмкость</th>
                  <th className="text-left px-3 py-2.5 font-medium text-muted border border-border">Влияние на бизнес</th>
                </tr>
              </thead>
              <tbody>
                {gaps.map((g, i) => {
                  const p = priorityColors[g.priority];
                  return (
                    <tr key={i} className="hover:bg-gray-50/50">
                      <td className="px-3 py-2 border border-border text-gray-900 font-medium">{g.feature}</td>
                      <td className="px-3 py-2 border border-border text-center">
                        <span className={cn('text-[10px] font-semibold px-2 py-0.5 rounded-full border', p.bg, p.text, p.border)}>
                          {p.label}
                        </span>
                      </td>
                      <td className="px-3 py-2 border border-border text-gray-600 text-xs">{g.competitors}</td>
                      <td className="px-3 py-2 border border-border text-center text-gray-600">{g.effort}</td>
                      <td className="px-3 py-2 border border-border text-gray-600 text-xs">{g.impact}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>

          {/* ── Conclusions & Recommendations ── */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
              <Lightbulb className="h-5 w-5 text-yellow-500" />
              Выводы и рекомендации
            </h2>

            <div className="space-y-4">
              {/* Positioning */}
              <div className="bg-blue-50 border border-blue-200 rounded-xl p-5">
                <h3 className="text-sm font-bold text-blue-900 mb-2">Позиционирование на рынке</h3>
                <p className="text-sm text-blue-800 leading-relaxed">
                  Российский рынок CRM для фитнеса разделён на два полюса: <strong>1С:Фитнес клуб</strong> (мощный, но сложный и дорогой) и облачные решения (<strong>Mobifitness, Fitbase, YCLIENTS</strong> — простые, но без глубины). MyFitCRM занимает уникальную нишу: <strong>современный облачный SaaS с глубиной enterprise-решения</strong>, ориентированный на тренера как основного пользователя.
                </p>
              </div>

              {/* Key differentiators */}
              <div className="bg-green-50 border border-green-200 rounded-xl p-5">
                <h3 className="text-sm font-bold text-green-900 mb-2">Наши ключевые преимущества (уже реализованы)</h3>
                <div className="grid grid-cols-2 gap-2">
                  {[
                    'Встроенная SIP-телефония — ни у одного конкурента в РФ нет',
                    'Trainer-first мобильный UX — тренер = главный пользователь',
                    'Multi-tenancy с RLS — масштабируемая архитектура',
                    'Модульная лицензия — клуб платит только за нужное',
                    'Двусторонняя интеграция с 1С — лучшее из двух миров',
                    '6-ролевая RBAC + координатор — уникальная функция',
                    '12 типов webhooks + Open API — для разработчиков',
                    '2FA (TOTP) для суперадмина — безопасность уровня enterprise',
                  ].map((item, i) => (
                    <div key={i} className="flex items-start gap-2 text-sm text-green-800">
                      <CheckCircle2 className="h-4 w-4 text-green-600 shrink-0 mt-0.5" />
                      {item}
                    </div>
                  ))}
                </div>
              </div>

              {/* What to add */}
              <div className="bg-orange-50 border border-orange-200 rounded-xl p-5">
                <h3 className="text-sm font-bold text-orange-900 mb-2">Что необходимо добавить (roadmap для лидерства)</h3>
                <div className="space-y-3">
                  <div>
                    <h4 className="text-xs font-bold text-red-700 uppercase mb-1">Фаза 1 — Критичные (без них нельзя продавать)</h4>
                    <ul className="space-y-1">
                      {[
                        'Онлайн-оплата и эквайринг (ЮKassa / CloudPayments) — без этого клубы не могут монетизировать',
                        'Расчёт зарплат тренеров — базовое ожидание HR-отделов',
                      ].map((item, i) => (
                        <li key={i} className="text-sm text-orange-800 flex items-start gap-2">
                          <AlertTriangle className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="text-xs font-bold text-orange-700 uppercase mb-1">Фаза 2 — Высокий приоритет (конкурентные преимущества)</h4>
                    <ul className="space-y-1">
                      {[
                        'СКУД-интеграция (Sigur, PocketKey) — ключевой запрос средних и крупных клубов',
                        'Программа лояльности с бонусами — +25% удержание, +15% ARPU',
                        'AI-аналитика: прогноз оттока, рекомендации по удержанию — главный тренд 2025–2026',
                        'Запись SIP-звонков — контроль качества обслуживания клиентов',
                      ].map((item, i) => (
                        <li key={i} className="text-sm text-orange-800 flex items-start gap-2">
                          <Zap className="h-4 w-4 text-orange-500 shrink-0 mt-0.5" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <div>
                    <h4 className="text-xs font-bold text-blue-700 uppercase mb-1">Фаза 3 — Средний приоритет (расширение)</h4>
                    <ul className="space-y-1">
                      {[
                        'Marketplace / каталог клубов — канал привлечения новых клиентов',
                        'Виртуальные тренировки (онлайн) — гибридная модель, +3 мес retention',
                        'NPS-опросы и обратная связь — снижение оттока',
                        'Конструктор сайта для клуба — удобство для малых клубов',
                      ].map((item, i) => (
                        <li key={i} className="text-sm text-orange-800 flex items-start gap-2">
                          <Lightbulb className="h-4 w-4 text-blue-500 shrink-0 mt-0.5" />
                          {item}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>

              {/* Final verdict */}
              <div className="bg-gradient-to-r from-gray-900 to-gray-800 rounded-xl p-5 text-white">
                <h3 className="text-sm font-bold mb-3">Итоговый вердикт</h3>
                <div className="space-y-2 text-sm text-gray-200 leading-relaxed">
                  <p>
                    <strong className="text-white">MyFitCRM уже превосходит конкурентов</strong> по архитектуре (multi-tenancy, модульность, webhooks, API) и уникальным функциям (встроенный SIP, trainer-first UX, 6 ролей, координатор).
                  </p>
                  <p>
                    Для захвата лидерства на российском рынке необходимо добавить <strong className="text-orange-400">3 критичные функции</strong>: онлайн-оплату, расчёт зарплат и СКУД-интеграцию. Это закроет 90% потребностей целевых клубов.
                  </p>
                  <p>
                    Ключевое конкурентное преимущество — <strong className="text-orange-400">«1С-совместимый облачный SaaS»</strong>: данные 1С + современный мобильный UX + модульная цена. Ни один конкурент не предлагает такой комбинации.
                  </p>
                  <p className="text-xs text-gray-400 mt-3">
                    Рынок растёт на 18.64% в год ($2.5B → $6.93B к 2033). Окно возможностей открыто: крупные игроки (Mindbody, Glofox) уходят в консолидацию и теряют фокус, а российские (1С) застряли в legacy. Сейчас — идеальный момент для entry.
                  </p>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}
