@php
    $solutions = [
        [
            'icon' => asset('images/services/recruitment-service-1.png'),
            'title' => 'Talent Acquisition',
            'description' => 'Identifying, screening, and selecting the best candidates to fit your company culture and requirements.'
        ],
        [
            'icon' => asset('images/services/recruitment-service-2.png'),
            'title' => 'Executive Search',
            'description' => 'Sourcing highly skilled professionals for leadership and senior-level roles.'
        ],
        [
            'icon' => asset('images/services/recruitment-service-3.png'),
            'title' => 'Mass Recruitment',
            'description' => 'Efficiently managing large-scale hiring processes for projects or seasonal demands.'
        ],
        [
            'icon' => asset('images/services/recruitment-service-4.png'),
            'title' => 'Skill Assessment',
            'description' => 'Conducting comprehensive evaluations to ensure candidates meet the technical and behavioral competencies required.'
        ],
        [
            'icon' => asset('images/services/recruitment-service-5.png'),
            'title' => 'Onboarding Support',
            'description' => 'Assisting with the integration of new hires to ensure a smooth transition into your organization'
        ],
    ];
@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 Recruitment 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="recruitment-service" 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 rounded-2xl">
        <div class="flex-1">
            <img src="{{ asset('images/services/recruitment-service-media-1.png') }}" alt="recruitment-service" class="w-full lg:w-1/2 object-cover mr-0 ml-auto" />
        </div>
        <div class="flex-1">
            <img src="{{ asset('images/services/recruitment-service-media-2.png') }}" alt="recruitment-service" class="w-full lg:w-1/2 object-cover mr-auto ml-0" />
        </div>
    </div>
</section>