"use client"

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Progress } from '@/components/ui/progress'
import { Input } from '@/components/ui/input'
import { useState } from 'react'
import { 
  Heart, 
  Share2, 
  MoreHorizontal,
  Star,
  Clock,
  MapPin,
  Users,
  TrendingUp,
  Package,
  Building,
  Phone,
  Calendar,
  ShoppingCart,
  Eye,
  ChevronLeft,
  ChevronRight,
  Package2,
  ArrowRight,
  Sparkles,
  Car,
  Baby,
  Home,
  BookOpen,
  Palette,
  ShirtIcon,
  Footprints,
  Gamepad2,
  Utensils,
  Laptop,
  Zap,
  Crown
} from 'lucide-react'

// Демо-компонент для аватара организации (упрощенная версия)
function DemoOrganizationAvatar({ organizationName, size = 'sm' }: { organizationName: string, size?: 'sm' | 'md' | 'lg' }) {
  const getInitials = (name: string) => {
    return name
      .split(' ')
      .map(word => word.charAt(0))
      .join('')
      .toUpperCase()
      .slice(0, 2)
  }

  const getSizes = (size: 'sm' | 'md' | 'lg') => {
    switch (size) {
      case 'sm': return 'size-6'
      case 'md': return 'size-8' 
      case 'lg': return 'size-10'
      default: return 'size-6'
    }
  }

  return (
    <Avatar className={getSizes(size)}>
      <AvatarFallback className="bg-purple-500 text-white font-medium text-xs">
        {getInitials(organizationName)}
      </AvatarFallback>
    </Avatar>
  )
}

export function CardsDemo() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0)
  const [quantity, setQuantity] = useState(1)
  const [isFavorite, setIsFavorite] = useState(false)

  // Демо данные для карточек каталога
  const demoProduct = {
    id: '1',
    name: 'Беспроводные наушники Sony WH-1000XM4',
    article: 'SONY-WH1000XM4',
    price: 24990,
    quantity: 15,
    category: { name: 'Электроника' },
    images: ['/placeholder-product.png', '/placeholder-product.png'],
    organization: {
      name: 'ТехноМаркет',
      inn: '7708123456789'
    }
  }

  const mockImages = ['/placeholder-product.png', '/placeholder-product.png', '/placeholder-product.png']

  const getStockStatus = (quantity: number) => {
    if (quantity === 0) return { text: 'Нет в наличии', color: 'bg-red-500/20 text-red-300' }
    if (quantity < 10) return { text: 'Мало', color: 'bg-orange-500/20 text-orange-300' }
    return { text: 'В наличии', color: 'bg-green-500/20 text-green-300' }
  }

  const displayPrice = new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: 'RUB'
  }).format(demoProduct.price)

  const stockStatus = getStockStatus(demoProduct.quantity)

  return (
    <div className="space-y-6">
      {/* Базовые карточки */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Базовые карточки</CardTitle>
          <CardDescription className="text-white/70">
            Основные варианты карточек с Glass Morphism эффектом
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Простая карточка */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Простая карточка</h4>
            <Card className="glass-card border-white/10 max-w-sm">
              <CardHeader>
                <CardTitle className="text-white">Заголовок карточки</CardTitle>
                <CardDescription className="text-white/70">
                  Описание содержимого карточки
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-white/80 text-sm">
                  Основное содержимое карточки. Здесь может быть любая информация.
                </p>
              </CardContent>
            </Card>
          </div>

          {/* Карточка с действиями */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Карточка с действиями</h4>
            <Card className="glass-card border-white/10 max-w-sm">
              <CardHeader>
                <CardTitle className="text-white">Карточка с кнопками</CardTitle>
                <CardDescription className="text-white/70">
                  Пример карточки с различными действиями
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <p className="text-white/80 text-sm">
                  Содержимое карточки с возможностями взаимодействия.
                </p>
                <div className="flex gap-2">
                  <Button variant="glass" size="sm">
                    Основное действие
                  </Button>
                  <Button variant="outline" size="sm">
                    Вторичное
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Интерактивная карточка */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Интерактивная карточка</h4>
            <Card className="glass-card border-white/10 max-w-sm hover:border-white/20 transition-all cursor-pointer group">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardTitle className="text-white group-hover:text-primary transition-colors">
                    Кликабельная карточка
                  </CardTitle>
                  <Button variant="ghost" size="icon" className="text-white/70 hover:text-white">
                    <MoreHorizontal className="h-4 w-4" />
                  </Button>
                </div>
                <CardDescription className="text-white/70">
                  Карточка с hover эффектами
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-white/80 text-sm">
                  При наведении карточка меняет внешний вид и становится более яркой.
                </p>
              </CardContent>
            </Card>
          </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-3 gap-4">
            {/* Карточка товара */}
            <Card className="glass-card border-white/10 hover:border-white/20 transition-all group">
              <div className="aspect-square bg-white/5 rounded-t-lg relative overflow-hidden">
                <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-500/20"></div>
                <div className="absolute top-3 right-3 flex gap-2">
                  <Button variant="ghost" size="icon" className="h-8 w-8 bg-white/10 backdrop-blur">
                    <Heart className="h-4 w-4 text-white" />
                  </Button>
                  <Button variant="ghost" size="icon" className="h-8 w-8 bg-white/10 backdrop-blur">
                    <Share2 className="h-4 w-4 text-white" />
                  </Button>
                </div>
                <div className="absolute bottom-3 left-3">
                  <Badge variant="secondary" className="bg-white/20 text-white border-white/30">
                    Новинка
                  </Badge>
                </div>
              </div>
              <CardHeader className="pb-2">
                <CardTitle className="text-white text-base group-hover:text-primary transition-colors">
                  Название товара
                </CardTitle>
                <div className="flex items-center gap-2">
                  <div className="flex items-center">
                    {[1, 2, 3, 4, 5].map((star) => (
                      <Star 
                        key={star} 
                        className="h-3 w-3 fill-yellow-400 text-yellow-400" 
                      />
                    ))}
                  </div>
                  <span className="text-white/70 text-xs">(24 отзыва)</span>
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-xl font-bold text-white">1 299 ₽</span>
                  <span className="text-white/60 line-through text-sm">1 599 ₽</span>
                </div>
                <Button variant="glass" className="w-full" size="sm">
                  <Package className="h-4 w-4 mr-2" />
                  В корзину
                </Button>
              </CardContent>
            </Card>

            {/* Карточка услуги */}
            <Card className="glass-card border-white/10 hover:border-white/20 transition-all group">
              <CardHeader>
                <div className="flex items-start justify-between">
                  <div className="space-y-1">
                    <CardTitle className="text-white text-base group-hover:text-primary transition-colors">
                      Фулфилмент услуги
                    </CardTitle>
                    <CardDescription className="text-white/70 text-sm">
                      Полный цикл обработки заказов
                    </CardDescription>
                  </div>
                  <Badge variant="outline" className="border-green-500 text-green-400">
                    Активно
                  </Badge>
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <div className="flex items-center text-white/80 text-sm">
                    <MapPin className="h-4 w-4 mr-2 text-white/60" />
                    Москва, складской комплекс
                  </div>
                  <div className="flex items-center text-white/80 text-sm">
                    <Clock className="h-4 w-4 mr-2 text-white/60" />
                    24/7 обработка заказов
                  </div>
                  <div className="flex items-center text-white/80 text-sm">
                    <Users className="h-4 w-4 mr-2 text-white/60" />
                    до 1000 заказов/день
                  </div>
                </div>
                <div className="pt-2">
                  <div className="flex items-center justify-between text-sm text-white/70 mb-1">
                    <span>Загрузка склада</span>
                    <span>75%</span>
                  </div>
                  <Progress value={75} className="h-2" />
                </div>
                <Button variant="outline" className="w-full" size="sm">
                  Подробнее
                </Button>
              </CardContent>
            </Card>

            {/* Карточка статистики */}
            <Card className="glass-card border-white/10">
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-white text-base">
                    Продажи за месяц
                  </CardTitle>
                  <TrendingUp className="h-5 w-5 text-green-400" />
                </div>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-1">
                  <div className="text-2xl font-bold text-white">
                    ₽2,847,532
                  </div>
                  <div className="flex items-center text-sm">
                    <TrendingUp className="h-3 w-3 text-green-400 mr-1" />
                    <span className="text-green-400">+12.5%</span>
                    <span className="text-white/60 ml-1">от прошлого месяца</span>
                  </div>
                </div>
                <div className="space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-white/70">Заказов</span>
                    <span className="text-white">1,247</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-white/70">Средний чек</span>
                    <span className="text-white">₽2,284</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-white/70">Конверсия</span>
                    <span className="text-white">3.2%</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </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 gap-4">
            {/* Профиль пользователя */}
            <Card className="glass-card border-white/10">
              <CardHeader>
                <div className="flex items-center space-x-4">
                  <Avatar className="h-12 w-12 bg-white/20">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">
                      ИП
                    </AvatarFallback>
                  </Avatar>
                  <div className="space-y-1">
                    <CardTitle className="text-white text-base">
                      Иван Петров
                    </CardTitle>
                    <CardDescription className="text-white/70 text-sm">
                      Менеджер фулфилмент центра
                    </CardDescription>
                  </div>
                </div>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="space-y-2">
                  <div className="flex items-center text-white/80 text-sm">
                    <Phone className="h-4 w-4 mr-2 text-white/60" />
                    +7 (999) 123-45-67
                  </div>
                  <div className="flex items-center text-white/80 text-sm">
                    <Building className="h-4 w-4 mr-2 text-white/60" />
                    ООО &quot;Логистик Центр&quot;
                  </div>
                  <div className="flex items-center text-white/80 text-sm">
                    <Calendar className="h-4 w-4 mr-2 text-white/60" />
                    Регистрация: 15.03.2024
                  </div>
                </div>
                <div className="flex gap-2 pt-2">
                  <Button variant="glass" size="sm" className="flex-1">
                    Связаться
                  </Button>
                  <Button variant="outline" size="sm" className="flex-1">
                    Профиль
                  </Button>
                </div>
              </CardContent>
            </Card>

            {/* Компактная карточка организации */}
            <Card className="glass-card border-white/10 hover:border-white/20 transition-all cursor-pointer">
              <CardContent className="p-4">
                <div className="flex items-start space-x-3">
                  <Avatar className="h-10 w-10 bg-white/20">
                    <AvatarFallback className="bg-white/20 text-white text-xs">
                      ООО
                    </AvatarFallback>
                  </Avatar>
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center justify-between mb-1">
                      <h3 className="text-white font-medium text-sm truncate">
                        Торговая компания &quot;Альфа&quot;
                      </h3>
                      <Badge variant="default" className="ml-2 text-xs">
                        Селлер
                      </Badge>
                    </div>
                    <p className="text-white/70 text-xs mb-2">
                      ИНН: 7708123456789
                    </p>
                    <div className="flex items-center justify-between">
                      <span className="text-white/60 text-xs">
                        Последний вход: 2 часа назад
                      </span>
                      <div className="w-2 h-2 rounded-full bg-green-400"></div>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

      {/* Специальные контейнеры */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Специальные контейнеры</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Alert карточка */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Уведомления</h4>
            <div className="space-y-3">
              <Card className="glass-card border-green-500/50 bg-green-500/10">
                <CardContent className="p-4">
                  <div className="flex items-start space-x-3">
                    <div className="w-2 h-2 rounded-full bg-green-400 mt-2"></div>
                    <div>
                      <h4 className="text-white font-medium text-sm">Успешно</h4>
                      <p className="text-white/80 text-sm">Данные сохранены успешно</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="glass-card border-yellow-500/50 bg-yellow-500/10">
                <CardContent className="p-4">
                  <div className="flex items-start space-x-3">
                    <div className="w-2 h-2 rounded-full bg-yellow-400 mt-2"></div>
                    <div>
                      <h4 className="text-white font-medium text-sm">Предупреждение</h4>
                      <p className="text-white/80 text-sm">Проверьте корректность введенных данных</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              <Card className="glass-card border-red-500/50 bg-red-500/10">
                <CardContent className="p-4">
                  <div className="flex items-start space-x-3">
                    <div className="w-2 h-2 rounded-full bg-red-400 mt-2"></div>
                    <div>
                      <h4 className="text-white font-medium text-sm">Ошибка</h4>
                      <p className="text-white/80 text-sm">Не удалось выполнить операцию</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>

          {/* Карточка с навигацией */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Навигационная карточка</h4>
            <Card className="glass-card border-white/10">
              <CardHeader>
                <CardTitle className="text-white">Быстрые действия</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-2 gap-3">
                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
                    <Package className="h-6 w-6" />
                    <span className="text-xs">Товары</span>
                  </Button>
                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
                    <Users className="h-6 w-6" />
                    <span className="text-xs">Клиенты</span>
                  </Button>
                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
                    <TrendingUp className="h-6 w-6" />
                    <span className="text-xs">Аналитика</span>
                  </Button>
                  <Button variant="glass-secondary" className="h-16 flex-col space-y-1">
                    <Building className="h-6 w-6" />
                    <span className="text-xs">Склады</span>
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>

      {/* Карточки категорий товаров из Market */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Карточки категорий товаров (Market)</CardTitle>
          <CardDescription className="text-white/70">
            Клон карточек категорий из каталога товаров /market
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Демо карточек категорий */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Карточки категорий с градиентами</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {/* Карточка "Все товары" */}
              <Card 
                onClick={() => alert('Все товары выбраны!')}
                className="group relative overflow-hidden bg-gradient-to-br from-indigo-500/10 via-purple-500/10 to-pink-500/10 backdrop-blur border-white/10 hover:border-white/20 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-indigo-500/20 to-purple-500/20 border border-indigo-500/30">
                      <Sparkles className="h-6 w-6 text-indigo-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Все товары
                    </h3>
                    <p className="text-white/60 text-sm">
                      Просмотреть весь каталог
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/5 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
              </Card>

              {/* Автотовары */}
              <Card 
                onClick={() => alert('Автотовары выбраны!')}
                className="group relative overflow-hidden bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-red-500/10 backdrop-blur border-white/10 hover:border-purple-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-purple-500/20 to-pink-500/20 border border-purple-500/30">
                      <Package2 className="h-6 w-6 text-purple-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Автотовары
                    </h3>
                    <p className="text-white/60 text-sm">
                      Товары категории
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-red-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
              </Card>

              {/* Детские товары */}
              <Card 
                onClick={() => alert('Детские товары выбраны!')}
                className="group relative overflow-hidden bg-gradient-to-br from-blue-500/10 via-cyan-500/10 to-teal-500/10 backdrop-blur border-white/10 hover:border-blue-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-blue-500/20 to-cyan-500/20 border border-blue-500/30">
                      <Package2 className="h-6 w-6 text-blue-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Детские товары
                    </h3>
                    <p className="text-white/60 text-sm">
                      Товары категории
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 via-cyan-500/10 to-teal-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
              </Card>

              {/* Дом и сад */}
              <Card 
                onClick={() => alert('Дом и сад выбран!')}
                className="group relative overflow-hidden bg-gradient-to-br from-green-500/10 via-emerald-500/10 to-lime-500/10 backdrop-blur border-white/10 hover:border-green-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-green-500/20 to-emerald-500/20 border border-green-500/30">
                      <Package2 className="h-6 w-6 text-green-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Дом и сад
                    </h3>
                    <p className="text-white/60 text-sm">
                      Товары категории
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-green-500/10 via-emerald-500/10 to-lime-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
              </Card>
            </div>
          </div>

          {/* Вторая строка категорий */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Дополнительные категории</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
              {/* Книги и канцелярия */}
              <Card 
                onClick={() => alert('Книги и канцелярия выбраны!')}
                className="group relative overflow-hidden bg-gradient-to-br from-yellow-500/10 via-orange-500/10 to-red-500/10 backdrop-blur border-white/10 hover:border-orange-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-yellow-500/20 to-orange-500/20 border border-orange-500/30">
                      <Package2 className="h-6 w-6 text-orange-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Книги и канцелярия
                    </h3>
                    <p className="text-white/60 text-sm">
                      Товары категории
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-yellow-500/10 via-orange-500/10 to-red-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
              </Card>

              {/* Красота и здоровье */}
              <Card 
                onClick={() => alert('Красота и здоровье выбраны!')}
                className="group relative overflow-hidden bg-gradient-to-br from-pink-500/10 via-rose-500/10 to-purple-500/10 backdrop-blur border-white/10 hover:border-pink-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-pink-500/20 to-rose-500/20 border border-pink-500/30">
                      <Package2 className="h-6 w-6 text-pink-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Красота и здоровье
                    </h3>
                    <p className="text-white/60 text-sm">
                      Товары категории
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-pink-500/10 via-rose-500/10 to-purple-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
              </Card>

              {/* Обувь */}
              <Card 
                onClick={() => alert('Обувь выбрана!')}
                className="group relative overflow-hidden bg-gradient-to-br from-indigo-500/10 via-blue-500/10 to-cyan-500/10 backdrop-blur border-white/10 hover:border-indigo-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-indigo-500/20 to-blue-500/20 border border-indigo-500/30">
                      <Package2 className="h-6 w-6 text-indigo-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Обувь
                    </h3>
                    <p className="text-white/60 text-sm">
                      Товары категории
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/10 via-blue-500/10 to-cyan-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
              </Card>

              {/* Одежда */}
              <Card 
                onClick={() => alert('Одежда выбрана!')}
                className="group relative overflow-hidden bg-gradient-to-br from-teal-500/10 via-green-500/10 to-emerald-500/10 backdrop-blur border-white/10 hover:border-teal-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              >
                <div className="p-6 h-32 flex flex-col justify-between">
                  <div className="flex items-center justify-between">
                    <div className="p-3 rounded-lg bg-gradient-to-r from-teal-500/20 to-green-500/20 border border-teal-500/30">
                      <Package2 className="h-6 w-6 text-teal-400" />
                    </div>
                    <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
                  </div>
                  <div>
                    <h3 className="text-lg font-semibold text-white group-hover:text-white transition-colors">
                      Одежда
                    </h3>
                    <p className="text-white/60 text-sm">
                      Товары категории
                    </p>
                  </div>
                </div>
                
                {/* Эффект при наведении */}
                <div className="absolute inset-0 bg-gradient-to-r from-teal-500/10 via-green-500/10 to-emerald-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
              </Card>
            </div>
          </div>

          {/* Продвинутые карточки категорий с премиум-эффектами */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">🚀 Премиум карточки с продвинутыми эффектами</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {/* Автотовары - Премиум */}
              <Card className="group relative overflow-hidden bg-gradient-to-br from-red-500/5 via-orange-500/5 to-yellow-500/5 backdrop-blur-xl border border-red-500/20 hover:border-red-400/40 transition-all duration-500 cursor-pointer hover:scale-[1.02] hover:shadow-2xl hover:shadow-red-500/25">
                <div className="absolute inset-0 bg-gradient-to-r from-red-500/10 via-orange-500/10 to-yellow-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500" />
                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
                
                <div className="relative p-8 h-48 flex flex-col justify-between">
                  <div className="flex items-start justify-between">
                    <div className="relative">
                      <div className="absolute -inset-2 bg-gradient-to-r from-red-500/30 to-orange-500/30 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                      <div className="relative p-4 rounded-2xl bg-gradient-to-br from-red-500/20 to-orange-500/20 border border-red-500/30 backdrop-blur-sm">
                        <Car className="h-8 w-8 text-red-400 group-hover:text-red-300 transition-colors duration-300" />
                      </div>
                    </div>
                    <div className="flex flex-col items-end space-y-2">
                      <div className="px-3 py-1 rounded-full bg-red-500/20 border border-red-500/30 backdrop-blur-sm">
                        <span className="text-red-300 text-xs font-medium">HOT</span>
                      </div>
                      <ArrowRight className="h-6 w-6 text-white/30 group-hover:text-white/80 group-hover:translate-x-1 transition-all duration-300" />
                    </div>
                  </div>
                  
                  <div className="space-y-3">
                    <div>
                      <h3 className="text-2xl font-bold text-white group-hover:text-red-200 transition-colors duration-300 mb-1">
                        Автотовары
                      </h3>
                      <p className="text-white/60 group-hover:text-white/80 transition-colors duration-300">
                        Запчасти и аксессуары для авто
                      </p>
                    </div>
                    <div className="flex items-center space-x-2">
                      <div className="flex -space-x-1">
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-red-500 to-orange-500 border-2 border-white/20" />
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-orange-500 to-yellow-500 border-2 border-white/20" />
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-yellow-500 to-red-500 border-2 border-white/20" />
                      </div>
                      <span className="text-white/50 text-sm">1,247 товаров</span>
                    </div>
                  </div>
                </div>
                
                {/* Частицы */}
                <div className="absolute top-4 right-4 w-2 h-2 bg-red-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-300" />
                <div className="absolute bottom-8 left-8 w-1 h-1 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-500 delay-100" />
              </Card>

              {/* Детские товары - Премиум */}
              <Card className="group relative overflow-hidden bg-gradient-to-br from-pink-500/5 via-purple-500/5 to-blue-500/5 backdrop-blur-xl border border-pink-500/20 hover:border-pink-400/40 transition-all duration-500 cursor-pointer hover:scale-[1.02] hover:shadow-2xl hover:shadow-pink-500/25">
                <div className="absolute inset-0 bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-blue-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500" />
                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
                
                <div className="relative p-8 h-48 flex flex-col justify-between">
                  <div className="flex items-start justify-between">
                    <div className="relative">
                      <div className="absolute -inset-2 bg-gradient-to-r from-pink-500/30 to-purple-500/30 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                      <div className="relative p-4 rounded-2xl bg-gradient-to-br from-pink-500/20 to-purple-500/20 border border-pink-500/30 backdrop-blur-sm">
                        <Baby className="h-8 w-8 text-pink-400 group-hover:text-pink-300 transition-colors duration-300" />
                      </div>
                    </div>
                    <div className="flex flex-col items-end space-y-2">
                      <div className="px-3 py-1 rounded-full bg-pink-500/20 border border-pink-500/30 backdrop-blur-sm">
                        <span className="text-pink-300 text-xs font-medium">NEW</span>
                      </div>
                      <ArrowRight className="h-6 w-6 text-white/30 group-hover:text-white/80 group-hover:translate-x-1 transition-all duration-300" />
                    </div>
                  </div>
                  
                  <div className="space-y-3">
                    <div>
                      <h3 className="text-2xl font-bold text-white group-hover:text-pink-200 transition-colors duration-300 mb-1">
                        Детские товары
                      </h3>
                      <p className="text-white/60 group-hover:text-white/80 transition-colors duration-300">
                        Игрушки и товары для детей
                      </p>
                    </div>
                    <div className="flex items-center space-x-2">
                      <div className="flex -space-x-1">
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-pink-500 to-purple-500 border-2 border-white/20" />
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 border-2 border-white/20" />
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-blue-500 to-pink-500 border-2 border-white/20" />
                      </div>
                      <span className="text-white/50 text-sm">892 товаров</span>
                    </div>
                  </div>
                </div>
                
                {/* Плавающие элементы */}
                <div className="absolute top-6 right-6 w-3 h-3 bg-pink-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-opacity duration-300 delay-200" />
                <div className="absolute bottom-12 left-6 w-2 h-2 bg-purple-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-500 delay-300" />
              </Card>

              {/* Дом и сад - Премиум */}
              <Card className="group relative overflow-hidden bg-gradient-to-br from-green-500/5 via-emerald-500/5 to-teal-500/5 backdrop-blur-xl border border-green-500/20 hover:border-green-400/40 transition-all duration-500 cursor-pointer hover:scale-[1.02] hover:shadow-2xl hover:shadow-green-500/25">
                <div className="absolute inset-0 bg-gradient-to-r from-green-500/10 via-emerald-500/10 to-teal-500/10 opacity-0 group-hover:opacity-100 transition-all duration-500" />
                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-green-500 via-emerald-500 to-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left" />
                
                <div className="relative p-8 h-48 flex flex-col justify-between">
                  <div className="flex items-start justify-between">
                    <div className="relative">
                      <div className="absolute -inset-2 bg-gradient-to-r from-green-500/30 to-emerald-500/30 rounded-full blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
                      <div className="relative p-4 rounded-2xl bg-gradient-to-br from-green-500/20 to-emerald-500/20 border border-green-500/30 backdrop-blur-sm">
                        <Home className="h-8 w-8 text-green-400 group-hover:text-green-300 transition-colors duration-300" />
                      </div>
                    </div>
                    <div className="flex flex-col items-end space-y-2">
                      <div className="px-3 py-1 rounded-full bg-green-500/20 border border-green-500/30 backdrop-blur-sm">
                        <span className="text-green-300 text-xs font-medium">ECO</span>
                      </div>
                      <ArrowRight className="h-6 w-6 text-white/30 group-hover:text-white/80 group-hover:translate-x-1 transition-all duration-300" />
                    </div>
                  </div>
                  
                  <div className="space-y-3">
                    <div>
                      <h3 className="text-2xl font-bold text-white group-hover:text-green-200 transition-colors duration-300 mb-1">
                        Дом и сад
                      </h3>
                      <p className="text-white/60 group-hover:text-white/80 transition-colors duration-300">
                        Товары для дома и садоводства
                      </p>
                    </div>
                    <div className="flex items-center space-x-2">
                      <div className="flex -space-x-1">
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-green-500 to-emerald-500 border-2 border-white/20" />
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-emerald-500 to-teal-500 border-2 border-white/20" />
                        <div className="w-6 h-6 rounded-full bg-gradient-to-r from-teal-500 to-green-500 border-2 border-white/20" />
                      </div>
                      <span className="text-white/50 text-sm">2,156 товаров</span>
                    </div>
                  </div>
                </div>
                
                {/* Органические элементы */}
                <div className="absolute top-8 right-8 w-4 h-4 bg-green-400/50 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-300" />
                <div className="absolute bottom-16 left-12 w-1 h-1 bg-emerald-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-500 delay-150" />
              </Card>
            </div>
          </div>

          {/* Мега-премиум карточки с 3D эффектами */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">✨ Мега-премиум карточки с 3D эффектами</h4>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {/* Электроника - 3D Премиум */}
              <Card className="group relative overflow-hidden bg-gradient-to-br from-blue-500/5 via-indigo-500/5 to-purple-500/5 backdrop-blur-xl border border-blue-500/20 hover:border-blue-400/50 transition-all duration-700 cursor-pointer hover:scale-[1.03] hover:rotate-1 hover:shadow-2xl hover:shadow-blue-500/30 transform-gpu perspective-1000">
                {/* Фоновая анимация */}
                <div className="absolute inset-0 bg-gradient-to-r from-blue-500/5 via-indigo-500/10 to-purple-500/5 opacity-0 group-hover:opacity-100 transition-all duration-700" />
                <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 origin-left" />
                
                {/* Плавающие частицы */}
                <div className="absolute inset-0 overflow-hidden">
                  <div className="absolute top-1/4 left-1/4 w-2 h-2 bg-blue-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-500 delay-100" />
                  <div className="absolute top-3/4 right-1/4 w-1 h-1 bg-indigo-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-700 delay-200" />
                  <div className="absolute bottom-1/4 left-3/4 w-3 h-3 bg-purple-400/30 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-opacity duration-600 delay-300" />
                </div>
                
                <div className="relative p-10 h-64 flex flex-col justify-between">
                  <div className="flex items-start justify-between">
                    <div className="relative transform group-hover:scale-110 transition-transform duration-500">
                      <div className="absolute -inset-4 bg-gradient-to-r from-blue-500/40 to-purple-500/40 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
                      <div className="relative p-6 rounded-3xl bg-gradient-to-br from-blue-500/20 to-indigo-500/20 border border-blue-500/40 backdrop-blur-md shadow-2xl">
                        <Laptop className="h-12 w-12 text-blue-400 group-hover:text-blue-300 transition-colors duration-500" />
                        <div className="absolute top-2 right-2 w-3 h-3 bg-green-400 rounded-full animate-pulse" />
                      </div>
                    </div>
                    
                    <div className="flex flex-col items-end space-y-3">
                      <div className="px-4 py-2 rounded-full bg-gradient-to-r from-blue-500/20 to-purple-500/20 border border-blue-500/40 backdrop-blur-md">
                        <div className="flex items-center space-x-2">
                          <Zap className="h-4 w-4 text-yellow-400" />
                          <span className="text-blue-300 text-sm font-bold">TECH</span>
                        </div>
                      </div>
                      <div className="p-2 rounded-full bg-white/10 backdrop-blur-sm group-hover:bg-blue-500/20 transition-colors duration-300">
                        <ArrowRight className="h-8 w-8 text-white/40 group-hover:text-white/90 group-hover:translate-x-2 group-hover:scale-110 transition-all duration-500" />
                      </div>
                    </div>
                  </div>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-3xl font-bold text-white group-hover:text-blue-200 transition-colors duration-500 mb-2 tracking-tight">
                        Электроника
                      </h3>
                      <p className="text-white/60 group-hover:text-white/90 transition-colors duration-500 text-lg">
                        Современные гаджеты и техника
                      </p>
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <div className="flex -space-x-2">
                          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-blue-500 to-indigo-500 border-3 border-white/30 shadow-lg" />
                          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-indigo-500 to-purple-500 border-3 border-white/30 shadow-lg" />
                          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 border-3 border-white/30 shadow-lg" />
                        </div>
                        <span className="text-white/70 font-medium">3,428 товаров</span>
                      </div>
                      
                      <div className="flex items-center space-x-2">
                        <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" />
                        <span className="text-green-300 text-sm font-medium">Онлайн</span>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>

              {/* Премиум категория - Корона */}
              <Card className="group relative overflow-hidden bg-gradient-to-br from-yellow-500/5 via-orange-500/5 to-red-500/5 backdrop-blur-xl border-2 border-yellow-500/30 hover:border-yellow-400/60 transition-all duration-700 cursor-pointer hover:scale-[1.03] hover:-rotate-1 hover:shadow-2xl hover:shadow-yellow-500/40 transform-gpu">
                {/* Золотое свечение */}
                <div className="absolute inset-0 bg-gradient-to-r from-yellow-500/10 via-orange-500/15 to-red-500/10 opacity-0 group-hover:opacity-100 transition-all duration-700" />
                <div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 shadow-lg shadow-yellow-500/50" />
                
                {/* Премиум частицы */}
                <div className="absolute inset-0 overflow-hidden">
                  <div className="absolute top-1/3 right-1/3 w-4 h-4 bg-yellow-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-ping transition-opacity duration-500" />
                  <div className="absolute bottom-1/3 left-1/5 w-2 h-2 bg-orange-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-bounce transition-opacity duration-700 delay-100" />
                  <div className="absolute top-1/2 left-1/2 w-1 h-1 bg-red-400 rounded-full opacity-0 group-hover:opacity-100 group-hover:animate-pulse transition-opacity duration-600 delay-200" />
                </div>
                
                <div className="relative p-10 h-64 flex flex-col justify-between">
                  <div className="flex items-start justify-between">
                    <div className="relative transform group-hover:scale-110 group-hover:rotate-12 transition-transform duration-700">
                      <div className="absolute -inset-6 bg-gradient-to-r from-yellow-500/50 to-orange-500/50 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700" />
                      <div className="relative p-6 rounded-3xl bg-gradient-to-br from-yellow-500/30 to-orange-500/30 border-2 border-yellow-500/50 backdrop-blur-md shadow-2xl">
                        <Crown className="h-12 w-12 text-yellow-400 group-hover:text-yellow-300 transition-colors duration-500" />
                        <div className="absolute -top-1 -right-1 w-4 h-4 bg-gradient-to-r from-yellow-400 to-orange-400 rounded-full animate-pulse shadow-lg" />
                      </div>
                    </div>
                    
                    <div className="flex flex-col items-end space-y-3">
                      <div className="px-4 py-2 rounded-full bg-gradient-to-r from-yellow-500/30 to-orange-500/30 border-2 border-yellow-500/50 backdrop-blur-md shadow-lg">
                        <div className="flex items-center space-x-2">
                          <Sparkles className="h-4 w-4 text-yellow-300 animate-pulse" />
                          <span className="text-yellow-200 text-sm font-bold">VIP</span>
                        </div>
                      </div>
                      <div className="p-2 rounded-full bg-gradient-to-r from-yellow-500/20 to-orange-500/20 backdrop-blur-sm group-hover:from-yellow-500/40 group-hover:to-orange-500/40 transition-all duration-500">
                        <ArrowRight className="h-8 w-8 text-yellow-300 group-hover:text-yellow-200 group-hover:translate-x-2 group-hover:scale-110 transition-all duration-500" />
                      </div>
                    </div>
                  </div>
                  
                  <div className="space-y-4">
                    <div>
                      <h3 className="text-3xl font-bold bg-gradient-to-r from-yellow-200 via-orange-200 to-yellow-200 bg-clip-text text-transparent group-hover:from-yellow-100 group-hover:to-orange-100 transition-all duration-500 mb-2 tracking-tight">
                        Премиум товары
                      </h3>
                      <p className="text-white/70 group-hover:text-white/90 transition-colors duration-500 text-lg">
                        Эксклюзивные и люксовые товары
                      </p>
                    </div>
                    
                    <div className="flex items-center justify-between">
                      <div className="flex items-center space-x-3">
                        <div className="flex -space-x-2">
                          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-yellow-500 to-orange-500 border-3 border-yellow-300/50 shadow-xl" />
                          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-orange-500 to-red-500 border-3 border-orange-300/50 shadow-xl" />
                          <div className="w-8 h-8 rounded-full bg-gradient-to-r from-red-500 to-yellow-500 border-3 border-red-300/50 shadow-xl" />
                        </div>
                        <span className="text-yellow-200/90 font-medium">156 товаров</span>
                      </div>
                      
                      <div className="flex items-center space-x-2">
                        <Crown className="w-4 h-4 text-yellow-400" />
                        <span className="text-yellow-300 text-sm font-bold">EXCLUSIVE</span>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>
            </div>
          </div>

          {/* Код использования */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Код использования карточек категорий</h4>
            <div className="p-4 rounded-lg bg-black/20 border border-white/5">
              <p className="text-white/60 text-sm mb-2">📝 Пример использования карточки категории:</p>
              <pre className="text-green-400 text-xs overflow-x-auto whitespace-pre-wrap">
{`<Card 
  onClick={() => onSelectCategory(category.id, category.name)}
  className="group relative overflow-hidden bg-gradient-to-br from-purple-500/10 via-pink-500/10 to-red-500/10 backdrop-blur border-white/10 hover:border-purple-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
>
  <div className="p-6 h-32 flex flex-col justify-between">
    <div className="flex items-center justify-between">
      <div className="p-3 rounded-lg bg-gradient-to-r from-purple-500/20 to-pink-500/20 border border-purple-500/30">
        <Package2 className="h-6 w-6 text-purple-400" />
      </div>
      <ArrowRight className="h-5 w-5 text-white/40 group-hover:text-white/80 transition-colors" />
    </div>
    <div>
      <h3 className="text-lg font-semibold text-white">
        {category.name}
      </h3>
      <p className="text-white/60 text-sm">
        Товары категории
      </p>
    </div>
  </div>
  
  {/* Эффект при наведении */}
  <div className="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-red-500/10 opacity-0 group-hover:opacity-50 transition-opacity duration-300" />
</Card>`}
              </pre>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Карточки каталога товаров из Market */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Карточки товаров каталога (Market)</CardTitle>
          <CardDescription className="text-white/70">
            Клон карточек товаров из раздела /market с полным функционалом
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Основная карточка товара */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Полная карточка товара</h4>
            <div className="max-w-sm">
              <div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
                {/* Изображения товара */}
                <div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
                  <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-blue-500/20 flex items-center justify-center">
                    <Package className="h-12 w-12 text-white/40" />
                  </div>
                  
                  {/* Навигация по изображениям */}
                  <button className="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                    <ChevronLeft className="h-4 w-4" />
                  </button>
                  <button className="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 hover:bg-black/70 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                    <ChevronRight className="h-4 w-4" />
                  </button>
                  
                  {/* Индикаторы изображений */}
                  <div className="absolute bottom-2 left-1/2 -translate-x-1/2 flex space-x-1">
                    {[0, 1, 2].map((index) => (
                      <div
                        key={index}
                        className={`w-2 h-2 rounded-full transition-all ${
                          index === currentImageIndex ? 'bg-white' : 'bg-white/50'
                        }`}
                      />
                    ))}
                  </div>
                  
                  {/* Кнопка увеличения */}
                  <button className="absolute top-2 right-2 bg-black/50 hover:bg-black/70 text-white p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                    <Eye className="h-4 w-4" />
                  </button>
                </div>

                {/* Информация о товаре */}
                <div className="space-y-2">
                  {/* Название и цена */}
                  <div>
                    <h3 className="font-semibold text-white text-sm mb-1 line-clamp-1">{demoProduct.name}</h3>
                    <div className="flex items-center justify-between">
                      <span className="text-base font-bold text-purple-300">{displayPrice}</span>
                      <Badge className={`${stockStatus.color} text-xs`}>
                        {stockStatus.text}
                      </Badge>
                    </div>
                  </div>

                  {/* Краткая информация */}
                  <div className="flex items-center justify-between text-xs text-white/60">
                    <span>Арт: {demoProduct.article}</span>
                    <span className="bg-white/10 px-2 py-1 rounded text-xs">{demoProduct.category.name}</span>
                  </div>

                  {/* Информация о продавце */}
                  <div className="border-t border-white/10 pt-2">
                    <div className="flex items-center space-x-2">
                      <DemoOrganizationAvatar organizationName={demoProduct.organization.name} size="sm" />
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-white text-xs truncate">{demoProduct.organization.name}</p>
                        <p className="text-xs text-white/50">ИНН: {demoProduct.organization.inn}</p>
                      </div>
                    </div>
                  </div>

                  {/* Выбор количества и добавление в заявки */}
                  <div className="space-y-2">
                    {/* Выбор количества */}
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-white/70">Количество:</span>
                      <Input
                        type="number"
                        min="1"
                        max={demoProduct.quantity}
                        value={quantity}
                        onChange={(e) => {
                          const value = parseInt(e.target.value) || 1
                          if (value >= 1 && value <= demoProduct.quantity) {
                            setQuantity(value)
                          }
                        }}
                        className="w-16 h-6 text-xs text-center glass-input text-white border-white/20"
                      />
                    </div>

                    {/* Кнопки действий */}
                    <div className="flex items-center space-x-2">
                      {/* Кнопка добавления в заявки */}
                      <Button 
                        onClick={() => alert('Добавлено в заявки!')}
                        className="flex-1 h-8 bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white border-0 text-xs"
                      >
                        <ShoppingCart className="h-3 w-3 mr-1" />
                        В заявки
                      </Button>

                      {/* Кнопка избранного */}
                      <Button 
                        onClick={() => setIsFavorite(!isFavorite)}
                        variant="outline"
                        size="sm"
                        className={`h-8 w-8 p-0 transition-all ${
                          isFavorite 
                            ? 'bg-red-500/20 border-red-500/30 text-red-400 hover:bg-red-500/30' 
                            : 'bg-white/5 border-white/20 text-white/60 hover:bg-red-500/20 hover:border-red-500/30 hover:text-red-400'
                        }`}
                      >
                        <Heart className={`h-4 w-4 ${isFavorite ? 'fill-current' : ''}`} />
                      </Button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Варианты карточек товаров */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Варианты состояний карточек</h4>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
              {/* Товар в наличии */}
              <div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
                <div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
                  <div className="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex items-center justify-center">
                    <Package className="h-8 w-8 text-white/40" />
                  </div>
                </div>
                <div className="space-y-2">
                  <div>
                    <h3 className="font-semibold text-white text-sm mb-1">Товар в наличии</h3>
                    <div className="flex items-center justify-between">
                      <span className="text-base font-bold text-purple-300">1 599 ₽</span>
                      <Badge className="bg-green-500/20 text-green-300 text-xs">В наличии</Badge>
                    </div>
                  </div>
                  <div className="flex items-center justify-between text-xs text-white/60">
                    <span>Арт: DEMO-001</span>
                    <span className="bg-white/10 px-2 py-1 rounded text-xs">Категория</span>
                  </div>
                  <div className="border-t border-white/10 pt-2">
                    <div className="flex items-center space-x-2">
                      <DemoOrganizationAvatar organizationName="Поставщик А" size="sm" />
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-white text-xs">Поставщик А</p>
                        <p className="text-xs text-white/50">ИНН: 1234567890</p>
                      </div>
                    </div>
                  </div>
                  <Button className="w-full h-8 bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs">
                    <ShoppingCart className="h-3 w-3 mr-1" />
                    В заявки
                  </Button>
                </div>
              </div>

              {/* Товар заканчивается */}
              <div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
                <div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
                  <div className="absolute inset-0 bg-gradient-to-br from-orange-500/20 to-yellow-500/20 flex items-center justify-center">
                    <Package className="h-8 w-8 text-white/40" />
                  </div>
                </div>
                <div className="space-y-2">
                  <div>
                    <h3 className="font-semibold text-white text-sm mb-1">Товар заканчивается</h3>
                    <div className="flex items-center justify-between">
                      <span className="text-base font-bold text-purple-300">2 299 ₽</span>
                      <Badge className="bg-orange-500/20 text-orange-300 text-xs">Мало</Badge>
                    </div>
                  </div>
                  <div className="flex items-center justify-between text-xs text-white/60">
                    <span>Арт: DEMO-002</span>
                    <span className="bg-white/10 px-2 py-1 rounded text-xs">Категория</span>
                  </div>
                  <div className="border-t border-white/10 pt-2">
                    <div className="flex items-center space-x-2">
                      <DemoOrganizationAvatar organizationName="Поставщик Б" size="sm" />
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-white text-xs">Поставщик Б</p>
                        <p className="text-xs text-white/50">ИНН: 0987654321</p>
                      </div>
                    </div>
                  </div>
                  <Button className="w-full h-8 bg-gradient-to-r from-purple-500 to-pink-500 text-white border-0 text-xs">
                    <ShoppingCart className="h-3 w-3 mr-1" />
                    В заявки
                  </Button>
                </div>
              </div>

              {/* Товар недоступен */}
              <div className="glass-card p-3 hover:bg-white/10 transition-all duration-300 group">
                <div className="relative mb-3 aspect-video bg-white/5 rounded-lg overflow-hidden">
                  <div className="absolute inset-0 bg-gradient-to-br from-red-500/20 to-pink-500/20 flex items-center justify-center">
                    <Package className="h-8 w-8 text-white/40" />
                  </div>
                </div>
                <div className="space-y-2">
                  <div>
                    <h3 className="font-semibold text-white text-sm mb-1">Товар недоступен</h3>
                    <div className="flex items-center justify-between">
                      <span className="text-base font-bold text-purple-300">999 ₽</span>
                      <Badge className="bg-red-500/20 text-red-300 text-xs">Нет в наличии</Badge>
                    </div>
                  </div>
                  <div className="flex items-center justify-between text-xs text-white/60">
                    <span>Арт: DEMO-003</span>
                    <span className="bg-white/10 px-2 py-1 rounded text-xs">Категория</span>
                  </div>
                  <div className="border-t border-white/10 pt-2">
                    <div className="flex items-center space-x-2">
                      <DemoOrganizationAvatar organizationName="Поставщик В" size="sm" />
                      <div className="flex-1 min-w-0">
                        <p className="font-medium text-white text-xs">Поставщик В</p>
                        <p className="text-xs text-white/50">ИНН: 5678901234</p>
                      </div>
                    </div>
                  </div>
                  <Button disabled className="w-full h-8 bg-gray-500/20 text-gray-400 border-0 text-xs cursor-not-allowed">
                    <ShoppingCart className="h-3 w-3 mr-1" />
                    Недоступно
                  </Button>
                </div>
              </div>
            </div>
          </div>

          {/* Код использования */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Код использования</h4>
            <div className="p-4 rounded-lg bg-black/20 border border-white/5">
              <p className="text-white/60 text-sm mb-2">📝 Пример использования карточки товара:</p>
              <pre className="text-green-400 text-xs overflow-x-auto whitespace-pre-wrap">
{`<ProductCard 
  product={{
    id: "1",
    name: "Беспроводные наушники Sony WH-1000XM4",
    article: "SONY-WH1000XM4", 
    price: 24990,
    quantity: 15,
    category: { name: "Электроника" },
    images: ["/image1.jpg", "/image2.jpg"],
    organization: {
      name: "ТехноМаркет",
      inn: "7708123456789"
    }
  }}
/>`}
              </pre>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
} 