@php
    $services = [
        [
            'title' => 'Advertisement Shoots',
            'slug' => 'advertisement-shoots',
            'icon' => '01.png',
            'label' => 'Creative Service',
        ],
        [
            'title' => 'Event Management',
            'slug' => 'event-management',
            'icon' => '02.png',
            'label' => 'Event Management',
        ],
        [
            'title' => 'Music Video Production',
            'slug' => 'Music Video Production',
            'icon' => '03.png',
            'label' => 'Music Video Production',
        ],
        [
            'title' => 'Line Production',
            'slug' => 'line-production',
            'icon' => '04.png',
            'label' => 'Line Production',
        ],
        [
            'title' => 'Brand Promotions',
            'slug' => 'event-promotions',
            'icon' => '05.png',
            'label' => 'Brand-Promotions',
        ],
        [
            'title' => 'BTL Activation',
            'slug' => 'btl-activation',
            'icon' => '06.png',
            'label' => 'Activation',
        ],
    ];
@endphp


<section class="relative bg-black text-white overflow-hidden pt-16 pb-24">
    <div class="max-w-7xl mx-auto px-6 lg:px-8">

        <!-- SECTION TITLE -->
        <h2 class="text-[22px] sm:text-3xl lg:text-4xl font-semibold mb-10">
            Services
        </h2>

        <!-- GRID -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10">

            @foreach ($services as $service)
             <a href="{{ url('/services') }}"
                    class="relative group block rounded-2xl overflow-hidden
               bg-black px-6 py-14 sm:px-10 sm:py-16
               transition-all duration-700 ease-out focus:outline-none">

                    <!-- OUTER BORDER -->
                    <div
                        class="absolute inset-0 rounded-2xl
                    border border-[#f5f1e8]/20
                    pointer-events-none
                    transition-all duration-700
                    group-hover:border-[#d4af37]/50">
                    </div>

                    <!-- INNER BORDER -->
                    <div
                        class="absolute inset-[1px] rounded-2xl
                    border border-white/5
                    pointer-events-none">
                    </div>

                    <!-- GLOW -->
                    <div
                        class="absolute inset-0 opacity-0 group-hover:opacity-100
                    transition-opacity duration-700
                    bg-[radial-gradient(circle_at_top,rgba(212,175,55,0.20),transparent_65%)]">
                    </div>

                    <!-- GRAIN -->
                    <div class="absolute inset-0 bg-white opacity-[0.02]"></div>

                    <!-- CONTENT -->
                    <div
                        class="relative z-10 text-center
                    transition-transform duration-700
                    group-hover:-translate-y-1">

                        <!-- ICON -->
                        <div
                            class="mx-auto w-16 h-16 sm:w-[72px] sm:h-[72px]
                        flex items-center justify-center
                        rounded-xl
                        shadow-[0_16px_55px_rgba(0,0,0,0.4)]
                        transition-all duration-700
                        group-hover:-translate-y-2
                        group-hover:shadow-[0_24px_80px_rgba(212,175,55,0.25)]">

                            <img src="{{ asset('assets/icon/' . $service['icon']) }}" class="w-9 sm:w-11"
                                alt="{{ $service['title'] }}">
                        </div>

                        <!-- LABEL -->
                        <p
                            class="mt-8 text-[11px]
                        tracking-[0.35em]
                        uppercase text-white/50">
                            {{ $service['label'] }}
                        </p>

                        <!-- TITLE -->
                        <h3
                            class="mt-3 text-lg sm:text-xl
                        font-semibold tracking-wide
                        text-[#f5f1e8]
                        transition-colors duration-700
                        group-hover:text-[#d4af37]">
                            {{ $service['title'] }}
                        </h3>

                        <!-- DIVIDER -->
                        <span
                            class="mt-5 mx-auto block h-[1px] w-10
                        bg-[#d4af37]/80
                        scale-x-0 origin-center
                        transition-transform duration-700
                        group-hover:scale-x-100"></span>

                        <!-- CTA -->
                        <span
                            class="mt-7 inline-flex items-center gap-2
                        text-[11px] tracking-[0.32em]
                        uppercase text-[#d4af37]
                        transition-all duration-700
                        opacity-100 sm:opacity-0
                        sm:group-hover:opacity-100">

                            Explore Service
                            <span class="transition-transform duration-700 group-hover:translate-x-1">→</span>
                        </span>

                    </div>
                </a>
            @endforeach

        </div>
    </div>
</section>