@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gradient mb-4">🎨 معرض الأزرار المحسنة</h1>
        <p class="text-xl text-gray-600 dark:text-gray-300">استكشف جميع أنواع الأزرار والتأثيرات الحركية</p>
    </div>

    <!-- الأزرار الأساسية -->
    <div class="mb-12">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">الأزرار الأساسية</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="card p-6">
                <h3 class="font-semibold mb-4">الزر الأساسي</h3>
                <x-enhanced-button variant="primary" size="md" ripple="true">
                    زر أساسي
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">الزر الثانوي</h3>
                <x-enhanced-button variant="secondary" size="md" ripple="true">
                    زر ثانوي
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">الزر المميز</h3>
                <x-enhanced-button variant="accent" size="md" glow="true" ripple="true">
                    زر مميز
                </x-enhanced-button>
            </div>
        </div>
    </div>

    <!-- أزرار الحالة -->
    <div class="mb-12">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">أزرار الحالة</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر النجاح</h3>
                <x-enhanced-button variant="success" size="md" ripple="true">
                    نجح
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر التحذير</h3>
                <x-enhanced-button variant="warning" size="md" pulse="true" ripple="true">
                    تحذير
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر الخطر</h3>
                <x-enhanced-button variant="danger" size="md" ripple="true">
                    حذف
                </x-enhanced-button>
            </div>
        </div>
    </div>

    <!-- الأزرار الشفافة -->
    <div class="mb-12">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">الأزرار الشفافة</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="card p-6">
                <h3 class="font-semibold mb-4">الزر الشفاف</h3>
                <x-enhanced-button variant="ghost" size="md" ripple="true">
                    زر شفاف
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر الإطار</h3>
                <x-enhanced-button variant="outline" size="md" ripple="true">
                    زر إطار
                </x-enhanced-button>
            </div>
        </div>
    </div>

    <!-- الأزرار الشفافة للخلفيات الملونة -->
    <div class="mb-12 bg-gradient-to-r from-blue-600 to-purple-600 p-8 rounded-2xl">
        <h2 class="text-2xl font-bold mb-6 text-white">الأزرار الشفافة للخلفيات الملونة</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="text-center">
                <h3 class="font-semibold mb-4 text-white">الزر الأبيض</h3>
                <x-enhanced-button variant="white" size="md" ripple="true">
                    زر أبيض
                </x-enhanced-button>
            </div>
            <div class="text-center">
                <h3 class="font-semibold mb-4 text-white">زر الإطار الأبيض</h3>
                <x-enhanced-button variant="outline-white" size="md" ripple="true">
                    زر إطار أبيض
                </x-enhanced-button>
            </div>
        </div>
    </div>

    <!-- أحجام الأزرار -->
    <div class="mb-12">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">أحجام الأزرار</h2>
        <div class="card p-6">
            <div class="flex flex-wrap items-center gap-4">
                <div class="text-center">
                    <h4 class="font-semibold mb-2">صغير جداً</h4>
                    <x-enhanced-button variant="primary" size="xs" ripple="true">
                        xs
                    </x-enhanced-button>
                </div>
                <div class="text-center">
                    <h4 class="font-semibold mb-2">صغير</h4>
                    <x-enhanced-button variant="primary" size="sm" ripple="true">
                        sm
                    </x-enhanced-button>
                </div>
                <div class="text-center">
                    <h4 class="font-semibold mb-2">متوسط</h4>
                    <x-enhanced-button variant="primary" size="md" ripple="true">
                        md
                    </x-enhanced-button>
                </div>
                <div class="text-center">
                    <h4 class="font-semibold mb-2">كبير</h4>
                    <x-enhanced-button variant="primary" size="lg" ripple="true">
                        lg
                    </x-enhanced-button>
                </div>
                <div class="text-center">
                    <h4 class="font-semibold mb-2">كبير جداً</h4>
                    <x-enhanced-button variant="primary" size="xl" ripple="true">
                        xl
                    </x-enhanced-button>
                </div>
            </div>
        </div>
    </div>

    <!-- حالات الأزرار -->
    <div class="mb-12">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">حالات الأزرار</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر التحميل</h3>
                <x-enhanced-button variant="primary" size="md" loading="true">
                    جاري التحميل...
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر معطل</h3>
                <x-enhanced-button variant="primary" size="md" disabled="true">
                    زر معطل
                </x-enhanced-button>
            </div>
        </div>
    </div>

    <!-- أمثلة عملية -->
    <div class="mb-12">
        <h2 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">أمثلة عملية</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر تسجيل الدخول</h3>
                <x-enhanced-button 
                    variant="primary" 
                    size="lg" 
                    ripple="true"
                    type="submit"
                    class="w-full">
                    تسجيل الدخول
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر إنشاء حساب</h3>
                <x-enhanced-button 
                    variant="white" 
                    size="lg" 
                    ripple="true"
                    class="w-full">
                    إنشاء حساب مجاني
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر الترقية</h3>
                <x-enhanced-button 
                    variant="accent" 
                    size="md" 
                    glow="true" 
                    ripple="true">
                    ترقية الآن
                </x-enhanced-button>
            </div>
            <div class="card p-6">
                <h3 class="font-semibold mb-4">زر الحذف</h3>
                <x-enhanced-button 
                    variant="danger" 
                    size="sm" 
                    ripple="true">
                    حذف
                </x-enhanced-button>
            </div>
        </div>
    </div>

    <!-- معلومات تقنية -->
    <div class="card p-6 bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20">
        <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">معلومات تقنية</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="font-semibold mb-2">الميزات المدعومة</h3>
                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
                    <li>✅ 10 أنواع مختلفة من الأزرار</li>
                    <li>✅ 5 أحجام مختلفة</li>
                    <li>✅ 4 مؤثرات حركية متقدمة</li>
                    <li>✅ دعم الوضع المظلم</li>
                    <li>✅ استجابة للشاشات المختلفة</li>
                </ul>
            </div>
            <div>
                <h3 class="font-semibold mb-2">إمكانية الوصول</h3>
                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-300">
                    <li>✅ دعم لوحة المفاتيح</li>
                    <li>✅ دعم قارئات الشاشة</li>
                    <li>✅ دعم تقليل الحركة</li>
                    <li>✅ دعم التركيز العالي</li>
                    <li>✅ دعم الوضع المظلم</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
</style>
@endsection