@php
    $solutions = [
        [
            'icon' => asset('images/services/hr-outsourcing-1.png'),
            'title' => 'Recruitment and Selection',
            'description' => 'Identifying, assessing, and recommending top talent that aligns with your company’s goals and requirements'
        ],
        [
            'icon' => asset('images/services/hr-outsourcing-2.png'),
            'title' => 'Employee Management',
            'description' => 'Administering employee contracts, maintaining personnel databases, and managing performance'
        ],
        [
            'icon' => asset('images/services/hr-outsourcing-3.png'),
            'title' => 'Payroll and Administration',
            'description' => 'Delivering accurate, secure, and compliant payroll solutions, including tax calculations, social security contributions, and employee benefits'
        ],
        [
            'icon' => asset('images/services/hr-outsourcing-4.png'),
            'title' => 'Training and Development',
            'description' => 'Enhancing employee skills and competencies through customized training programs'
        ],
        [
            'icon' => asset('images/services/hr-outsourcing-5.png'),
            'title' => 'Regulatory Compliance',
            'description' => 'Ensuring your company adheres to labor laws and regulations, reducing potential legal risks'
        ],
    ];
@endphp

<section class="px-5 pt-10 lg:px-[120px]">
    <div class="border-t border-slate-200 flex flex-col gap-4 justify-between pt-10 md:flex-row lg:gap-4">
        <p class="text-slate-800 font-medium text-base md:text-xl flex-1">
            The Solutions
        </p>
        <p class="text-slate-500 font-normal text-sm md:text-base flex-1">
            Our range of HR solutions is tailored to help your organization focus on its core business, while we handle all aspects of HR management, including :
        </p>
    </div>

    <div class="flex gap-6 mt-10 flex-col lg:flex-row">
        @foreach($solutions as $solution)
        <div class="p-4 rounded-3xl bg-imperial-blue-50 flex flex-col gap-4 flex-1">
            <div class="bg-white size-16 rounded-2xl flex flex-col items-center justify-center">
                <img src="{{ $solution['icon'] }}" alt="hr-outsourcing" class="size-10" />
            </div>

            <div class="space-y-1">
                <p class="text-slate-800 font-medium text-lg">
                    {{ $solution['title'] }}
                </p>
                <p class="text-slate-500 font-medium text-sm">
                    {{ $solution['description'] }}
                </p>
            </div>
        </div>
        @endforeach
    </div>
</section>

<section class="px-5 pt-10 lg:px-[120px]">
    <div class="border-t border-slate-200 flex flex-col gap-4 justify-between pt-10 md:flex-row lg:gap-4">
        <p class="text-slate-800 font-medium text-base md:text-xl flex-1">
            Galeri
        </p>
    </div>

    <div class="flex flex-col md:flex-row gap-4 mt-10">
        <div class="md:aspect-auto md:flex-1">
            <img src="{{ asset('images/gallery/hr-outsourcing-1.png') }}" alt="hr-outsourcing" class="w-full h-[500px] md:h-full object-cover rounded-2xl " />
        </div>
        <div class="flex flex-row md:flex-col md:flex-[2] gap-4">
            <div class="flex-1">
                <img src="{{ asset('images/gallery/hr-outsourcing-2.png') }}" alt="hr-outsourcing" class="w-full h-[260px] md:h-full object-cover rounded-2xl" />
            </div>
            <div class="flex-1">
                <img src="{{ asset('images/gallery/hr-outsourcing-3.png') }}" alt="hr-outsourcing" class="w-full h-[260px] md:h-full object-cover rounded-2xl" />
            </div>
        </div>
        <div class="md:aspect-auto md:flex-1">
            <img src="{{ asset('images/gallery/hr-outsourcing-4.png') }}" alt="hr-outsourcing" class="w-full h-[500px] md:h-full object-cover rounded-2xl " />
        </div>
    </div>
</section>

<section class="px-5 py-10 lg:px-[120px]">
    <div class="border-t border-slate-200 flex flex-col gap-4 justify-between pt-10 md:flex-row lg:gap-4">
        <p class="text-slate-800 font-medium text-base md:text-xl flex-1">
            Seamless Operations Backed by Advanced IT Systems
        </p>
        <p class="text-slate-500 font-normal text-sm md:text-base flex-1">
            To ensure seamless and efficient operations, we are supported by an advanced IT system. This technology enables us to streamline processes, maintain accuracy, and deliver high-quality services
        </p>
    </div>

    <div class="grid gap-8 mt-10 grid-cols-2 p-6 bg-imperial-blue-50 rounded-2xl lg:grid-cols-4">
        <div class="">
            <img src="{{ asset('images/services/hr-outsourcing-media-1.png') }}" alt="hr-outsourcing" class="w-full object-cover" />
        </div>
        <div class="">
            <img src="{{ asset('images/services/hr-outsourcing-media-2.png') }}" alt="hr-outsourcing" class="w-full object-cover" />
        </div>
        <div class="">
            <img src="{{ asset('images/services/hr-outsourcing-media-3.png') }}" alt="hr-outsourcing" class="w-full object-cover" />
        </div>
        <div class="">
            <img src="{{ asset('images/services/hr-outsourcing-media-4.png') }}" alt="hr-outsourcing" class="w-full object-cover" />
        </div>
    </div>
</section>