@php
    $user = auth()->user();
    // تحديد الـ layout بناءً على الـ role
    if ($user->hasRole('super-admin')) {
        $layout = 'superadmin';
    } elseif ($user->hasRole('advisor')) {
        $layout = 'advisor';
    } elseif ($user->hasRole('moderator')) {
        $layout = 'moderator';
    } else {
        // ✅ للأعضاء استخدمي member layout
        $layout = 'member';
    }
@endphp



@extends('layouts.' . $layout)

@section('title', 'دعوة الأصدقاء للفريق')
@section('page-title', 'دعوة الأصدقاء للفريق')

<style>
    .hero-bg {
        background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    }
    
    .feature-card {
        background: white;
        border-radius: 15px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);
    }
    
    .feature-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(255, 215, 0, 0.2);
    }
    
    .coming-soon-badge {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: white;
        padding: 8px 20px;
        border-radius: 25px;
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        margin-top: 1rem;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.8; }
    }
</style>

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <div class="hero-bg text-white py-16">
        <div class="container mx-auto px-4 text-center">
            <div class="max-w-3xl mx-auto">
                <div class="mb-6">
                    <svg class="w-20 h-20 mx-auto mb-4 text-white" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">
                        دعوة الأصدقاء للفريق
                    </h1>
                    <p class="text-xl text-orange-100">
                        نظام دعوات حصري لأعضاء فريق الوفاء الذهبي
                    </p>
                </div>
                
                <div class="coming-soon-badge">
                    قريباً
                </div>
            </div>
        </div>
    </div>

    <!-- مميزات بسيطة -->
    <div class="py-16">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">مميزات نظام الدعوات</h2>
                <p class="text-gray-600">سيتم إطلاق نظام دعوات متطور قريباً</p>
            </div>

            <div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
                <!-- نقاط الدعوة -->
                <div class="feature-card p-6 text-center">
                    <div class="w-12 h-12 mx-auto mb-4 bg-yellow-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">نقاط مكافآت</h3>
                    <p class="text-gray-600 text-sm">احصل على نقاط عند دعوة أصدقاء جدد للفريق</p>
                </div>

                <!-- رابط خاص -->
                <div class="feature-card p-6 text-center">
                    <div class="w-12 h-12 mx-auto mb-4 bg-blue-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">رابط شخصي</h3>
                    <p class="text-gray-600 text-sm">رابط دعوة خاص بك لمشاركته مع الأصدقاء</p>
                </div>

                <!-- متابعة الدعوات -->
                <div class="feature-card p-6 text-center">
                    <div class="w-12 h-12 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-2">متابعة الدعوات</h3>
                    <p class="text-gray-600 text-sm">تتبع الأصدقاء الذين انضموا عبر دعوتك</p>
                </div>
            </div>
        </div>
    </div>

    <!-- رسالة بسيطة -->
    <div class="py-12 bg-white">
        <div class="container mx-auto px-4 text-center">
            <div class="max-w-2xl mx-auto">
                <h3 class="text-2xl font-bold text-gray-800 mb-4">نعمل على تطوير النظام</h3>
                <p class="text-gray-600 mb-6">
                    سيتم إطلاق نظام الدعوات قريباً ليتيح لك دعوة أصدقائك للانضمام للفريق 
                    والحصول على نقاط ومكافآت حصرية
                </p>
                <div class="bg-gray-100 rounded-lg p-6">
                    <p class="text-gray-500 text-sm">
                        ترقب الإعلان عن موعد الإطلاق قريباً
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection