@props([
    'badge' => 'جاهز للبدء؟',
    'title' => 'فكرتك تستحق أن تصبح حقيقة',
    'description' => 'تحدّث مع فريقنا اليوم واحصل على استشارة مجانية لتقييم مشروعك وتحديد أفضل مسار.',
    'primaryButtonText' => '🚀 ابدأ مشروعك الآن',
    'secondaryButtonText' => '📋 اطلب عرض سعر',
    'secondaryButtonLink' => '#contact',
])

{{-- تمرير بيانات الدكتور عبر Props أو قيم افتراضية --}}
@php
    $doctorName = $doctorName ?? 'الدكتور محمد بيازيد';
    $doctorRole = $doctorRole ?? 'مدير شركة HoloolTech';
    $doctorPhone = $doctorPhone ?? '0097455914133'; // استبدل بالرقم الحقيقي
@endphp

<div class="relative py-20 md:py-28 bg-gradient-to-br from-primary/10 to-secondary/5 border-y border-gray-light/20 overflow-hidden" x-data>
    {{-- تأثير ضبابي خلفي --}}
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] rounded-full bg-primary/20 blur-[120px] pointer-events-none"></div>

    <div class="container relative z-10 text-center">
        <x-ui.badge :text="$badge" class="inline-flex mb-5" />

        <h2 class="gradient-text mb-6">
            {{ $title }}
        </h2>

        <p class="text-gray-light text-lg md:text-xl max-w-2xl mx-auto mb-10">
            {{ $description }}
        </p>

        <div class="flex flex-wrap gap-4 justify-center">
            <x-ui.button variant="primary" @click="window.dispatchEvent(new CustomEvent('open-contact-modal'))">
                {{ $primaryButtonText }}
            </x-ui.button>
            <x-ui.button variant="outline" :href="$secondaryButtonLink">
                {{ $secondaryButtonText }}
            </x-ui.button>
        </div>
    </div>

</div>