@extends('layouts.frontend')

@section('title', 'Find Best Doctors & Book Appointments Online | ' . config('app.name'))
@section('description', 'Discover top-rated doctors and hospitals near you. Book appointments easily through our healthcare platform.')
@section('canonical', route('home'))

@section('content')
<style>
    .section-padding { padding-top: 80px; padding-bottom: 80px; }
    .card-radius { border-radius: 16px; }
    .btn-full { border-radius: 9999px; }
    
    /* Floating animation for icons */
    @keyframes float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
    }
    .float-animation {
        animation: float 3s ease-in-out infinite;
    }
    .float-delay-1 { animation-delay: 0.1s; }
    .float-delay-2 { animation-delay: 0.2s; }
    .float-delay-3 { animation-delay: 0.3s; }
    .float-delay-4 { animation-delay: 0.4s; }
    .float-delay-5 { animation-delay: 0.5s; }
    .float-delay-6 { animation-delay: 0.6s; }
    .float-delay-7 { animation-delay: 0.7s; }
    .float-delay-8 { animation-delay: 0.8s; }
    .float-delay-9 { animation-delay: 0.9s; }
    .float-delay-10 { animation-delay: 1s; }
    .float-delay-11 { animation-delay: 1.1s; }
    
    /* Gradient border on hover */
    .service-card {
        position: relative;
    }
    .service-card::before {
        content: '';
        position: absolute;
        inset: -2px;
        border-radius: 22px;
        background: linear-gradient(135deg, #3b82f6, #8b5cf6, #ec4899);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
    }
    .service-card:hover::before {
        opacity: 1;
    }
    
    /* Soft glow on hover */
    .service-card:hover .icon-glow {
        box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
    }
    
    /* Stagger fade-in animation */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .service-item {
        opacity: 0;
        animation: fadeInUp 0.5s ease forwards;
    }
</style>

<!-- Hero Section -->
<section class="relative min-h-[750px] lg:min-h-[680px] bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 overflow-hidden">
    <!-- Background Decorations -->
    <div class="absolute inset-0 overflow-hidden">
        <div class="absolute -top-40 -right-40 w-96 h-96 bg-blue-200/40 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-indigo-200/40 rounded-full blur-3xl"></div>
        <div class="absolute top-20 left-10 w-5 h-5 bg-blue-400/60 rounded-full animate-pulse"></div>
        <div class="absolute top-32 right-32 w-3 h-3 bg-indigo-400/60 rounded-full animate-pulse"></div>
        <div class="absolute bottom-32 left-1/4 w-2 h-2 bg-blue-300/60 rounded-full"></div>
        <div class="absolute top-1/2 right-1/3 w-4 h-4 bg-purple-400/40 rounded-full"></div>
    </div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            <!-- Left Content -->
            <div class="text-center lg:text-left order-2 lg:order-1">
                <!-- Badge -->
                <div class="inline-flex items-center gap-3 bg-white/90 backdrop-blur-md px-5 py-2.5 rounded-full shadow-lg border border-white/50 mb-8">
                    <span class="w-2.5 h-2.5 bg-green-500 rounded-full animate-pulse"></span>
                    <span class="text-sm font-semibold text-gray-700">{{ $stats['totalAppointments'] >= 1000 ? round($stats['totalAppointments']/1000, 1).'K+' : $stats['totalAppointments'].'+' }} Appointments Completed</span>
                    <div class="flex items-center gap-1 ml-3 pl-3 border-l border-gray-200">
                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                        <i class="fas fa-star text-yellow-400 text-sm"></i>
                        <span class="text-sm font-medium text-gray-600 ml-1">4.9</span>
                    </div>
                </div>

                <!-- Heading -->
                <h1 class="text-5xl md:text-6xl lg:text-6xl font-bold text-gray-900 leading-[1.1] tracking-tight mb-8">
                    Discover Health: Find Your Trusted <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Doctors</span> Today
                </h1>

                <p class="text-xl text-gray-600 mb-10 max-w-xl mx-auto lg:mx-0 leading-relaxed">
                    Connect with {{ $stats['totalDoctors'] }}+ top healthcare professionals. Book appointments instantly and get quality medical care at your fingertips.
                </p>

                <!-- Search Box -->
                <div class="bg-white/80 backdrop-blur-md rounded-2xl shadow-2xl p-5 max-w-2xl mx-auto lg:mx-0 border border-white/50">
                    <form action="{{ route('doctors.index') }}" method="GET">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                            <div class="md:col-span-1">
                                <div class="relative">
                                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                                    <input type="text" name="search" placeholder="Doctor, hospital..." 
                                        class="w-full pl-12 pr-4 py-4 rounded-2xl border-2 border-gray-100 focus:border-blue-500 focus:ring-0 focus:outline-none transition text-base font-medium">
                                </div>
                            </div>
                            <div class="md:col-span-1">
                                <div class="relative">
                                    <i class="fas fa-map-marker-alt absolute left-4 top-1/2 -translate-y-1/2 text-gray-400"></i>
                                    <select name="location" class="w-full pl-12 pr-10 py-4 rounded-2xl border-2 border-gray-100 focus:border-blue-500 focus:ring-0 focus:outline-none transition text-base font-medium appearance-none bg-white">
                                        <option value="">Location</option>
                                        <option value="Dhaka">Dhaka</option>
                                        <option value="Chittagong">Chittagong</option>
                                        <option value="Sylhet">Sylhet</option>
                                        <option value="Barishal">Barishal</option>
                                    </select>
                                </div>
                            </div>
                            <div class="md:col-span-1">
                                <select name="gender" class="w-full px-4 py-4 rounded-2xl border-2 border-gray-100 focus:border-blue-500 focus:ring-0 focus:outline-none transition text-base font-medium appearance-none bg-white">
                                    <option value="">Gender</option>
                                    <option value="male">Male</option>
                                    <option value="female">Female</option>
                                </select>
                            </div>
                            <div class="md:col-span-1">
                                <button type="submit" class="w-full px-6 py-4 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-bold rounded-full hover:from-blue-700 hover:to-blue-800 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5">
                                    <i class="fas fa-search mr-2"></i>Search
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Stats -->
                <div class="flex justify-center lg:justify-start gap-8 lg:gap-12 mt-10">
                    <div class="text-center">
                        <p class="text-4xl font-bold text-blue-600">{{ $stats['totalDoctors'] }}+</p>
                        <p class="text-base text-gray-500 font-medium">Verified Doctors</p>
                    </div>
                    <div class="w-px bg-gray-200"></div>
                    <div class="text-center">
                        <p class="text-4xl font-bold text-blue-600">{{ $stats['totalHospitals'] }}+</p>
                        <p class="text-base text-gray-500 font-medium">Hospitals</p>
                    </div>
                    <div class="w-px bg-gray-200 hidden sm:block"></div>
                    <div class="text-center hidden sm:block">
                        <p class="text-4xl font-bold text-blue-600">{{ $stats['satisfiedPatients'] >= 1000 ? round($stats['satisfiedPatients']/1000, 1).'K+' : $stats['satisfiedPatients'].'+' }}</p>
                        <p class="text-base text-gray-500 font-medium">Happy Patients</p>
                    </div>
                </div>
            </div>

            <!-- Right Content - Doctor Image -->
            <div class="relative order-1 lg:order-2">
                <div class="relative">
                    @php
                    $heroDoctor = $featuredDoctors->first();
                    @endphp
                    @if($heroDoctor && $heroDoctor->image)
                    <img src="{{ asset($heroDoctor->image) }}" alt="Featured Doctor" class="w-full max-w-md mx-auto rounded-[2rem] shadow-2xl object-cover ring-4 ring-white/50" style="height: 520px;">
                    @else
                    <img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Doctor" class="w-full max-w-md mx-auto rounded-[2rem] shadow-2xl ring-4 ring-white/50" style="height: 520px;">
                    @endif
                    
                    <!-- Floating Cards - Glass Effect -->
                    <div class="absolute -left-6 top-24 bg-white/80 backdrop-blur-xl rounded-2xl shadow-2xl p-4 flex items-center gap-4 border border-white/50 animate-[bounce_3s_ease-in-out_infinite]" style="animation-duration: 4s;">
                        <div class="w-14 h-14 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-check-circle text-white text-xl"></i>
                        </div>
                        <div>
                            <p class="font-bold text-gray-900 text-lg">{{ $stats['totalAppointments'] >= 1000 ? round($stats['totalAppointments']/1000, 1).'K+' : $stats['totalAppointments'].'+' }}</p>
                            <p class="text-sm text-gray-500">Appointments</p>
                        </div>
                    </div>

                    <div class="absolute -right-6 bottom-28 bg-white/80 backdrop-blur-xl rounded-2xl shadow-2xl p-4 flex items-center gap-4 border border-white/50 animate-[bounce_3s_ease-in-out_infinite]" style="animation-delay: 1.5s; animation-duration: 4s;">
                        <div class="w-14 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-users text-white text-xl"></i>
                        </div>
                        <div>
                            <p class="font-bold text-gray-900 text-lg">{{ $stats['satisfiedPatients'] >= 1000 ? round($stats['satisfiedPatients']/1000, 1).'K+' : $stats['satisfiedPatients'].'+' }}</p>
                            <p class="text-sm text-gray-500">Satisfied Patients</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Icon Section -->
<section class="py-10 bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 lg:gap-6">
            <a href="{{ route('book') }}" class="group flex flex-col items-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-gray-100">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center mb-3 shadow-md">
                    <i class="fas fa-calendar-plus text-white text-xl"></i>
                </div>
                <span class="text-gray-800 font-semibold text-sm text-center">অ্যাপয়েন্টমেন্ট বুক করুন</span>
            </a>
            
            <a href="{{ route('doctors.index') }}" class="group flex flex-col items-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-gray-100">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center mb-3 shadow-md">
                    <i class="fas fa-user-md text-white text-xl"></i>
                </div>
                <span class="text-gray-800 font-semibold text-sm text-center">আমাদের ডাক্তার</span>
            </a>
            
            <a href="{{ route('hospitals.index') }}" class="group flex flex-col items-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-gray-100">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-pink-500 to-pink-600 flex items-center justify-center mb-3 shadow-md">
                    <i class="fas fa-hospital text-white text-xl"></i>
                </div>
                <span class="text-gray-800 font-semibold text-sm text-center">হাসপাতাল ও ক্লিনিক</span>
            </a>
            
            <a href="#" class="group flex flex-col items-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-gray-100">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-indigo-500 to-indigo-600 flex items-center justify-center mb-3 shadow-md">
                    <i class="fas fa-heartbeat text-white text-xl"></i>
                </div>
                <span class="text-gray-800 font-semibold text-sm text-center">স্বাস্থ্য সেবা</span>
            </a>
            
            <a href="#" class="group flex flex-col items-center p-6 bg-white rounded-2xl shadow-sm hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-gray-100">
                <div class="w-14 h-14 rounded-full bg-gradient-to-br from-green-500 to-green-600 flex items-center justify-center mb-3 shadow-md">
                    <i class="fas fa-file-medical text-white text-xl"></i>
                </div>
                <span class="text-gray-800 font-semibold text-sm text-center">মেডিকেল হিস্ট্রি</span>
            </a>
        </div>
    </div>
</section>

<!-- Why Choose Bogura Medical Service Section -->
<section class="section-padding bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="inline-block px-5 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-full mb-5 shadow-lg">Why Choose Us</span>
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Why Choose Bogura Medical Service</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">We are committed to providing high-quality, reliable, and patient-centered healthcare services</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300">
                <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-xl flex items-center justify-center mb-4 shadow-lg">
                    <i class="fas fa-user-md text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-2">Experienced Doctors</h3>
                <p class="text-gray-600">Our platform connects you with highly qualified and experienced medical professionals.</p>
            </div>

            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300">
                <div class="w-14 h-14 bg-gradient-to-br from-green-500 to-emerald-600 rounded-xl flex items-center justify-center mb-4 shadow-lg">
                    <i class="fas fa-calendar-check text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-2">Easy Appointment Booking</h3>
                <p class="text-gray-600">Book your doctor appointment quickly and easily without any hassle.</p>
            </div>

            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300">
                <div class="w-14 h-14 bg-gradient-to-br from-purple-500 to-pink-600 rounded-xl flex items-center justify-center mb-4 shadow-lg">
                    <i class="fas fa-hospital text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-2">Trusted Healthcare Network</h3>
                <p class="text-gray-600">We partner with verified hospitals and clinics to ensure quality treatment.</p>
            </div>

            <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-2xl border border-blue-100 hover:shadow-xl hover:-translate-y-2 transition-all duration-300">
                <div class="w-14 h-14 bg-gradient-to-br from-orange-500 to-red-600 rounded-xl flex items-center justify-center mb-4 shadow-lg">
                    <i class="fas fa-bolt text-white text-2xl"></i>
                </div>
                <h3 class="font-bold text-xl text-gray-900 mb-2">Fast & Reliable Service</h3>
                <p class="text-gray-600">Get quick responses and efficient healthcare support whenever you need it.</p>
            </div>
        </div>
    </div>
</section>

<!-- Our Expert Doctors Section -->
@if($doctors->count() > 0)
<section class="section-padding bg-gradient-to-br from-blue-50 via-white to-indigo-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="inline-block px-5 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-full mb-5 shadow-lg">Our Experts</span>
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Meet Our Expert Doctors</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Qualified and experienced medical professionals ready to provide you with the best healthcare.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($doctors as $doctor)
            <div class="bg-white rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-300 hover:-translate-y-2 border border-gray-100 overflow-hidden group">
                <div class="relative">
                    @if($doctor->image)
                    <img src="{{ asset($doctor->image) }}" alt="{{ $doctor->name }}" class="w-full h-56 object-cover object-top" loading="lazy">
                    @else
                    <div class="w-full h-56 bg-gradient-to-br from-blue-400 to-indigo-600 flex items-center justify-center">
                        <i class="fas fa-user-md text-white text-5xl"></i>
                    </div>
                    @endif
                    @if($doctor->availability === 'available')
                    <span class="absolute top-3 right-3 px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full flex items-center gap-1">
                        <span class="w-2 h-2 bg-white rounded-full"></span> Available
                    </span>
                    @endif
                </div>
                <div class="p-5">
                    <h3 class="font-bold text-lg text-gray-900 mb-1 group-hover:text-blue-600 transition">{{ $doctor->name }}</h3>
                    <p class="text-blue-600 text-sm font-medium mb-2">
                        @if(is_array($doctor->specialties))
                            {{ implode(', ', array_slice($doctor->specialties, 0, 2)) }}
                        @else
                            {{ $doctor->specialties ?? 'General Practitioner' }}
                        @endif
                    </p>
                    <div class="flex items-center gap-2 text-sm text-gray-500 mb-3">
                        <span class="flex items-center gap-1">
                            <i class="fas fa-briefcase text-blue-500"></i>
                            {{ $doctor->experience ?? 0 }}+ Years
                        </span>
                    </div>
                    <p class="text-gray-600 text-sm mb-4 line-clamp-2">{{ Str::limit($doctor->bio, 80) }}</p>
                    <a href="{{ route('doctors.show', $doctor->id) }}" class="w-full block text-center py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-semibold rounded-xl hover:from-blue-600 hover:to-indigo-700 transition-all duration-300 shadow-lg hover:shadow-xl">
                        Book Appointment
                    </a>
                </div>
            </div>
            @endforeach
        </div>

        <div class="text-center mt-10">
            <a href="{{ route('doctors.index') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-white text-blue-600 font-semibold rounded-xl border-2 border-blue-500 hover:bg-blue-50 transition-all duration-300">
                View All Doctors
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>
@endif

<!-- Top Hospitals Section -->
@if($hospitals->count() > 0)
<section class="section-padding bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="inline-block px-5 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-full mb-5 shadow-lg">Our Hospitals</span>
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Trusted Hospitals & Clinics</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Explore our network of verified hospitals providing world-class healthcare services.</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($hospitals as $hospital)
            <div class="bg-white rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2 border border-gray-100 overflow-hidden">
                <div class="p-6">
                    <div class="flex items-center gap-4 mb-4">
                        @if($hospital->image)
                        <img src="{{ asset($hospital->image) }}" alt="{{ $hospital->name }}" class="w-14 h-14 rounded-full object-cover" loading="lazy">
                        @else
                        <div class="w-14 h-14 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center">
                            <i class="fas fa-hospital text-white text-xl"></i>
                        </div>
                        @endif
                        <div>
                            <h3 class="font-bold text-lg text-gray-800">{{ $hospital->name }}</h3>
                            @if($hospital->address)
                            <p class="text-sm text-gray-500 flex items-center gap-1">
                                <i class="fas fa-map-marker-alt text-xs"></i>
                                {{ Str::limit($hospital->address, 30) }}
                            </p>
                            @endif
                        </div>
                    </div>
                    
                    @php
                        $services = is_string($hospital->services) ? json_decode($hospital->services, true) : ($hospital->services ?? []);
                        $displayServices = array_slice(is_array($services) ? $services : [], 0, 3);
                    @endphp
                    
                    @if(count($displayServices) > 0)
                    <div class="flex flex-wrap gap-2">
                        @foreach($displayServices as $service)
                        <span class="px-3 py-1 bg-blue-50 text-blue-600 text-xs font-medium rounded-full">
                            {{ is_array($service) ? ($service['value'] ?? '') : $service }}
                        </span>
                        @endforeach
                    </div>
                    @endif
                    
                    <div class="mt-4 pt-4 border-t border-gray-100">
                        <a href="{{ route('hospitals.show', $hospital) }}" class="inline-flex items-center text-blue-600 font-semibold hover:text-blue-700">
                            View Details <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<!-- Health Blog Section -->
<section class="section-padding bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="inline-block px-5 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-full mb-5 shadow-lg">Health Blog</span>
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Latest Health Tips & Medical Advice</h2>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">Stay informed with the latest health tips, medical advice, and important healthcare information</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @forelse($blogs->take(6) as $blog)
            <article class="group bg-white rounded-2xl shadow-sm hover:shadow-2xl overflow-hidden transition-all duration-300 hover:-translate-y-2 border border-gray-100">
                <a href="{{ route('blog.show', $blog->slug) }}">
                    <div class="relative overflow-hidden">
                        @if($blog->image)
                        <img src="{{ asset($blog->image) }}" alt="{{ $blog->title }}" class="w-full h-48 object-cover group-hover:scale-110 transition-transform duration-500" loading="lazy">
                        @else
                        <div class="w-full h-48 bg-gradient-to-br from-blue-100 to-indigo-200 flex items-center justify-center">
                            <i class="fas fa-newspaper text-4xl text-blue-400"></i>
                        </div>
                        @endif
                        @if($blog->category)
                        <span class="absolute top-3 left-3 px-3 py-1 bg-blue-600 text-white text-xs font-semibold rounded-full">{{ $blog->category->name }}</span>
                        @endif
                    </div>
                    <div class="p-5">
                        <div class="flex items-center text-sm text-gray-500 mb-2">
                            <i class="fas fa-calendar-alt mr-2 text-blue-500"></i>
                            {{ $blog->created_at->format('d M Y') }}
                        </div>
                        <h3 class="text-lg font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition line-clamp-2">{{ $blog->title }}</h3>
                        <p class="text-gray-600 text-sm line-clamp-2 mb-3">{{ Str::limit(strip_tags($blog->content), 100) }}</p>
                        @if($blog->doctor || $blog->hospital)
                        <div class="flex flex-wrap gap-2 mb-3">
                            @if($blog->doctor)
                            <a href="{{ route('doctors.show', $blog->doctor->id) }}" class="inline-flex items-center gap-1 px-2 py-1 bg-green-50 text-green-700 text-xs font-medium rounded-full hover:bg-green-100">
                                <i class="fas fa-user-md"></i> {{ Str::limit($blog->doctor->name, 15) }}
                            </a>
                            @endif
                            @if($blog->hospital)
                            <a href="{{ route('hospitals.show', $blog->hospital->id) }}" class="inline-flex items-center gap-1 px-2 py-1 bg-purple-50 text-purple-700 text-xs font-medium rounded-full hover:bg-purple-100">
                                <i class="fas fa-hospital"></i> {{ Str::limit($blog->hospital->name, 15) }}
                            </a>
                            @endif
                        </div>
                        @endif
                        <span class="inline-flex items-center text-blue-600 font-semibold text-sm group-hover:text-blue-700">
                            Read More <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform"></i>
                        </span>
                    </div>
                </a>
            </article>
            @empty
            <div class="col-span-1 md:col-span-2 lg:col-span-3 text-center py-12">
                <i class="fas fa-newspaper text-6xl text-gray-300 mb-4"></i>
                <p class="text-gray-500 text-lg">No blog posts available yet.</p>
                <p class="text-gray-400 text-sm">Check back soon for health tips and medical advice.</p>
            </div>
            @endforelse
        </div>

        @if($blogs->count() > 0)
        <div class="text-center mt-10">
            <a href="{{ route('blog.index') }}" class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-bold rounded-full hover:from-blue-700 hover:to-indigo-700 transition-all shadow-lg hover:shadow-xl hover:-translate-y-1">
                View All Blogs <i class="fas fa-arrow-right ml-2"></i>
            </a>
        </div>
        @endif
    </div>
</section>

@if($faqs->count() > 0)
<section class="section-padding bg-gray-50">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="inline-block px-5 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-full mb-5 shadow-lg">FAQ</span>
            <h2 class="text-4xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
            <p class="text-xl text-gray-600">Find answers to common questions</p>
        </div>

        <div class="space-y-3" x-data="{ active: null }">
            @foreach($faqs as $faq)
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
                <button 
                    class="w-full flex items-center justify-between p-5 text-left hover:bg-gray-50 transition"
                    @click="active === {{ $loop->index }} ? active = null : active = {{ $loop->index }}"
                >
                    <span class="font-semibold text-gray-800 pr-4">{{ $faq->question }}</span>
                    <span class="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full transition-all duration-300"
                          :class="active === {{ $loop->index }} ? 'bg-blue-600 text-white rotate-180' : 'bg-gray-100 text-gray-500'">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </span>
                </button>
                <div class="overflow-hidden transition-all duration-300 ease-in-out"
                     x-ref="panel{{ $loop->index }}"
                     x-bind:style="active === {{ $loop->index }} ? 'max-height: 500px; opacity: 1;' : 'max-height: 0; opacity: 0;'">
                    <div class="px-5 pb-5 text-gray-600 leading-relaxed">
                        {{ $faq->answer }}
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

<section class="section-padding bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700 relative overflow-hidden">
    <div class="absolute inset-0">
        <div class="absolute top-0 left-1/4 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
        <div class="absolute bottom-0 right-1/4 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
    </div>
    <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-4xl md:text-5xl font-bold text-white mb-6">Ready to Book Your Appointment?</h2>
        <p class="text-xl text-blue-100 mb-10 max-w-2xl mx-auto">Schedule a consultation with our expert doctors today and take the first step towards better health.</p>
        <a href="{{ route('book') }}" class="inline-flex items-center px-10 py-5 bg-white text-blue-600 font-bold rounded-full hover:bg-gray-100 transition-all shadow-2xl hover:shadow-3xl hover:-translate-y-1">
            <i class="fas fa-calendar-plus mr-3 text-xl"></i>
            Book Appointment Now
        </a>
    </div>
</section>

<!-- Testimonials Section -->
@if($testimonials->count() > 0)
<section class="section-padding bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="inline-block px-5 py-2 bg-gradient-to-r from-blue-500 to-indigo-600 text-white text-sm font-bold rounded-full mb-5 shadow-lg">Testimonials</span>
            <h2 class="text-4xl font-bold text-gray-900 mb-4">What Our Patients Say</h2>
            <p class="text-xl text-gray-600">Trusted by thousands of patients</p>
        </div>
        
        <div class="relative" x-data="{ 
            active: 0, 
            count: {{ $testimonials->count() }},
            next() { this.active = (this.active + 1) % this.count },
            prev() { this.active = (this.active - 1 + this.count) % this.count },
            autoSlide() { setInterval(() => this.next(), 5000) }
        }" x-init="autoSlide()">
            <div class="overflow-hidden">
                <div class="flex transition-transform duration-500 ease-in-out" :style="'transform: translateX(-' + (active * 100) + '%)'">
                    @foreach($testimonials as $t)
                    <div class="w-full flex-shrink-0 px-4">
                        <div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-3xl p-8 md:p-12 max-w-3xl mx-auto">
                            <div class="flex items-center gap-1 text-yellow-400 mb-6">
                                @for($i = 1; $i <= 5; $i++)
                                <i class="fas fa-star text-xl {{ $i <= $t->rating ? '' : 'text-gray-300' }}"></i>
                                @endfor
                            </div>
                            <p class="text-xl md:text-2xl text-gray-700 mb-8 italic">"{{ $t->comment }}"</p>
                            <div class="flex items-center gap-4">
                                <div class="w-14 h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center text-white text-xl font-bold">{{ strtoupper(substr($t->name, 0, 1)) }}</div>
                                <div>
                                    <p class="font-bold text-gray-900 text-lg">{{ $t->name }}</p>
                                    <p class="text-gray-500">Patient</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            
            @if($testimonials->count() > 1)
            <div class="flex justify-center gap-2 mt-8">
                @foreach($testimonials as $t)
                <button 
                    @click="active = {{ $loop->index }}" 
                    class="w-3 h-3 rounded-full transition-all duration-300"
                    :class="active === {{ $loop->index }} ? 'bg-blue-600 w-8' : 'bg-gray-300 hover:bg-gray-400'"
                ></button>
                @endforeach
            </div>
            
            <button @click="prev()" class="absolute left-0 top-1/2 -translate-y-1/2 w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-gray-50 transition">
                <i class="fas fa-chevron-left text-gray-600"></i>
            </button>
            <button @click="next()" class="absolute right-0 top-1/2 -translate-y-1/2 w-12 h-12 bg-white rounded-full shadow-lg flex items-center justify-center hover:bg-gray-50 transition">
                <i class="fas fa-chevron-right text-gray-600"></i>
            </button>
            @endif
        </div>
    </div>
</section>
@endif

@endsection