@extends('layouts.app')

@section('content')
<!-- Hero Section -->
<div class="relative bg-gray-900 min-h-screen flex items-center overflow-hidden">
    <!-- Background Image with Overlay (Slider) -->
    <div class="absolute inset-0 z-0" id="hero-slider">
        @php
            $uploadedImages = json_decode($settings['home_hero_bg_images'] ?? '[]', true);
            
            if (!empty($uploadedImages)) {
                $heroImages = array_map(function($img) { return asset($img); }, $uploadedImages);
            } else {
                $heroImages = [
                    isset($settings['home_hero_bg_image']) ? asset($settings['home_hero_bg_image']) : asset('assets/images/hero-bg-default.jpg'),
                    'https://images.unsplash.com/photo-1538108149393-fbbd81895907?auto=format&fit=crop&q=80',
                    'https://images.unsplash.com/photo-1579684385127-1ef15d508118?auto=format&fit=crop&q=80',
                ];
            }
        @endphp

        @foreach($heroImages as $index => $image)
            <img src="{{ $image }}" alt="Hero Background {{ $index + 1 }}" 
                 class="hero-bg-slide absolute w-full h-full object-cover transition-opacity duration-1000 ease-in-out {{ $index === 0 ? 'opacity-60' : 'opacity-0' }}">
        @endforeach
        
        <div class="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-900/80 to-transparent"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full pt-20 pb-16">
        <div class="max-w-3xl">
            <!-- Tag/Label -->
            <div class="inline-flex items-center px-4 py-2 rounded-full border border-gray-600 bg-gray-800/50 backdrop-blur-sm mb-8">
                <span class="w-2 h-2 rounded-full bg-teal-400 mr-3"></span>
                <span class="text-gray-300 text-xs font-bold tracking-widest uppercase">{{ $settings['home_hero_tag'] ?? '✨ Leading IVF & Gynecological Laparoscopic Specialist' }}</span>
            </div>

            <!-- Heading -->
            <h1 class="text-5xl sm:text-6xl md:text-7xl font-extrabold text-white leading-tight mb-6 tracking-tight">
                {{ $settings['home_hero_title'] ?? 'Pioneering Fertility &' }}
                <div class="w-16 h-1 bg-white my-4"></div>
                <span class="text-teal-400">{{ $settings['home_hero_title_highlight'] ?? 'Laparoscopic Excellence in Nepal' }}</span>
            </h1>

            <!-- Description -->
            <p class="mt-4 text-lg sm:text-xl text-gray-300 max-w-2xl font-medium leading-relaxed mb-10">
                {{ $settings['home_hero_description'] ?? 'With over 5,500+ successful Gynecological Laparoscopic Surgeries. Dr. Rajan Shah provides world-class care and advanced fertility treatments.' }}
            </p>

            <!-- Buttons -->
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="{{ $settings['home_hero_btn1_url'] ?? route('contact') }}" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-bold rounded-full text-gray-900 bg-teal-400 hover:bg-teal-300 transition-all duration-300 shadow-[0_0_20px_rgba(45,212,191,0.3)] hover:shadow-[0_0_30px_rgba(45,212,191,0.5)]">
                    {{ $settings['home_hero_btn1_text'] ?? 'Contact Us' }}
                    <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
                
                <a href="{{ $settings['home_hero_btn2_url'] ?? '#' }}" class="inline-flex items-center justify-center px-8 py-4 border border-gray-500 text-base font-bold rounded-full text-white hover:bg-gray-800 hover:border-gray-400 transition-all duration-300">
                    {{ $settings['home_hero_btn2_text'] ?? 'Explore Services' }}
                    <svg class="ml-2 w-5 h-5" 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>
    </div>
</div>

<!-- Intro Section -->
<div class="py-16 bg-gray-50 overflow-hidden lg:py-24">
    <div class="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-7xl">
        <div class="relative lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
            <div class="relative">
                <h3 class="text-2xl font-extrabold text-gray-900 tracking-tight sm:text-3xl">
                    {{ $settings['home_intro_title'] ?? 'Pioneering Fertility Excellence in Nepal' }}
                </h3>
                <p class="mt-3 text-lg text-gray-500">
                    {{ $settings['home_intro_desc_1'] ?? "Dr. Rajan Shah is one of Nepal's most renowned gynecologists and IVF specialists, known for his expertise in fertility treatments and advanced reproductive techniques." }}
                </p>
                <p class="mt-3 text-lg text-gray-500">
                    {{ $settings['home_intro_desc_2'] ?? "With years of experience in gynecological laparoscopic surgery and infertility management, he has helped countless couples achieve their dream of parenthood." }}
                </p>
                
                <div class="mt-8">
                    <a href="{{ route('about') }}" class="text-teal-600 hover:text-teal-700 font-medium flex items-center">
                        Read full bio 
                        <svg class="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                    </a>
                </div>
            </div>

            <div class="mt-10 -mx-4 relative lg:mt-0" aria-hidden="true">
                <div class="bg-teal-600 rounded-2xl shadow-xl p-8 text-white 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>
                    <h4 class="text-xl font-bold mb-4 relative z-10">Advanced Technology</h4>
                    <p class="mb-4 relative z-10 text-teal-100">Specialized in 3D 4K Highly advanced Karl Storz ICG RUBINA camera system for the most precise surgeries.</p>
                    <ul class="space-y-2 relative z-10">
                        <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-teal-300" 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> 3D 4K Visuals</li>
                        <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-teal-300" 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> Minimally Invasive</li>
                        <li class="flex items-center"><svg class="w-5 h-5 mr-2 text-teal-300" 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> Faster Recovery</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Services Preview Section -->
<div class="py-16 bg-white sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center flex flex-col items-center">
            <div class="inline-flex items-center px-4 py-1.5 rounded-full bg-teal-50 border border-teal-100/60 shadow-sm mb-4">
                <span class="text-teal-600 text-xs font-bold tracking-widest uppercase">{{ $settings['home_services_tag'] ?? 'WHAT WE TREAT' }}</span>
            </div>
            
            <h2 class="mt-2 text-4xl sm:text-5xl font-extrabold tracking-tight text-slate-900">
                {{ $settings['home_services_title'] ?? 'Comprehensive Care' }} 
                <span class="text-teal-600">{{ $settings['home_services_title_highlight'] ?? 'for Every Condition' }}</span>
            </h2>
            
            <p class="mt-4 max-w-3xl text-lg text-slate-500 mx-auto leading-relaxed">
                {{ $settings['home_services_description'] ?? 'Specialised, evidence-based treatments tailored to resolve your unique condition — from diagnosis to lasting relief.' }}
            </p>
        </div>

        <div class="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($services as $service)
            <div class="bg-gray-50 rounded-2xl md:rounded-3xl shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 overflow-hidden group flex flex-col h-full border border-gray-100">
                @if(isset($service['image']))
                <div class="w-full h-56 md:h-64 overflow-hidden relative bg-white">
                    <img src="{{ $service['image'] }}" alt="{{ $service['title'] }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                @endif
                <div class="p-6 md:p-8 flex-1 flex flex-col bg-gray-50">
                    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ $service['title'] }}</h3>
                    <p class="text-gray-600 mb-6 flex-1 text-sm md:text-base leading-relaxed">{{ Str::limit($service['description'], 120) }}</p>
                    
                    <a href="{{ route('service.detail', $service['slug']) }}" class="inline-flex items-center text-teal-600 font-bold text-sm hover:text-teal-700 mt-auto transition-colors">
                        Learn more
                        <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="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                        </svg>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        
        <div class="mt-12 text-center">
            <a href="{{ route('services') }}" class="inline-flex items-center justify-center px-8 py-3 border border-gray-300 text-sm font-bold rounded-full text-slate-700 bg-white hover:bg-gray-50 hover:text-slate-900 hover:border-gray-400 transition-all duration-300 shadow-sm">
                {{ $settings['home_services_btn_text'] ?? 'Explore All Services' }}
                <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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </a>
        </div>
    </div>
</div>

<!-- Why Choose Me Section -->
<div class="bg-white py-16 sm:py-24 lg:py-32">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-start">
            
            <!-- Left Side: Image Collage & Badge -->
            <div class="relative h-[450px] sm:h-[550px] w-full rounded-xl flex items-center justify-center mb-12 lg:mb-0">
                <!-- Top Left Image -->
                <div class="absolute top-0 left-0 w-2/3 h-2/3 rounded-2xl overflow-hidden shadow-lg z-0">
                    <img src="{{ isset($settings['home_why_image_1']) ? asset($settings['home_why_image_1']) : asset('assets/images/why-1.jpg') }}" alt="Why Choose Us 1" class="w-full h-full object-cover">
                </div>
                
                <!-- Bottom Right Image -->
                <div class="absolute bottom-0 right-0 w-2/3 h-2/3 rounded-2xl overflow-hidden shadow-2xl z-10 border-4 border-white">
                    <img src="{{ isset($settings['home_why_image_2']) ? asset($settings['home_why_image_2']) : asset('assets/images/why-2.jpg') }}" alt="Why Choose Us 2" class="w-full h-full object-cover">
                </div>
                
                <!-- Floating Badge -->
                <div class="absolute top-1/2 left-1/4 transform -translate-y-1/2 -translate-x-4 z-20 bg-white px-6 py-4 rounded-xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] flex items-center space-x-4 border border-gray-100">
                    <div class="bg-teal-50 p-2 rounded-full text-teal-600">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    </div>
                    <div>
                        <p class="text-xl font-extrabold text-slate-900 leading-tight">{{ $settings['home_why_badge_text_1'] ?? '100%' }}</p>
                        <p class="text-xs font-bold text-slate-500 tracking-wider">{{ $settings['home_why_badge_text_2'] ?? 'NON-SURGICAL' }}</p>
                    </div>
                </div>
            </div>

            <!-- Right Side: Content & Features -->
            <div>
                <div class="inline-flex items-center px-3 py-1 rounded-full bg-slate-100 mb-6">
                    <span class="text-slate-600 text-xs font-bold tracking-widest uppercase">{{ $settings['home_why_tag'] ?? 'WHY CHOOSE US' }}</span>
                </div>
                
                <h2 class="text-4xl font-extrabold text-slate-900 tracking-tight sm:text-5xl mb-6">
                    {{ $settings['home_why_title'] ?? 'A Different Kind of' }} 
                    <span class="text-teal-600">{{ $settings['home_why_title_highlight'] ?? 'Healing' }}</span>
                </h2>
                
                <p class="text-lg text-slate-600 leading-relaxed mb-10 max-w-lg">
                    {{ $settings['home_why_description'] ?? 'We treat the root cause — not the symptom. Our data-driven, non-invasive protocols deliver lasting relief where others have failed.' }}
                </p>
                
                <div class="space-y-4">
                    <!-- Feature 1 -->
                    <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm flex items-start space-x-4 transition-all hover:shadow-md">
                        <div class="bg-slate-50 p-3 rounded-xl border border-gray-100 flex-shrink-0">
                            <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                        <div>
                            <h4 class="text-base font-bold text-slate-900 mb-1">{{ $settings['home_why_f1_title'] ?? 'Non-Surgical Approach' }}</h4>
                            <p class="text-sm text-slate-500 leading-relaxed">{{ $settings['home_why_f1_desc'] ?? 'Zero knives, zero stitches. Every treatment is non-invasive and evidence-based.' }}</p>
                        </div>
                    </div>
                    
                    <!-- Feature 2 -->
                    <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm flex items-start space-x-4 transition-all hover:shadow-md">
                        <div class="bg-slate-50 p-3 rounded-xl border border-gray-100 flex-shrink-0">
                            <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                        <div>
                            <h4 class="text-base font-bold text-slate-900 mb-1">{{ $settings['home_why_f2_title'] ?? 'Data-Driven Diagnostics' }}</h4>
                            <p class="text-sm text-slate-500 leading-relaxed">{{ $settings['home_why_f2_desc'] ?? '3D CBCT, EMG, polysomnography, kinesiography — for the most accurate diagnosis.' }}</p>
                        </div>
                    </div>
                    
                    <!-- Feature 3 -->
                    <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm flex items-start space-x-4 transition-all hover:shadow-md">
                        <div class="bg-slate-50 p-3 rounded-xl border border-gray-100 flex-shrink-0">
                            <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                        <div>
                            <h4 class="text-base font-bold text-slate-900 mb-1">{{ $settings['home_why_f3_title'] ?? '18+ Years of Mastery' }}</h4>
                            <p class="text-sm text-slate-500 leading-relaxed">{{ $settings['home_why_f3_desc'] ?? 'Decades of experience treating complex, multi-layered craniofacial conditions.' }}</p>
                        </div>
                    </div>
                    
                    <!-- Feature 4 -->
                    <div class="bg-white border border-gray-100 rounded-2xl p-5 shadow-sm flex items-start space-x-4 transition-all hover:shadow-md">
                        <div class="bg-slate-50 p-3 rounded-xl border border-gray-100 flex-shrink-0">
                            <svg class="w-5 h-5 text-slate-700" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
                        </div>
                        <div>
                            <h4 class="text-base font-bold text-slate-900 mb-1">{{ $settings['home_why_f4_title'] ?? 'Global Specialist Network' }}</h4>
                            <p class="text-sm text-slate-500 leading-relaxed">{{ $settings['home_why_f4_desc'] ?? 'Eight clinics across India, UAE and Nepal, with telemedicine options worldwide.' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Testimonials Section -->
<style>
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 0.75rem)); }
    }
    .animate-marquee {
        animation: marquee 30s linear infinite;
    }
</style>
<div class="bg-white py-16 sm:py-24 overflow-hidden relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-12 flex flex-col md:flex-row items-center justify-between">
        <div>
            <div class="inline-flex items-center px-3 py-1 rounded-full bg-orange-50 border border-orange-100 mb-4">
                <span class="text-orange-500 text-xs font-bold tracking-widest uppercase">PATIENT STORIES</span>
            </div>
            <h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight">
                Real Results, <span class="text-teal-600">Real People</span>
            </h2>
        </div>
        <div class="mt-6 md:mt-0 text-center md:text-right flex flex-col items-center md:items-end">
            <p class="text-slate-500 text-sm mb-4 max-w-sm ml-auto text-right">Thousands of patients have found lasting relief. Here are just a few of their stories.</p>
            <button onclick="document.getElementById('testimonial-modal').classList.remove('hidden')" class="inline-flex items-center justify-center px-6 py-2.5 border border-gray-200 text-sm font-bold rounded-full text-slate-700 bg-white hover:bg-gray-50 transition-all shadow-sm">
                Share Your Story <span class="ml-2 text-lg font-normal">+</span>
            </button>
        </div>
    </div>

    <!-- Marquee Slider -->
    <div class="relative w-full overflow-hidden flex" style="mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);">
        <div class="flex animate-marquee space-x-6 min-w-max hover:[animation-play-state:paused] px-4 py-2">
            @forelse($testimonials as $testimonial)
            <div class="bg-slate-50 rounded-2xl p-8 w-80 sm:w-[26rem] flex-shrink-0 border border-gray-100 flex flex-col h-full shadow-sm hover:shadow-md transition-shadow">
                <div class="flex text-yellow-400 mb-4 space-x-1">
                    @for($i=0; $i<5; $i++)
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    @endfor
                </div>
                <p class="text-slate-600 leading-relaxed flex-grow text-sm sm:text-base font-medium">"{!! nl2br(e($testimonial->text)) !!}"</p>
                <div class="mt-8 flex items-center border-t border-gray-200 pt-5">
                    <div class="h-10 w-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-700 font-bold shadow-inner">
                        {{ strtoupper(substr($testimonial->author_name, 0, 1)) }}
                    </div>
                    <div class="ml-3">
                        <div class="font-bold text-slate-900 text-sm">{{ $testimonial->author_name }}</div>
                        <div class="text-xs text-slate-500">Verified Patient</div>
                    </div>
                </div>
            </div>
            @empty
            <p class="text-gray-500 text-center w-full">No testimonials yet.</p>
            @endforelse
            
            @if(count($testimonials) > 0)
            <!-- Duplicate for infinite scrolling effect -->
            @foreach($testimonials as $testimonial)
            <div class="bg-slate-50 rounded-2xl p-8 w-80 sm:w-[26rem] flex-shrink-0 border border-gray-100 flex flex-col h-full shadow-sm hover:shadow-md transition-shadow" aria-hidden="true">
                <div class="flex text-yellow-400 mb-4 space-x-1">
                    @for($i=0; $i<5; $i++)
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
                    @endfor
                </div>
                <p class="text-slate-600 leading-relaxed flex-grow text-sm sm:text-base font-medium">"{!! nl2br(e($testimonial->text)) !!}"</p>
                <div class="mt-8 flex items-center border-t border-gray-200 pt-5">
                    <div class="h-10 w-10 bg-slate-200 rounded-full flex items-center justify-center text-slate-700 font-bold shadow-inner">
                        {{ strtoupper(substr($testimonial->author_name, 0, 1)) }}
                    </div>
                    <div class="ml-3">
                        <div class="font-bold text-slate-900 text-sm">{{ $testimonial->author_name }}</div>
                        <div class="text-xs text-slate-500">Verified Patient</div>
                    </div>
                </div>
            </div>
            @endforeach
            @endif
        </div>
    </div>
</div>

<!-- Testimonial Submission Modal -->
<div id="testimonial-modal" class="fixed inset-0 z-50 hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-900 bg-opacity-50 transition-opacity backdrop-blur-sm" aria-hidden="true" onclick="document.getElementById('testimonial-modal').classList.add('hidden')"></div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-2xl text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full border border-gray-100">
            <form action="{{ route('testimonial.submit') }}" method="POST">
                @csrf
                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                    <div class="sm:flex sm:items-start">
                        <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
                            <h3 class="text-2xl leading-6 font-extrabold text-slate-900 mb-2" id="modal-title">
                                Share Your Story
                            </h3>
                            <p class="text-sm text-slate-500 mb-6">Your feedback helps others make informed decisions. All stories will be reviewed before publishing.</p>
                            
                            <div class="space-y-5">
                                <div>
                                    <label for="author_name" class="block text-sm font-bold text-slate-700 text-left mb-1">Your Name</label>
                                    <input type="text" name="author_name" id="author_name" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 px-4 py-2 bg-slate-50 border">
                                </div>
                                
                                <div>
                                    <label for="text" class="block text-sm font-bold text-slate-700 text-left mb-1">Your Experience</label>
                                    <textarea name="text" id="text" rows="5" required class="block w-full rounded-lg border-gray-300 shadow-sm focus:border-teal-500 focus:ring-teal-500 px-4 py-2 bg-slate-50 border" placeholder="How was your experience with Dr. Rajan?"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-50 px-4 py-4 sm:px-6 sm:flex sm:flex-row-reverse border-t border-gray-100">
                    <button type="submit" class="w-full inline-flex justify-center rounded-full border border-transparent shadow-sm px-6 py-2.5 bg-teal-600 text-sm font-bold text-white hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:ml-3 sm:w-auto transition-colors">
                        Submit Story
                    </button>
                    <button type="button" onclick="document.getElementById('testimonial-modal').classList.add('hidden')" class="mt-3 w-full inline-flex justify-center rounded-full border border-gray-300 shadow-sm px-6 py-2.5 bg-white text-sm font-bold text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 sm:mt-0 sm:ml-3 sm:w-auto transition-colors">
                        Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Gallery Preview Section -->
<div class="bg-slate-50 py-16 sm:py-24 border-t border-gray-200">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <div class="inline-flex items-center px-3 py-1 rounded-full bg-teal-50 border border-teal-100 mb-4">
                <span class="text-teal-600 text-xs font-bold tracking-widest uppercase">OUR CLINIC</span>
            </div>
            <h3 class="text-3xl font-heading font-extrabold text-slate-900">A Glimpse into Our Practice</h3>
        </div>
        
        @if(isset($galleryItems) && count($galleryItems) > 0)
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
            @foreach($galleryItems as $item)
            <div class="group relative rounded-2xl md:rounded-3xl overflow-hidden aspect-[4/3] shadow-sm border border-gray-100 bg-gray-100 flex items-center justify-center">
                @if($item->type === 'image')
                <img src="{{ asset($item->media_url) }}" alt="{{ $item->title ?? 'Gallery Image' }}" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                @elseif($item->type === 'youtube')
                <svg class="h-16 w-16 text-red-500 transition-transform duration-700 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
                @elseif($item->type === 'tiktok')
                <svg class="h-16 w-16 text-black transition-transform duration-700 group-hover:scale-110" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93v7.2c0 1.63-.51 3.27-1.46 4.58-1.52 2.09-4.14 3.26-6.74 3.07-2.73-.2-5.18-1.92-6.24-4.47-1.07-2.58-.64-5.6 1.14-7.79 1.5-1.85 3.86-2.9 6.19-2.92v4.04c-1.35.03-2.65.65-3.52 1.68-.88 1.05-1.25 2.5-.94 3.85.3 1.34 1.34 2.5 2.63 3 1.25.48 2.71.4 3.86-.27 1.17-.67 1.95-1.92 2.1-3.26.1-1.01.07-2.03.07-3.04V.02z"/></svg>
                @endif
                <div class="absolute inset-0 bg-teal-900 bg-opacity-0 group-hover:bg-opacity-40 transition-opacity duration-300 flex items-center justify-center">
                    <svg class="w-10 h-10 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform scale-50 group-hover:scale-100" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <p class="text-center text-slate-500">No gallery images available at the moment.</p>
        @endif
        
        <div class="mt-12 text-center">
            <a href="{{ route('gallery') }}" class="inline-flex items-center justify-center px-8 py-3 border border-gray-300 text-sm font-bold rounded-full text-slate-700 bg-white hover:bg-gray-50 hover:text-slate-900 hover:border-gray-400 transition-all duration-300 shadow-sm">
                View All Gallery
                <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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
            </a>
        </div>
    </div>
</div>

<!-- Latest Insights Section -->
<div class="bg-white py-16 sm:py-24">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row items-center justify-between mb-12">
            <div>
                <div class="inline-flex items-center px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100 mb-4">
                    <span class="text-indigo-600 text-xs font-bold tracking-widest uppercase">LATEST INSIGHTS</span>
                </div>
                <h2 class="text-4xl md:text-5xl font-extrabold text-slate-900 tracking-tight">
                    Knowledge & <span class="text-teal-600">Expertise</span>
                </h2>
            </div>
            <div class="mt-6 md:mt-0">
                <a href="{{ route('blogs.index') }}" class="inline-flex items-center justify-center px-6 py-2.5 border border-gray-200 text-sm font-bold rounded-full text-slate-700 bg-white hover:bg-gray-50 transition-all shadow-sm">
                    View All Articles <span class="ml-2 font-normal">&rarr;</span>
                </a>
            </div>
        </div>

        @if(isset($blogs) && count($blogs) > 0)
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            @foreach($blogs as $blog)
            <div class="bg-white rounded-3xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col group">
                <div class="h-48 sm:h-56 overflow-hidden relative bg-slate-100">
                    <img src="{{ $blog->image_url ? asset($blog->image_url) : asset('assets/images/placeholder.jpg') }}" alt="{{ $blog->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                </div>
                <div class="p-6 sm:p-8 flex-grow flex flex-col">
                    <div class="flex items-center space-x-3 mb-4">
                        <span class="px-3 py-1 bg-teal-50 text-teal-700 text-xs font-bold rounded-full">Health Insights</span>
                        <span class="text-xs text-gray-400 font-medium">{{ $blog->created_at->format('M d, Y') }}</span>
                    </div>
                    <h3 class="text-xl font-bold text-slate-900 mb-3 leading-snug">{{ $blog->title }}</h3>
                    <p class="text-slate-500 text-sm leading-relaxed mb-6 flex-grow">{{ Str::limit($blog->meta_description ?? strip_tags($blog->content), 120) }}</p>
                    <a href="{{ route('blogs.show', $blog->slug) }}" class="inline-flex items-center text-teal-600 font-bold text-sm hover:text-teal-700 transition-colors mt-auto">
                        Read article <span class="ml-1">&rarr;</span>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <p class="text-center text-slate-500">No articles published yet.</p>
        @endif
    </div>
</div>

<!-- CTA Section -->
<div class="bg-gradient-to-br from-teal-900 to-teal-700 relative overflow-hidden">
    <!-- Decorative SVG blur -->
    <div class="absolute top-0 right-0 -mr-20 -mt-20 w-64 h-64 rounded-full bg-teal-500 opacity-20 blur-3xl"></div>
    <div class="absolute bottom-0 left-0 -ml-20 -mb-20 w-80 h-80 rounded-full bg-teal-800 opacity-40 blur-3xl"></div>
    
    <div class="relative max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8 lg:flex lg:items-center lg:justify-between z-10">
        <h2 class="text-3xl font-heading font-extrabold tracking-tight text-white md:text-4xl">
            <span class="block">{{ $settings['home_cta_title_1'] ?? 'Ready to take the next step?' }}</span>
            <span class="block text-teal-300 mt-2">{{ $settings['home_cta_title_2'] ?? 'Schedule your consultation today.' }}</span>
        </h2>
        <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 space-x-4">
            <div class="inline-flex rounded-full shadow-lg">
                <a href="{{ route('contact') }}" class="inline-flex items-center justify-center px-8 py-4 border border-transparent text-base font-semibold rounded-full text-teal-900 bg-teal-50 hover:bg-white hover:scale-105 active:scale-95 transition-all duration-300">
                    Contact
                </a>
            </div>
            <div class="inline-flex rounded-full shadow-sm">
                <a href="{{ route('about') }}" class="inline-flex items-center justify-center px-8 py-4 border border-teal-500 text-base font-semibold rounded-full text-white bg-transparent hover:bg-teal-800 hover:border-teal-400 hover:scale-105 active:scale-95 transition-all duration-300">
                    Learn about Dr. Shah
                </a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const slides = document.querySelectorAll('.hero-bg-slide');
        let currentSlide = 0;

        if (slides.length > 1) {
            setInterval(() => {
                slides[currentSlide].classList.remove('opacity-60');
                slides[currentSlide].classList.add('opacity-0');
                
                currentSlide = (currentSlide + 1) % slides.length;
                
                slides[currentSlide].classList.remove('opacity-0');
                slides[currentSlide].classList.add('opacity-60');
            }, 3500); // 3.5 seconds
        }
    });
</script>
@endpush

@endsection
