@php
    $cleaning_services = [
        'General Cleaning',
        'Deep Cleaning',
        'Gardening and Landscaping',
        'Marble/Granite Crystallization',
        'Gondola Cleaning',
    ];

    $security_services = [
        'Manpower Supply',
        'Event Services',
        'Security Consulting',
    ];
@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">
            Cleaning Services
        </p>
        <p class="text-slate-500 font-normal text-sm md:text-base flex-1">
            We provide cleaning services to keep your environment clean and healthy. Our team offers tailored solutions, whether it's one-time or regular cleaning, ensuring complete satisfaction.
        </p>
    </div>

    <div class="border border-slate-200 flex flex-col-reverse mt-4 rounded-2xl md:mt-10 lg:flex-row overflow-hidden">
        <div class="flex-1 flex flex-col justify-center py-4 px-8">
            @foreach($cleaning_services as $index => $service)
            <div class="flex items-center gap-4 pb-3 [&:not(:last-child)]:border-b border-slate-200 {{ $index > 0 ? 'pt-4' : '' }}">
                <div class="">
                    <span class="rounded-full bg-imperial-blue-900 size-10 text-white flex items-center justify-center">
                        0{{ $index + 1 }}
                    </span>
                </div>
                <p class="text-sm md:text-base font-normal text-slate-500">{{ $service }}</p>
            </div>
            @endforeach
        </div>
        <div class="flex-1">
            <img src="{{ asset('images/services/cleaning-service-1.png') }}" alt="Why Choose Us" class="w-full" />
        </div>
    </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-[2]">
            <img src="{{ asset('images/gallery/cleaning-service-1.png') }}" alt="cleaning-service" class="w-full h-[500px] md:h-full object-cover rounded-2xl " />
        </div>
        <div class="flex flex-row md:flex-col md:flex-[1] gap-4">
            <div class="flex-1">
                <img src="{{ asset('images/gallery/cleaning-service-2.png') }}" alt="cleaning-service" class="w-full h-[260px] md:h-full object-cover rounded-2xl" />
            </div>
            <div class="flex-1">
                <img src="{{ asset('images/gallery/cleaning-service-3.png') }}" alt="cleaning-service" 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/cleaning-service-4.png') }}" alt="cleaning-service" class="w-full h-[500px] md:h-full object-cover rounded-2xl " />
        </div>
    </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">
            Security Services
        </p>
        <p class="text-slate-500 font-normal text-sm md:text-base flex-1">
            We provide security solutions tailored to meet our clients' unique needs. With extensive industry experience and a team of highly trained professionals, we deliver reliable security services to ensure the safety of your people, property, and assets.
        </p>
    </div>

    <div class="border border-slate-200 flex flex-col rounded-2xl mt-4 md:mt-10 lg:flex-row overflow-hidden">
        <div class="flex-1">
            <img src="{{ asset('images/services/security-service-1.png') }}" alt="Why Choose Us" class="w-full" />
        </div>
        <div class="flex-1 flex flex-col justify-center py-4 px-8">
            @foreach($security_services as $index => $service)
            <div class="flex items-center gap-4 pb-3 [&:not(:last-child)]:border-b border-slate-200 {{ $index > 0 ? 'pt-4' : '' }}">
                <div class="">
                    <span class="rounded-full bg-imperial-blue-900 size-10 text-white flex items-center justify-center">
                        0{{ $index + 1 }}
                    </span>
                </div>
                <p class="text-sm md:text-base font-normal text-slate-500">{{ $service }}</p>
            </div>
            @endforeach
        </div>
    </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/security-service-1.png') }}" alt="security-service" 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/security-service-2.png') }}" alt="security-service" class="w-full h-[260px] md:h-full object-cover rounded-2xl" />
            </div>
            <div class="flex-1">
                <img src="{{ asset('images/gallery/security-service-3.png') }}" alt="security-service" 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/security-service-4.png') }}" alt="security-service" 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">
            Powered by Advanced IT for Seamless Operations
        </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/facility-support-media-1.png') }}" alt="facility-support" class="w-full object-cover" />
        </div>
        <div class="">
            <img src="{{ asset('images/services/facility-support-media-2.png') }}" alt="facility-support" class="w-full object-cover" />
        </div>
        <div class="">
            <img src="{{ asset('images/services/facility-support-media-3.png') }}" alt="facility-support" class="w-full object-cover" />
        </div>
        <div class="">
            <img src="{{ asset('images/services/facility-support-media-4.png') }}" alt="facility-support" class="w-full object-cover" />
        </div>
    </div>
</section>