'use client'

import { ArrowLeft, Building2 } from 'lucide-react'
import React from 'react'

export function BackButtonVariantsDemo() {
  return (
    <div className="space-y-12 p-6">
      <div>
        <h2 className="text-2xl font-bold text-white mb-2">Варианты кнопки &quot;Назад&quot;</h2>
        <p className="text-white/60 mb-8">
          Интерактивные варианты размещения кнопки навигации между сайдбаром и контентом
        </p>
      </div>

      {/* ВАРИАНТ 1: ПЛАВАЮЩАЯ КНОПКА СЛЕВА */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-white">🌟 Вариант 1: Плавающая кнопка слева</h3>
        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
          <div className="flex gap-4 h-48">
            {/* Sidebar Mock */}
            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
                <span className="text-sm text-white">Rennel</span>
              </div>
              <div className="space-y-2">
                <div className="text-sm text-white/60">Главная</div>
                <div className="text-sm text-white/60">Маркет</div>
                <div className="text-sm text-white/60">Мессенджер</div>
              </div>
            </div>

            {/* Floating Back Button */}
            <div className="relative">
              <button className="absolute left-0 top-6 z-10 w-8 h-8 bg-white/10 backdrop-blur-xl border border-white/20 hover:border-white/40 rounded-full flex items-center justify-center transition-all duration-300 hover:scale-110 hover:bg-white/20 group">
                <ArrowLeft className="h-4 w-4 text-white/70 group-hover:text-white group-hover:h-5 group-hover:w-5 transition-all" />
              </button>
            </div>

            {/* Block 1 Mock */}
            <div className="flex-1 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Building2 className="h-5 w-5 text-blue-400" />
                  <h2 className="text-lg font-semibold text-white">Поставщики</h2>
                </div>
                <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
                  <span className="text-white/60">Поиск поставщиков...</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ВАРИАНТ 2: ПОЛОСА НАВИГАЦИИ СВЕРХУ */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-white">📍 Вариант 2: Полоса навигации сверху</h3>
        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
          <div className="flex gap-4">
            {/* Sidebar Mock */}
            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col h-48">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
                <span className="text-sm text-white">Rennel</span>
              </div>
              <div className="space-y-2">
                <div className="text-sm text-white/60">Главная</div>
                <div className="text-sm text-white/60">Маркет</div>
                <div className="text-sm text-white/60">Мессенджер</div>
              </div>
            </div>

            {/* Content Area */}
            <div className="flex-1">
              {/* Navigation Bar */}
              <div className="flex items-center justify-start mb-4">
                <button className="w-6 h-6 hover:w-8 hover:h-8 bg-gradient-to-r from-purple-500/20 to-blue-500/20 hover:from-purple-500/40 hover:to-blue-500/40 rounded-full flex items-center justify-center transition-all duration-300 backdrop-blur-sm border border-white/10 hover:border-white/30 group">
                  <ArrowLeft className="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/60 group-hover:text-white transition-all" />
                </button>
              </div>

              {/* Block 1 Mock */}
              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 h-[180px]">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Building2 className="h-5 w-5 text-blue-400" />
                    <h2 className="text-lg font-semibold text-white">Поставщики</h2>
                  </div>
                  <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
                    <span className="text-white/60">Поиск поставщиков...</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ВАРИАНТ 3: КНОПКА В РАЗРЫВЕ */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-white">🎯 Вариант 3: Кнопка в разрыве</h3>
        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
          <div className="flex gap-4 h-48 relative">
            {/* Sidebar Mock */}
            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
                <span className="text-sm text-white">Rennel</span>
              </div>
              <div className="space-y-2">
                <div className="text-sm text-white/60">Главная</div>
                <div className="text-sm text-white/60">Маркет</div>
                <div className="text-sm text-white/60">Мессенджер</div>
              </div>
            </div>

            {/* Button in Gap */}
            <div className="w-0 flex items-center justify-center relative">
              <button className="absolute w-10 h-10 bg-white/5 hover:bg-white/15 rounded-xl border border-white/10 hover:border-purple-400/50 flex items-center justify-center transition-all duration-500 hover:scale-125 hover:rotate-12 group backdrop-blur-md">
                <ArrowLeft className="h-4 w-4 text-white/50 group-hover:text-purple-300 transition-colors" />
              </button>
            </div>

            {/* Block 1 Mock */}
            <div className="flex-1 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Building2 className="h-5 w-5 text-blue-400" />
                  <h2 className="text-lg font-semibold text-white">Поставщики</h2>
                </div>
                <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
                  <span className="text-white/60">Поиск поставщиков...</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ВАРИАНТ 4: BREADCRUMB СТИЛЬ */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-white">🍞 Вариант 4: Breadcrumb стиль</h3>
        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
          <div className="flex gap-4">
            {/* Sidebar Mock */}
            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col h-48">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
                <span className="text-sm text-white">Rennel</span>
              </div>
              <div className="space-y-2">
                <div className="text-sm text-white/60">Главная</div>
                <div className="text-sm text-white/60">Маркет</div>
                <div className="text-sm text-white/60">Мессенджер</div>
              </div>
            </div>

            {/* Content Area */}
            <div className="flex-1">
              {/* Breadcrumb */}
              <div className="flex items-center gap-2 mb-2 pl-2">
                <button className="p-1 hover:p-2 bg-white/0 hover:bg-white/10 rounded-lg transition-all duration-300 group">
                  <ArrowLeft className="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/40 group-hover:text-white transition-all" />
                </button>
                <span className="text-white/20 text-sm">•</span>
                <span className="text-white/60 text-sm">Поставщики</span>
              </div>

              {/* Block 1 Mock */}
              <div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4 h-[180px]">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <Building2 className="h-5 w-5 text-blue-400" />
                    <h2 className="text-lg font-semibold text-white">Поставщики</h2>
                  </div>
                  <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
                    <span className="text-white/60">Поиск поставщиков...</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* ВАРИАНТ 5: ВЕРТИКАЛЬНАЯ ПАНЕЛЬ */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold text-white">🔥 Вариант 5: Вертикальная панель</h3>
        <div className="bg-white/5 rounded-lg p-6 border border-white/10">
          <div className="flex gap-4 h-48">
            {/* Sidebar Mock */}
            <div className="w-60 bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl p-4 flex flex-col">
              <div className="flex items-center gap-3 mb-6">
                <div className="w-8 h-8 bg-purple-500 rounded-full"></div>
                <span className="text-sm text-white">Rennel</span>
              </div>
              <div className="space-y-2">
                <div className="text-sm text-white/60">Главная</div>
                <div className="text-sm text-white/60">Маркет</div>
                <div className="text-sm text-white/60">Мессенджер</div>
              </div>
            </div>

            {/* Vertical Panel */}
            <div className="w-8 flex flex-col items-center py-4">
              <button className="w-6 h-6 hover:w-7 hover:h-7 bg-gradient-to-b from-purple-500/10 to-transparent hover:from-purple-500/30 hover:to-purple-400/10 rounded-full flex items-center justify-center transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/20 group">
                <ArrowLeft className="h-3 w-3 group-hover:h-4 group-hover:w-4 text-white/50 group-hover:text-purple-300 transition-all duration-300" />
              </button>
            </div>

            {/* Block 1 Mock */}
            <div className="flex-1 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl p-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <Building2 className="h-5 w-5 text-blue-400" />
                  <h2 className="text-lg font-semibold text-white">Поставщики</h2>
                </div>
                <div className="w-64 bg-white/10 border border-white/20 rounded-full px-3 py-1.5 text-sm">
                  <span className="text-white/60">Поиск поставщиков...</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="text-center text-white/60 mt-8 p-4 bg-white/5 rounded-lg border border-white/10">
        <p>Наведите курсор на кнопки для просмотра hover эффектов</p>
      </div>
    </div>
  )
}