@php
$destinationSlides = collect($destinations ?? [])
    ->map(function ($d) {
        return [
            'title' => $d->name,
            'subtitle' => $d->type ? ucwords(str_replace('-', ' ', $d->type)) : 'Destination',
            'img' => $d->cover_image
                ? asset('storage/' . ltrim($d->cover_image, '/'))
                : asset('assets/img/hero/destinations.jpg'),
            'href' => route('destinations.show', $d->slug),
        ];
    })
    ->chunk(7)
    ->values();
@endphp

@if($destinationSlides->count())
    <section class="relative py-14 md:py-20 bg-white overflow-hidden">
        <div class="container-site">

            <div class="flex items-end justify-between gap-6">
                <div>
                    <h2 class="text-3xl md:text-5xl font-semibold" style="font-family: var(--font-display);">
                        Destinations
                    </h2>
                    <p class="mt-2 text-slate-600 max-w-2xl">
                        Explore iconic places across Sri Lanka - hills, beaches, wildlife and heritage.
                    </p>
                </div>

                @if($destinationSlides->count() > 1)
                    <div class="hidden md:flex items-center gap-2">
                        <button type="button" id="destPrev"
                            class="h-11 w-11 grid place-items-center border border-slate-300 hover:bg-slate-50">
                            ‹
                        </button>
                        <button type="button" id="destNext"
                            class="h-11 w-11 grid place-items-center border border-slate-300 hover:bg-slate-50">
                            ›
                        </button>
                    </div>
                @endif
            </div>

            {{-- Desktop mosaic slider --}}
            <div class="mt-10 relative hidden md:block">
                <div id="destMosaicTrack" class="relative h-[520px]">

                    @foreach($destinationSlides as $si => $slide)
                        @php
        $it = $slide->values();

        // skip incomplete slide for desktop if fewer than 7 items
        if ($it->count() < 7) {
            continue;
        }
                        @endphp

                        <div class="destMosaicSlide absolute inset-0 transition-opacity duration-500 {{ $si === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none' }}"
                            data-index="{{ $si }}">

                            <div class="grid grid-cols-12 gap-3 h-full">
                                {{-- LEFT column --}}
                                <div class="col-span-3 grid grid-rows-2 gap-3">
                                    @foreach([0, 1] as $idx)
                                        @php $d = $it[$idx]; @endphp
                                        <a href="{{ $d['href'] }}" class="group relative overflow-hidden border border-white/30">
                                            <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
                                                style="background-image:url('{{ $d['img'] }}')"></div>
                                            <div class="absolute inset-0 bg-black/35"></div>
                                            <div class="absolute inset-0 grid place-items-center text-center px-4">
                                                <div class="text-white">
                                                    <div class="text-2xl font-semibold" style="font-family: var(--font-display);">
                                                        {{ $d['title'] }}
                                                    </div>
                                                    <div class="mt-1 text-white/85 italic">
                                                        {{ $d['subtitle'] }}
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>

                                {{-- CENTER big --}}
                                @php $d = $it[2]; @endphp
                                <a href="{{ $d['href'] }}"
                                    class="group col-span-5 relative overflow-hidden border border-white/30">
                                    <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
                                        style="background-image:url('{{ $d['img'] }}')"></div>
                                    <div class="absolute inset-0 bg-black/45"></div>
                                    <div class="absolute inset-0 grid place-items-center text-center px-6">
                                        <div class="text-white">
                                            <div class="text-4xl font-semibold" style="font-family: var(--font-display);">
                                                {{ $d['title'] }}
                                            </div>
                                            <div class="mt-2 text-white/85 italic text-lg">
                                                {{ $d['subtitle'] }}
                                            </div>
                                        </div>
                                    </div>
                                </a>

                                {{-- RIGHT column --}}
                                <div class="col-span-4 grid grid-rows-2 gap-3">
                                    <div class="grid grid-cols-2 gap-3">
                                        @foreach([3, 4] as $idx)
                                            @php $d = $it[$idx]; @endphp
                                            <a href="{{ $d['href'] }}"
                                                class="group relative overflow-hidden border border-white/30">
                                                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
                                                    style="background-image:url('{{ $d['img'] }}')"></div>
                                                <div class="absolute inset-0 bg-black/35"></div>
                                                <div class="absolute inset-0 grid place-items-center text-center px-4">
                                                    <div class="text-white">
                                                        <div class="text-xl font-semibold"
                                                            style="font-family: var(--font-display);">
                                                            {{ $d['title'] }}
                                                        </div>
                                                        <div class="mt-1 text-white/85 italic">
                                                            {{ $d['subtitle'] }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>

                                    <div class="grid grid-cols-2 gap-3">
                                        @foreach([5, 6] as $idx)
                                            @php $d = $it[$idx]; @endphp
                                            <a href="{{ $d['href'] }}"
                                                class="group relative overflow-hidden border border-white/30">
                                                <div class="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-105"
                                                    style="background-image:url('{{ $d['img'] }}')"></div>
                                                <div class="absolute inset-0 bg-black/35"></div>
                                                <div class="absolute inset-0 grid place-items-center text-center px-4">
                                                    <div class="text-white">
                                                        <div class="text-xl font-semibold"
                                                            style="font-family: var(--font-display);">
                                                            {{ $d['title'] }}
                                                        </div>
                                                        <div class="mt-1 text-white/85 italic">
                                                            {{ $d['subtitle'] }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>

                {{-- Dots --}}
                @if($destinationSlides->count() > 1)
                    <div class="mt-8 flex justify-center gap-2">
                        @foreach($destinationSlides as $i => $s)
                            <button type="button"
                                class="destDot h-2.5 w-2.5 rounded-full {{ $i === 0 ? 'bg-gold-500' : 'bg-slate-300' }}"
                                data-go="{{ $i }}" aria-label="Go to slide {{ $i + 1 }}"></button>
                        @endforeach
                    </div>
                @endif
            </div>

            {{-- Mobile: cards --}}
            <div class="md:hidden mt-8 -mx-4 px-4 flex gap-4 overflow-x-auto snap-x snap-mandatory">
                @foreach(collect($destinations)->take(10) as $d)
                    @php
        $img = $d->cover_image
            ? asset('storage/' . ltrim($d->cover_image, '/'))
            : asset('assets/img/hero/destinations.jpg');
                    @endphp
                    <a href="{{ route('destinations.show', $d->slug) }}"
                        class="snap-center shrink-0 w-[78vw] max-w-[340px] h-[220px] relative overflow-hidden rounded-2xl shadow-soft">
                        <div class="absolute inset-0 bg-cover bg-center" style="background-image:url('{{ $img }}')"></div>
                        <div class="absolute inset-0 bg-black/40"></div>
                        <div class="absolute inset-0 flex items-end p-5">
                            <div class="text-white">
                                <div class="text-2xl font-semibold" style="font-family: var(--font-display);">
                                    {{ $d->name }}
                                </div>
                                <div class="text-white/85 italic">
                                    {{ $d->type ? ucwords(str_replace('-', ' ', $d->type)) : 'Destination' }}
                                </div>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <div class="mt-10 text-center">
                <a href="{{ route('destinations.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 Destinations
                </a>
            </div>

        </div>
    </section>
@endif

<script>
    (() => {
        const track = document.getElementById('destMosaicTrack');
        if (!track) return;

        const slides = Array.from(track.querySelectorAll('.destMosaicSlide'));
        const dots = Array.from(document.querySelectorAll('.destDot'));
        const prev = document.getElementById('destPrev');
        const next = document.getElementById('destNext');

        if (slides.length <= 1) return;

        let current = 0;
        let timer = null;

        const setActive = (idx) => {
            current = idx;
            slides.forEach((s, i) => {
                const on = i === idx;
                s.classList.toggle('opacity-100', on);
                s.classList.toggle('opacity-0', !on);
                s.classList.toggle('pointer-events-none', !on);
            });
            dots.forEach((d, i) => {
                d.classList.toggle('bg-gold-500', i === idx);
                d.classList.toggle('bg-slate-300', i !== idx);
            });
        };

        const nextSlide = () => setActive((current + 1) % slides.length);
        const prevSlide = () => setActive((current - 1 + slides.length) % slides.length);

        const start = () => {
            stop();
            timer = setInterval(nextSlide, 7000);
        };

        const stop = () => {
            if (timer) clearInterval(timer);
            timer = null;
        };

        next?.addEventListener('click', () => { nextSlide(); start(); });
        prev?.addEventListener('click', () => { prevSlide(); start(); });
        dots.forEach(d => d.addEventListener('click', () => {
            setActive(Number(d.dataset.go || 0));
            start();
        }));

        track.addEventListener('mouseenter', stop);
        track.addEventListener('mouseleave', start);

        setActive(0);
        start();
    })();
</script>