@props([
    'badge' => 'لماذا HoloolTech',
    'title' => 'ما يميّزنا عن غيرنا',
    'description' => 'لسنا مجرد شركة برمجيات، نحن شريكك الاستراتيجي في رحلة التحول الرقمي.',

])

@php
    if (isset($whyUsData)) {
        $stats = $whyUsData['stats'];
        $features = $whyUsData['features'];
    } else {
        // استخدام القيم الافتراضية من props
        $stats = $stats ?? [
            ['value' => '120+', 'label' => 'مشروع مكتمل بنجاح عبر 12 صناعة مختلفة', 'featured' => true],
            ['value' => '2x', 'label' => 'أسرع من المنافسين في التنفيذ'],
            ['value' => '99%', 'label' => 'معدل رضا العملاء'],
            ['value' => '24/7', 'label' => 'دعم فني لا يتوقف'],
        ];
        $features = $features ?? [
            ['icon' => '🚀', 'title' => 'تسليم سريع بدون تنازل عن الجودة', 'desc' => 'منهجيتنا الأجايل تضمن التسليم في الوقت المحدد مع الحفاظ على أعلى معايير الجودة.'],
            ['icon' => '🔐', 'title' => 'أمان وحماية على مستوى المؤسسات', 'desc' => 'نطبق أفضل ممارسات الأمن السيبراني في كل مشروع لحماية بياناتك وبيانات عملائك.'],
            ['icon' => '📈', 'title' => 'حلول قابلة للتوسع والنمو', 'desc' => 'نبني البنية التحتية الصحيحة من اليوم الأول لتحمل النمو المتسارع دون أعباء تقنية.'],
            ['icon' => '🎯', 'title' => 'حلول مخصصة لاحتياجك تماماً', 'desc' => 'لا قوالب جاهزة. كل مشروع يبدأ بفهم عميق لأهدافك وينتهي بحل يلائمك بالكامل.'],
            ['icon' => '🤝', 'title' => 'شراكة حقيقية لا مجرد تعاقد', 'desc' => 'نهتم بنجاح مشروعك كأنه مشروعنا. تواصل مستمر وشفافية كاملة طوال رحلة التطوير.'],
        ];
    }
@endphp

<section id="why-us" class="py-20 md:py-28 bg-dark/60 relative">
    <div class="container">
        <x-ui.section-header :badge="$badge" :title="$title" :description="$description" />

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
            {{-- العمود الأيسر: الإحصائيات --}}
            <div class="grid grid-cols-2 gap-4 sm:gap-6">
                @foreach($stats as $stat)
                    <x-partials.stat-card
                        :value="$stat['value']"
                        :label="$stat['label']"
                        :featured="$stat['featured'] ?? false"
                        class="{{ ($stat['featured'] ?? false) ? 'col-span-2' : '' }}"
                    />
                @endforeach
            </div>

            {{-- العمود الأيمن: قائمة المميزات --}}
            <div class="space-y-4">
                @foreach($features as $feature)
                    <x-partials.why-item
                        :icon="$feature['icon']"
                        :title="$feature['title']"
                        :description="$feature['desc']"
                    />
                @endforeach
            </div>
        </div>
    </div>
</section>