@props([
    'badge' => 'آلية العمل',
    'title' => 'من الفكرة حتى الإطلاق',
    'description' => 'منهجية عمل مثبتة عبر مئات المشاريع تضمن النتائج وتُقلّص مخاطر التطوير.',
])

@php
    if (isset($processData)) {
        $stepsRow1 = $processData['stepsRow1'];
        $stepsRow2 = $processData['stepsRow2'];
    } else {
        $stepsRow1 = $stepsRow1 ?? [
            ['number' => '01', 'title' => 'فهم الفكرة', 'desc' => 'نستمع لرؤيتك ونفهم أهدافك التجارية والتقنية'],
            ['number' => '02', 'title' => 'التحليل والتخطيط', 'desc' => 'دراسة السوق والمنافسين وبناء خارطة المشروع'],
            ['number' => '03', 'title' => 'التصميم', 'desc' => 'واجهات بصرية احترافية وتجربة مستخدم مدروسة'],
            ['number' => '04', 'title' => 'البرمجة', 'desc' => 'تطوير بأحدث التقنيات وأفضل ممارسات الكود'],
        ];
        $stepsRow2 = $stepsRow2 ?? [
            ['number' => '05', 'title' => 'الاختبار', 'desc' => 'اختبارات شاملة للجودة والأداء والأمان'],
            ['number' => '06', 'title' => 'الإطلاق', 'desc' => 'نشر احترافي مع ضمان الاستقرار والأداء'],
            ['number' => '07', 'title' => 'الدعم', 'desc' => 'مراقبة مستمرة ودعم فني متاح دائماً'],
            ['number' => '08', 'title' => 'التحسين', 'desc' => 'تحليل الأداء وتطوير مستمر بناءً على البيانات'],
        ];
    }
@endphp

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

        {{-- الصف الأول --}}
        <div class="relative">
            <div class="hidden lg:block absolute top-12 left-[12%] right-[12%] h-px bg-gradient-to-r from-primary via-secondary to-primary z-0"></div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-0 mt-12">
                @foreach($stepsRow1 as $step)
                    <x-partials.process-step
                        :number="$step['number']"
                        :title="$step['title']"
                        :description="$step['desc']"
                        class="relative z-10"
                    />
                @endforeach
            </div>
        </div>

        {{-- الصف الثاني --}}
        <div class="relative mt-12 lg:mt-16">
            <div class="hidden lg:block absolute top-12 left-[12%] right-[12%] h-px bg-gradient-to-r from-secondary via-primary to-secondary z-0"></div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-0">
                @foreach($stepsRow2 as $step)
                    <x-partials.process-step
                        :number="$step['number']"
                        :title="$step['title']"
                        :description="$step['desc']"
                        class="relative z-10"
                    />
                @endforeach
            </div>
        </div>
    </div>
</section>