{{-- FEATURED TRIPS CAROUSEL (like screenshot) --}}
<section class="relative py-16 md:py-24 overflow-hidden bg-white">
    {{-- world-map background --}}
    <div class="absolute inset-0 opacity-[0.12] pointer-events-none"
        style="background-image:url('{{ asset('assets/img/world-map-light.png') }}'); background-size:cover; background-position:center;">
    </div>

    <div class="container-site relative">
        <div class="relative">

            {{-- left location label --}}
            <div class="hidden md:flex items-center gap-3 absolute left-0 top-1/2 -translate-y-1/2">
                <div class="h-10 w-10 rounded-full bg-gold-500/15 grid place-items-center text-gold-600">
                    {{-- pin icon --}}
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                        <path
                            d="M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5z" />
                    </svg>
                </div>
                <div class="text-gold-500 text-4xl leading-none" style="font-family: 'Playfair Display', serif;">
                    Peru
                </div>
            </div>

            {{-- cards row --}}
            <div class="flex justify-center gap-8 md:gap-10">
                @php
                    // Replace with DB later
                    $cards = [
                        [
                            'tag' => 'fun',
                            'title' => 'Ultimate Thailand',
                            'price' => '$1350',
                            'img' => asset('assets/img/featured/featured-1.jpg'),
                        ],
                        [
                            'tag' => 'new',
                            'title' => 'Discover India',
                            'price' => '$2650',
                            'img' => asset('assets/img/featured/featured-2.jpg'),
                        ],
                        [
                            'tag' => null,
                            'title' => 'Forest Adventure',
                            'price' => '$1350',
                            'img' => asset('assets/img/featured/featured-3.jpg'),
                        ],
                    ];
                @endphp

                {{-- Desktop: 3 cards centered --}}
                <div class="hidden md:grid grid-cols-3 gap-8 md:gap-10">
                    @foreach ($cards as $c)
                        <a href="#"
                            class="group relative block w-[320px] lg:w-[360px] h-[420px] overflow-hidden rounded-[2px] shadow-soft">
                            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
                                style="background-image:url('{{ $c['img'] }}')"></div>

                            {{-- dark gradient overlay bottom --}}
                            <div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/10 to-transparent"></div>

                            {{-- tag --}}
                            @if (!empty($c['tag']))
                                <div class="absolute left-6 bottom-24 text-gold-400 text-3xl leading-none"
                                    style="font-family: 'Playfair Display', serif;">
                                    {{ $c['tag'] }}
                                </div>
                            @endif

                            {{-- title + price --}}
                            <div class="absolute left-6 right-6 bottom-8 text-white">
                                <div class="text-2xl font-semibold leading-tight" style="font-family: var(--font-display);">
                                    {{ $c['title'] }}
                                </div>
                                <div class="mt-2 text-lg font-semibold text-white/90">{{ $c['price'] }}</div>
                            </div>
                        </a>
                    @endforeach
                </div>

                {{-- Mobile: horizontal snap scroll --}}
                <div class="md:hidden -mx-4 px-4 flex gap-4 overflow-x-auto snap-x snap-mandatory">
                    @foreach ($cards as $c)
                        <a href="#"
                            class="snap-center shrink-0 relative block w-[80vw] max-w-[340px] h-[420px] overflow-hidden rounded-[2px] shadow-soft">
                            <div class="absolute inset-0 bg-cover bg-center"
                                style="background-image:url('{{ $c['img'] }}')"></div>
                            <div class="absolute inset-0 bg-gradient-to-t from-black/65 via-black/10 to-transparent"></div>

                            @if (!empty($c['tag']))
                                <div class="absolute left-6 bottom-24 text-gold-400 text-3xl leading-none"
                                    style="font-family: 'Playfair Display', serif;">
                                    {{ $c['tag'] }}
                                </div>
                            @endif

                            <div class="absolute left-6 right-6 bottom-8 text-white">
                                <div class="text-2xl font-semibold leading-tight" style="font-family: var(--font-display);">
                                    {{ $c['title'] }}
                                </div>
                                <div class="mt-2 text-lg font-semibold text-white/90">{{ $c['price'] }}</div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>

            {{-- dots --}}
            <div class="mt-10 flex justify-center gap-2">
                <span class="h-2 w-2 rounded-full bg-gold-500"></span>
                <span class="h-2 w-2 rounded-full bg-slate-300"></span>
                <span class="h-2 w-2 rounded-full bg-slate-300"></span>
            </div>
        </div>
    </div>
</section>