'use client';

import { useRef } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft, FileDown, Printer, Table2, Palette, Star, TrendingUp, Eye, Zap, Shield, Heart, Crown, Dumbbell, Target } from 'lucide-react';
import { cn } from '@/lib/cn';

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

interface LogoConcept {
  id: number;
  name: string;
  style: string;
  description: string;
  colors: string[];
  colorNames: string[];
  fontPrimary: string;
  fontStyle: string;
  iconDescription: string;
  targetAudience: string;
  pros: string[];
  cons: string[];
  score: number;
  tags: string[];
}

const logoConcepts: LogoConcept[] = [
  {
    id: 1,
    name: 'MyFitCRM — Энергия',
    style: 'Динамичный минимализм',
    description: 'Буква «M» стилизована под бегущего человека с оранжевым градиентом. Символизирует движение, энергию и прогресс. «Fit» выделен жирным, «CRM» — тонким шрифтом.',
    colors: ['#FF6B00', '#FF9A3C', '#1A1A2E'],
    colorNames: ['Оранжевый', 'Светло-оранжевый', 'Тёмно-синий'],
    fontPrimary: 'Inter Bold + Inter Light',
    fontStyle: 'Sans-serif, геометрический',
    iconDescription: 'Бегущий человек из буквы M',
    targetAudience: 'Энергичные фитнес-клубы, кроссфит',
    pros: ['Динамичный и запоминающийся', 'Хорошо масштабируется', 'Ассоциация с фитнесом'],
    cons: ['Может быть слишком спортивным для SPA/йога', 'Сложнее в монохроме'],
    score: 9.2,
    tags: ['Энергия', 'Движение', 'Минимализм'],
  },
  {
    id: 2,
    name: 'MyFitCRM — Пульс',
    style: 'Tech + Health',
    description: 'Линия пульса (ЭКГ) проходит через текст «MyFitCRM», заменяя подчёркивание. Символизирует здоровье и цифровые технологии. Неоново-голубой акцент на тёмном фоне.',
    colors: ['#00E5FF', '#0A1628', '#FFFFFF'],
    colorNames: ['Неон-голубой', 'Тёмный Navy', 'Белый'],
    fontPrimary: 'Space Grotesk',
    fontStyle: 'Tech, современный',
    iconDescription: 'Линия пульса (ЭКГ) через текст',
    targetAudience: 'Premium-клубы, технологичные сети',
    pros: ['Уникальная концепция', 'Отлично на тёмном фоне', 'Ассоциация со здоровьем + tech'],
    cons: ['Может потеряться на светлом фоне', 'Слишком «tech» для традиционных клубов'],
    score: 8.8,
    tags: ['Технологии', 'Здоровье', 'Премиум'],
  },
  {
    id: 3,
    name: 'MyFitCRM — Щит',
    style: 'Корпоративный + надёжность',
    description: 'Геральдический щит с гантелей внутри. Текст «MyFitCRM» расположен справа. Синий + золотой цвета передают надёжность и доверие. Шрифт с засечками для заголовка.',
    colors: ['#1565C0', '#FFB300', '#F5F5F5'],
    colorNames: ['Корпоративный синий', 'Золотой', 'Светло-серый'],
    fontPrimary: 'Plus Jakarta Sans',
    fontStyle: 'Корпоративный, уверенный',
    iconDescription: 'Щит с гантелей',
    targetAudience: 'Крупные сети, B2B клиенты',
    pros: ['Вызывает доверие', 'Корпоративный вид', 'Универсален для B2B'],
    cons: ['Менее «фитнес», больше «бизнес»', 'Может казаться скучным'],
    score: 8.5,
    tags: ['Надёжность', 'B2B', 'Корпоратив'],
  },
  {
    id: 4,
    name: 'MyFitCRM — Leaf',
    style: 'Wellness + Eco',
    description: 'Лист/росток растёт из буквы «F», символизируя рост и здоровый образ жизни. Зелёная палитра. Мягкие скруглённые формы. Подходит для йога-студий и wellness-центров.',
    colors: ['#2E7D32', '#81C784', '#FAFAFA'],
    colorNames: ['Тёмно-зелёный', 'Светло-зелёный', 'Белый'],
    fontPrimary: 'Nunito',
    fontStyle: 'Мягкий, дружелюбный',
    iconDescription: 'Лист/росток из буквы F',
    targetAudience: 'Йога-студии, wellness-центры, SPA',
    pros: ['Спокойный и приятный', 'Ассоциация с ЗОЖ', 'Отлично для wellness'],
    cons: ['Не подходит для «хардкор» залов', 'Может казаться слишком мягким'],
    score: 8.0,
    tags: ['Wellness', 'Экология', 'Рост'],
  },
  {
    id: 5,
    name: 'MyFitCRM — Flame',
    style: 'Агрессивный спортивный',
    description: 'Языки пламени формируют букву «M». Красно-оранжевый градиент на тёмном фоне. Агрессивный, мощный стиль. Шрифт Oswald с капсом для «MYFITCRM».',
    colors: ['#D32F2F', '#FF6F00', '#121212'],
    colorNames: ['Красный', 'Огненный', 'Чёрный'],
    fontPrimary: 'Oswald Bold',
    fontStyle: 'Агрессивный, uppercase',
    iconDescription: 'Пламя в форме буквы M',
    targetAudience: 'Бокс, MMA, кроссфит, силовые залы',
    pros: ['Мощный, запоминающийся', 'Энергичный и дерзкий', 'Выделяется среди конкурентов'],
    cons: ['Не подходит для wellness/йога', 'Может отпугнуть «мягкую» аудиторию'],
    score: 8.3,
    tags: ['Сила', 'Мощь', 'Агрессия'],
  },
  {
    id: 6,
    name: 'MyFitCRM — Gradient Wave',
    style: 'Современный градиентный',
    description: 'Волнообразная форма с плавным градиентом sunset (розовый → оранжевый → жёлтый). Текст «MyFitCRM» с акцентом на «Fit». Молодёжный, Instagram-friendly дизайн.',
    colors: ['#FF5722', '#FF9800', '#FF4081'],
    colorNames: ['Коралловый', 'Оранжевый', 'Розовый'],
    fontPrimary: 'Manrope',
    fontStyle: 'Современный, округлый',
    iconDescription: 'Градиентная волна (sunset)',
    targetAudience: 'Молодёжные студии, фитнес-стартапы',
    pros: ['Яркий и модный', 'Instagram-friendly', 'Привлекает молодёжь'],
    cons: ['Может быстро устареть', 'Сложнее в монохромной печати'],
    score: 7.8,
    tags: ['Тренды', 'Градиент', 'Молодёжь'],
  },
  {
    id: 7,
    name: 'MyFitCRM — Nordic',
    style: 'Скандинавский минимализм',
    description: 'Максимально чистый дизайн. Тонкие линии, много белого пространства. Иконка — абстрактный ромб из четырёх элементов (тренер, клиент, расписание, продажи). Чёрно-белый с одним акцентом.',
    colors: ['#212121', '#757575', '#FF6B00'],
    colorNames: ['Чёрный', 'Серый', 'Акцент-оранжевый'],
    fontPrimary: 'DM Sans',
    fontStyle: 'Чистый, лаконичный',
    iconDescription: 'Абстрактный ромб из 4 модулей',
    targetAudience: 'Премиум-клубы, скандинавский стиль',
    pros: ['Вне трендов (timeless)', 'Легко масштабируется', 'Элегантный'],
    cons: ['Может казаться «пустым»', 'Сложнее донести «фитнес»'],
    score: 8.7,
    tags: ['Минимализм', 'Элегантность', 'Timeless'],
  },
  {
    id: 8,
    name: 'MyFitCRM — Crown',
    style: 'Люксовый',
    description: 'Корона над буквой «M» в чёрно-золотой палитре. Шрифт Playfair Display для «My», Lato для «FitCRM». Передаёт эксклюзивность и премиальное качество.',
    colors: ['#FFB300', '#1A1A1A', '#F5F0E6'],
    colorNames: ['Золотой', 'Чёрный', 'Слоновая кость'],
    fontPrimary: 'Playfair Display + Lato',
    fontStyle: 'Serif + Sans-serif, контраст',
    iconDescription: 'Корона над буквой M',
    targetAudience: 'VIP-клубы, luxury фитнес',
    pros: ['Премиальное восприятие', 'Выделяется из масс-маркета', 'Узнаваемый стиль'],
    cons: ['Не подходит для бюджетных залов', 'Может казаться «высокомерным»'],
    score: 8.1,
    tags: ['Люкс', 'Премиум', 'Эксклюзив'],
  },
  {
    id: 9,
    name: 'MyFitCRM — Target',
    style: 'Целеориентированный',
    description: 'Мишень/цель с галочкой в центре. Символизирует достижение целей клиентов. Фиолетовый основной цвет с белым. Шрифт Outfit — современный и читаемый.',
    colors: ['#7B1FA2', '#CE93D8', '#FFFFFF'],
    colorNames: ['Фиолетовый', 'Лавандовый', 'Белый'],
    fontPrimary: 'Outfit',
    fontStyle: 'Геометрический, современный',
    iconDescription: 'Мишень с галочкой в центре',
    targetAudience: 'Клубы с фокусом на результат',
    pros: ['Сильная метафора «достижения цели»', 'Уникальный цвет в нише', 'Запоминающийся'],
    cons: ['Фиолетовый — нетипичен для фитнеса', 'Мишень может ассоциироваться с военным'],
    score: 7.9,
    tags: ['Цели', 'Результат', 'Фокус'],
  },
  {
    id: 10,
    name: 'MyFitCRM — Ocean',
    style: 'Спокойный бирюзовый',
    description: 'Волна/капля воды с градиентом teal → aqua. Ассоциация с бассейнами, SPA, water-фитнес. Шрифт Poppins — округлый и дружелюбный. Лёгкий и свежий дизайн.',
    colors: ['#00897B', '#4DB6AC', '#E0F2F1'],
    colorNames: ['Тёмный teal', 'Бирюзовый', 'Мятный'],
    fontPrimary: 'Poppins',
    fontStyle: 'Мягкий, дружелюбный',
    iconDescription: 'Волна/капля воды',
    targetAudience: 'Клубы с бассейном, water-фитнес, SPA',
    pros: ['Свежий и приятный', 'Отлично для aqua-фитнеса', 'Спокойное восприятие'],
    cons: ['Ограниченная ниша', 'Не подходит для «силовых» залов'],
    score: 7.6,
    tags: ['Вода', 'Свежесть', 'SPA'],
  },
];

const styleIcons: Record<string, typeof Palette> = {
  'Динамичный минимализм': Zap,
  'Tech + Health': TrendingUp,
  'Корпоративный + надёжность': Shield,
  'Wellness + Eco': Heart,
  'Агрессивный спортивный': Dumbbell,
  'Современный градиентный': Eye,
  'Скандинавский минимализм': Target,
  'Люксовый': Crown,
  'Целеориентированный': Target,
  'Спокойный бирюзовый': Heart,
};

const comparisonCriteria = [
  { name: 'Узнаваемость', key: 'recognition' },
  { name: 'Масштабируемость', key: 'scalability' },
  { name: 'Универсальность', key: 'versatility' },
  { name: 'Запоминаемость', key: 'memorability' },
  { name: 'Ассоциация с фитнесом', key: 'fitness' },
];

const comparisonScores: Record<string, number[]> = {
  recognition:  [9, 9, 8, 7, 9, 8, 8, 8, 7, 7],
  scalability:  [9, 8, 9, 9, 7, 7, 10, 8, 8, 8],
  versatility:  [8, 7, 9, 6, 5, 7, 9, 6, 8, 6],
  memorability: [9, 9, 7, 8, 9, 8, 7, 9, 8, 7],
  fitness:      [10, 8, 7, 8, 10, 7, 6, 6, 7, 8],
};

function ScoreBar({ score, max = 10 }: { score: number; max?: number }) {
  const pct = (score / max) * 100;
  const color = score >= 9 ? '#22c55e' : score >= 8 ? '#3b82f6' : score >= 7 ? '#f59e0b' : '#ef4444';
  return (
    <div className="flex items-center gap-2">
      <div className="flex-1 bg-gray-100 rounded-full h-2.5">
        <div className="h-2.5 rounded-full transition-all" style={{ width: `${pct}%`, backgroundColor: color }} />
      </div>
      <span className="text-xs font-bold w-8 text-right" style={{ color }}>{score}</span>
    </div>
  );
}

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

  const topPicks = [...logoConcepts].sort((a, b) => b.score - a.score).slice(0, 3) as [LogoConcept, LogoConcept, LogoConcept];

  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('myfitcrm-logo-examples.pdf');
  };

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

    const overviewData = logoConcepts.map((c) => ({
      '#': c.id,
      'Название': c.name,
      'Стиль': c.style,
      'Описание': c.description,
      'Основные цвета': c.colorNames.join(', '),
      'HEX': c.colors.join(', '),
      'Шрифт': c.fontPrimary,
      'Иконка': c.iconDescription,
      'Аудитория': c.targetAudience,
      'Оценка': c.score,
    }));
    const ws1 = XLSX.utils.json_to_sheet(overviewData);
    ws1['!cols'] = [{ wch: 4 }, { wch: 28 }, { wch: 28 }, { wch: 60 }, { wch: 30 }, { wch: 30 }, { wch: 28 }, { wch: 30 }, { wch: 30 }, { wch: 8 }];
    XLSX.utils.book_append_sheet(wb, ws1, 'Обзор');

    const prosConsData = logoConcepts.flatMap((c) => [
      ...c.pros.map((p) => ({ 'Логотип': c.name, 'Тип': 'Плюс', 'Описание': p })),
      ...c.cons.map((p) => ({ 'Логотип': c.name, 'Тип': 'Минус', 'Описание': p })),
    ]);
    const ws2 = XLSX.utils.json_to_sheet(prosConsData);
    ws2['!cols'] = [{ wch: 28 }, { wch: 10 }, { wch: 50 }];
    XLSX.utils.book_append_sheet(wb, ws2, 'Плюсы и минусы');

    const compData = logoConcepts.map((c, i) => {
      const row: Record<string, string | number> = { 'Логотип': c.name };
      comparisonCriteria.forEach((cr) => {
        row[cr.name] = comparisonScores[cr.key]?.[i] ?? 0;
      });
      row['Итого'] = c.score;
      return row;
    });
    const ws3 = XLSX.utils.json_to_sheet(compData);
    ws3['!cols'] = [{ wch: 28 }, { wch: 16 }, { wch: 18 }, { wch: 16 }, { wch: 16 }, { wch: 24 }, { wch: 8 }];
    XLSX.utils.book_append_sheet(wb, ws3, 'Сравнение');

    XLSX.writeFile(wb, 'myfitcrm-logo-examples.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-violet-50 p-2.5 rounded-lg">
                <Palette className="h-6 w-6 text-violet-600" />
              </div>
              <div>
                <h1 className="text-xl font-bold text-gray-900">
                  10 примеров логотипа для CRM-системы MyFitCRM
                </h1>
                <p className="text-sm text-muted mt-1">
                  Дата: {LAST_UPDATE} | 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-violet-100 to-purple-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-violet-700">10</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">{topPicks[0].score}</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">5</p>
              <p className="text-xs text-muted mt-1">Критериев оценки</p>
            </div>
            <div className="bg-orange-50 rounded-xl p-4 text-center">
              <p className="text-3xl font-bold text-orange-700">30+</p>
              <p className="text-xs text-muted mt-1">Уникальных цветов</p>
            </div>
          </div>

          {/* Top 3 recommendations */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">ТОП-3 рекомендации</h2>
            <div className="grid grid-cols-3 gap-4">
              {topPicks.map((concept, idx) => (
                <div
                  key={concept.id}
                  className={cn(
                    'rounded-xl border-2 p-5',
                    idx === 0 ? 'border-yellow-400 bg-yellow-50/50' : 'border-border bg-card',
                  )}
                >
                  <div className="flex items-center justify-between mb-3">
                    <span className={cn(
                      'text-xs font-bold px-2 py-0.5 rounded-full',
                      idx === 0 ? 'bg-yellow-400 text-yellow-900' : idx === 1 ? 'bg-gray-200 text-gray-700' : 'bg-orange-100 text-orange-800',
                    )}>
                      #{idx + 1}
                    </span>
                    <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 text-gray-900">{concept.score}</span>
                    </div>
                  </div>
                  <h3 className="font-semibold text-gray-900 text-sm mb-1">{concept.name}</h3>
                  <p className="text-xs text-muted mb-3">{concept.style}</p>
                  <div className="flex gap-1.5 mb-3">
                    {concept.colors.map((color, ci) => (
                      <div key={ci} className="flex items-center gap-1">
                        <div className="w-5 h-5 rounded-md border border-gray-200" style={{ backgroundColor: color }} />
                        <span className="text-[10px] text-muted">{color}</span>
                      </div>
                    ))}
                  </div>
                  <p className="text-xs text-gray-600">{concept.iconDescription}</p>
                </div>
              ))}
            </div>
          </div>

          {/* All 10 concepts detailed */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Все 10 концепций логотипа</h2>
            <div className="space-y-4">
              {logoConcepts.map((concept) => {
                const Icon = styleIcons[concept.style] || Palette;
                return (
                  <div key={concept.id} className="border border-border rounded-xl p-5 hover:shadow-sm transition-shadow">
                    <div className="flex items-start gap-4">
                      {/* Color preview */}
                      <div className="w-16 h-16 rounded-xl flex-shrink-0 flex items-center justify-center relative overflow-hidden">
                        <div className="absolute inset-0" style={{ background: `linear-gradient(135deg, ${concept.colors[0]}, ${concept.colors[1] || concept.colors[0]})` }} />
                        <Icon className="h-7 w-7 text-white relative z-10 drop-shadow" />
                      </div>

                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-3 mb-1">
                          <h3 className="font-semibold text-gray-900">
                            {concept.id}. {concept.name}
                          </h3>
                          <span className="text-xs font-medium px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">
                            {concept.style}
                          </span>
                          <div className="ml-auto flex items-center gap-1">
                            <Star className="h-3.5 w-3.5 text-yellow-500 fill-yellow-500" />
                            <span className="text-sm font-bold text-gray-900">{concept.score}/10</span>
                          </div>
                        </div>

                        <p className="text-sm text-gray-600 mb-3">{concept.description}</p>

                        <div className="grid grid-cols-4 gap-4 text-xs mb-3">
                          <div>
                            <span className="text-muted block mb-1">Цвета</span>
                            <div className="flex gap-1">
                              {concept.colors.map((c, i) => (
                                <div key={i} className="group relative">
                                  <div className="w-6 h-6 rounded-md border border-gray-200" style={{ backgroundColor: c }} />
                                </div>
                              ))}
                            </div>
                            <span className="text-[10px] text-muted mt-0.5 block">{concept.colorNames.join(' / ')}</span>
                          </div>
                          <div>
                            <span className="text-muted block mb-1">Шрифт</span>
                            <span className="font-medium text-gray-900">{concept.fontPrimary}</span>
                            <span className="text-muted block">{concept.fontStyle}</span>
                          </div>
                          <div>
                            <span className="text-muted block mb-1">Иконка</span>
                            <span className="text-gray-900">{concept.iconDescription}</span>
                          </div>
                          <div>
                            <span className="text-muted block mb-1">Аудитория</span>
                            <span className="text-gray-900">{concept.targetAudience}</span>
                          </div>
                        </div>

                        <div className="flex gap-6 text-xs">
                          <div className="flex-1">
                            <span className="text-green-700 font-medium block mb-1">Плюсы:</span>
                            <ul className="space-y-0.5">
                              {concept.pros.map((p, i) => (
                                <li key={i} className="text-gray-600 flex items-start gap-1">
                                  <span className="text-green-500 mt-0.5">+</span> {p}
                                </li>
                              ))}
                            </ul>
                          </div>
                          <div className="flex-1">
                            <span className="text-red-700 font-medium block mb-1">Минусы:</span>
                            <ul className="space-y-0.5">
                              {concept.cons.map((p, i) => (
                                <li key={i} className="text-gray-600 flex items-start gap-1">
                                  <span className="text-red-500 mt-0.5">-</span> {p}
                                </li>
                              ))}
                            </ul>
                          </div>
                        </div>

                        <div className="flex gap-1.5 mt-2">
                          {concept.tags.map((tag) => (
                            <span key={tag} className="text-[10px] px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 font-medium">
                              {tag}
                            </span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </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-3 py-2.5 font-medium text-muted border border-border sticky left-0 bg-gray-50 min-w-[180px]">Логотип</th>
                    {comparisonCriteria.map((cr) => (
                      <th key={cr.key} className="text-center px-3 py-2.5 font-medium text-muted border border-border min-w-[130px]">
                        {cr.name}
                      </th>
                    ))}
                    <th className="text-center px-3 py-2.5 font-medium text-muted border border-border w-20">Итого</th>
                  </tr>
                </thead>
                <tbody>
                  {logoConcepts.map((concept, idx) => (
                    <tr key={concept.id} className={cn('hover:bg-gray-50/50', idx < 3 && 'bg-yellow-50/30')}>
                      <td className="px-3 py-2 border border-border font-medium text-gray-900 sticky left-0 bg-inherit">
                        <div className="flex items-center gap-2">
                          <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: concept.colors[0] }} />
                          <span className="truncate">{concept.name.replace('MyFitCRM — ', '')}</span>
                        </div>
                      </td>
                      {comparisonCriteria.map((cr) => (
                        <td key={cr.key} className="px-3 py-2 border border-border">
                          <ScoreBar score={comparisonScores[cr.key]?.[idx] ?? 0} />
                        </td>
                      ))}
                      <td className="px-3 py-2 border border-border text-center">
                        <span className={cn(
                          'font-bold text-sm',
                          concept.score >= 9 ? 'text-green-700' : concept.score >= 8 ? 'text-blue-700' : 'text-orange-700',
                        )}>
                          {concept.score}
                        </span>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {/* Color palette overview */}
          <div>
            <h2 className="text-lg font-semibold text-gray-900 mb-4">Палитра цветов всех концепций</h2>
            <div className="grid grid-cols-5 gap-3">
              {logoConcepts.map((concept) => (
                <div key={concept.id} className="border border-border rounded-lg p-3">
                  <p className="text-xs font-medium text-gray-900 mb-2 truncate">{concept.name.replace('MyFitCRM — ', '')}</p>
                  <div className="flex gap-1 mb-2">
                    {concept.colors.map((c, i) => (
                      <div key={i} className="flex-1 h-8 rounded-md first:rounded-l-lg last:rounded-r-lg" style={{ backgroundColor: c }} />
                    ))}
                  </div>
                  <div className="space-y-0.5">
                    {concept.colors.map((c, i) => (
                      <p key={i} className="text-[10px] text-muted font-mono">{c} — {concept.colorNames[i]}</p>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Font 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-2.5 font-medium text-muted border border-border">Концепция</th>
                  <th className="text-left px-4 py-2.5 font-medium text-muted border border-border">Основной шрифт</th>
                  <th className="text-left px-4 py-2.5 font-medium text-muted border border-border">Стиль</th>
                  <th className="text-left px-4 py-2.5 font-medium text-muted border border-border">Аудитория</th>
                </tr>
              </thead>
              <tbody>
                {logoConcepts.map((concept) => (
                  <tr key={concept.id} className="hover:bg-gray-50/50">
                    <td className="px-4 py-2 border border-border text-gray-900 font-medium">
                      <div className="flex items-center gap-2">
                        <div className="w-3 h-3 rounded-sm" style={{ backgroundColor: concept.colors[0] }} />
                        {concept.name.replace('MyFitCRM — ', '')}
                      </div>
                    </td>
                    <td className="px-4 py-2 border border-border text-gray-600">{concept.fontPrimary}</td>
                    <td className="px-4 py-2 border border-border text-gray-600">{concept.fontStyle}</td>
                    <td className="px-4 py-2 border border-border text-gray-600">{concept.targetAudience}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>

          {/* Final recommendation */}
          <div className="bg-gradient-to-r from-violet-50 to-purple-50 rounded-xl p-6 border border-violet-200">
            <h2 className="text-lg font-semibold text-gray-900 mb-3">Итоговая рекомендация</h2>
            <div className="space-y-3 text-sm text-gray-700">
              <p>
                <strong>Для MyFitCRM как универсальной CRM-платформы</strong> рекомендуется концепция
                <span className="font-bold text-violet-700"> #1 «Энергия»</span> (9.2 балла) — она сочетает
                динамичность фитнес-индустрии с минималистичным подходом, который хорошо масштабируется на все носители.
              </p>
              <p>
                <strong>Альтернатива для премиум-сегмента:</strong>
                <span className="font-bold text-violet-700"> #2 «Пульс»</span> (8.8) — tech-ориентированный стиль
                подчёркивает цифровую природу CRM-продукта и хорошо работает на тёмных интерфейсах.
              </p>
              <p>
                <strong>Для максимальной универсальности:</strong>
                <span className="font-bold text-violet-700"> #7 «Nordic»</span> (8.7) — минимализм без привязки к трендам
                обеспечивает долгосрочную актуальность логотипа.
              </p>
              <p className="text-xs text-muted mt-4">
                Рекомендуется провести A/B тестирование ТОП-3 концепций на целевой аудитории (владельцы фитнес-клубов)
                перед финальным выбором.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
