@props([
    'badge' => 'أعمالنا',
    'title' => 'مشاريع أثبتت قدرتنا',
    'description' => 'نماذج من أعمالنا المنجزة عبر قطاعات متنوعة تعكس مستوانا التقني والتصميمي.',
])

@php
    if (isset($portfolioData)) {
        $filters = $portfolioData['filters'];
        $projects = $portfolioData['projects'];
    } else {
        $filters = ['الكل', 'مواقع ويب', 'تطبيقات', 'متاجر', 'لوحات تحكم', 'ذكاء اصطناعي'];
        $projects = [
            [
                'thumbIcon' => '🏥', 'tag' => 'تطبيق جوال', 'type' => 'Healthcare App',
                'title' => 'MediConnect – منصة الرعاية الصحية',
                'desc' => 'منصة طبية متكاملة لحجز المواعيد وتتبع ملفات المرضى بـ Flutter.',
                'bgGradient' => 'from-primary/30 to-dark',
                'category' => 'تطبيقات'
            ],
            [
                'thumbIcon' => '🛍️', 'tag' => 'متجر إلكتروني', 'type' => 'E-Commerce Platform',
                'title' => 'Souk Plus – تجربة تسوق ذكية',
                'desc' => 'متجر ذكي بالذكاء الاصطناعي لتخصيص تجربة التسوق وزيادة المبيعات بـ 240%.',
                'bgGradient' => 'from-dark to-primary/20',
                'category' => 'متاجر'
            ],
            [
                'thumbIcon' => '📊', 'tag' => 'لوحة تحكم', 'type' => 'Business Intelligence Dashboard',
                'title' => 'DataFlow – تحليل الأعمال',
                'desc' => 'لوحة تحكم تحليلية متقدمة تجمع البيانات من 15 مصدر وتقدم رؤى فورية.',
                'bgGradient' => 'from-[#5c8e30] to-primary',
                'category' => 'لوحات تحكم'
            ],
            [
                'thumbIcon' => '🎓', 'tag' => 'منصة تعليمية', 'type' => 'EdTech Platform',
                'title' => 'LearnAR – التعلم بالواقع المعزز',
                'desc' => 'منصة تعليمية مبتكرة تدمج الواقع المعزز مع تقنيات التعلم التكيّفي.',
                'bgGradient' => 'from-gray to-dark',
                'category' => 'مواقع ويب'
            ],
            [
                'thumbIcon' => '🏗️', 'tag' => 'نظام مؤسسي', 'type' => 'Enterprise ERP System',
                'title' => 'BuildOps – إدارة المقاولات',
                'desc' => 'نظام ERP متكامل لشركات المقاولات يشمل المشاريع والعقود والموارد البشرية.',
                'bgGradient' => 'from-primary to-gray-light',
                'category' => 'ذكاء اصطناعي'
            ],
            [
                'thumbIcon' => '🚚', 'tag' => 'تطبيق لوجستي', 'type' => 'Logistics & Delivery App',
                'title' => 'SwiftDeliver – شحن ذكي',
                'desc' => 'منصة لوجستية تربط المستودعات بسائقي التوصيل بتتبع فوري ومسارات ذكية.',
                'bgGradient' => 'from-dark to-gray',
                'category' => 'تطبيقات'
            ],
        ];
    }
@endphp

<section id="portfolio" class="py-20 md:py-28 bg-dark/60 relative"
    x-data="{ activeFilter: 'الكل' }">
    <div class="container">
        <x-ui.section-header :badge="$badge" :title="$title" :description="$description" />



        {{-- أزرار الفلترة --}}
        <div class="flex flex-wrap justify-center gap-2 mb-10">
            @foreach($filters as $filter)
                <button
                    @click="activeFilter = '{{ $filter }}'"
                    :class="activeFilter === '{{ $filter }}'
                        ? 'bg-primary/20 border-primary text-white'
                        : 'border-gray-light/20 text-gray-light hover:border-primary/40 hover:text-white'"
                    class="px-5 py-2 rounded-full text-sm border transition-all duration-200 cursor-pointer">
                    {{ $filter }}
                </button>
            @endforeach
        </div>

        {{-- شبكة المشاريع --}}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
            @foreach($projects as $project)
                <div x-show="activeFilter === 'الكل' || activeFilter === '{{ $project['category'] }}'"
                    x-transition:enter="transition ease-out duration-300"
                    x-transition:enter-start="opacity-0 scale-95"
                    x-transition:enter-end="opacity-100 scale-100"
                    x-transition:leave="transition ease-in duration-200"
                    x-transition:leave-start="opacity-100 scale-100"
                    x-transition:leave-end="opacity-0 scale-95"
                    class="transition-all duration-300">
                    <x-partials.project-card
                        :thumbIcon="$project['thumbIcon'] ?? null"
                        :thumbImageUrl="$project['thumbImageUrl'] ?? null"
                        :tag="$project['tag']"
                        :type="$project['type']"
                        :title="$project['title']"
                        :description="$project['desc']"
                        :bgGradient="$project['bgGradient']"
                        :link="$project['link']"
                    />
                </div>
            @endforeach
        </div>
    </div>

    <div class="flex justify-center mt-12">
            <x-ui.button variant="outline" href="{{ route('projects.public') }}">
                 عرض جميع المشاريع ←
            </x-ui.button>
    </div>

</section>