@php
    $cards = collect($packages ?? [])->map(function ($p) {
        $img = $p->cover_image
            ? asset('storage/' . ltrim($p->cover_image, '/'))
            : asset('assets/img/hero/tours-hero.jpg');

        $price = $p->price_from
            ? $p->currency . ' ' . number_format((float) $p->price_from, 0)
            : 'Contact';

        $small = $p->type?->name ?? 'Tour Package';

        $title = $p->destinations && $p->destinations->count()
            ? $p->destinations->pluck('name')->take(2)->implode(', ')
            : $p->name;

        return [
            'price' => $price,
            'small' => $small,
            'title' => $title,
            'img' => $img,
            'href' => route('tours.show', $p->slug),
            'name' => $p->name,
        ];
    })->values();

    $desktopCards = $cards->take(10);
    $mobileCards = $cards->take(5);

    $row1 = $desktopCards->slice(0, 5);
    $row2 = $desktopCards->slice(5, 5);
@endphp

@if($cards->count())
    <section class="relative py-16 md:py-24 bg-white">
        <div class="container-site">

            {{-- Heading --}}
            <div class="text-center max-w-3xl mx-auto">
                <div class="text-gold-600 italic text-lg md:text-xl" style="font-family: var(--font-display);">
                    Modern & Beautiful
                </div>
                <h2 class="mt-2 text-4xl md:text-6xl font-semibold text-slate-900"
                    style="font-family: var(--font-display);">
                    Explore the World for Yourself
                </h2>
                <p class="mt-4 text-slate-600">
                    Discover curated Sri Lanka journeys - beaches, hill country, culture, wildlife and premium escapes.
                </p>
            </div>

            {{-- MOBILE: show only 5 --}}
            <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 gap-4 md:hidden">
                @foreach($mobileCards as $c)
                    <a href="{{ $c['href'] }}" class="group relative overflow-hidden rounded-[2px] h-[380px] 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>

                        <div class="absolute inset-0 bg-black/35"></div>

                        <div class="absolute top-5 left-5 text-white text-lg font-semibold">
                            {{ $c['price'] }}
                        </div>

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

            {{-- DESKTOP: show 10 --}}
            <div class="hidden md:block">
                @if($row1->count())
                    <div class="mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
                        @foreach($row1 as $c)
                            <a href="{{ $c['href'] }}"
                                class="group relative overflow-hidden rounded-[2px] h-[420px] lg:h-[520px] 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>

                                <div class="absolute inset-0 bg-black/35"></div>

                                <div class="absolute top-5 left-5 text-white text-xl font-semibold">
                                    {{ $c['price'] }}
                                </div>

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

                @if($row2->count())
                    <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
                        @foreach($row2 as $c)
                            <a href="{{ $c['href'] }}"
                                class="group relative overflow-hidden rounded-[2px] h-[420px] lg:h-[520px] 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>

                                <div class="absolute inset-0 bg-black/35"></div>

                                <div class="absolute top-5 left-5 text-white text-xl font-semibold">
                                    {{ $c['price'] }}
                                </div>

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

            {{-- View All button --}}
            <div class="mt-10 text-center">
                <a href="{{ route('tours.index') }}"
                    class="inline-flex items-center justify-center px-8 py-3 bg-gold-500 hover:bg-gold-600 text-black font-semibold tracking-[.18em] uppercase text-[12px] rounded-2xl transition">
                    View All Tours
                </a>
            </div>

        </div>
    </section>
@endif