'use client'

import {
  Monitor,
  Smartphone,
  Menu,
  Home,
  Settings,
  Users,
  MessageCircle,
  Building,
  Plus,
} from 'lucide-react'

import { Avatar, AvatarFallback } from '@/components/ui/avatar'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'

export function LayoutsDemo() {
  return (
    <div className="space-y-6">
      {/* Основные Layout паттерны */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Основные Layout паттерны</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Sidebar Layout */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Sidebar Layout</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
                {/* Sidebar */}
                <div className="w-16 bg-white/10 rounded-l-lg border-r border-white/10 flex flex-col items-center py-3 space-y-2">
                  <div className="w-8 h-8 bg-primary/30 rounded-lg flex items-center justify-center">
                    <Home className="h-4 w-4 text-primary" />
                  </div>
                  <div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center">
                    <Users className="h-4 w-4 text-white/60" />
                  </div>
                  <div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center">
                    <MessageCircle className="h-4 w-4 text-white/60" />
                  </div>
                  <div className="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center">
                    <Settings className="h-4 w-4 text-white/60" />
                  </div>
                </div>
                {/* Main Content */}
                <div className="flex-1 p-4">
                  <div className="h-4 bg-white/20 rounded mb-2"></div>
                  <div className="h-2 bg-white/10 rounded mb-2 w-3/4"></div>
                  <div className="space-y-2">
                    <div className="h-12 bg-white/5 rounded border border-white/10"></div>
                    <div className="h-12 bg-white/5 rounded border border-white/10"></div>
                  </div>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Sidebar + Main Content</div>
            </div>
          </div>

          {/* Full Sidebar Layout */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar Layout</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
                {/* Full Sidebar */}
                <div className="w-48 bg-white/10 rounded-l-lg border-r border-white/10 p-3 space-y-3">
                  {/* Profile */}
                  <div className="flex items-center space-x-2">
                    <div className="w-8 h-8 bg-primary/30 rounded-full"></div>
                    <div className="flex-1">
                      <div className="h-2 bg-white/30 rounded mb-1"></div>
                      <div className="h-1.5 bg-white/20 rounded w-2/3"></div>
                    </div>
                  </div>
                  {/* Menu Items */}
                  <div className="space-y-1">
                    <div className="h-8 bg-primary/20 rounded flex items-center px-2">
                      <div className="w-4 h-4 bg-primary/50 rounded mr-2"></div>
                      <div className="h-1.5 bg-primary/70 rounded flex-1"></div>
                    </div>
                    <div className="h-8 bg-white/5 rounded flex items-center px-2">
                      <div className="w-4 h-4 bg-white/20 rounded mr-2"></div>
                      <div className="h-1.5 bg-white/30 rounded flex-1"></div>
                    </div>
                    <div className="h-8 bg-white/5 rounded flex items-center px-2">
                      <div className="w-4 h-4 bg-white/20 rounded mr-2"></div>
                      <div className="h-1.5 bg-white/30 rounded flex-1"></div>
                    </div>
                  </div>
                </div>
                {/* Main Content */}
                <div className="flex-1 p-4">
                  <div className="h-4 bg-white/20 rounded mb-2"></div>
                  <div className="h-2 bg-white/10 rounded mb-2 w-3/4"></div>
                  <div className="grid grid-cols-2 gap-2">
                    <div className="h-16 bg-white/5 rounded border border-white/10"></div>
                    <div className="h-16 bg-white/5 rounded border border-white/10"></div>
                  </div>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Full Sidebar с профилем и навигацией</div>
            </div>
          </div>

          {/* Grid Layout */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Grid Layout</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="h-32 bg-white/5 rounded-lg border border-white/10 p-3">
                <div className="grid grid-cols-3 gap-2 h-full">
                  <div className="bg-white/10 rounded border border-white/10"></div>
                  <div className="bg-white/10 rounded border border-white/10"></div>
                  <div className="bg-white/10 rounded border border-white/10"></div>
                  <div className="bg-white/10 rounded border border-white/10"></div>
                  <div className="bg-white/10 rounded border border-white/10"></div>
                  <div className="bg-white/10 rounded border border-white/10"></div>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Grid 3x2 layout</div>
            </div>
          </div>

          {/* Split Layout */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Split Layout (Мессенджер)</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="h-40 bg-white/5 rounded-lg border border-white/10 flex">
                {/* Left Panel */}
                <div className="w-1/3 bg-white/10 rounded-l-lg border-r border-white/10 p-3">
                  <div className="h-3 bg-white/30 rounded mb-3"></div>
                  <div className="space-y-2">
                    {[1, 2, 3, 4].map((item) => (
                      <div key={item} className="flex items-center space-x-2 p-2 bg-white/5 rounded">
                        <div className="w-8 h-8 bg-primary/30 rounded-full"></div>
                        <div className="flex-1">
                          <div className="h-2 bg-white/30 rounded mb-1"></div>
                          <div className="h-1.5 bg-white/20 rounded w-2/3"></div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
                {/* Right Panel */}
                <div className="flex-1 p-3 flex flex-col">
                  <div className="h-3 bg-white/30 rounded mb-2"></div>
                  <div className="flex-1 space-y-2">
                    <div className="flex">
                      <div className="bg-white/10 rounded-lg p-2 max-w-xs">
                        <div className="h-1.5 bg-white/30 rounded"></div>
                      </div>
                    </div>
                    <div className="flex justify-end">
                      <div className="bg-primary/20 rounded-lg p-2 max-w-xs">
                        <div className="h-1.5 bg-primary/60 rounded"></div>
                      </div>
                    </div>
                  </div>
                  <div className="h-8 bg-white/10 rounded border border-white/10"></div>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Split layout для чатов</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* AuthLayout */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Auth Layout</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          <div className="bg-white/5 rounded-lg p-4 border border-white/10">
            <div className="h-48 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-lg border border-white/10 flex">
              {/* Left Side - Branding */}
              <div className="w-1/2 p-6 flex flex-col justify-center">
                <div className="text-center">
                  <div className="text-2xl font-bold text-gradient-bright mb-2">SferaV</div>
                  <div className="text-white/70 text-sm mb-4">Управление бизнесом</div>
                  <div className="space-y-2">
                    <div className="bg-white/10 rounded p-2 text-xs text-white/70">🚚 Фулфилмент</div>
                    <div className="bg-white/10 rounded p-2 text-xs text-white/70">📦 Логистика</div>
                    <div className="bg-white/10 rounded p-2 text-xs text-white/70">🛒 Селлер</div>
                  </div>
                </div>
              </div>
              {/* Right Side - Form */}
              <div className="w-1/2 p-6 flex items-center justify-center">
                <div className="w-full max-w-xs glass-card p-4">
                  <div className="text-center mb-3">
                    <div className="h-3 bg-white/30 rounded mb-2"></div>
                    <div className="h-1 bg-white/20 rounded"></div>
                  </div>
                  <div className="space-y-3">
                    <div className="h-8 glass-input rounded border border-white/20"></div>
                    <div className="h-8 glass-button rounded text-center"></div>
                  </div>
                </div>
              </div>
            </div>
            <div className="mt-2 text-xs text-white/60 font-mono">Двухколоночный layout для авторизации</div>
          </div>
        </CardContent>
      </Card>

      {/* Adaptive Layouts */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Адаптивные Layout</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Desktop */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3 flex items-center">
              <Monitor className="h-4 w-4 mr-2 text-blue-400" />
              Desktop
            </h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="h-32 bg-white/5 rounded-lg border border-white/10 flex">
                <div className="w-56 bg-white/10 border-r border-white/10 p-2">
                  <div className="text-xs text-white/60 text-center">Sidebar</div>
                </div>
                <div className="flex-1 p-2">
                  <div className="text-xs text-white/60 text-center">Main Content</div>
                  <div className="grid grid-cols-3 gap-1 mt-2 h-20">
                    <div className="bg-white/10 rounded"></div>
                    <div className="bg-white/10 rounded"></div>
                    <div className="bg-white/10 rounded"></div>
                  </div>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">lg:grid-cols-3 lg:gap-6</div>
            </div>
          </div>

          {/* Mobile */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3 flex items-center">
              <Smartphone className="h-4 w-4 mr-2 text-green-400" />
              Mobile
            </h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-40 mx-auto">
                <div className="h-40 bg-white/5 rounded-lg border border-white/10 flex flex-col">
                  {/* Mobile Header */}
                  <div className="h-8 bg-white/10 border-b border-white/10 flex items-center justify-between px-2">
                    <Menu className="h-3 w-3 text-white/60" />
                    <div className="text-xs text-white/60">SferaV</div>
                    <div className="w-3"></div>
                  </div>
                  {/* Mobile Content */}
                  <div className="flex-1 p-2">
                    <div className="space-y-1">
                      <div className="h-12 bg-white/10 rounded"></div>
                      <div className="h-12 bg-white/10 rounded"></div>
                      <div className="h-12 bg-white/10 rounded"></div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono text-center">grid-cols-1 gap-3</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Sidebar Examples */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Компоненты Sidebar</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Mini Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Mini Sidebar</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-16 glass-sidebar rounded-lg p-2 space-y-2">
                <div className="flex items-center justify-center">
                  <Avatar className="h-8 w-8 bg-primary/30">
                    <AvatarFallback className="bg-primary/30 text-white text-xs">SF</AvatarFallback>
                  </Avatar>
                </div>
                <div className="space-y-1">
                  <Button variant="glass" size="icon" className="w-12 h-10">
                    <Home className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
                    <Users className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
                    <MessageCircle className="h-4 w-4" />
                  </Button>
                  <Button variant="ghost" size="icon" className="w-12 h-10 text-white/60">
                    <Settings className="h-4 w-4" />
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Компактный sidebar (w-16)</div>
            </div>
          </div>

          {/* Full Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Full Sidebar</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/10">
                  <Avatar className="h-10 w-10 bg-primary/30">
                    <AvatarFallback className="bg-primary/30 text-white">SF</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">SferaV Inc</div>
                    <Badge variant="outline" className="border-primary/50 text-primary text-xs">
                      Фулфилмент
                    </Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button variant="glass" className="w-full justify-start h-10">
                    <Home className="h-4 w-4 mr-3" />
                    Главная
                  </Button>
                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
                    <Users className="h-4 w-4 mr-3" />
                    Сотрудники
                  </Button>
                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Мессенджер
                  </Button>
                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
                    <Building className="h-4 w-4 mr-3" />
                    Партнеры
                  </Button>
                  <Button variant="ghost" className="w-full justify-start h-10 text-white/70">
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Полный sidebar с профилем (w-56)</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Новые градиентные сайдбары */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Градиентные сайдбары</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Cosmic Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Космический градиент</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-cosmic rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">CS</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Cosmic Space</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Космос</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Галактика
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Экипаж
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Связь
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-cosmic с космической темой</div>
            </div>
          </div>

          {/* Fire Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Огненный градиент</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-fire rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">FR</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Fire Studio</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Креатив</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Студия
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Команда
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Plus className="h-4 w-4 mr-3" />
                    Проекты
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-fire с огненной энергией</div>
            </div>
          </div>

          {/* Aurora Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Северное сияние</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-aurora rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">AR</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Aurora Labs</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Инновации</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Лаборатория
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Ученые
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Исследования
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-aurora с многоцветным сиянием</div>
            </div>
          </div>

          {/* Ocean Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Океанический градиент</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-ocean rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">OC</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Ocean Deep</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Морской</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Океан
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Экипаж
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Навигация
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-ocean с морской глубиной</div>
            </div>
          </div>

          {/* Emerald Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Изумрудный градиент</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-emerald rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">EM</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Emerald Tech</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Эко</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Главная
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Команда
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Проекты
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-emerald с природной энергией</div>
            </div>
          </div>

          {/* Sunset Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Закатный градиент</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-sunset rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">SN</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Sunset Co</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Дизайн</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Студия
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Дизайнеры
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Портфолио
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-sunset с теплым закатом</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Кастомные космические сайдбары */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Кастомные космические сайдбары</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Corporate Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Корпоративный космос</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-corporate rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">CP</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Corporate Space Ltd</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Бизнес</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Дашборд
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Сотрудники
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Building className="h-4 w-4 mr-3" />
                    Отчеты
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-corporate - строгий деловой стиль</div>
            </div>
          </div>

          {/* Nebula Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Туманность</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-nebula rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">NB</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Nebula Creative</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Креатив</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Вдохновение
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Художники
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Галерея
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-nebula - яркие космические цвета</div>
            </div>
          </div>

          {/* Galaxy Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Галактика</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-galaxy rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">GX</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Galaxy Explorer</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Исследования</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Экспедиции
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Исследователи
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Открытия
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-galaxy - сложный многоцветный переход</div>
            </div>
          </div>

          {/* Starfield Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Звездное поле</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-starfield rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">SF</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Starfield Observatory</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Наблюдения</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Телескоп
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Астрономы
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Каталог
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-starfield - темный минималистичный</div>
            </div>
          </div>

          {/* Quantum Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Квантовый</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-quantum rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">QM</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Quantum Mechanics Lab</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Наука</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Эксперименты
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Физики
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Теории
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-quantum - энергичный научный стиль</div>
            </div>
          </div>

          {/* Void Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Пустота</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-void rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">VD</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Void Walker</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Минимализм</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Медитация
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Философы
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Пустота
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-void - ультра-темный космос</div>
            </div>
          </div>

          {/* Supernova Gradient Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Сверхновая</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 gradient-supernova rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <Avatar className="h-10 w-10 bg-white/20 border-2 border-white/30">
                    <AvatarFallback className="bg-white/20 text-white font-semibold">SN</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Supernova Studios</div>
                    <Badge className="bg-white/20 text-white border-white/30 text-xs">Энергия</Badge>
                  </div>
                </div>

                {/* Navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/20 hover:bg-white/30 border-white/30 text-white">
                    <Home className="h-4 w-4 mr-3" />
                    Взрыв
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Users className="h-4 w-4 mr-3" />
                    Команда
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Plus className="h-4 w-4 mr-3" />
                    Проекты
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/10"
                  >
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">gradient-supernova - яркий взрывной градиент</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Утонченные космические сайдбары с акцентами */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Утонченные космические сайдбары</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Corporate Refined Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Корпоративный утонченный</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile with accent */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <div className="relative">
                    <Avatar className="h-10 w-10 bg-white/10 border-2 border-white/20">
                      <AvatarFallback className="bg-white/10 text-white font-semibold">CP</AvatarFallback>
                    </Avatar>
                    <div className="absolute -top-1 -right-1 w-4 h-4 gradient-corporate-accent rounded-full border border-white/30"></div>
                  </div>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Corporate Elite</div>
                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs">Премиум</Badge>
                  </div>
                </div>

                {/* Navigation with subtle accents */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative overflow-hidden">
                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent"></div>
                    <Home className="h-4 w-4 mr-3 ml-2" />
                    Дашборд
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Users className="h-4 w-4 mr-3 ml-2" />
                    Сотрудники
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Building className="h-4 w-4 mr-3 ml-2" />
                    Отчеты
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute left-0 top-0 bottom-0 w-1 gradient-corporate-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Settings className="h-4 w-4 mr-3 ml-2" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Утонченный корпоративный с акцентами</div>
            </div>
          </div>

          {/* Nebula Refined Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Туманность утонченная</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile with nebula accent */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20">
                  <div className="relative">
                    <Avatar className="h-10 w-10 bg-white/10 border-2 border-white/20">
                      <AvatarFallback className="bg-white/10 text-white font-semibold">NB</AvatarFallback>
                    </Avatar>
                    <div className="absolute inset-0 gradient-nebula-accent opacity-20 rounded-full"></div>
                  </div>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Nebula Refined</div>
                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs">Креатив</Badge>
                  </div>
                </div>

                {/* Navigation with glow effects */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative">
                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full"></div>
                    <Home className="h-4 w-4 mr-3" />
                    Вдохновение
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Users className="h-4 w-4 mr-3" />
                    Художники
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Галерея
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 gradient-nebula-accent rounded-full opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Мягкие акценты с точечными индикаторами</div>
            </div>
          </div>

          {/* Galaxy Refined Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Галактика элегантная</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Profile with gradient border */}
                <div className="flex items-center space-x-3 pb-4 relative">
                  <div className="absolute bottom-0 left-0 right-0 h-px gradient-galaxy-accent"></div>
                  <Avatar className="h-10 w-10 bg-white/10 border border-white/20">
                    <AvatarFallback className="bg-white/10 text-white font-semibold">GX</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Galaxy Elegant</div>
                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs">Исследования</Badge>
                  </div>
                </div>

                {/* Navigation with underline accents */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative">
                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent"></div>
                    <Home className="h-4 w-4 mr-3" />
                    Экспедиции
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Users className="h-4 w-4 mr-3" />
                    Исследователи
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Открытия
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group"
                  >
                    <div className="absolute bottom-0 left-4 right-4 h-px gradient-galaxy-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Элегантные подчеркивания и границы</div>
            </div>
          </div>

          {/* Ethereal Premium Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Восхитительный эфирный ✨</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20 relative overflow-hidden">
                {/* Subtle ethereal background */}
                <div className="absolute inset-0 gradient-ethereal opacity-10"></div>

                {/* Profile with ethereal glow */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/20 relative z-10">
                  <div className="relative">
                    <Avatar className="h-10 w-10 bg-white/10 border border-white/20">
                      <AvatarFallback className="bg-white/10 text-white font-semibold">ET</AvatarFallback>
                    </Avatar>
                    <div className="absolute inset-0 gradient-ethereal opacity-30 rounded-full blur-sm"></div>
                  </div>
                  <div className="flex-1">
                    <div className="text-white font-medium text-sm">Ethereal Cosmos</div>
                    <Badge className="bg-white/10 text-white/80 border-white/20 text-xs relative">
                      <div className="absolute inset-0 gradient-ethereal opacity-20 rounded"></div>
                      <span className="relative">Премиум</span>
                    </Badge>
                  </div>
                </div>

                {/* Navigation with ethereal effects */}
                <div className="space-y-1 relative z-10">
                  <Button className="w-full justify-start h-10 bg-white/10 hover:bg-white/15 border-white/20 text-white relative overflow-hidden group">
                    <div className="absolute inset-0 gradient-ethereal opacity-20 group-hover:opacity-30 transition-opacity"></div>
                    <Home className="h-4 w-4 mr-3 relative z-10" />
                    <span className="relative z-10">Пространство</span>
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
                  >
                    <div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
                    <Users className="h-4 w-4 mr-3 relative z-10" />
                    <span className="relative z-10">Путешественники</span>
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
                  >
                    <div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
                    <MessageCircle className="h-4 w-4 mr-3 relative z-10" />
                    <span className="relative z-10">Измерения</span>
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/80 hover:text-white hover:bg-white/5 relative group overflow-hidden"
                  >
                    <div className="absolute inset-0 gradient-ethereal opacity-0 group-hover:opacity-15 transition-opacity"></div>
                    <Settings className="h-4 w-4 mr-3 relative z-10" />
                    <span className="relative z-10">Настройки</span>
                  </Button>
                </div>

                {/* Floating particles effect */}
                <div className="absolute inset-0 pointer-events-none">
                  <div className="absolute top-4 left-8 w-1 h-1 gradient-ethereal rounded-full animate-pulse"></div>
                  <div
                    className="absolute top-12 right-6 w-0.5 h-0.5 gradient-ethereal rounded-full animate-pulse"
                    style={{ animationDelay: '0.5s' }}
                  ></div>
                  <div
                    className="absolute bottom-8 left-12 w-1 h-1 gradient-ethereal rounded-full animate-pulse"
                    style={{ animationDelay: '1s' }}
                  ></div>
                  <div
                    className="absolute bottom-16 right-10 w-0.5 h-0.5 gradient-ethereal rounded-full animate-pulse"
                    style={{ animationDelay: '1.5s' }}
                  ></div>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Восхитительный эфирный с плавающими частицами</div>
            </div>
          </div>

          {/* Void Refined Sidebar */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Пустота минималистичная</h4>
            <div className="bg-white/5 rounded-lg p-4 border border-white/10">
              <div className="w-56 glass-sidebar rounded-lg p-4 space-y-4 backdrop-blur-sm border border-white/20">
                {/* Minimal profile */}
                <div className="flex items-center space-x-3 pb-4 border-b border-white/10">
                  <Avatar className="h-10 w-10 bg-white/5 border border-white/10">
                    <AvatarFallback className="bg-white/5 text-white/80 font-semibold">VD</AvatarFallback>
                  </Avatar>
                  <div className="flex-1">
                    <div className="text-white/90 font-medium text-sm">Void Minimal</div>
                    <Badge className="bg-white/5 text-white/60 border-white/10 text-xs">Минимализм</Badge>
                  </div>
                </div>

                {/* Ultra minimal navigation */}
                <div className="space-y-1">
                  <Button className="w-full justify-start h-10 bg-white/5 hover:bg-white/8 border-white/10 text-white/90 relative">
                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent"></div>
                    <Home className="h-4 w-4 mr-3" />
                    Медитация
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
                  >
                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Users className="h-4 w-4 mr-3" />
                    Философы
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
                  >
                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <MessageCircle className="h-4 w-4 mr-3" />
                    Пустота
                  </Button>
                  <Button
                    variant="ghost"
                    className="w-full justify-start h-10 text-white/60 hover:text-white/90 hover:bg-white/3 relative group"
                  >
                    <div className="absolute left-0 top-0 bottom-0 w-px gradient-void-accent opacity-0 group-hover:opacity-100 transition-opacity"></div>
                    <Settings className="h-4 w-4 mr-3" />
                    Настройки
                  </Button>
                </div>
              </div>
              <div className="mt-2 text-xs text-white/60 font-mono">Ультра-минималистичный с тонкими акцентами</div>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Spacing and Structure */}
      <Card className="glass-card border-white/10">
        <CardHeader>
          <CardTitle className="text-white">Структура и отступы</CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Container */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Container Patterns</h4>
            <div className="space-y-4">
              <div className="bg-white/5 rounded-lg p-6 border border-white/10">
                <div className="text-xs text-white/60 mb-2">p-6 (24px padding)</div>
                <div className="bg-white/10 rounded p-4">
                  <div className="text-xs text-white/60 mb-2">p-4 (16px padding)</div>
                  <div className="bg-white/20 rounded p-2">
                    <div className="text-xs text-white/60">p-2 (8px padding)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Spacing */}
          <div>
            <h4 className="text-white/90 text-sm font-medium mb-3">Space Patterns</h4>
            <div className="space-y-6">
              <div className="bg-white/5 rounded-lg p-4 border border-white/10">
                <div className="text-xs text-white/60 mb-3">space-y-6</div>
                <div className="space-y-6">
                  <div className="h-8 bg-white/20 rounded"></div>
                  <div className="h-8 bg-white/20 rounded"></div>
                  <div className="h-8 bg-white/20 rounded"></div>
                </div>
              </div>
              <div className="bg-white/5 rounded-lg p-4 border border-white/10">
                <div className="text-xs text-white/60 mb-3">space-y-3</div>
                <div className="space-y-3">
                  <div className="h-8 bg-white/20 rounded"></div>
                  <div className="h-8 bg-white/20 rounded"></div>
                  <div className="h-8 bg-white/20 rounded"></div>
                </div>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
