@php
    $layout = 'member'; // افتراضي
    if (auth()->user()->hasRole('super-admin')) {
        $layout = 'superadmin';
    } elseif (auth()->user()->hasRole('advisor')) {
        $layout = 'advisor';
    } elseif (auth()->user()->hasRole('moderator')) {
        $layout = 'moderator';
    }
@endphp

@extends('layouts.' . $layout)

@section('title', 'دعوة الأصدقاء لـ SoftDomi')
@section('page-title', 'دعوة الأصدقاء لـ SoftDomi')

<style>
    .hero-bg {
        background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
        position: relative;
    }
    
    .feature-card {
        background: white;
        border-radius: 16px;
        transition: all 0.3s ease;
        border: 1px solid #e5e7eb;
    }
    
    .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        border-color: #3b82f6;
    }
    
    .whatsapp-btn {
        background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
        animation: pulse 2s infinite;
        box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    .tech-badge {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        margin: 2px;
        display: inline-block;
        font-weight: 500;
    }
    
    .service-icon {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
    }
    
    .logo-wide {
        width: 200px;
        height: auto;
        max-width: 100%;
    }
    
    .partnership-card {
        background: white;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
    }
    
    .partnership-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    }
</style>

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Hero Section -->
    <div class="hero-bg text-white py-20 relative">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-5xl mx-auto">
                <!-- Logo -->
                <div class="mb-8">
                    <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 inline-block mb-6 border border-white/20">
                        <img src="https://www.softdomi.com/logo.png" 
                             alt="SoftDomi" 
                             class="logo-wide mx-auto">
                    </div>
                    
                    <h1 class="text-4xl md:text-6xl font-bold mb-6 text-white">
                        مرحباً بك في 
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">SoftDomi</span>
                    </h1>
                    
                    <p class="text-xl md:text-2xl mb-8 text-gray-200 leading-relaxed">
                        شركة تطوير مواقع ومتاجر إلكترونية وتطبيقات الجوال<br>
                        بالتعاون مع 
                        <a href="https://amir-os.com/" target="_blank" 
                           class="text-yellow-400 hover:text-yellow-300 underline font-semibold transition-colors">
                           Amir-OS
                        </a>
                    </p>
                </div>
                
                <!-- CTA Button -->
                <div class="mb-12">
                    <a href="https://wa.me/201002063981?text=مرحباً، أريد الاستفسار عن خدماتكم البرمجية" 
                       target="_blank" 
                       class="whatsapp-btn inline-flex items-center gap-3 px-8 py-4 rounded-full text-white font-bold text-lg transition-all hover:shadow-xl">
                        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
                        </svg>
                        تواصل معنا واتساب
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Services Section -->
    <div class="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">خدماتنا المتميزة</h2>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto">
                    نقدم حلول برمجية متكاملة وحديثة تواكب أحدث التطورات التقنية في العالم
                </p>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
                <!-- Web Development -->
                <div class="feature-card p-8 text-center">
                    <div class="service-icon w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">مواقع إلكترونية</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        تطوير مواقع حديثة ومتجاوبة مع جميع الأجهزة باستخدام أحدث التقنيات
                    </p>
                    <div class="flex flex-wrap justify-center gap-2">
                        <span class="tech-badge">Laravel</span>
                        <span class="tech-badge">React</span>
                        <span class="tech-badge">Vue.js</span>
                        <span class="tech-badge">WordPress</span>
                    </div>
                </div>

                <!-- E-commerce -->
                <div class="feature-card p-8 text-center">
                    <div class="service-icon w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center bg-gradient-to-r from-green-500 to-emerald-600">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">متاجر إلكترونية</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        منصات تجارة إلكترونية متكاملة مع أنظمة دفع آمنة وإدارة متقدمة
                    </p>
                    <div class="flex flex-wrap justify-center gap-2">
                        <span class="tech-badge">WooCommerce</span>
                        <span class="tech-badge">Shopify</span>
                        <span class="tech-badge">Magento</span>
                        <span class="tech-badge">Custom</span>
                    </div>
                </div>

                <!-- Mobile Apps -->
                <div class="feature-card p-8 text-center">
                    <div class="service-icon w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center bg-gradient-to-r from-pink-500 to-rose-600">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a1 1 0 001-1V4a1 1 0 00-1-1H8a1 1 0 00-1 1v16a1 1 0 001 1z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">تطبيقات الجوال</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        تطبيقات أندرويد وآيفون احترافية بواجهات عصرية وأداء عالي
                    </p>
                    <div class="flex flex-wrap justify-center gap-2">
                        <span class="tech-badge">Flutter</span>
                        <span class="tech-badge">React Native</span>
                        <span class="tech-badge">Android</span>
                        <span class="tech-badge">iOS</span>
                    </div>
                </div>

                <!-- Web Systems -->
                <div class="feature-card p-8 text-center">
                    <div class="service-icon w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center bg-gradient-to-r from-indigo-500 to-blue-600">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">أنظمة إدارية</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        أنظمة إدارة متكاملة ولوحات تحكم قوية مثل النظام الحالي
                    </p>
                    <div class="flex flex-wrap justify-center gap-2">
                        <span class="tech-badge">PHP</span>
                        <span class="tech-badge">MySQL</span>
                        <span class="tech-badge">Dashboard</span>
                        <span class="tech-badge">CRM</span>
                    </div>
                </div>

                <!-- Design -->
                <div class="feature-card p-8 text-center">
                    <div class="service-icon w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center bg-gradient-to-r from-yellow-500 to-orange-600">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4 4 4 0 004-4V5z"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">تصميم UI/UX</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        تصميمات عصرية وتجربة مستخدم استثنائية تحقق أهدافك
                    </p>
                    <div class="flex flex-wrap justify-center gap-2">
                        <span class="tech-badge">Figma</span>
                        <span class="tech-badge">Adobe XD</span>
                        <span class="tech-badge">Photoshop</span>
                        <span class="tech-badge">Illustrator</span>
                    </div>
                </div>

                <!-- SEO & Marketing -->
                <div class="feature-card p-8 text-center">
                    <div class="service-icon w-16 h-16 mx-auto mb-6 rounded-full flex items-center justify-center bg-gradient-to-r from-teal-500 to-cyan-600">
                        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/>
                        </svg>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-4">SEO وتسويق رقمي</h3>
                    <p class="text-gray-600 mb-6 leading-relaxed">
                        تحسين محركات البحث وحملات تسويقية فعّالة لزيادة المبيعات
                    </p>
                    <div class="flex flex-wrap justify-center gap-2">
                        <span class="tech-badge">SEO</span>
                        <span class="tech-badge">Google Ads</span>
                        <span class="tech-badge">Facebook Ads</span>
                        <span class="tech-badge">Analytics</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Partnership Section -->
    <div class="py-20 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center max-w-4xl mx-auto mb-16">
                <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">شراكة استراتيجية متميزة</h2>
                <p class="text-xl text-gray-600 leading-relaxed">
                    نعمل بالتعاون مع شركة 
                    <a href="https://amir-os.com/" target="_blank" class="text-blue-600 hover:text-blue-700 font-semibold underline transition-colors">Amir-OS</a>
                    لتقديم حلول تقنية متكاملة ومتطورة تلبي جميع احتياجاتكم
                </p>
            </div>
            
            <div class="grid md:grid-cols-2 gap-12 max-w-4xl mx-auto">
                <div class="partnership-card text-center bg-blue-500">
                    <img src="https://www.softdomi.com/logo.png" 
                         alt="SoftDomi" 
                         class="h-16 mx-auto mb-6 object-contain">
                    <h3 class="text-2xl font-bold text-white mb-3">SoftDomi</h3>
                    <p class="text-white text-lg mb-4">شركة تطوير وبرمجة</p>
                    <div class="text-sm text-white">
                        تطوير المواقع • التطبيقات • التصميم
                    </div>
                </div>
                
                <div class="partnership-card text-center">
                    <div class="h-16 mx-auto mb-6 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center">
                        <span class="text-white font-bold text-2xl">AOS</span>
                    </div>
                    <h3 class="text-2xl font-bold text-gray-800 mb-3">Amir-OS</h3>
                    <p class="text-gray-600 text-lg mb-4">شريك تقني متخصص</p>
                    <div class="text-sm text-gray-500">
                        تقنيات متقدمة • استشارات • دعم تقني
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Section -->
    <div class="py-20 bg-gradient-to-r from-green-600 to-emerald-700 text-white relative overflow-hidden">
        <div class="absolute inset-0 bg-black/10"></div>
        <div class="container mx-auto px-4 text-center relative z-10">
            <h2 class="text-4xl md:text-5xl font-bold mb-8">تواصل معنا الآن</h2>
            <p class="text-xl md:text-2xl mb-12 text-green-100 max-w-3xl mx-auto">
                جاهزون لتحويل أفكارك إلى واقع رقمي متميز يحقق أهدافك ويتفوق على توقعاتك
            </p>
            
            <div class="flex flex-col sm:flex-row gap-6 justify-center items-center mb-12">
                <a href="https://wa.me/201002063981?text=مرحباً، أريد الاستفسار عن خدماتكم البرمجية" 
                   target="_blank" 
                   class="whatsapp-btn inline-flex items-center gap-3 px-8 py-4 rounded-full text-white font-bold text-lg transition-all">
                    <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.890-5.335 11.893-11.893A11.821 11.821 0 0020.885 3.488"/>
                    </svg>
                    واتساب: +201002063981
                </a>
                
                <a href="https://www.softdomi.com/" 
                   target="_blank" 
                   class="inline-flex items-center gap-3 px-8 py-4 bg-white/20 hover:bg-white/30 rounded-full text-white font-bold text-lg transition-all backdrop-blur-sm border border-white/30">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/>
                    </svg>
                    زيارة موقعنا
                </a>
            </div>
            
            <div class="bg-white/10 backdrop-blur-sm rounded-2xl p-8 max-w-3xl mx-auto border border-white/20">
                <h3 class="text-2xl font-bold mb-4">لماذا تختار SoftDomi؟</h3>
                <div class="grid md:grid-cols-3 gap-6 text-center">
                    <div>
                        <div class="text-3xl mb-2">⚡</div>
                        <div class="font-semibold">تطوير سريع</div>
                        <div class="text-sm text-green-100">تسليم في الوقت المحدد</div>
                    </div>
                    <div>
                        <div class="text-3xl mb-2">💎</div>
                        <div class="font-semibold">جودة عالية</div>
                        <div class="text-sm text-green-100">معايير عالمية</div>
                    </div>
                    <div>
                        <div class="text-3xl mb-2">🤝</div>
                        <div class="font-semibold">دعم مستمر</div>
                        <div class="text-sm text-green-100">متابعة ما بعد التسليم</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection