@props([
    'title' => 'هل أنت جاهز لتنطلق مع ZLHOST؟',
    'description' => 'فريقنا في خدمتك على مدار الساعة. اختر الخدمة المناسبة، أو اطلب عرض سعر مخصصاً لمشروعك.',
])

<section class="container-wide my-16">
    <div class="rounded-3xl bg-hero-gradient text-white p-8 md:p-14 text-center relative overflow-hidden">
        <div class="absolute -top-16 -end-16 w-64 h-64 rounded-full bg-brand-500/20 blur-3xl"></div>
        <div class="absolute -bottom-16 -start-16 w-64 h-64 rounded-full bg-gold-400/15 blur-3xl"></div>

        <h2 class="text-2xl md:text-4xl font-extrabold text-white text-balance">{{ $title }}</h2>
        <p class="mt-4 text-navy-200 max-w-2xl mx-auto">{{ $description }}</p>

        <div class="mt-7 flex flex-wrap items-center justify-center gap-3">
            <a href="{{ route('services.index') }}" class="btn btn-primary btn-lg">تصفح الخدمات</a>
            <a href="{{ route('quote.show') }}" class="btn btn-gold btn-lg">اطلب عرض سعر</a>
            <a href="{{ route('contact') }}" class="btn btn-ghost btn-lg text-white hover:bg-white/10">تواصل معنا</a>
        </div>
    </div>
</section>