<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ app()->getLocale() == 'ar' ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    @php
        $systemName = \App\Models\SystemSetting::get('system_name', 'نظام المبيعات');
        $systemLogo = \App\Models\SystemSetting::get('system_logo');
        $salesPhone = \App\Models\SystemSetting::get('sales_phone');
        if ($salesPhone) {
            $salesPhone = preg_replace('/\D/', '', $salesPhone);
            if (str_starts_with($salesPhone, '0')) {
                $salesPhone = '966' . substr($salesPhone, 1);
            }
        }
        $logoUrl = $systemLogo ? asset('storage/' . $systemLogo) : asset('images/logo.png');
    @endphp
    <meta name="description" content="{{ $systemName }} - نظام إدارة متكامل للأنشطة التجارية والخدمية">
    <meta name="keywords" content="{{ $systemName }}، المبيعات، إدارة، محاسبة، خدمات، تجاري">

    <title>{{ $systemName }} - إدارة متكاملة للأنشطة التجارية والخدمية</title>

    <link rel="icon" href="{{ $logoUrl }}" type="image/png">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">
    @vite(['resources/css/app.css', 'resources/js/app.js'])

    <style>
        * { font-family: 'Cairo', sans-serif; }

        html {
            scroll-behavior: smooth;
        }

        .hero-section {
            background-image: url('{{ asset("images/minsite.jpeg") }}');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 80vh;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(30, 60, 114, 0.4) 100%);
        }

        [dir="rtl"] .hero-overlay {
            background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(30, 60, 114, 0.4) 100%);
        }

        .hero-content-wrapper {
            position: relative;
            z-index: 10;
        }

        .hero-gradient {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #7e8ba3 100%);
        }

        .feature-card {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 12px;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(30, 60, 114, 0.15);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-left: 16px;
            flex-shrink: 0;
        }

        .cta-button {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(245, 158, 11, 0.3);
        }

        .navbar-gradient {
            background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%);
        }

        .whatsapp-float {
            position: fixed;
            bottom: 40px;
            right: 40px;
            background-color: #25d366;
            color: #FFF;
            border-radius: 50px;
            text-align: center;
            font-size: 30px;
            box-shadow: 2px 2px 3px #999;
            z-index: 100;
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .whatsapp-float:hover {
            transform: scale(1.1);
            background-color: #128c7e;
        }

        @media (max-width: 640px) {
            .cta-button, .border-2.border-white {
                min-height: 48px;
            }
            .whatsapp-float {
                bottom: 20px;
                right: 20px;
            }
        }
    </style>
</head>
<body class="antialiased" x-data="{ showSystemModal: false, selectedUrl: '' }">
    <!-- Navigation Bar -->
    <nav class="navbar-gradient text-white shadow-lg sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <img src="{{ $logoUrl }}" alt="{{ $systemName }}" class="h-10 w-10 object-contain">
                    <span class="text-2xl font-bold">{{ $systemName }}</span>
                </div>

                <!-- Login/Register Links -->
                @if (Route::has('login'))
                    <div class="flex items-center space-x-4">
                        @auth
                            <a href="{{ url('/dashboard') }}" class="px-6 py-2 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300">لوحة التحكم</a>
                        @else
                            @if($activities->count() > 0)
                                <button @click="showSystemModal = true" class="px-6 py-2 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300">تسجيل الدخول</button>
                                @if (Route::has('register'))
                                    <button @click="showSystemModal = true" class="px-6 py-2 bg-white text-blue-700 rounded-lg font-bold hover:bg-gray-100 transition duration-300">إنشاء حساب</button>
                                @endif
                            @else
                                <a href="{{ route('login') }}" class="px-6 py-2 rounded-lg font-semibold hover:bg-white hover:bg-opacity-10 transition duration-300">تسجيل الدخول</a>
                                @if (Route::has('register'))
                                    <a href="{{ route('register') }}" class="px-6 py-2 bg-white text-blue-700 rounded-lg font-bold hover:bg-gray-100 transition duration-300">إنشاء حساب</a>
                                @endif
                            @endif
                        @endauth
                    </div>
                @endif
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section text-white relative overflow-hidden">
        <div class="hero-overlay"></div>
    </section>

    <!-- Call to Action Buttons -->
    <div class="bg-gray-50 py-10">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col sm:flex-row justify-center gap-6 items-center">
                @if($activities->count() > 0)
                    <button @click="showSystemModal = true" class="cta-button text-white font-bold py-4 px-12 rounded-lg inline-flex items-center justify-center gap-3 text-lg w-full sm:w-auto hover:shadow-2xl">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        <span>ابدأ الآن مجاناً</span>
                    </button>
                    <button @click="showSystemModal = true" class="border-2 border-blue-700 text-blue-700 font-bold py-4 px-12 rounded-lg hover:bg-blue-50 transition duration-300 inline-flex items-center justify-center gap-2 text-lg w-full sm:w-auto">
                        <span>تسجيل الدخول</span>
                    </button>
                @else
                    <a href="{{ route('register') }}" class="cta-button text-white font-bold py-4 px-12 rounded-lg inline-flex items-center justify-center gap-3 text-lg w-full sm:w-auto hover:shadow-2xl">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        <span>ابدأ الآن مجاناً</span>
                    </a>
                    <a href="{{ route('login') }}" class="border-2 border-blue-700 text-blue-700 font-bold py-4 px-12 rounded-lg hover:bg-blue-50 transition duration-300 inline-flex items-center justify-center gap-2 text-lg w-full sm:w-auto">
                        <span>تسجيل الدخول</span>
                    </a>
                @endif
            </div>
        </div>
    </div>

    <!-- Features Grid -->
    <section class="py-20 md:py-32 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">مميزات النظام</h2>
                <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">مجموعة شاملة من الأدوات والميزات لتسهيل إدارة عملك</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Sales Management -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-blue-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">إدارة المبيعات</h3>
                            <p class="text-sm text-gray-500 mt-1">متابعة المبيعات والخدمات</p>
                        </div>
                    </div>
                    <p class="text-gray-600">نظام متكامل لإدارة عمليات البيع وإصدار الفواتير للعملاء مع تتبع التحصيلات والتقارير.</p>
                </div>

                <!-- Purchasing Management -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-green-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">إدارة المشتريات</h3>
                            <p class="text-sm text-gray-500 mt-1">إدارة الموردين والطلبات</p>
                        </div>
                    </div>
                    <p class="text-gray-600">إدارة شاملة لعمليات الشراء وفواتير الموردين والطلبات مع تتبع المدفوعات والارصدة.</p>
                </div>

                <!-- Financial & Accounting -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-purple-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">المالية والمحاسبة</h3>
                            <p class="text-sm text-gray-500 mt-1">دليل حسابات متقدم</p>
                        </div>
                    </div>
                    <p class="text-gray-600">إدارة كاملة للحسابات والقيود اليومية والتقارير المالية مع دعم متطلبات الزكاة والدخل السعودية.</p>
                </div>

                <!-- Banking & Treasury -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-yellow-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">البنوك والخزائن</h3>
                            <p class="text-sm text-gray-500 mt-1">إدارة المدفوعات</p>
                        </div>
                    </div>
                    <p class="text-gray-600">إدارة حسابات البنك والخزائن والودائع والمدفوعات مع المصالحة البنكية التلقائية.</p>
                </div>

                <!-- E-Invoices (ZATCA) -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-red-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">الفواتير الإلكترونية</h3>
                            <p class="text-sm text-gray-500 mt-1">توافق ZATCA</p>
                        </div>
                    </div>
                    <p class="text-gray-600">إصدار فواتير إلكترونية متوافقة مع متطلبات الهيئة العامة للزكاة والدخل السعودية.</p>
                </div>

                <!-- HR Management -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-indigo-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">الموارد البشرية</h3>
                            <p class="text-sm text-gray-500 mt-1">إدارة الموظفين</p>
                        </div>
                    </div>
                    <p class="text-gray-600">إدارة شاملة لشؤون الموظفين والرواتب والإجازات والحضور والانصراف والعقود الوظيفية.</p>
                </div>

                <!-- Inventory Management -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-pink-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-pink-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m0 10v10l8 4m0-10l8-4" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">إدارة المخزن</h3>
                            <p class="text-sm text-gray-500 mt-1">تتبع الأصناف</p>
                        </div>
                    </div>
                    <p class="text-gray-600">إدارة متكاملة للمخزون مع تتبع الأصناف وكمياتها وأسعارها والمدخلات والمخرجات.</p>
                </div>

                <!-- Customers & Suppliers -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-teal-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.856-1.487M15 10a3 3 0 11-6 0 3 3 0 016 0zM4 20h16a2 2 0 002-2v-2a3 3 0 00-5.856-1.487M9 10a3 3 0 11-6 0 3 3 0 016 0z" />
                            </svg>
                        </div>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">العملاء والموردين</h3>
                            <p class="text-sm text-gray-500 mt-1">إدارة العلاقات</p>
                        </div>
                    </div>
                    <p class="text-gray-600">إدارة شاملة لبيانات العملاء والموردين والفواتير والدفعات والحسابات المدينة والدائنة.</p>
                </div>

                <!-- Advanced Reports -->
                <div class="feature-card bg-white p-8 border border-gray-200">
                    <div class="flex items-start mb-6">
                        <div class="feature-icon bg-orange-100">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-orange-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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>
                        <div>
                            <h3 class="text-xl font-bold text-gray-900">التقارير المتقدمة</h3>
                            <p class="text-sm text-gray-500 mt-1">رؤى شاملة</p>
                        </div>
                    </div>
                    <p class="text-gray-600">تقارير مالية وإدارية متقدمة مع رسوم بيانية وإحصائيات وإمكانية التصدير بصيغ متعددة.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Key Benefits Section -->
    <section class="py-20 md:py-32 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">لماذا معادلة؟</h2>
                <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto">مميزات فريدة تجعل نظام معادلة الخيار الأمثل</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-600 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">سهل الاستخدام</h3>
                        <p class="mt-2 text-gray-600">واجهة بديهية وسهلة الاستخدام لا تتطلب تدريب معقد</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-600 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">توافق ZATCA</h3>
                        <p class="mt-2 text-gray-600">متوافق تماماً مع متطلبات هيئة الزكاة والدخل السعودية</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-600 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">دعم فني 24/7</h3>
                        <p class="mt-2 text-gray-600">فريق دعم متخصص جاهز للمساعدة في أي وقت</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-600 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">آمن وموثوق</h3>
                        <p class="mt-2 text-gray-600">تشفير عالي الأمان وحماية كاملة لبيانات شركتك</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-600 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">سعر منخفض</h3>
                        <p class="mt-2 text-gray-600">أسعار منافسة مع جودة عالية وميزات شاملة</p>
                    </div>
                </div>

                <div class="flex gap-6">
                    <div class="flex-shrink-0">
                        <div class="flex items-center justify-center h-12 w-12 rounded-lg bg-blue-600 text-white">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                            </svg>
                        </div>
                    </div>
                    <div>
                        <h3 class="text-lg font-bold text-gray-900">تحديثات مستمرة</h3>
                        <p class="mt-2 text-gray-600">تحديثات مستمرة وميزات جديدة بناءً على احتياجات المستخدمين</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 md:py-32 hero-gradient text-white">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-6">
                هل أنت مستعد لتحسين إدارة شركتك؟
            </h2>
            <p class="text-lg md:text-xl mb-12 text-gray-100 leading-relaxed">
                انضم لمئات الشركات التي تثق بنظام {{ $systemName }} في إدارة أعمالهم
            </p>
            <div class="flex flex-col sm:flex-row justify-center gap-6 items-center">
                <a href="{{ route('register') }}" class="cta-button text-white font-bold py-3 px-10 rounded-lg inline-flex items-center justify-center gap-3 text-base w-full sm:w-auto hover:shadow-2xl">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    <span>إنشاء حساب مجاني الآن</span>
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-100 py-16 md:py-20">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
                <div>
                    <div class="flex items-center gap-2 mb-6">
                        <img src="{{ $logoUrl }}" alt="{{ $systemName }}" class="h-8 w-8 object-contain">
                        <span class="text-2xl font-bold text-yellow-400">{{ $systemName }}</span>
                    </div>
                    <p class="text-gray-400 leading-relaxed">نظام إدارة متكامل للأنشطة التجارية والخدمية والحلول الرقمية المتقدمة.</p>
                </div>

                <div>
                    <h4 class="font-bold text-white mb-6">المنتج</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="#" class="hover:text-white transition duration-200">المميزات</a></li>
                        <li><a href="#" class="hover:text-white transition duration-200">الأسعار</a></li>
                        <li><a href="#" class="hover:text-white transition duration-200">الأمان</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-bold text-white mb-6">الدعم</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="#" class="hover:text-white transition duration-200">مركز المساعدة</a></li>
                        <li><a href="#" class="hover:text-white transition duration-200">التوثيق</a></li>
                        <li><a href="#" class="hover:text-white transition duration-200">اتصل بنا</a></li>
                    </ul>
                </div>

                <div>
                    <h4 class="font-bold text-white mb-6">قانوني</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li><a href="#" class="hover:text-white transition duration-200">سياسة الخصوصية</a></li>
                        <li><a href="#" class="hover:text-white transition duration-200">شروط الخدمة</a></li>
                        <li><a href="#" class="hover:text-white transition duration-200">السياسات</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-8 text-center text-gray-400">
                <p>جميع الحقوق محفوظة &copy; {{ date('Y') }} | {{ $systemName }}</p>
            </div>
        </div>
    </footer>
    <!-- System Selection Modal -->
    <div x-show="showSystemModal" 
        class="fixed inset-0 z-[100] overflow-y-auto" 
        x-cloak
        style="display: none;">
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
            <div x-show="showSystemModal" 
                x-transition:enter="ease-out duration-300" 
                x-transition:enter-start="opacity-0" 
                x-transition:enter-end="opacity-100" 
                x-transition:leave="ease-in duration-200" 
                x-transition:leave-start="opacity-100" 
                x-transition:leave-end="opacity-0" 
                class="fixed inset-0 transition-opacity" 
                aria-hidden="true"
                @click="showSystemModal = false">
                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
            </div>

            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

            <div x-show="showSystemModal" 
                x-transition:enter="ease-out duration-300" 
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" 
                x-transition:leave="ease-in duration-200" 
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" 
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" 
                class="inline-block align-bottom bg-white rounded-lg text-right overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
                
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start sm:flex-row-reverse">
                        <div class="mt-3 text-center sm:mt-0 sm:mr-4 sm:text-right w-full">
                            <h3 class="text-lg leading-6 font-bold text-gray-900 mb-4" id="modal-title">
                                اختر النظام المطلوب
                            </h3>
                            <div class="mt-2 space-y-3">
                                <!-- Default System -->
                                <a href="{{ route('login') }}" class="flex items-center p-4 border rounded-lg hover:bg-gray-50 transition duration-150 group">
                                    <div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center group-hover:bg-indigo-200">
                                        <svg class="h-6 w-6 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                        </svg>
                                    </div>
                                    <div class="mr-4 text-right">
                                        <div class="text-sm font-bold text-gray-900">النظام التجاري والخدمي (الافتراضي)</div>
                                        <div class="text-xs text-gray-500">نظام إدارة الأنشطة التجارية والخدمية</div>
                                    </div>
                                </a>

                                <!-- Dynamic Systems -->
                                @foreach($activities as $activity)
                                    <a href="{{ $activity->login_url }}" class="flex items-center p-4 border rounded-lg hover:bg-gray-50 transition duration-150 group">
                                        <div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center group-hover:bg-blue-200">
                                            <svg class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                            </svg>
                                        </div>
                                        <div class="mr-4 text-right">
                                            <div class="text-sm font-bold text-gray-900">{{ $activity->name }}</div>
                                            <div class="text-xs text-gray-500">الربط مع {{ $activity->name }}</div>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
                    <button type="button" @click="showSystemModal = false" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:w-auto sm:text-sm">
                        إغلاق
                    </button>
                </div>
            </div>
        </div>
    </div>
    @if($salesPhone)
    <a href="https://wa.me/{{ $salesPhone }}" class="whatsapp-float" target="_blank" title="تواصل معنا عبر واتساب">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-whatsapp" viewBox="0 0 16 16">
            <path d="M13.601 2.326A7.854 7.854 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.933 7.933 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.898 7.898 0 0 0 13.6 2.326zM7.994 14.521a6.573 6.573 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.557 6.557 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592zm3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.729.729 0 0 0-.529.247c-.182.198-.691.677-.691 1.654 0 .977.71 1.916.81 2.049.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232z"/>
        </svg>
    </a>
    @endif
</body>
</html>
