@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<div class="relative bg-teal-900 py-32 lg:py-48 bg-cover bg-center" style="background-image: url('{{ $service['image'] }}');">
    <div class="absolute inset-0 bg-teal-900/70 mix-blend-multiply"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl lg:text-6xl">{{ $service['title'] }}</h1>
        <p class="mt-4 max-w-2xl text-xl text-teal-100 mx-auto">{{ $service['description'] }}</p>
    </div>
</div>

<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="lg:grid lg:grid-cols-3 lg:gap-12">
            
            <!-- Main Content Area -->
            <div class="lg:col-span-2">
                
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 sm:p-10 mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">Overview</h2>
                    <div class="text-lg text-gray-600 leading-relaxed prose max-w-none">{!! $service['overview'] !!}</div>
                </div>

                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 sm:p-10 mb-8">
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">What to Expect</h2>
                    <div class="text-lg text-gray-600 leading-relaxed prose max-w-none">{!! $service['what_to_expect'] !!}</div>
                </div>

                @if(!empty($service['faqs']))
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 sm:p-10">
                    <h2 class="text-3xl font-bold text-gray-900 mb-8">Frequently Asked Questions</h2>
                    <div class="space-y-6">
                        @foreach($service['faqs'] as $faq)
                        <div class="border-b border-gray-100 pb-6 last:border-0 last:pb-0">
                            <h3 class="text-xl font-semibold text-gray-900 mb-2 flex items-center">
                                <svg class="w-5 h-5 text-teal-500 mr-2 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                {{ $faq['question'] }}
                            </h3>
                            <p class="text-gray-600 pl-7">{{ $faq['answer'] }}</p>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

            </div>

            <!-- Sidebar -->
            <div class="mt-12 lg:mt-0 lg:col-span-1">
                <div class="sticky top-8 space-y-8">
                    
                    <!-- Quick Facts Box -->
                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 border-b border-gray-100 pb-4">Key Benefits</h3>
                        <ul class="space-y-4">
                            @foreach($service['benefits'] as $benefit)
                            <li class="flex items-start">
                                <svg class="w-5 h-5 text-teal-500 mr-3 mt-1 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                <span class="text-gray-600">{{ $benefit }}</span>
                            </li>
                            @endforeach
                        </ul>
                        
                        <div class="mt-8 pt-6 border-t border-gray-100">
                            <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-2">Estimated Recovery Time</h3>
                            <div class="flex items-center text-gray-900 font-bold text-xl">
                                <svg class="w-6 h-6 text-teal-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                {{ $service['recovery'] }}
                            </div>
                        </div>
                    </div>

                    <!-- CTA Box -->
                    <div class="bg-teal-600 rounded-2xl shadow-xl p-8 text-center relative overflow-hidden">
                        <div class="absolute top-0 right-0 -mt-4 -mr-4 w-24 h-24 bg-teal-500 rounded-full opacity-50"></div>
                        <div class="absolute bottom-0 left-0 -mb-4 -ml-4 w-24 h-24 bg-teal-700 rounded-full opacity-50"></div>
                        <h3 class="text-2xl font-bold text-white mb-4 relative z-10">Ready to consult?</h3>
                        <p class="text-teal-100 mb-8 relative z-10">Take the first step towards better health and expert care.</p>
                        <a href="{{ route('contact') }}" class="relative z-10 block w-full bg-white text-teal-600 font-bold py-4 px-6 rounded-xl hover:bg-teal-50 transition-colors shadow-sm">
                            Book an Appointment
                        </a>
                    </div>
                    
                </div>
            </div>

        </div>
    </div>
</div>
@endsection
