@props([
    'badge' => 'خدماتنا',
    'title' => 'كل ما تحتاجه من حلول رقمية',
    'description' => 'نقدم طيفاً متكاملاً من الخدمات البرمجية والتقنية بمعايير عالمية وفهم عميق للسوق العربي.',
])

@php
    $servicesList = $servicesData ?? [
       [
            ['icon' => '🌐', 'title' => 'تطوير مواقع الويب', 'desc' => 'مواقع احترافية سريعة ومتجاوبة باستخدام أحدث التقنيات مثل Next.js و React وNuxt.'],
            ['icon' => '📱', 'title' => 'تطبيقات الجوال', 'desc' => 'تطبيقات iOS و Android عالية الأداء بتقنية Flutter و React Native.'],
            ['icon' => '🎨', 'title' => 'تصميم UI/UX', 'desc' => 'واجهات مستخدم فاخرة وتجربة مستخدم مدروسة تُحوّل الزوار إلى عملاء.'],
            ['icon' => '🛒', 'title' => 'المتاجر الإلكترونية', 'desc' => 'منصات تجارة إلكترونية متكاملة مع بوابات الدفع والمخزون وتجربة التسوق المثالية.'],
            ['icon' => '⚙️', 'title' => 'الأنظمة ولوحات التحكم', 'desc' => 'ERP, CRM وأنظمة إدارة مخصصة بلوحات تحكم ذكية وتقارير تفاعلية.'],
            ['icon' => '☁️', 'title' => 'الحلول السحابية', 'desc' => 'بنية تحتية سحابية على AWS و Azure و GCP مع ضمان التوافر العالي.'],
            ['icon' => '🤖', 'title' => 'الذكاء الاصطناعي', 'desc' => 'دمج نماذج AI في منتجاتك لأتمتة العمليات وتحليل البيانات واتخاذ قرارات أذكى.'],
            ['icon' => '🔄', 'title' => 'الأتمتة والتكامل', 'desc' => 'ربط الأنظمة وأتمتة العمليات التكرارية لتوفير الوقت ورفع الإنتاجية.'],
            ['icon' => '🛡️', 'title' => 'الدعم الفني والصيانة', 'desc' => 'دعم فني على مدار الساعة وصيانة دورية وتحديثات أمنية لضمان استمرارية عملك.'],
        ]
    ];
@endphp

<section id="services" class="py-20 md:py-28 relative overflow-hidden">
    <div class="container">
        <x-ui.section-header :badge="$badge" :title="$title" :description="$description" />

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
            @foreach($servicesList as $service)
                <x-partials.service-card
                    :icon="$service['icon'] ?? null"
                    :iconImageUrl="$service['icon_image_url'] ?? null"
                    :title="$service['title']"
                    :description="$service['description']"
                    :link="$service['link'] ?? '#'"
                    class="reveal"
                />
            @endforeach
        </div>
    </div>
</section>