@php
    $solutions = [
        [
            'icon' => asset('images/services/payroll-agent-1.png'),
            'title' => 'Payroll Processing',
            'description' => 'Calculating salaries, overtime, deductions, and benefits with precision'
        ],
        [
            'icon' => asset('images/services/payroll-agent-2.png'),
            'title' => 'Tax Compliance',
            'description' => 'Ensuring proper withholding, filing, and reporting of employee taxes to meet legal requirements.'
        ],
        [
            'icon' => asset('images/services/payroll-agent-3.png'),
            'title' => 'Benefit Administration',
            'description' => 'Managing employee benefits such as insurance, pensions, and allowances.'
        ],
        [
            'icon' => asset('images/services/payroll-agent-4.png'),
            'title' => 'Salary Disbursement',
            'description' => 'Conducting comprehensive evaluations to ensure candidates meet the technical and behavioral competencies required.'
        ],
        [
            'icon' => asset('images/services/payroll-agent-5.png'),
            'title' => 'Payroll Reporting',
            'description' => 'Providing detailed reports for easy tracking and auditing.'
        ],
    ];
@endphp

<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">
            Our Payroll Agent Services Include
        </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="payroll-agent" 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>

    <div class="flex gap-8 mt-10 p-6 bg-imperial-blue-50 justify-center flex-col lg:flex-row items-center rounded-2xl">
        <div class="flex-1">
            <img src="{{ asset('images/services/payroll-agent-media-1.png') }}" alt="payroll-agent" class="w-full lg:w-1/2 object-cover mr-0 ml-auto" />
        </div>
        <div class="flex-1">
            <img src="{{ asset('images/services/payroll-agent-media-2.png') }}" alt="payroll-agent" class="w-full lg:w-3/4 object-cover mr-auto ml-0" />
        </div>
    </div>
</section>