@php
    $services = [
        [
            'id' => 1,
            'name' => 'Service 2',
            'image' => 'https://media.danielvu.com/payment/service-1.jpg',
            'description' => 'Mô tả dịch vụ 2',
        ],
        [
            'id' => 2,
            'name' => 'Service 3',
            'image' => 'https://media.danielvu.com/payment/service-2.jpg',
            'description' => 'Mô tả dịch vụ 2',
        ],
        [
            'id' => 3,
            'name' => 'Service 4',
            'image' => 'https://media.danielvu.com/payment/service-3.jpg',
            'description' => 'Mô tả dịch vụ 2',
        ],
        [
            'id' => 4,
            'name' => 'Service 5',
            'image' => 'https://media.danielvu.com/payment/service-4.jpg',
            'description' => 'Mô tả dịch vụ 2',
        ],
        [
            'id' => 5,
            'name' => 'Service 6',
            'image' => 'https://media.danielvu.com/payment/service-5.jpg',
            'description' => 'Mô tả dịch vụ 2',
        ],
        [
            'id' => 6,
            'name' => 'Service 7',
            'image' => 'https://media.danielvu.com/payment/service-6.jpg',
            'description' => 'Mô tả dịch vụ 2',
        ],
        [
            'id' => 7,
            'name' => 'Service 8',
            'image' => 'https://media.danielvu.com/payment/service-7.jpg',
            'description' => 'Mô tả dịch vụ 2',
        ],
        [
            'id' => 8,
            'name' => 'Service 1',
            'image' => 'https://media.danielvu.com/payment/service-3.jpg',
            'description' => 'Mô tả dịch vụ 1',
        ],
    ];
@endphp

<section id="service" class=" bg-blue-900/10 py-24">
    <div class="container mx-auto space-y-14">
        <h2 class="animation-fade-in text-3xl lg:text-5xl font-bold mb-0 text-center text-blue-800 uppercase">
            Services
        </h2>
        <div class="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach ($services as $service)
                <div
                    class="animation-fade-in flex flex-col justify-center hover:bg-[#f1f3fa] mx-auto group hover:shadow-xl  rounded-lg duration-500 p-2 md:px-4 md:py-8 h-[250px] md:h-[350px] w-full overflow-hidden">
                    <div class="rounded-lg w-[150px] h-[150px] md:w-[230px] md:h-[230px] xl:w-[240px] xl:h-[240px] mx-auto group-hover:w-[100px] group-hover:h-[100px] group-hover:md:w-[150px] group-hover:md:h-[150px] duration-500"
                        style="background: url('{{ $service['image'] }}'); background-size: cover; background-position: center; background-repeat: no-repeat;">
                    </div>

                    <h3 class="text-center my-2 font-bold text-xl md:text-2xl text-[#5278ad]"> {{ $service['name'] }}
                    </h3>

                    <p class="hidden text-center group-hover:block mb-0 text-xs md:text-base">
                        {{ $service['description'] }}
                    </p>
                </div>
            @endforeach
        </div>
    </div>
</section>
