"use client"

import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export function ColorsDemo() {
  return (
    <div className="space-y-6">
      {/* Основная палитра */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Основная цветовая палитра</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Primary цвета */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Primary (Основной)</h4>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="space-y-2">
                <div className="h-16 w-full rounded-lg" style={{background: 'oklch(0.65 0.28 315)'}}></div>
                <div className="text-white text-xs font-mono">primary</div>
                <div className="text-white/60 text-xs">oklch(0.65 0.28 315)</div>
              </div>
              <div className="space-y-2">
                <div className="h-16 w-full bg-primary-foreground rounded-lg"></div>
                <div className="text-white text-xs font-mono">primary-foreground</div>
                <div className="text-white/60 text-xs">oklch(0.985 0 0)</div>
              </div>
            </div>
          </div>

          {/* Secondary цвета */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Secondary (Вторичный)</h4>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="space-y-2">
                <div className="h-16 w-full bg-secondary rounded-lg"></div>
                <div className="text-white text-xs font-mono">secondary</div>
                <div className="text-white/60 text-xs">oklch(0.94 0.08 315)</div>
              </div>
              <div className="space-y-2">
                <div className="h-16 w-full bg-secondary-foreground rounded-lg"></div>
                <div className="text-white text-xs font-mono">secondary-foreground</div>
                <div className="text-white/60 text-xs">oklch(0.205 0 0)</div>
              </div>
            </div>
          </div>

          {/* Accent цвета */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Accent (Акцентный)</h4>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="space-y-2">
                <div className="h-16 w-full bg-accent rounded-lg"></div>
                <div className="text-white text-xs font-mono">accent</div>
                <div className="text-white/60 text-xs">oklch(0.90 0.12 315)</div>
              </div>
              <div className="space-y-2">
                <div className="h-16 w-full bg-accent-foreground rounded-lg"></div>
                <div className="text-white text-xs font-mono">accent-foreground</div>
                <div className="text-white/60 text-xs">oklch(0.205 0 0)</div>
              </div>
            </div>
          </div>

          {/* Destructive цвета */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-4">Destructive (Деструктивный)</h4>
            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              <div className="space-y-2">
                <div className="h-16 w-full bg-destructive rounded-lg"></div>
                <div className="text-white text-xs font-mono">destructive</div>
                <div className="text-white/60 text-xs">oklch(0.577 0.245 27.325)</div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Нейтральные цвета */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Нейтральные цвета</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Background цвета */}
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Background</h4>
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-background rounded-lg border border-white/20"></div>
                  <div>
                    <div className="text-white text-xs font-mono">background</div>
                    <div className="text-white/60 text-xs">oklch(0.98 0.02 320)</div>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-foreground rounded-lg"></div>
                  <div>
                    <div className="text-white text-xs font-mono">foreground</div>
                    <div className="text-white/60 text-xs">oklch(0.145 0 0)</div>
                  </div>
                </div>
              </div>
            </div>

            {/* Muted цвета */}
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Muted</h4>
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-muted rounded-lg"></div>
                  <div>
                    <div className="text-white text-xs font-mono">muted</div>
                    <div className="text-white/60 text-xs">oklch(0.94 0.05 315)</div>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-muted-foreground rounded-lg"></div>
                  <div>
                    <div className="text-white text-xs font-mono">muted-foreground</div>
                    <div className="text-white/60 text-xs">oklch(0.556 0 0)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Border и input цвета */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Border & Input</h4>
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-border rounded-lg"></div>
                  <div>
                    <div className="text-white text-xs font-mono">border</div>
                    <div className="text-white/60 text-xs">oklch(0.90 0.08 315)</div>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-input rounded-lg"></div>
                  <div>
                    <div className="text-white text-xs font-mono">input</div>
                    <div className="text-white/60 text-xs">oklch(0.96 0.05 315)</div>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-ring rounded-lg"></div>
                  <div>
                    <div className="text-white text-xs font-mono">ring</div>
                    <div className="text-white/60 text-xs">oklch(0.65 0.28 315)</div>
                  </div>
                </div>
              </div>
            </div>

            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Card & Popover</h4>
              <div className="space-y-3">
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-card rounded-lg border border-white/20"></div>
                  <div>
                    <div className="text-white text-xs font-mono">card</div>
                    <div className="text-white/60 text-xs">oklch(1 0 0)</div>
                  </div>
                </div>
                <div className="flex items-center space-x-3">
                  <div className="h-12 w-12 bg-popover rounded-lg border border-white/20"></div>
                  <div>
                    <div className="text-white text-xs font-mono">popover</div>
                    <div className="text-white/60 text-xs">oklch(1 0 0)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Градиенты */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Градиенты</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* Основные градиенты */}
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Основные градиенты</h4>
              <div className="space-y-4">
                <div>
                  <div className="h-16 w-full gradient-purple rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-purple</div>
                  <div className="text-white/60 text-xs">Основной фиолетовый градиент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-purple-light rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-purple-light</div>
                  <div className="text-white/60 text-xs">Светлый фиолетовый градиент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full bg-gradient-smooth rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">bg-gradient-smooth</div>
                  <div className="text-white/60 text-xs">Темный градиент для фона (теперь galaxy!)</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-sunset rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-sunset</div>
                  <div className="text-white/60 text-xs">Закатный оранжево-розовый градиент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-ocean rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-ocean</div>
                  <div className="text-white/60 text-xs">Океанический сине-бирюзовый градиент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-emerald rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-emerald</div>
                  <div className="text-white/60 text-xs">Изумрудно-зеленый градиент</div>
                </div>
              </div>
            </div>
            
            {/* Новые креативные градиенты */}
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Креативные градиенты</h4>
              <div className="space-y-4">
                <div>
                  <div className="h-16 w-full gradient-cosmic rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-cosmic</div>
                  <div className="text-white/60 text-xs">Космический фиолетово-синий градиент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-fire rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-fire</div>
                  <div className="text-white/60 text-xs">Огненный красно-оранжевый градиент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-aurora rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-aurora</div>
                  <div className="text-white/60 text-xs">Северное сияние - многоцветный градиент</div>
                </div>
              </div>
            </div>
            
            {/* Космические кастомные градиенты */}
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Космические кастомные градиенты</h4>
              <div className="space-y-4">
                <div>
                  <div className="h-16 w-full gradient-corporate rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-corporate</div>
                  <div className="text-white/60 text-xs">Корпоративный космос - строгий деловой стиль</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-nebula rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-nebula</div>
                  <div className="text-white/60 text-xs">Туманность - яркие космические цвета</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-galaxy rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-galaxy</div>
                  <div className="text-white/60 text-xs">Галактика - сложный многоцветный переход</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-starfield rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-starfield</div>
                  <div className="text-white/60 text-xs">Звездное поле - темный минималистичный</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-quantum rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-quantum</div>
                  <div className="text-white/60 text-xs">Квантовый - энергичный научный стиль</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-void rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-void</div>
                  <div className="text-white/60 text-xs">Пустота - ультра-темный космос</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-supernova rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-supernova</div>
                  <div className="text-white/60 text-xs">Сверхновая - яркий взрывной градиент</div>
                </div>
              </div>
            </div>
            
            {/* Утонченные космические акценты */}
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Утонченные космические акценты</h4>
              <div className="space-y-4">
                <div>
                  <div className="h-16 w-full gradient-corporate-accent rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-corporate-accent</div>
                  <div className="text-white/60 text-xs">Сдержанный корпоративный акцент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-nebula-accent rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-nebula-accent</div>
                  <div className="text-white/60 text-xs">Мягкий туманный акцент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-galaxy-accent rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-galaxy-accent</div>
                  <div className="text-white/60 text-xs">Элегантный галактический акцент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-starfield-accent rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-starfield-accent</div>
                  <div className="text-white/60 text-xs">Тонкий звездный акцент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-quantum-accent rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-quantum-accent</div>
                  <div className="text-white/60 text-xs">Умеренный квантовый акцент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-void-accent rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-void-accent</div>
                  <div className="text-white/60 text-xs">Глубокий пустотный акцент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-supernova-accent rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-supernova-accent</div>
                  <div className="text-white/60 text-xs">Приглушенный взрывной акцент</div>
                </div>
                
                <div>
                  <div className="h-16 w-full gradient-ethereal rounded-lg mb-2"></div>
                  <div className="text-white text-xs font-mono">gradient-ethereal</div>
                  <div className="text-white/60 text-xs">Восхитительный эфирный градиент</div>
                </div>
              </div>
            </div>

            {/* Текстовые градиенты */}
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Текстовые градиенты</h4>
              <div className="space-y-4">
                <div>
                  <div className="text-2xl font-bold text-gradient-bright mb-2">
                    Текст с ярким градиентом
                  </div>
                  <div className="text-white text-xs font-mono">text-gradient-bright</div>
                </div>
                
                <div>
                  <div className="text-2xl font-bold text-gradient mb-2">
                    Текст с обычным градиентом
                  </div>
                  <div className="text-white text-xs font-mono">text-gradient</div>
                </div>
                
                <div>
                  <div className="text-2xl font-bold glow-text mb-2">
                    Текст с свечением
                  </div>
                  <div className="text-white text-xs font-mono">glow-text</div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Прозрачности белого */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Прозрачности белого цвета</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
            {[
              { opacity: '100', class: 'text-white', bg: 'bg-white' },
              { opacity: '90', class: 'text-white/90', bg: 'bg-white/90' },
              { opacity: '80', class: 'text-white/80', bg: 'bg-white/80' },
              { opacity: '70', class: 'text-white/70', bg: 'bg-white/70' },
              { opacity: '60', class: 'text-white/60', bg: 'bg-white/60' },
              { opacity: '50', class: 'text-white/50', bg: 'bg-white/50' },
              { opacity: '40', class: 'text-white/40', bg: 'bg-white/40' },
              { opacity: '30', class: 'text-white/30', bg: 'bg-white/30' },
              { opacity: '20', class: 'text-white/20', bg: 'bg-white/20' },
              { opacity: '10', class: 'text-white/10', bg: 'bg-white/10' },
            ].map((item) => (
              <div key={item.opacity} className="space-y-2">
                <div className={`h-12 w-full ${item.bg} rounded-lg border border-white/20`}></div>
                <div className="text-white text-xs text-center">
                  {item.opacity}%
                </div>
                <div className="text-white/60 text-xs font-mono text-center">
                  {item.class}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Статусные цвета */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Статусные цвета</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="space-y-3">
              <h4 className="text-white/90 text-sm font-medium">Успех</h4>
              <div className="space-y-2">
                <div className="h-12 w-full bg-green-500 rounded-lg"></div>
                <div className="text-white text-xs font-mono">green-500</div>
                <div className="text-green-400 text-sm">Успешная операция</div>
              </div>
            </div>

            <div className="space-y-3">
              <h4 className="text-white/90 text-sm font-medium">Предупреждение</h4>
              <div className="space-y-2">
                <div className="h-12 w-full bg-yellow-500 rounded-lg"></div>
                <div className="text-white text-xs font-mono">yellow-500</div>
                <div className="text-yellow-400 text-sm">Требует внимания</div>
              </div>
            </div>

            <div className="space-y-3">
              <h4 className="text-white/90 text-sm font-medium">Ошибка</h4>
              <div className="space-y-2">
                <div className="h-12 w-full bg-red-500 rounded-lg"></div>
                <div className="text-white text-xs font-mono">red-500</div>
                <div className="text-red-400 text-sm">Ошибка или проблема</div>
              </div>
            </div>

            <div className="space-y-3">
              <h4 className="text-white/90 text-sm font-medium">Информация</h4>
              <div className="space-y-2">
                <div className="h-12 w-full bg-blue-500 rounded-lg"></div>
                <div className="text-white text-xs font-mono">blue-500</div>
                <div className="text-blue-400 text-sm">Информационное сообщение</div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Glass эффекты */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Glass Morphism эффекты</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Основные Glass эффекты</h4>
              <div className="space-y-4">
                <div className="glass-card p-4 rounded-lg">
                  <div className="text-white text-sm font-mono mb-1">glass-card</div>
                  <div className="text-white/70 text-xs">Основная стеклянная карточка</div>
                </div>
                
                <div className="glass-input p-3 rounded-lg">
                  <div className="text-white text-sm font-mono mb-1">glass-input</div>
                  <div className="text-white/70 text-xs">Стеклянное поле ввода</div>
                </div>
                
                <div className="glass-sidebar p-4 rounded-lg">
                  <div className="text-white text-sm font-mono mb-1">glass-sidebar</div>
                  <div className="text-white/70 text-xs">Стеклянный сайдбар</div>
                </div>
              </div>
            </div>

            <div>
              <h4 className="text-white/90 text-sm font-medium mb-4">Glass кнопки</h4>
              <div className="space-y-4">
                <div className="glass-button p-4 rounded-lg text-center cursor-pointer">
                  <div className="text-white text-sm font-mono mb-1">glass-button</div>
                  <div className="text-white/70 text-xs">Основная стеклянная кнопка</div>
                </div>
                
                <div className="glass-secondary p-4 rounded-lg text-center cursor-pointer">
                  <div className="text-white text-sm font-mono mb-1">glass-secondary</div>
                  <div className="text-white/70 text-xs">Вторичная стеклянная кнопка</div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
} 