@php
$services = [
    [
        'name' => 'Hair Loss',
        'image' => '/images/alopecia.jpg',
        'category' => 'Men\'s Health',
        'category_color' => 'bg-sky-300',
        'url' => route('services.hair-loss'),
    ],
    [
        'name' => 'Hot Flashes',
        'image' => '/images/hot-flashes.jpg',
        'category' => 'Women\'s Health',
        'category_color' => 'bg-emerald-300',
        'url' => route('services.hot-flashes'),
    ],
    [
        'name' => 'Anxiety',
        'image' => '/images/anxiety.jpg',
        'category' => 'Mental Health',
        'category_color' => 'bg-amber-300',
        'url' => route('services.anxiety'),
    ],
    [
        'name' => 'Depression',
        'image' => '/images/depression.jpg',
        'category' => 'Mental Health',
        'category_color' => 'bg-amber-300',
        'url' => route('services.depression'),
    ],
    [
        'name' => 'Primary Care',
        'image' => '/images/primary-care.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.anxiety'),
    ],
    [
        'name' => 'Acne',
        'image' => '/images/acne.jpg',
        'category' => 'Skin',
        'category_color' => 'bg-red-300',
        'url' => route('services.acne'),
    ],
    [
        'name' => 'Erectile Dysfunction',
        'image' => '/images/erectile-dysfunction.jpg',
        'category' => 'Men\'s Health',
        'category_color' => 'bg-sky-300',
        'url' => route('drug.viagra'),
    ],
    [
        'name' => 'Morning After Pill',
        'image' => '/images/morning-after-pill.jpg',
        'category' => 'Women\'s Health',
        'category_color' => 'bg-emerald-300',
        'url' => route('services.morning-after-pill'),
    ],
    [
        'name' => 'Insomnia',
        'image' => '/images/insomnia.jpg',
        'category' => 'Mental Health',
        'category_color' => 'bg-amber-300',
        'url' => route('services.insomnia'),
    ],
    /**
    [
        'name' => 'Birth Control',
        'image' => '/images/birth-control.jpg',
        'category' => 'Women\'s Health',
        'category_color' => 'bg-emerald-300',
        'url' => route('services.birth-control'),
    ],
    */
    [
        'name' => 'Migraine',
        'image' => '/images/migraine.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.migraine'),
    ],
    [
        'name' => 'Hypothyroidism',
        'image' => '/images/hypothyroidism.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.hypothyroidism'),
    ],
    [
        'name' => 'Premature Ejaculation',
        'image' => '/images/premature-ejaculation.jpg',
        'category' => 'Men\'s Health',
        'category_color' => 'bg-sky-300',
        'url' => route('services.premature-ejaculation'),
    ],
    [
        'name' => 'Urinary Tract Infection',
        'image' => '/images/uti.jpg',
        'category' => 'Women\'s Health',
        'category_color' => 'bg-emerald-300',
        'url' => route('services.uti'),
    ],
    [
        'name' => 'Cold Sore',
        'image' => '/images/cold-sore.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.cold-sore'),
    ],
    [
        'name' => 'Dark Spots',
        'image' => '/images/dark-spots.jpg',
        'category' => 'Skin',
        'category_color' => 'bg-red-300',
        'url' => route('services.dark-spots'),
    ],
    [
        'name' => 'Genital Herpes',
        'image' => '/images/genital-herpes.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.genital-herpes'),
    ],
    [
        'name' => 'Acid Reflux',
        'image' => '/images/acid-reflux.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.acid-reflux'),
    ],
    [
        'name' => 'High Blood Pressure',
        'image' => '/images/hbp.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.high-blood-pressure'),
    ],
    [
        'name' => 'Stop Smoking',
        'image' => '/images/stop-smoking.jpg',
        'category' => 'Mental Health',
        'category_color' => 'bg-amber-300',
        'url' => route('services.stop-smoking'),
    ],
    [
        'name' => 'Sinus Infection',
        'image' => '/images/sinus-infection.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.sinus-infection'),
    ],
    [
        'name' => 'Asthma',
        'image' => '/images/asthma.jpg',
        'category' => 'Mental Health',
        'category_color' => 'bg-amber-300',
        'url' => route('services.asthma'),
    ],
    [
        'name' => 'Cholesterol',
        'image' => '/images/cholesterol.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.cholesterol'),
    ],
    [
        'name' => 'Cholesterol Test',
        'image' => '/images/cholesterol-test.jpg',
        'category' => 'Testing',
        'category_color' => 'bg-purple-300',
        'url' => route('services.cholesterol-test'),
    ],
    [
        'name' => 'STD Test',
        'image' => '/images/std-test.jpg',
        'category' => 'Testing',
        'category_color' => 'bg-purple-300',
        'url' => route('services.std-test'),
    ],
    [
        'name' => 'A1C Blood Sugar Test',
        'image' => '/images/a1c-test.jpg',
        'category' => 'Testing',
        'category_color' => 'bg-purple-300',
        'url' => route('services.blood-sugar-test'),
    ],
    [
        'name' => 'Blood Type Test',
        'image' => '/images/blood-type-test.jpg',
        'category' => 'Testing',
        'category_color' => 'bg-purple-300',
        'url' => route('services.blood-type-test'),
    ],
    [
        'name' => 'Primary Care Video Visit',
        'image' => '/images/pcp-video-visit.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-lime-300',
        'url' => route('services.primary-care-complete'),
    ],
    [
        'name' => 'Pain Relief',
        'image' => '/images/pain-management.jpg',
        'category' => 'General Health',
        'category_color' => 'bg-sky-300',
        'url' => route('services.pain-treatment'),
    ],
];
@endphp

<section class="bg-gradient-to-b from-blue-50 to-white py-16 px-4 md:px-8">
    <div class="container mx-auto">
        <h2 class="text-3xl md:text-4xl font-bold text-blue-900 mb-12 text-center">Our Health Services</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($services as $service)
                        <a href="{{ $service['url'] }}" class="transition-colors duration-200">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
                    <div class="relative">
                        <img class="w-full h-48 object-cover" src="{{ $service['image'] }}" alt="{{ $service['name'] }}">
                        <span class="absolute top-2 right-2 px-2 py-1 rounded-full text-xs font-semibold {{ $service['category_color'] }}">
                            {{ $service['category'] }}
                        </span>
                    </div>
                    <div class="p-5">
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ $service['name'] }}</h3>
                        <div class="inline-flex items-center text-blue-600 hover:text-blue-800">
                            Learn More
                            <svg class="w-4 h-4 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                </a>
            @endforeach
        </div>
    </div>
</section>