@extends('layouts.app')
@section('title', 'Services & Procedures | Dr. Rajan Shah')

@section('content')
<div class="bg-gray-50 py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
            <h2 class="text-base text-teal-600 font-semibold tracking-wide uppercase">Treatments & Procedures</h2>
            <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
                Comprehensive Women's Healthcare
            </p>
            <p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
                Specialized in advanced laparoscopic techniques and comprehensive fertility management.
            </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($services as $service)
            <div class="bg-white rounded-2xl shadow-sm hover:shadow-xl transition-shadow duration-300 overflow-hidden border border-gray-100 group flex flex-col">
                @if(isset($service['image']))
                <div class="w-full h-48 overflow-hidden relative">
                    <img src="{{ $service['image'] }}" alt="{{ $service['title'] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    <div class="absolute inset-0 bg-teal-900 opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
                </div>
                @endif
                <div class="p-8 flex-1 flex flex-col">
                    <div class="w-10 h-10 bg-teal-50 rounded-xl flex items-center justify-center mb-4 group-hover:bg-teal-600 transition-colors duration-300">
                        <svg class="w-5 h-5 text-teal-600 group-hover:text-white transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ $service['title'] }}</h3>
                    <p class="text-gray-500 mb-6 flex-1">{{ $service['description'] }}</p>
                    
                    <a href="{{ route('service.detail', $service['slug']) }}" class="inline-flex items-center text-teal-600 font-medium hover:text-teal-700 mt-auto">
                        View Details
                        <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="mt-16 bg-teal-700 rounded-2xl shadow-xl overflow-hidden lg:flex lg:items-center">
            <div class="p-8 lg:p-12 lg:w-2/3 text-white">
                <h3 class="text-2xl font-bold mb-2">Need a specialized procedure?</h3>
                <p class="text-teal-100 text-lg mb-6 max-w-2xl">
                    Every patient is unique. Schedule a consultation with Dr. Rajan Shah to discuss your specific condition and explore the best treatment options tailored to you.
                </p>
                <a href="{{ route('contact') }}" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-teal-700 bg-white hover:bg-teal-50 transition-colors">
                    Contact Clinic
                </a>
            </div>
            <div class="hidden lg:block lg:w-1/3 bg-teal-800 h-full p-12">
                <svg class="w-full h-full text-teal-600 opacity-50" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
                </svg>
            </div>
        </div>
    </div>
</div>
@endsection
