@props(['settings' => []])

<div class="relative bg-white py-16 sm:py-24">
    <!-- Subtle dot pattern background -->
    <div class="absolute inset-0" style="background-image: radial-gradient(#0f766e 1px, transparent 1px); background-size: 32px 32px; opacity: 0.05;"></div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h2 class="text-3xl font-extrabold text-slate-900 sm:text-4xl">Specialized Services</h2>
            <p class="mt-4 max-w-2xl mx-auto text-xl text-slate-600">Comprehensive care tailored to your specific medical needs.</p>
        </div>

        <div class="mt-16 grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- Service 1 -->
            <div class="relative bg-white border border-gray-100 rounded-2xl p-8 shadow-sm hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1">
                <div class="absolute -top-6 left-1/2 transform -translate-x-1/2">
                    <div class="inline-flex items-center justify-center p-3 bg-teal-600 rounded-xl shadow-lg">
                        <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                        </svg>
                    </div>
                </div>
                <h3 class="mt-8 text-xl font-bold text-gray-900 text-center">{{ $settings['about_service1_title'] ?? 'Laparoscopic & Minimally Invasive Surgery' }}</h3>
                <p class="mt-4 text-gray-500 text-center leading-relaxed">{{ $settings['about_service1_desc'] ?? 'Advanced surgical solutions for Fibroids, Ovarian Cysts, and Endometriosis, prioritizing rapid recovery and minimal scarring.' }}</p>
            </div>

            <!-- Service 2 -->
            <div class="relative bg-white border border-gray-100 rounded-2xl p-8 shadow-sm hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1">
                <div class="absolute -top-6 left-1/2 transform -translate-x-1/2">
                    <div class="inline-flex items-center justify-center p-3 bg-teal-600 rounded-xl shadow-lg">
                        <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                        </svg>
                    </div>
                </div>
                <h3 class="mt-8 text-xl font-bold text-gray-900 text-center">{{ $settings['about_service2_title'] ?? 'Fertility & IVF Management' }}</h3>
                <p class="mt-4 text-gray-500 text-center leading-relaxed">{{ $settings['about_service2_desc'] ?? 'Comprehensive fertility workups, IUI, IVF, and highly personalized treatment plans to support you on your journey to parenthood.' }}</p>
            </div>

            <!-- Service 3 -->
            <div class="relative bg-white border border-gray-100 rounded-2xl p-8 shadow-sm hover:shadow-xl transition-shadow duration-300 transform hover:-translate-y-1">
                <div class="absolute -top-6 left-1/2 transform -translate-x-1/2">
                    <div class="inline-flex items-center justify-center p-3 bg-teal-600 rounded-xl shadow-lg">
                        <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                        </svg>
                    </div>
                </div>
                <h3 class="mt-8 text-xl font-bold text-gray-900 text-center">{{ $settings['about_service3_title'] ?? 'High-Risk Gynecological Care' }}</h3>
                <p class="mt-4 text-gray-500 text-center leading-relaxed">{{ $settings['about_service3_desc'] ?? 'Specialized, vigilant management of complex women\'s health conditions to ensure the highest standard of safety and care.' }}</p>
            </div>
        </div>
    </div>
</div>
