'use client';

import { useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import {
  ArrowLeft,
  FileDown,
  Printer,
  Table2,
  Palette,
  Monitor,
  Smartphone,
  LayoutDashboard,
  Star,
  ChevronDown,
  ChevronUp,
  Globe,
  Zap,
  Sparkles,
  Sun,
  Moon,
  Flame,
  Waves,
  Mountain,
  Leaf,
  Crown,
} from 'lucide-react';
import { cn } from '@/lib/cn';

/* ─── Types ─── */

interface DesignKit {
  id: number;
  name: string;
  style: string;
  description: string;
  icon: React.ReactNode;
  accentColor: string;
  accentBg: string;
  palette: { name: string; hex: string }[];
  fonts: { heading: string; body: string };
  landing: LandingSection;
  mobile: MobileSection;
  crm: CrmSection;
  rating: number;
  tags: string[];
}

interface LandingSection {
  hero: string;
  features: string[];
  layout: string;
  cta: string;
  mockupAscii: string;
}

interface MobileSection {
  homeScreen: string;
  navigation: string;
  cards: string;
  mockupAscii: string;
}

interface CrmSection {
  dashboard: string;
  sidebar: string;
  tables: string;
  mockupAscii: string;
}

/* ─── Data: 10 Design Kits ─── */

const designKits: DesignKit[] = [
  {
    id: 1,
    name: 'FitPulse Orange',
    style: 'Энергичный минимализм',
    description: 'Фирменный стиль MyFitCRM — оранжевый акцент на светлом фоне. Чистые линии, крупная типографика, карточки с тенями. Идеально для фитнес-индустрии: динамика + профессионализм.',
    icon: <Flame className="h-5 w-5" />,
    accentColor: '#FF6B00',
    accentBg: 'bg-orange-50',
    palette: [
      { name: 'Primary', hex: '#FF6B00' },
      { name: 'Dark', hex: '#1A1A2E' },
      { name: 'Surface', hex: '#FFFFFF' },
      { name: 'Background', hex: '#F5F5F5' },
      { name: 'Success', hex: '#43A047' },
      { name: 'Error', hex: '#E53935' },
    ],
    fonts: { heading: 'Inter Bold / 24–32px', body: 'Inter Regular / 14–16px' },
    landing: {
      hero: 'Полноэкранный hero с градиентом #1A1A2E → #FF6B00. Крупный заголовок «Управляй фитнес-клубом эффективно». Кнопка CTA оранжевая с белым текстом. Справа — 3D мокап телефона с приложением.',
      features: ['Карточки 3×2 с иконками', 'Секция «Роли» с табами', 'Pricing-блок с 3 тарифами', 'Секция отзывов — карусель'],
      layout: 'Single page, scroll-based, sticky header с blur-эффектом',
      cta: '«Попробовать бесплатно» — оранжевая кнопка, border-radius 12px',
      mockupAscii: `┌─────────────────────────────────┐
│  ▓▓ MyFitCRM    [Возможности] [▼] │
├─────────────────────────────────┤
│                                 │
│   Управляй фитнес-клубом       │
│   ██████████████████████        │
│   эффективно                    │
│                                 │
│   [🟠 Попробовать бесплатно]    │
│                         📱      │
├─────────────────────────────────┤
│  ┌─────┐ ┌─────┐ ┌─────┐      │
│  │ 📊  │ │ 👥  │ │ 📅  │      │
│  │Stats│ │Users│ │Sched│      │
│  └─────┘ └─────┘ └─────┘      │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Карточки статистики сверху (продажи, клиенты, тренировки) в оранжевых градиентах. Ниже — список ближайших занятий с аватарами клиентов.',
      navigation: 'Bottom tabs: Главная, Расписание, Клиенты, Воронка, Ещё. Активная вкладка — оранжевая иконка + точка.',
      cards: 'Белые карточки с border-radius 16px, мягкая тень (0 4px 12px rgba(0,0,0,0.08)). Оранжевые бейджи для статусов.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│ Привет, Алексей! │
│                  │
│ ┌──────────────┐ │
│ │ 💰 Продажи   │ │
│ │    ████ 24   │ │
│ └──────────────┘ │
│ ┌──────────────┐ │
│ │ 📅 Сегодня   │ │
│ │ 10:00 Иванов │ │
│ │ 11:30 Петров │ │
│ └──────────────┘ │
│                  │
│ 🏠  📅  👥  📊  ⋯│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Верхняя панель с метриками (4 карточки). Ниже — график продаж (area chart, оранжевый) и таблица клиентов. Правая колонка — уведомления.',
      sidebar: 'Тёмный сайдбар (#1A1A2E) с оранжевыми иконками при hover. Лого сверху, навигация по разделам.',
      tables: 'Zebra-striping, оранжевые бейджи статусов, hover-подсветка строк, cursor-based пагинация.',
      mockupAscii: `┌──┬──────────────────────────┐
│▓▓│  📊 Дашборд               │
│▓▓├──────────────────────────┤
│  │ [24 продажи] [156 клие] │
│📊│ [89% конвер] [4.8 рейт] │
│👥│                          │
│📅│  📈 ═══════╗             │
│📣│  ║         ╠═══         │
│⚙ │  ╚═════════╝            │
│  │                          │
│  │  Клиенты  Статус  Дата   │
│  │  Иванов   🟢      20.02  │
│  │  Петров   🟠      19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 9.5,
    tags: ['Фирменный', 'Энергичный', 'Профессиональный'],
  },
  {
    id: 2,
    name: 'Midnight Gym',
    style: 'Тёмная тема + неон',
    description: 'Полностью тёмный интерфейс с неоновыми акцентами. Подходит для премиум-клубов и ночных тренажёрных залов. Высокий контраст, свечение элементов.',
    icon: <Moon className="h-5 w-5" />,
    accentColor: '#00E5FF',
    accentBg: 'bg-cyan-50',
    palette: [
      { name: 'Primary', hex: '#00E5FF' },
      { name: 'Secondary', hex: '#7C4DFF' },
      { name: 'Surface', hex: '#1E1E2E' },
      { name: 'Background', hex: '#0D0D1A' },
      { name: 'Success', hex: '#00E676' },
      { name: 'Text', hex: '#E0E0E0' },
    ],
    fonts: { heading: 'Space Grotesk Bold / 24–36px', body: 'Inter Regular / 14–16px' },
    landing: {
      hero: 'Видео-фон с тренировкой в тёмном зале. Текст с glow-эффектом: «Твой клуб. Твоя система.». Кнопка CTA с неоновой обводкой cyan.',
      features: ['Карточки с glassmorphism', 'Анимации при скролле (fade-in)', 'Параллакс-секция с фото зала', 'Счётчики с анимацией чисел'],
      layout: 'Dark background, секции разделены световыми линиями',
      cta: '«Начать» — прозрачная кнопка с cyan border + glow',
      mockupAscii: `┌─────────────────────────────────┐
│  ◆ MyFitCRM    [Features] [Demo] │
│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
│▒▒                           ▒▒│
│▒▒  ✦ Твой клуб.             ▒▒│
│▒▒    Твоя система. ✦        ▒▒│
│▒▒                           ▒▒│
│▒▒  [═══ Начать ═══]         ▒▒│
│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
│  ┌╌╌╌╌╌┐ ┌╌╌╌╌╌┐ ┌╌╌╌╌╌┐    │
│  ┊ ⚡  ┊ ┊ 📊  ┊ ┊ 🔒  ┊    │
│  ┊Speed┊ ┊Anal.┊ ┊Safe ┊    │
│  └╌╌╌╌╌┘ └╌╌╌╌╌┘ └╌╌╌╌╌┘    │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Тёмный фон #0D0D1A, карточки с gradient border (cyan→purple). Статистика со свечением. Числа крупные, неоновые.',
      navigation: 'Bottom bar с прозрачным blur-фоном. Активная вкладка — cyan glow под иконкой.',
      cards: 'Glassmorphism: rgba(255,255,255,0.05) фон, border 1px rgba(255,255,255,0.1), backdrop-blur 10px.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
│▒ Привет, Тренер ▒│
│▒                ▒│
│▒ ┌╌╌╌╌╌╌╌╌╌╌╌┐ ▒│
│▒ ┊✦ 24 продаж ┊ ▒│
│▒ ┊  +12% ↑    ┊ ▒│
│▒ └╌╌╌╌╌╌╌╌╌╌╌┘ ▒│
│▒ ┌╌╌╌╌╌╌╌╌╌╌╌┐ ▒│
│▒ ┊📅 10:00    ┊ ▒│
│▒ ┊ Иванова А. ┊ ▒│
│▒ └╌╌╌╌╌╌╌╌╌╌╌┘ ▒│
│▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒│
│ ⌂   📅   👤   📊│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Тёмная тема, карточки с glow-border. График — neon area chart (cyan fill). Таблица с подсветкой строк при hover.',
      sidebar: 'Прозрачный сайдбар с blur. Иконки с cyan/purple подсветкой. Активный пункт — gradient highlight.',
      tables: 'Тёмные строки, чередование #1E1E2E / #252540. Cyan акценты для ссылок и бейджей.',
      mockupAscii: `┌──┬──────────────────────────┐
│▓▓│  ✦ Dashboard              │
│▓▓├──────────────────────────┤
│  │ [✦24 sales] [✦156 cli ] │
│⚡│ [✦89% conv] [✦4.8 rate] │
│👤│                          │
│📅│  ✦══════════╗            │
│🔔│  ║  ╱╲  ╱╲ ╠═══        │
│⚙ │  ╚══╱══╲═══╝            │
│  │                          │
│  │  Client   Status  Date   │
│  │  Ivanov   ✦active 20.02  │
│  │  Petrov   ◆pend.  19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 9.2,
    tags: ['Премиум', 'Тёмная тема', 'Неон'],
  },
  {
    id: 3,
    name: 'Fresh Wellness',
    style: 'Мягкий и экологичный',
    description: 'Пастельные тона, зелёные акценты, мягкие тени. Создаёт ощущение спокойствия и заботы о здоровье. Подходит для йога-студий, wellness-клубов.',
    icon: <Leaf className="h-5 w-5" />,
    accentColor: '#2E7D32',
    accentBg: 'bg-green-50',
    palette: [
      { name: 'Primary', hex: '#2E7D32' },
      { name: 'Secondary', hex: '#81C784' },
      { name: 'Surface', hex: '#FFFFFF' },
      { name: 'Background', hex: '#F1F8E9' },
      { name: 'Warm', hex: '#FFE0B2' },
      { name: 'Text', hex: '#2C3E2C' },
    ],
    fonts: { heading: 'Nunito Bold / 24–32px', body: 'Nunito Regular / 14–16px' },
    landing: {
      hero: 'Фото природы/йоги на фоне, прозрачный overlay зелёный. Заголовок «Гармония тела и бизнеса». Кнопка мягко-зелёная с скруглением 24px.',
      features: ['Иллюстрации вместо иконок', 'Плавные анимации (ease-in-out)', 'Секция «Для кого» с кругляшками аватаров', 'Блок доверия — логотипы клубов'],
      layout: 'Воздушный, много белого пространства, скруглённые элементы',
      cta: '«Присоединиться» — мягкая зелёная кнопка, округлая',
      mockupAscii: `┌─────────────────────────────────┐
│  🍃 MyFitCRM   [О нас]  [Цены]  │
├─────────────────────────────────┤
│                                 │
│   🧘 Гармония тела              │
│      и бизнеса                  │
│                                 │
│   (  Присоединиться  )          │
│                                 │
├─────────────────────────────────┤
│                                 │
│  🌿 Расписание  🌿 Клиенты      │
│  🌿 Аналитика   🌿 Продажи      │
│                                 │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Светлый фон #F1F8E9. Карточки с мягкими зелёными градиентами. Круглые аватары, зелёные иконки. Плавные переходы.',
      navigation: 'Bottom tabs с мягкими иконками. Активная вкладка — зелёный fill + label.',
      cards: 'Белые карточки, border-radius 20px, тень 0 2px 8px rgba(0,0,0,0.04). Зелёные индикаторы и прогресс-бары.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│ 🍃 Доброе утро!  │
│                  │
│ ╭──────────────╮ │
│ │ 🧘 Занятий    │ │
│ │   ███████ 12 │ │
│ ╰──────────────╯ │
│ ╭──────────────╮ │
│ │ 🌿 Сегодня   │ │
│ │ 09:00 Йога   │ │
│ │ 11:00 Пилат. │ │
│ ╰──────────────╯ │
│                  │
│ 🏠  📅  👥  📊  ⋯│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Мягкие карточки метрик с зелёными акцентами. Графики — area chart с прозрачной зелёной заливкой. Много whitespace.',
      sidebar: 'Белый/кремовый сайдбар с зелёными иконками. Активный пункт — мягкий зелёный фон. Скруглённые элементы.',
      tables: 'Без бордеров, разделение через spacing. Зелёные бейджи, hover — лёгкая зелёная подсветка.',
      mockupAscii: `┌──┬──────────────────────────┐
│🍃│  🌿 Дашборд               │
│  ├──────────────────────────┤
│  │ ╭─12 зан─╮ ╭─156 кл──╮ │
│🧘│ ╰────────╯ ╰──────────╯ │
│👥│                          │
│📅│  📈 ~~~╱~~╲~~~~          │
│📊│     ╱      ╲             │
│⚙ │  ~~╱~~~~~~~~╲~~~        │
│  │                          │
│  │  Клиент   Тип    Дата   │
│  │  Смирнова 🟢yoga  20.02  │
│  │  Козлов   🟢pil.  19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 8.8,
    tags: ['Wellness', 'Экологичный', 'Мягкий'],
  },
  {
    id: 4,
    name: 'Power Red',
    style: 'Агрессивный спортивный',
    description: 'Красно-чёрная гамма, агрессивные шрифты, sharp edges. Для CrossFit-боксов, единоборств, силовых клубов. Передаёт мощь и энергию.',
    icon: <Zap className="h-5 w-5" />,
    accentColor: '#D32F2F',
    accentBg: 'bg-red-50',
    palette: [
      { name: 'Primary', hex: '#D32F2F' },
      { name: 'Secondary', hex: '#FF5252' },
      { name: 'Dark', hex: '#121212' },
      { name: 'Surface', hex: '#1E1E1E' },
      { name: 'Accent', hex: '#FFD600' },
      { name: 'Text', hex: '#FFFFFF' },
    ],
    fonts: { heading: 'Oswald Bold / 28–40px / uppercase', body: 'Roboto Regular / 14–16px' },
    landing: {
      hero: 'Полноэкранное фото штанги/тренировки. Текст uppercase: «СИЛА. КОНТРОЛЬ. РЕЗУЛЬТАТ.». Красная кнопка CTA, border-radius 4px (sharp).',
      features: ['Секции с диагональными разделителями', 'Счётчики: клубы, тренеры, клиенты', 'Видео-демо с autoplay', 'Отзывы в формате карусели'],
      layout: 'Тёмный фон, диагональные секции, крупные фото',
      cta: '«НАЧАТЬ СЕЙЧАС» — красная, uppercase, жирный шрифт',
      mockupAscii: `┌─────────────────────────────────┐
│  ⚡ FITCRM  [FEATURES] [DEMO]  │
│█████████████████████████████████│
│██                             ██│
│██  СИЛА. КОНТРОЛЬ.            ██│
│██  РЕЗУЛЬТАТ.                 ██│
│██                             ██│
│██  [🔴 НАЧАТЬ СЕЙЧАС]         ██│
│██                             ██│
│█████████████████████████████████│
│  ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱   │
│  50+ клубов   1000+ тренеров   │
│  ╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱╱   │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Тёмный фон, красные акценты. Карточки с красным gradient border. Крупные числа статистики. Uppercase заголовки.',
      navigation: 'Bottom bar тёмный, красные активные иконки. Без текста — только иконки.',
      cards: 'Тёмные карточки #1E1E1E, border-radius 8px, red gradient accent слева. Жёлтые бейджи для важного.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│█████████████████│
│█ ⚡ DASHBOARD  █│
│█               █│
│█ ┌────────────┐█│
│█ │🔴 24 SALES ││█│
│█ │   +15% ↑   ││█│
│█ └────────────┘█│
│█ ┌────────────┐█│
│█ │📅 10:00    ││█│
│█ │ КРОССФИТ   ││█│
│█ └────────────┘█│
│█████████████████│
│ ⌂   📅   👤   📊│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Тёмный дашборд, красные метрики. Графики с красной заливкой. Таблицы с красными hover-строками. Жёлтые индикаторы предупреждений.',
      sidebar: 'Чёрный сайдбар, красные иконки. Активный пункт — красный бордер слева. Uppercase навигация.',
      tables: 'Тёмный фон строк, красные бейджи, жёлтые предупреждения. Border-bottom разделители.',
      mockupAscii: `┌──┬──────────────────────────┐
│██│  ⚡ DASHBOARD             │
│██├──────────────────────────┤
│  │ [🔴24 SALES] [🔴156 CLI]│
│⚡│ [🔴89% CONV] [⭐4.8]    │
│👤│                          │
│📅│  📈 ▄▄▄█▄▄▄             │
│📊│     █    █               │
│⚙ │  ▄▄█▄▄▄▄█▄▄▄           │
│  │                          │
│  │  CLIENT   STATUS  DATE   │
│  │  IVANOV   🔴act.  20.02  │
│  │  PETROV   🟡pend. 19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 8.5,
    tags: ['CrossFit', 'Агрессивный', 'Тёмный'],
  },
  {
    id: 5,
    name: 'Azure Professional',
    style: 'Корпоративный сине-белый',
    description: 'Классический корпоративный стиль: синие акценты, белые поверхности, строгая типографика. Для сетевых клубов с корпоративным имиджем.',
    icon: <Globe className="h-5 w-5" />,
    accentColor: '#1565C0',
    accentBg: 'bg-blue-50',
    palette: [
      { name: 'Primary', hex: '#1565C0' },
      { name: 'Light', hex: '#42A5F5' },
      { name: 'Surface', hex: '#FFFFFF' },
      { name: 'Background', hex: '#F5F7FA' },
      { name: 'Gray', hex: '#607D8B' },
      { name: 'Accent', hex: '#FF6D00' },
    ],
    fonts: { heading: 'Plus Jakarta Sans Bold / 22–30px', body: 'Plus Jakarta Sans Regular / 14–16px' },
    landing: {
      hero: 'Градиент от белого к светло-голубому. Заголовок: «Профессиональная CRM для фитнес-бизнеса». Синяя кнопка CTA. Слева текст, справа — скриншот дашборда.',
      features: ['Grid 2×3 с иконками в синих кругах', 'Секция «Интеграции» с логотипами', 'FAQ аккордеон', 'Форма запроса демо'],
      layout: 'Строгая сетка, выровненные блоки, много whitespace',
      cta: '«Запросить демо» — синяя кнопка, border-radius 8px',
      mockupAscii: `┌─────────────────────────────────┐
│  ◇ MyFitCRM   [Продукт] [Цены]  │
├─────────────────────────────────┤
│                                 │
│  Профессиональная    ┌───────┐ │
│  CRM для фитнес-     │ 📊    │ │
│  бизнеса             │ Dash  │ │
│                      └───────┘ │
│  [🔵 Запросить демо]           │
├─────────────────────────────────┤
│  ┌──────┐ ┌──────┐ ┌──────┐   │
│  │  🔵  │ │  🔵  │ │  🔵  │   │
│  │ CRM  │ │ API  │ │  1C  │   │
│  └──────┘ └──────┘ └──────┘   │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Чистый белый фон. Карточки с тонкой синей обводкой. Статистика в синих тонах. Structured layout с чёткой иерархией.',
      navigation: 'Bottom tabs с синими активными иконками + текстовые лейблы. Тонкий top border.',
      cards: 'Белые, border 1px #E3E8EF, border-radius 12px. Синие индикаторы, серые мета-данные.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│ ◇ MyFitCRM         │
│                  │
│ ┌──────────────┐ │
│ │ 🔵 Продажи   │ │
│ │    24 (+12%) │ │
│ └──────────────┘ │
│ ┌──────────────┐ │
│ │ 📅 Расписание│ │
│ │ 10:00 Иванов │ │
│ │ 11:30 Петров │ │
│ └──────────────┘ │
│                  │
│ 🏠  📅  👥  📊  ⋯│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Строгий дашборд: 4 карточки метрик с синими иконками. Line chart (синий). Таблица с сортировкой и фильтрами. Breadcrumbs вверху.',
      sidebar: 'Белый сайдбар с серыми иконками. Активный пункт — синий фон + белый текст. Логотип + название клуба вверху.',
      tables: 'Полные бордеры, сортировка колонок, фильтры, пагинация. Синие ссылки, серые мета.',
      mockupAscii: `┌──┬──────────────────────────┐
│  │  ◇ Дашборд > Обзор       │
│◇ ├──────────────────────────┤
│  │ [🔵24 прод] [🔵156 кл ] │
│📊│ [🔵89% кон] [🔵4.8 рей] │
│👥│                          │
│📅│  📈 ───────╱╲───         │
│📣│      ╱         ╲         │
│⚙ │  ───╱───────────╲──     │
│  │                          │
│  │  Клиент  Статус  Дата    │
│  │  Иванов  🔵акт.  20.02  │
│  │  Петров  ◇ожид.  19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 9.0,
    tags: ['Корпоративный', 'Сетевой', 'Строгий'],
  },
  {
    id: 6,
    name: 'Sunrise Gradient',
    style: 'Яркие градиенты + glassmorphism',
    description: 'Градиентные карточки от оранжевого к розовому, glassmorphism-эффекты. Современный и запоминающийся стиль. Подходит для молодёжных клубов.',
    icon: <Sun className="h-5 w-5" />,
    accentColor: '#FF5722',
    accentBg: 'bg-orange-50',
    palette: [
      { name: 'Gradient Start', hex: '#FF5722' },
      { name: 'Gradient End', hex: '#E91E63' },
      { name: 'Secondary', hex: '#FF9800' },
      { name: 'Surface', hex: '#FFFFFF' },
      { name: 'Background', hex: '#FFF3E0' },
      { name: 'Purple', hex: '#9C27B0' },
    ],
    fonts: { heading: 'Manrope ExtraBold / 26–36px', body: 'Manrope Regular / 14–16px' },
    landing: {
      hero: 'Градиентный фон (оранжевый → розовый → фиолетовый). Белый текст: «Фитнес-CRM нового поколения». Белая кнопка CTA с градиентным текстом.',
      features: ['Glassmorphism-карточки на градиенте', 'Floating 3D-иконки', 'Animated counter section', 'Testimonials с градиентной обводкой'],
      layout: 'Градиентные секции, floating elements, много анимации',
      cta: '«Старт бесплатно» — белая кнопка, gradient text',
      mockupAscii: `┌─────────────────────────────────┐
│  ◈ MyFitCRM   [Features] [Demo] │
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│▓▓                           ▓▓│
│▓▓  Фитнес-CRM              ▓▓│
│▓▓  нового поколения  ✨     ▓▓│
│▓▓                           ▓▓│
│▓▓  [  Старт бесплатно  ]   ▓▓│
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│  ┌┄┄┄┄┄┐ ┌┄┄┄┄┄┐ ┌┄┄┄┄┄┐    │
│  ┊ ✨  ┊ ┊ 🎯  ┊ ┊ 💎  ┊    │
│  ┊Glass┊ ┊Glass┊ ┊Glass┊    │
│  └┄┄┄┄┄┘ └┄┄┄┄┄┘ └┄┄┄┄┄┘    │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Градиентный header (оранжевый→розовый). Glassmorphism-карточки статистики. Яркие бейджи. Плавные gradient-переходы.',
      navigation: 'Frosted glass bottom bar. Gradient active indicator.',
      cards: 'Glassmorphism: rgba(255,255,255,0.2), backdrop-blur 20px, gradient border. Цветные иконки.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│▓ ✨ Привет!    ▓│
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│                  │
│ ┌┄┄┄┄┄┄┄┄┄┄┄┄┐ │
│ ┊ 🔥 24 прод. ┊ │
│ ┊  +12% ↑  ✨ ┊ │
│ └┄┄┄┄┄┄┄┄┄┄┄┄┘ │
│ ┌┄┄┄┄┄┄┄┄┄┄┄┄┐ │
│ ┊ 📅 10:00    ┊ │
│ ┊ Групповая ✨┊ │
│ └┄┄┄┄┄┄┄┄┄┄┄┄┘ │
│ ⌂   📅   👤   📊│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Gradient header с метриками. Glassmorphism-карточки на цветном фоне. Charts с gradient fill. Яркий, запоминающийся.',
      sidebar: 'Gradient sidebar (vertical, pink→orange). Белые иконки. Active = white pill.',
      tables: 'Белый фон, gradient-бейджи, цветные иконки статусов. Border-radius 12px для таблицы.',
      mockupAscii: `┌──┬──────────────────────────┐
│▓▓│  ✨ Dashboard             │
│▓▓├──────────────────────────┤
│▓ │ ┌┄24 sal┄┐ ┌┄156 cl┄┐  │
│▓ │ └┄┄┄┄┄┄┄┘ └┄┄┄┄┄┄┄┄┘  │
│▓ │                          │
│▓ │  📈 ┄┄┄┄╱╲┄┄┄┄          │
│▓ │       ╱    ╲             │
│▓ │  ┄┄┄╱┄┄┄┄┄┄╲┄┄         │
│▓ │                          │
│▓ │  Client   Status  Date   │
│▓ │  Иванов   🟠акт.  20.02 │
│▓ │  Петров   🟣ожид. 19.02 │
└──┴──────────────────────────┘`,
    },
    rating: 8.7,
    tags: ['Молодёжный', 'Градиенты', 'Glassmorphism'],
  },
  {
    id: 7,
    name: 'Nordic Minimal',
    style: 'Скандинавский минимализм',
    description: 'Чёрно-белая основа с одним акцентным цветом. Максимум whitespace, лаконичные формы. Для студий с премиальным позиционированием.',
    icon: <Mountain className="h-5 w-5" />,
    accentColor: '#212121',
    accentBg: 'bg-gray-100',
    palette: [
      { name: 'Primary', hex: '#212121' },
      { name: 'Accent', hex: '#FF6B00' },
      { name: 'Surface', hex: '#FFFFFF' },
      { name: 'Background', hex: '#FAFAFA' },
      { name: 'Light Gray', hex: '#E0E0E0' },
      { name: 'Muted', hex: '#9E9E9E' },
    ],
    fonts: { heading: 'DM Sans Bold / 24–32px', body: 'DM Sans Regular / 15–16px' },
    landing: {
      hero: 'Белый фон, чёрный крупный заголовок по центру: «Простая CRM для фитнеса». Под ним — одна строка описания. Чёрная кнопка CTA. Ниже — один большой скриншот.',
      features: ['Минимум элементов на экране', 'Одна фича = одна секция на весь экран', 'Чёрно-белые иконки', 'Один оранжевый акцент'],
      layout: 'Огромные отступы, полноэкранные секции, system font stack',
      cta: '«Начать» — чёрная кнопка, минимальная',
      mockupAscii: `┌─────────────────────────────────┐
│  MyFitCRM              [Начать]  │
│                                 │
│                                 │
│                                 │
│        Простая CRM              │
│        для фитнеса              │
│                                 │
│        [■ Начать]               │
│                                 │
│                                 │
│   ┌─────────────────────────┐   │
│   │      Screenshot         │   │
│   └─────────────────────────┘   │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Белый фон, чёрный текст. Минималистичные карточки без теней — только тонкий бордер. Один оранжевый акцент для CTA.',
      navigation: 'Bottom tabs — тонкие line-иконки. Активная = чёрная заливка.',
      cards: 'Белый фон, border 1px #E0E0E0, border-radius 8px. Без теней. Чёрный текст, серые мета.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│                  │
│ Доброе утро      │
│                  │
│ ┌──────────────┐ │
│ │ 24 продажи   │ │
│ │ ────────── ■ │ │
│ └──────────────┘ │
│ ┌──────────────┐ │
│ │ Расписание   │ │
│ │ 10:00 Иванов │ │
│ │ 11:30 Петров │ │
│ └──────────────┘ │
│                  │
│  ⌂  📅  👤  📊  │
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Минимальный дашборд. 4 числа сверху без карточек. Один график. Таблица без бордеров. Огромные отступы.',
      sidebar: 'Белый сайдбар, тонкий right border. Чёрные text-only пункты. Активный = bold + оранжевая точка.',
      tables: 'Без бордеров и фоновых полос. Только нижние разделители. Минималистичная пагинация.',
      mockupAscii: `┌──┬──────────────────────────┐
│  │                          │
│  │  24        156           │
│  │  продажи   клиентов      │
│📊│                          │
│👥│  89%       4.8           │
│📅│  конверс.  рейтинг       │
│  │                          │
│  │  ────────────────        │
│  │                          │
│  │  Иванов    акт.   20.02 │
│  │  Петров    ожид.  19.02  │
│  │  Сидоров   акт.   18.02 │
└──┴──────────────────────────┘`,
    },
    rating: 8.9,
    tags: ['Минимализм', 'Премиум', 'Чистый'],
  },
  {
    id: 8,
    name: 'Vibrant Purple',
    style: 'Фиолетовый hi-tech',
    description: 'Фиолетово-синий градиент, 3D-элементы, futuristic look. Для инновационных клубов с технологическим позиционированием. EMS, VR-фитнес.',
    icon: <Sparkles className="h-5 w-5" />,
    accentColor: '#7B1FA2',
    accentBg: 'bg-purple-50',
    palette: [
      { name: 'Primary', hex: '#7B1FA2' },
      { name: 'Secondary', hex: '#536DFE' },
      { name: 'Gradient', hex: '#E040FB' },
      { name: 'Dark', hex: '#1A0033' },
      { name: 'Surface', hex: '#F3E5F5' },
      { name: 'Text', hex: '#1A1A1A' },
    ],
    fonts: { heading: 'Outfit Bold / 26–36px', body: 'Outfit Regular / 14–16px' },
    landing: {
      hero: 'Градиент фиолетовый → синий. 3D-модель гантели/телефона с parallax. Текст: «CRM из будущего для фитнеса». Фиолетовая кнопка с shimmer-эффектом.',
      features: ['3D-иконки (isometric)', 'Orb decoration (фиолетовые сферы)', 'Секция «Технологии» с timeline', 'Interactive demo (embedded)'],
      layout: 'Futuristic, орбы и gradient blobs на фоне, floating elements',
      cta: '«Запустить демо» — gradient button purple→blue',
      mockupAscii: `┌─────────────────────────────────┐
│  ◈ MyFitCRM   [Tech] [Demo]     │
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│▓▓    ◯                      ▓▓│
│▓▓  CRM из будущего           ▓▓│
│▓▓  для фитнеса     ◯       ▓▓│
│▓▓           ◯                ▓▓│
│▓▓  [💎 Запустить демо]       ▓▓│
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│                                 │
│  ⬡ EMS       ⬡ VR       ⬡ AI  │
│  tracking    фитнес    советы  │
│                                 │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Фиолетовый gradient header. Карточки с purple glow. Futuristic иконки. Анимированные прогресс-кольца.',
      navigation: 'Floating bottom bar с blur. Purple gradient для активной вкладки.',
      cards: 'Surface #F3E5F5, purple shadow (0 4px 16px rgba(123,31,162,0.15)). Gradient акценты.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│▓ ◈ Dashboard   ▓│
│▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓│
│                  │
│ ┌──────────────┐ │
│ │ 💎 24 прод.  │ │
│ │ ████████░░   │ │
│ └──────────────┘ │
│ ┌──────────────┐ │
│ │ 📅 Сегодня   │ │
│ │ 10:00 EMS    │ │
│ └──────────────┘ │
│                  │
│ ⌂   📅   👤   📊│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Purple gradient header. Isometric 3D-карточки метрик. Chart с gradient fill purple→blue. Futuristic таблица.',
      sidebar: 'Gradient sidebar (purple→deep blue). Белые иконки, glow при hover. Active = pill с gradient.',
      tables: 'Light purple фон #F3E5F5, фиолетовые бейджи, gradient hover. Rounded table.',
      mockupAscii: `┌──┬──────────────────────────┐
│▓▓│  ◈ Dashboard              │
│▓▓├──────────────────────────┤
│▓ │ ┌◈24 sal┐ ┌◈156 cl ┐   │
│▓ │ └───────┘ └─────────┘   │
│▓ │                          │
│▓ │  📈 ◈═══╱╲═══◈          │
│▓ │       ╱    ╲             │
│▓ │  ◈══╱══════╲══◈         │
│▓ │                          │
│▓ │  Client   Status  Date   │
│▓ │  Иванов   💎акт.  20.02 │
│▓ │  Петров   ◈ожид. 19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 8.3,
    tags: ['Hi-tech', 'EMS/VR', 'Futuristic'],
  },
  {
    id: 9,
    name: 'Ocean Calm',
    style: 'Бирюзовый + мягкие формы',
    description: 'Бирюзово-голубая палитра, мягкие blob-формы, скруглённые углы. Создаёт ощущение спокойствия и доверия. Для бассейнов, аква-фитнеса, SPA.',
    icon: <Waves className="h-5 w-5" />,
    accentColor: '#00897B',
    accentBg: 'bg-teal-50',
    palette: [
      { name: 'Primary', hex: '#00897B' },
      { name: 'Light', hex: '#4DB6AC' },
      { name: 'Surface', hex: '#FFFFFF' },
      { name: 'Background', hex: '#E0F2F1' },
      { name: 'Accent', hex: '#0097A7' },
      { name: 'Sand', hex: '#FFE0B2' },
    ],
    fonts: { heading: 'Poppins SemiBold / 24–32px', body: 'Poppins Regular / 14–16px' },
    landing: {
      hero: 'Волнистый SVG-фон бирюзовый→белый. Текст: «Поток клиентов под контролем». Бирюзовая кнопка CTA. Фото бассейна/SPA.',
      features: ['Blob-shaped иконки', 'Wave-dividers между секциями', 'Animated water drops', 'Отзывы в bubble-стиле'],
      layout: 'Волнистые разделители, blob-декорации, organic shapes',
      cta: '«Погрузиться» — teal button, border-radius 24px',
      mockupAscii: `┌─────────────────────────────────┐
│  🌊 MyFitCRM   [О нас]  [Демо]  │
│  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ │
│ ~                            ~ │
│ ~   Поток клиентов            ~ │
│ ~   под контролем    🏊       ~ │
│ ~                            ~ │
│ ~   (  Погрузиться  )        ~ │
│  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ │
│                                 │
│  ◠ Расписание  ◠ Аналитика     │
│  ◠ Абонементы  ◠ Тренеры       │
│                                 │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Бирюзовый header с wave-bottom. Мягкие карточки с тенями. Круглые аватары. Бирюзовые progress bars.',
      navigation: 'Rounded bottom bar. Teal fill для активной вкладки. Мягкие иконки.',
      cards: 'Белый фон, border-radius 20px, shadow 0 2px 10px rgba(0,137,123,0.1). Wave-decoration внутри карточек.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│ ~🌊 Привет!~~~~~ │
│ ~~~~~~~~~~~~~~~~ │
│                  │
│ ╭──────────────╮ │
│ │ 🏊 12 заняти │ │
│ │  ~~~~~~~~ ■  │ │
│ ╰──────────────╯ │
│ ╭──────────────╮ │
│ │ 📅 10:00     │ │
│ │ Аква-аэроб.  │ │
│ ╰──────────────╯ │
│                  │
│ 🏠  📅  👥  📊  ⋯│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Бирюзовый top bar с wave. Мягкие metric-карточки. Grafik с teal fill. Таблица со скруглёнными углами.',
      sidebar: 'Белый сайдбар с teal иконками. Активный пункт — teal фон, скруглённый. Wave-decoration внизу.',
      tables: 'Rounded table, без жёстких бордеров. Teal бейджи, hover — мягкий teal фон.',
      mockupAscii: `┌──┬──────────────────────────┐
│  │  🌊 Дашборд               │
│🌊├──~~~~~~~~~~~~~~~~~~~~~~~~~┤
│  │ ╭─12 зан─╮ ╭─86 клие─╮  │
│🏊│ ╰────────╯ ╰──────────╯  │
│👥│                          │
│📅│  📈 ~~~╱~~╲~~~           │
│📊│     ╱      ╲             │
│⚙ │  ~~╱~~~~~~~~╲~~         │
│  │                          │
│  │  Клиент   Услуга  Дата   │
│  │  Волков   🟢аква  20.02  │
│  │  Орлова   🟢SPA   19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 8.6,
    tags: ['Бассейн', 'SPA', 'Спокойный'],
  },
  {
    id: 10,
    name: 'Royal Gold',
    style: 'Люксовый чёрно-золотой',
    description: 'Чёрный фон, золотые акценты, serif-типографика. Для VIP-клубов, бутик-студий. Максимум элегантности и эксклюзивности.',
    icon: <Crown className="h-5 w-5" />,
    accentColor: '#FFB300',
    accentBg: 'bg-yellow-50',
    palette: [
      { name: 'Gold', hex: '#FFB300' },
      { name: 'Light Gold', hex: '#FFD54F' },
      { name: 'Dark', hex: '#0A0A0A' },
      { name: 'Surface', hex: '#1A1A1A' },
      { name: 'Cream', hex: '#FFF8E1' },
      { name: 'Text', hex: '#FAFAFA' },
    ],
    fonts: { heading: 'Playfair Display Bold / 26–36px', body: 'Lato Regular / 14–16px' },
    landing: {
      hero: 'Чёрный фон, золотая типографика. Текст: «Премиальное управление клубом». Тонкие золотые линии-разделители. CTA с gold gradient.',
      features: ['Gold-линии вместо карточек', 'Минимум цвета, максимум элегантности', 'Serif заголовки', 'Фото-секция: fullbleed чёрно-белые'],
      layout: 'Тёмный, строгий, золотые акценты, serif typography',
      cta: '«Связаться» — gold gradient border button',
      mockupAscii: `┌─────────────────────────────────┐
│  ♛ MyFitCRM    [Club] [Contact]  │
│█████████████████████████████████│
│██                             ██│
│██  ♛ Премиальное              ██│
│██    управление клубом        ██│
│██  ─────────────────          ██│
│██                             ██│
│██  [ ♛ Связаться ]            ██│
│██                             ██│
│█████████████████████████████████│
│                                 │
│  ─── Тренеры ─── Клиенты ───  │
│                                 │
└─────────────────────────────────┘`,
    },
    mobile: {
      homeScreen: 'Чёрный фон, золотые заголовки. Карточки с gold border. Serif-числа статистики. Минимум элементов — максимум размера.',
      navigation: 'Чёрный bottom bar, gold иконки. Active = gold fill. Тонкая gold линия сверху.',
      cards: 'Чёрный фон #1A1A1A, border 1px gold, border-radius 4px (sharp). Gold текст для акцентов.',
      mockupAscii: `┌──────────────────┐
│ 09:41        📶🔋│
│████████████████ █│
│█ ♛ Добро пожал.█│
│█               █│
│█ ┌────────────┐█│
│█ │ ♛ 24       ││█│
│█ │  продажи   ││█│
│█ └────────────┘█│
│█ ┌────────────┐█│
│█ │ 📅 10:00   ││█│
│█ │ VIP-зал    ││█│
│█ └────────────┘█│
│████████████████ █│
│ ♛   📅   👤   📊│
└──────────────────┘`,
    },
    crm: {
      dashboard: 'Чёрный дашборд, золотые metric-числа. Serif шрифт для данных. Chart с gold stroke. Таблица с gold header.',
      sidebar: 'Чёрный сайдбар, gold иконки. Активный пункт — gold left-border. Логотип с gold акцентом.',
      tables: 'Чёрный фон, gold header-строка. Тонкие gold разделители. Gold бейджи для VIP-клиентов.',
      mockupAscii: `┌──┬──────────────────────────┐
│██│  ♛ Dashboard              │
│██├──────────────────────────┤
│  │ [♛24 sales] [♛ 56 cli ] │
│♛ │ [♛89% conv] [♛4.9 rate] │
│👤│                          │
│📅│  📈 ♛═══╱╲═══♛           │
│📊│       ╱    ╲             │
│⚙ │  ♛══╱══════╲══♛         │
│  │                          │
│  │  Client   Status  Date   │
│  │  Князев   ♛VIP    20.02  │
│  │  Графова  ♛prem.  19.02  │
└──┴──────────────────────────┘`,
    },
    rating: 9.1,
    tags: ['VIP', 'Люкс', 'Элегантный'],
  },
];

/* ─── Component ─── */

export default function BestDesignSolutionsDocument() {
  const router = useRouter();
  const contentRef = useRef<HTMLDivElement>(null);
  const [expandedKit, setExpandedKit] = useState<number | null>(1);

  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-best-design-solutions.pdf');
  };

  const handleDownloadExcel = async () => {
    const XLSX = await import('xlsx');
    const wb = XLSX.utils.book_new();
    const summaryData = designKits.map((kit) => ({
      '#': kit.id,
      'Название': kit.name,
      'Стиль': kit.style,
      'Описание': kit.description,
      'Рейтинг': kit.rating,
      'Теги': kit.tags.join(', '),
      'Шрифт заголовков': kit.fonts.heading,
      'Шрифт текста': kit.fonts.body,
    }));
    const ws1 = XLSX.utils.json_to_sheet(summaryData);
    ws1['!cols'] = [{ wch: 4 }, { wch: 22 }, { wch: 30 }, { wch: 60 }, { wch: 8 }, { wch: 30 }, { wch: 30 }, { wch: 30 }];
    XLSX.utils.book_append_sheet(wb, ws1, 'Комплекты');

    const paletteData = designKits.flatMap((kit) =>
      kit.palette.map((c) => ({
        'Комплект': kit.name,
        'Цвет': c.name,
        'HEX': c.hex,
      })),
    );
    const ws2 = XLSX.utils.json_to_sheet(paletteData);
    ws2['!cols'] = [{ wch: 22 }, { wch: 16 }, { wch: 10 }];
    XLSX.utils.book_append_sheet(wb, ws2, 'Палитры');

    const detailData = designKits.map((kit) => ({
      'Комплект': kit.name,
      'Лендинг: Hero': kit.landing.hero,
      'Лендинг: Layout': kit.landing.layout,
      'Лендинг: CTA': kit.landing.cta,
      'Мобильное: Главный экран': kit.mobile.homeScreen,
      'Мобильное: Навигация': kit.mobile.navigation,
      'Мобильное: Карточки': kit.mobile.cards,
      'CRM: Дашборд': kit.crm.dashboard,
      'CRM: Сайдбар': kit.crm.sidebar,
      'CRM: Таблицы': kit.crm.tables,
    }));
    const ws3 = XLSX.utils.json_to_sheet(detailData);
    ws3['!cols'] = [{ wch: 22 }, { wch: 50 }, { wch: 40 }, { wch: 40 }, { wch: 50 }, { wch: 40 }, { wch: 50 }, { wch: 50 }, { wch: 50 }, { wch: 50 }];
    XLSX.utils.book_append_sheet(wb, ws3, 'Детализация');

    XLSX.writeFile(wb, 'fitcrm-best-design-solutions.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">
                <Palette className="h-6 w-6 text-orange-600" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">
                  10 комплектов лучших дизайн-решений MyFitCRM
                </h1>
                <p className="text-sm text-muted mt-1">
                  Лендинг + Мобильное приложение + CRM-интерфейс | 10 вариантов стиля
                </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-8">
          {/* Summary metrics */}
          <div className="grid grid-cols-4 gap-4">
            <div className="bg-gradient-to-br from-primary/10 to-orange-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-primary">10</p>
              <p className="text-xs text-muted mt-1">Комплектов</p>
            </div>
            <div className="bg-blue-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-blue-700">30</p>
              <p className="text-xs text-muted mt-1">Мокапов (лендинг + моб + CRM)</p>
            </div>
            <div className="bg-purple-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-purple-700">60</p>
              <p className="text-xs text-muted mt-1">Цветов в палитрах</p>
            </div>
            <div className="bg-green-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-green-700">
                {(designKits.reduce((s, k) => s + k.rating, 0) / designKits.length).toFixed(1)}
              </p>
              <p className="text-xs text-muted mt-1">Средний рейтинг</p>
            </div>
          </div>

          {/* Comparison table */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Сводная таблица комплектов</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-4 py-3 font-medium text-muted border border-border">#</th>
                    <th className="text-left px-4 py-3 font-medium text-muted border border-border">Название</th>
                    <th className="text-left px-4 py-3 font-medium text-muted border border-border">Стиль</th>
                    <th className="text-center px-4 py-3 font-medium text-muted border border-border">Палитра</th>
                    <th className="text-center px-4 py-3 font-medium text-muted border border-border w-24">Рейтинг</th>
                    <th className="text-left px-4 py-3 font-medium text-muted border border-border">Теги</th>
                  </tr>
                </thead>
                <tbody>
                  {designKits.map((kit) => (
                    <tr key={kit.id} className="hover:bg-gray-50/50">
                      <td className="px-4 py-3 border border-border font-medium text-gray-900">{kit.id}</td>
                      <td className="px-4 py-3 border border-border">
                        <div className="flex items-center gap-2">
                          <div className="w-4 h-4 rounded shrink-0" style={{ backgroundColor: kit.accentColor }} />
                          <span className="font-medium text-gray-900">{kit.name}</span>
                        </div>
                      </td>
                      <td className="px-4 py-3 border border-border text-gray-600">{kit.style}</td>
                      <td className="px-4 py-3 border border-border">
                        <div className="flex justify-center gap-1">
                          {kit.palette.map((c) => (
                            <div
                              key={c.hex}
                              className="w-5 h-5 rounded-full border border-gray-200"
                              style={{ backgroundColor: c.hex }}
                              title={`${c.name}: ${c.hex}`}
                            />
                          ))}
                        </div>
                      </td>
                      <td className="px-4 py-3 border border-border text-center">
                        <div className="flex items-center justify-center gap-1">
                          <Star className="h-3.5 w-3.5 text-yellow-500 fill-yellow-500" />
                          <span className="font-bold text-gray-900">{kit.rating}</span>
                        </div>
                      </td>
                      <td className="px-4 py-3 border border-border">
                        <div className="flex gap-1 flex-wrap">
                          {kit.tags.map((tag) => (
                            <span
                              key={tag}
                              className={cn('text-[10px] font-medium px-2 py-0.5 rounded-full', kit.accentBg)}
                              style={{ color: kit.accentColor }}
                            >
                              {tag}
                            </span>
                          ))}
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Detailed kits */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Детальное описание комплектов</h2>
            <div className="space-y-4">
              {designKits.map((kit) => {
                const isExpanded = expandedKit === kit.id;
                return (
                  <div
                    key={kit.id}
                    className="border border-border rounded-xl overflow-hidden"
                  >
                    {/* Kit header */}
                    <button
                      onClick={() => setExpandedKit(isExpanded ? null : kit.id)}
                      className="w-full flex items-center justify-between px-6 py-4 hover:bg-gray-50/50 transition-colors text-left"
                    >
                      <div className="flex items-center gap-3">
                        <div
                          className="p-2 rounded-lg"
                          style={{ backgroundColor: kit.accentColor + '15' }}
                        >
                          <span style={{ color: kit.accentColor }}>{kit.icon}</span>
                        </div>
                        <div>
                          <div className="flex items-center gap-2">
                            <span className="text-xs font-bold text-muted">#{kit.id}</span>
                            <h3 className="font-semibold text-gray-900">{kit.name}</h3>
                            <span className="text-xs text-muted">| {kit.style}</span>
                          </div>
                          <p className="text-sm text-gray-500 mt-0.5 line-clamp-1">{kit.description}</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3 shrink-0 ml-4">
                        <div className="flex items-center gap-1">
                          <Star className="h-4 w-4 text-yellow-500 fill-yellow-500" />
                          <span className="text-sm font-bold">{kit.rating}</span>
                        </div>
                        {isExpanded ? (
                          <ChevronUp className="h-5 w-5 text-gray-400" />
                        ) : (
                          <ChevronDown className="h-5 w-5 text-gray-400" />
                        )}
                      </div>
                    </button>

                    {/* Kit content */}
                    {isExpanded && (
                      <div className="px-6 pb-6 space-y-6 border-t border-border pt-4">
                        {/* Description + palette */}
                        <div className="grid grid-cols-3 gap-6">
                          <div className="col-span-2">
                            <p className="text-sm text-gray-600 leading-relaxed">{kit.description}</p>
                            <div className="mt-3 flex gap-2">
                              {kit.tags.map((tag) => (
                                <span
                                  key={tag}
                                  className={cn('text-xs font-medium px-3 py-1 rounded-full', kit.accentBg)}
                                  style={{ color: kit.accentColor }}
                                >
                                  {tag}
                                </span>
                              ))}
                            </div>
                          </div>
                          <div>
                            <p className="text-xs font-medium text-muted mb-2">Палитра цветов</p>
                            <div className="space-y-1.5">
                              {kit.palette.map((c) => (
                                <div key={c.hex} className="flex items-center gap-2">
                                  <div
                                    className="w-6 h-6 rounded border border-gray-200 shrink-0"
                                    style={{ backgroundColor: c.hex }}
                                  />
                                  <span className="text-xs text-gray-600">{c.name}</span>
                                  <span className="text-xs text-muted ml-auto font-mono">{c.hex}</span>
                                </div>
                              ))}
                            </div>
                            <div className="mt-3 text-xs text-gray-500">
                              <p><span className="font-medium">Заголовки:</span> {kit.fonts.heading}</p>
                              <p><span className="font-medium">Текст:</span> {kit.fonts.body}</p>
                            </div>
                          </div>
                        </div>

                        {/* 3 sections: Landing, Mobile, CRM */}
                        <div className="grid grid-cols-3 gap-4">
                          {/* Landing */}
                          <div className="border border-border rounded-xl p-4">
                            <div className="flex items-center gap-2 mb-3">
                              <Monitor className="h-4 w-4 text-blue-600" />
                              <h4 className="text-sm font-semibold text-gray-900">Сайт-лендинг</h4>
                            </div>
                            <div className="space-y-2 text-xs text-gray-600">
                              <div>
                                <p className="font-medium text-gray-700">Hero-секция:</p>
                                <p>{kit.landing.hero}</p>
                              </div>
                              <div>
                                <p className="font-medium text-gray-700">Layout:</p>
                                <p>{kit.landing.layout}</p>
                              </div>
                              <div>
                                <p className="font-medium text-gray-700">CTA:</p>
                                <p>{kit.landing.cta}</p>
                              </div>
                              <div>
                                <p className="font-medium text-gray-700">Блоки:</p>
                                <ul className="list-disc ml-4 space-y-0.5">
                                  {kit.landing.features.map((f, i) => (
                                    <li key={i}>{f}</li>
                                  ))}
                                </ul>
                              </div>
                            </div>
                            <div className="mt-3 bg-gray-50 rounded-lg p-2 overflow-x-auto">
                              <pre className="text-[9px] leading-tight font-mono text-gray-500 whitespace-pre">
                                {kit.landing.mockupAscii}
                              </pre>
                            </div>
                          </div>

                          {/* Mobile */}
                          <div className="border border-border rounded-xl p-4">
                            <div className="flex items-center gap-2 mb-3">
                              <Smartphone className="h-4 w-4 text-green-600" />
                              <h4 className="text-sm font-semibold text-gray-900">Мобильное приложение</h4>
                            </div>
                            <div className="space-y-2 text-xs text-gray-600">
                              <div>
                                <p className="font-medium text-gray-700">Главный экран:</p>
                                <p>{kit.mobile.homeScreen}</p>
                              </div>
                              <div>
                                <p className="font-medium text-gray-700">Навигация:</p>
                                <p>{kit.mobile.navigation}</p>
                              </div>
                              <div>
                                <p className="font-medium text-gray-700">Карточки:</p>
                                <p>{kit.mobile.cards}</p>
                              </div>
                            </div>
                            <div className="mt-3 bg-gray-50 rounded-lg p-2 overflow-x-auto">
                              <pre className="text-[9px] leading-tight font-mono text-gray-500 whitespace-pre">
                                {kit.mobile.mockupAscii}
                              </pre>
                            </div>
                          </div>

                          {/* CRM */}
                          <div className="border border-border rounded-xl p-4">
                            <div className="flex items-center gap-2 mb-3">
                              <LayoutDashboard className="h-4 w-4 text-purple-600" />
                              <h4 className="text-sm font-semibold text-gray-900">CRM-интерфейс</h4>
                            </div>
                            <div className="space-y-2 text-xs text-gray-600">
                              <div>
                                <p className="font-medium text-gray-700">Дашборд:</p>
                                <p>{kit.crm.dashboard}</p>
                              </div>
                              <div>
                                <p className="font-medium text-gray-700">Сайдбар:</p>
                                <p>{kit.crm.sidebar}</p>
                              </div>
                              <div>
                                <p className="font-medium text-gray-700">Таблицы:</p>
                                <p>{kit.crm.tables}</p>
                              </div>
                            </div>
                            <div className="mt-3 bg-gray-50 rounded-lg p-2 overflow-x-auto">
                              <pre className="text-[9px] leading-tight font-mono text-gray-500 whitespace-pre">
                                {kit.crm.mockupAscii}
                              </pre>
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>

          {/* Recommendations */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Рекомендации по выбору</h2>
            <table className="w-full text-sm border-collapse">
              <thead>
                <tr className="bg-gray-50">
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border">Тип клуба</th>
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border">Рекомендуемый комплект</th>
                  <th className="text-left px-4 py-3 font-medium text-muted border border-border">Почему</th>
                </tr>
              </thead>
              <tbody>
                {[
                  { type: 'Универсальный фитнес-клуб', kit: '#1 FitPulse Orange', reason: 'Универсальный, энергичный, подходит для большинства клубов. Фирменный стиль MyFitCRM.' },
                  { type: 'Премиум / ночной клуб', kit: '#2 Midnight Gym', reason: 'Тёмная тема создаёт атмосферу эксклюзивности. Неоновые акценты запоминаются.' },
                  { type: 'Йога-студия / wellness', kit: '#3 Fresh Wellness', reason: 'Мягкие тона создают ощущение спокойствия и заботы о здоровье.' },
                  { type: 'CrossFit / единоборства', kit: '#4 Power Red', reason: 'Агрессивный стиль отражает силовую направленность клуба.' },
                  { type: 'Сетевой клуб (5+ точек)', kit: '#5 Azure Professional', reason: 'Корпоративный стиль подчёркивает масштаб и надёжность.' },
                  { type: 'Молодёжный клуб / студия', kit: '#6 Sunrise Gradient', reason: 'Яркие градиенты привлекают молодую аудиторию. Современно и модно.' },
                  { type: 'Бутик-студия / премиум', kit: '#7 Nordic Minimal', reason: 'Минимализм = премиальное позиционирование. Чистый и запоминающийся.' },
                  { type: 'EMS / VR-фитнес / инновации', kit: '#8 Vibrant Purple', reason: 'Hi-tech стиль отражает технологическую направленность.' },
                  { type: 'Бассейн / аква / SPA', kit: '#9 Ocean Calm', reason: 'Водная тематика органично дополняет специализацию.' },
                  { type: 'VIP-клуб / элитный', kit: '#10 Royal Gold', reason: 'Чёрно-золотой — классика люкса. Максимум элегантности.' },
                ].map((row, i) => (
                  <tr key={i} className="hover:bg-gray-50/50">
                    <td className="px-4 py-2.5 border border-border text-gray-900 font-medium">{row.type}</td>
                    <td className="px-4 py-2.5 border border-border">
                      <span className="font-medium text-primary">{row.kit}</span>
                    </td>
                    <td className="px-4 py-2.5 border border-border text-gray-600">{row.reason}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}
