@props([
    'badge' => null,
    'titleLine1' => null,
    'titleLine2' => null,
    'description1' => null,
    'description2' => null,
    'mission' => null,
    'philosophy' => null,
])

@php
    // استخدام بيانات Composer إن وُجدت، وإلا فالاعتماد على props أو افتراضيات
    if (isset($aboutData)) {
        $badge = $aboutData['badge'] ?? 'من نحن';
        $titleLine1 = $aboutData['titleLine1'] ?? 'شركة تقنية عربية';
        $titleLine2 = $aboutData['titleLine2'] ?? 'تصنع الفرق';
        $description1 = $aboutData['description1'] ?? '...';
        $description2 = $aboutData['description2'] ?? '...';
        $missionCard = $aboutData['missionCard'] ?? [
            'vision' => '...', 'message' => '...', 'philosophy' => '...'
        ];
        $philosophyItems = $aboutData['philosophyItems'] ?? [];
    } else {
        // استخدام props الممررة أو قيم افتراضية
        $missionCard = $mission ?? [
            'vision' => 'أن نكون الشريك التقني الأول للشركات والمؤسسات العربية في رحلتها نحو التحول الرقمي الكامل.',
            'message' => 'بناء حلول رقمية مخصصة بمعايير عالمية تحل مشاكل حقيقية وتخلق قيمة مستدامة لعملائنا.',
            'philosophy' => 'نؤمن أن التقنية الجيدة يجب أن تكون بسيطة في الاستخدام ومعقدة في التصميم. نحن نهتم بالتفاصيل التي يشعر بها المستخدم دون أن يراها.',
        ];
        $philosophyItems = $philosophy ?? [
            ['icon' => '💡', 'title' => 'الابتكار أولاً', 'desc' => 'نفكر خارج الصندوق في كل حل'],
            ['icon' => '⚡', 'title' => 'الأداء أساس', 'desc' => 'سرعة لا تُقبَل تنازلاً عنها'],
            ['icon' => '🎯', 'title' => 'النتائج تتكلم', 'desc' => 'نقيس نجاحنا بنجاح عملائنا'],
            ['icon' => '🌍', 'title' => 'عالمي وعربي', 'desc' => 'معايير عالمية بروح عربية'],
        ];
    }
@endphp

<section id="about" class="py-20 md:py-28 relative">
    <div class="container">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            {{-- العمود الأيسر: بطاقة المهمة --}}
            <div class="about-visual">
                <div class="relative bg-dark/80 backdrop-blur-xl border border-gray-light/20 rounded-3xl p-8 md:p-10 shadow-glow overflow-hidden">
                    <div class="absolute -bottom-20 -right-20 w-64 h-64 rounded-full bg-primary/20 blur-3xl"></div>
                    <div class="absolute top-6 left-6 text-6xl font-mono font-black text-primary/20">HT</div>

                    <div class="space-y-6 relative z-10">
                        <div>
                            <div class="text-secondary text-xs font-mono uppercase tracking-wider mb-2">// رؤيتنا</div>
                            <p class="text-gray-light leading-relaxed">{{ $missionCard['vision'] }}</p>
                        </div>
                        <div>
                            <div class="text-secondary text-xs font-mono uppercase tracking-wider mb-2">// رسالتنا</div>
                            <p class="text-gray-light leading-relaxed">{{ $missionCard['message'] }}</p>
                        </div>
                        <div>
                            <div class="text-secondary text-xs font-mono uppercase tracking-wider mb-2">// فلسفتنا</div>
                            <p class="text-gray-light leading-relaxed">{{ $missionCard['philosophy'] }}</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- العمود الأيمن: محتوى النص --}}
            <div>
                <x-ui.badge :text="$badge" class="mb-4" />
                <h2 class="gradient-text mb-6">
                    {{ $titleLine1 }}<br/>{{ $titleLine2 }}
                </h2>
                <p class="text-gray-light mb-4">{{ $description1 }}</p>
                <p class="text-gray-light mb-8">{{ $description2 }}</p>

                {{-- شبكة الفلسفة --}}
                <div class="grid grid-cols-2 gap-3 sm:gap-4 mb-8">
                    @foreach($philosophyItems as $item)
                        <div class="p-4 bg-dark/60 border border-gray-light/20 rounded-xl hover:border-primary/30 transition-all">
                            <div class="text-2xl mb-2">{{ $item['icon'] }}</div>
                            <h4 class="font-bold text-white text-sm mb-1">{{ $item['title'] }}</h4>
                            <p class="text-gray-light text-xs">{{ $item['desc'] }}</p>
                        </div>
                    @endforeach
                </div>

                <x-ui.button variant="primary" href="#contact">تحدّث مع فريقنا ←</x-ui.button>
            </div>
        </div>
    </div>
</section>