@extends('layouts.app')

@section('title', 'Welcome to Medcare')

@section('content')
<!-- Hero Section -->
<div class="relative bg-white overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-24 md:pt-32 md:pb-40">
        <div class="relative z-10 lg:w-1/2">
            <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100 mb-8 animate-bounce-slow">
                <span class="flex h-2 w-2 rounded-full bg-indigo-600"></span>
                <span class="text-xs font-bold text-indigo-700 uppercase tracking-widest leading-none">Compassionate Care Always</span>
            </div>
            <h1 class="text-5xl md:text-7xl font-black text-slate-800 tracking-tight leading-[1.1] mb-8">
                Your Health, Our <span class="text-indigo-600">Priority.</span>
            </h1>
            <p class="text-xl text-slate-500 leading-relaxed mb-10 max-w-lg">
                Experience world-class healthcare with Medcare. Providing clinical excellence and compassionate service across all major medical specialties.
            </p>
            <div class="flex flex-col sm:flex-row items-center gap-4">
                <a href="{{ route('public.departments') }}" class="w-full sm:w-auto px-8 py-4 bg-indigo-600 text-white rounded-2xl font-bold uppercase tracking-widest text-sm hover:bg-indigo-700 shadow-xl shadow-indigo-100 transition-all flex items-center justify-center gap-2 group">
                    Explore Departments
                    <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" 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"/></svg>
                </a>
                <a href="{{ route('public.contact') }}" class="w-full sm:w-auto px-8 py-4 bg-white text-slate-700 border border-slate-200 rounded-2xl font-bold uppercase tracking-widest text-sm hover:bg-slate-50 transition-all flex items-center justify-center gap-2">
                    Contact Us
                </a>
            </div>
        </div>

        <!-- Hero Decorative Elements -->
        <div class="hidden lg:block absolute right-0 top-1/2 -translate-y-1/2 w-1/2">
            <div class="relative h-[600px]">
                <div class="absolute right-0 top-0 w-full h-full bg-indigo-50 rounded-3xl -rotate-6 transform scale-95 opacity-50"></div>
                <div class="absolute right-0 top-0 w-full h-full bg-white border border-slate-100 rounded-3xl shadow-2xl p-8 transition-transform hover:scale-[1.02] duration-500">
                    <img src="https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?auto=format&fit=crop&q=80&w=2053" alt="Modern Hospital" class="w-full h-full object-cover rounded-2xl shadow-inner">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stats Section -->
<div class="bg-slate-900 py-20">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-12 text-center">
            <div class="space-y-2">
                <p class="text-4xl font-black text-white tracking-tight">150+</p>
                <p class="text-indigo-400 text-xs font-bold uppercase tracking-widest">Expert Doctors</p>
            </div>
            <div class="space-y-2">
                <p class="text-4xl font-black text-white tracking-tight">25k+</p>
                <p class="text-indigo-400 text-xs font-bold uppercase tracking-widest">Happy Patients</p>
            </div>
            <div class="space-y-2">
                <p class="text-4xl font-black text-white tracking-tight">12+</p>
                <p class="text-indigo-400 text-xs font-bold uppercase tracking-widest">Specialities</p>
            </div>
            <div class="space-y-2">
                <p class="text-4xl font-black text-white tracking-tight">24/7</p>
                <p class="text-indigo-400 text-xs font-bold uppercase tracking-widest">Emergency Care</p>
            </div>
        </div>
    </div>
</div>

<!-- Featured Departments -->
<div class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-16 space-y-4">
            <h2 class="text-sm font-black text-indigo-600 uppercase tracking-widest">Our Centers of Excellence</h2>
            <h3 class="text-4xl font-black text-slate-800 tracking-tight">Featured Departments</h3>
            <div class="h-1 w-20 bg-indigo-600 mx-auto rounded-full"></div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($departments as $dept)
                <div class="group bg-slate-50 border border-slate-100 rounded-3xl overflow-hidden hover:shadow-2xl hover:shadow-indigo-100 transition-all duration-500">
                    <div class="h-48 bg-slate-200 relative overflow-hidden"
                         x-data="{ 
                            active: 0, 
                            count: {{ $dept->images->count() }},
                            next() { this.active = (this.active + 1) % this.count }
                         }"
                         @if($dept->images->count() > 1) x-init="setInterval(() => next(), 5000)" @endif>
                        @if($dept->images->isNotEmpty())
                            @foreach($dept->images as $index => $image)
                                <img src="{{ asset('storage/' . $image->image_path) }}" 
                                     alt="{{ $dept->name }} {{ $index + 1 }}" 
                                     class="absolute inset-0 w-full h-full object-cover transition-all duration-1000 group-hover:scale-110"
                                     x-show="active === {{ $index }}"
                                     x-transition:enter="transition ease-out duration-1000"
                                     x-transition:enter-start="opacity-0"
                                     x-transition:enter-end="opacity-100"
                                     x-transition:leave="transition ease-in duration-1000"
                                     x-transition:leave-start="opacity-100"
                                     x-transition:leave-end="opacity-0">
                            @endforeach
                        @else
                            <div class="w-full h-full flex items-center justify-center bg-indigo-50 text-indigo-300">
                                <svg class="h-16 w-16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            </div>
                        @endif
                        <div class="absolute top-4 right-4 z-20">
                             <span class="px-3 py-1 bg-white/90 backdrop-blur rounded-full text-[10px] font-black uppercase text-indigo-600 shadow-sm border border-white">Center of Excellence</span>
                        </div>
                    </div>
                    <div class="p-8">
                        <h4 class="text-xl font-bold text-slate-800 mb-3 group-hover:text-indigo-600 transition-colors uppercase tracking-tight">{{ $dept->name }}</h4>
                        <div class="text-slate-500 text-sm line-clamp-2 mb-6">
                            {!! strip_tags($dept->description) !!}
                        </div>
                        <a href="{{ route('public.departments') }}" class="inline-flex items-center gap-2 text-sm font-bold text-indigo-600 uppercase tracking-widest hover:gap-4 transition-all">
                            Learn More
                            <svg class="h-4 w-4" 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"/></svg>
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<!-- Category/Services Grid -->
<div class="py-24 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
            <div class="space-y-4">
                <h2 class="text-sm font-black text-indigo-600 uppercase tracking-widest">Specialized Care</h2>
                <h3 class="text-4xl font-black text-slate-800 tracking-tight leading-tight">Comprehensive Services <br> For Every Patient</h3>
            </div>
            <a href="{{ route('public.services') }}" class="px-6 py-3 bg-white text-slate-700 border border-slate-200 rounded-xl font-bold uppercase tracking-widest text-xs hover:bg-slate-50 transition-all shadow-sm">
                View All Services
            </a>
        </div>

        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-6">
            @foreach($categories as $category)
                <div class="bg-white p-8 rounded-3xl border border-white shadow-sm hover:shadow-xl hover:shadow-indigo-50 hover:-translate-y-2 transition-all group">
                    <div class="h-12 w-12 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center mb-6 group-hover:bg-indigo-600 group-hover:text-white transition-colors">
                        <svg class="h-6 w-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-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>
                    <h5 class="text-lg font-bold text-slate-800 mb-1 tracking-tight">{{ $category->name }}</h5>
                    <p class="text-slate-400 text-xs font-bold uppercase tracking-wider group-hover:text-indigo-600 transition-colors">Service Department</p>
                </div>
            @endforeach
        </div>
    </div>
</div>

<!-- CTA -->
<div class="py-24 bg-white relative overflow-hidden">
    <div class="absolute inset-0 bg-indigo-600 opacity-5"></div>
    <div class="max-w-5xl mx-auto px-4 text-center space-y-8 relative z-10">
        <h2 class="text-4xl md:text-5xl font-black text-slate-800 tracking-tight leading-tight">Ready to receive best-in-class <br> medical attention?</h2>
        <p class="text-lg text-slate-500 max-w-2xl mx-auto">
            Our medical experts are ready to listen and assist you in your health journey. Schedule your visit today.
        </p>
        <div class="flex justify-center">
            <a href="{{ route('public.contact') }}" class="px-10 py-5 bg-indigo-600 text-white rounded-2xl font-black uppercase tracking-widest text-sm hover:bg-indigo-700 shadow-2xl shadow-indigo-200 transition-all transform hover:scale-110">
                Book a Consultation
            </a>
        </div>
    </div>
</div>
@endsection