@php
    $posts = collect($blogPosts ?? [])->map(function ($post) {
        return [
            'title' => $post->title,
            'date' => $post->published_at
                ? \Carbon\Carbon::parse($post->published_at)->format('F j, Y')
                : null,
            'comments' => 0,
            'img' => $post->cover_image
                ? asset('storage/' . ltrim($post->cover_image, '/'))
                : asset('assets/img/blog/blog-1.jpg'),
            'href' => route('blog.show', $post->slug),
        ];
    })->values();

    $desktopChunks = $posts->chunk(4)->values();
@endphp

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

            {{-- Heading --}}
            <div class="text-center max-w-2xl mx-auto">
                <h2 class="text-4xl md:text-5xl font-semibold" style="font-family: var(--font-display);">
                    Blog Posts
                </h2>
                <p class="mt-3 text-slate-600 text-sm md:text-base leading-relaxed">
                    One inspiring story is worth traveling. Discover local food, tradition and history — stories that make
                    you want to travel.
                </p>
            </div>

            {{-- Desktop controls --}}
            @if($desktopChunks->count() > 1)
                <div class="mt-10 hidden md:flex items-center justify-end gap-2">
                    <button type="button" id="blogPrev"
                        class="grid h-11 w-11 place-items-center rounded-full border border-slate-300 text-slate-700 hover:bg-slate-50 hover:text-gold-700 transition"
                        aria-label="Previous posts">
                        <i class="fa-solid fa-chevron-left text-sm"></i>
                    </button>

                    <button type="button" id="blogNext"
                        class="grid h-11 w-11 place-items-center rounded-full border border-slate-300 text-slate-700 hover:bg-slate-50 hover:text-gold-700 transition"
                        aria-label="Next posts">
                        <i class="fa-solid fa-chevron-right text-sm"></i>
                    </button>
                </div>
            @endif

            {{-- Desktop / Tablet slider --}}
            <div class="mt-4 relative hidden md:block">
                <div id="blogSliderTrack" class="relative min-h-[420px] lg:min-h-[520px]">

                    @foreach($desktopChunks as $pi => $page)
                        <div class="blogSlide absolute inset-0 transition-opacity duration-500 {{ $pi === 0 ? 'opacity-100' : 'opacity-0 pointer-events-none' }}"
                            data-index="{{ $pi }}">
                            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-7">
                                @foreach($page as $p)
                                    <article class="group">
                                        <a href="{{ $p['href'] }}" class="block overflow-hidden rounded-[2px] shadow-soft">
                                            <div class="relative h-60 bg-slate-100">
                                                <img src="{{ $p['img'] }}" alt="{{ $p['title'] }}"
                                                    class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                                                <div class="absolute inset-0 bg-black/10"></div>
                                            </div>
                                        </a>

                                        <div class="mt-5">
                                            <a href="{{ $p['href'] }}"
                                                class="block text-lg font-semibold text-slate-900 leading-snug hover:text-gold-700"
                                                style="font-family: var(--font-display);">
                                                {{ $p['title'] }}
                                            </a>

                                            <div class="mt-3 flex items-center gap-4 text-xs text-slate-500">
                                                @if($p['date'])
                                                    <span class="inline-flex items-center gap-2">
                                                        <i class="fa-regular fa-calendar text-gold-500"></i>
                                                        {{ $p['date'] }}
                                                    </span>
                                                @endif
                                                {{--
                                                <span class="inline-flex items-center gap-2">
                                                    <i class="fa-regular fa-comment text-gold-500"></i>
                                                    {{ $p['comments'] }}
                                                </span>
                                                --}}
                                            </div>
                                        </div>
                                    </article>
                                @endforeach
                            </div>
                        </div>
                    @endforeach

                </div>

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

            {{-- Mobile horizontal swipe slider --}}
            <div class="md:hidden mt-8 -mx-4 px-4 flex gap-4 overflow-x-auto snap-x snap-mandatory">
                @foreach($posts as $p)
                    <article class="snap-center shrink-0 w-[82vw] max-w-[340px] group">
                        <a href="{{ $p['href'] }}" class="block overflow-hidden rounded-2xl shadow-soft bg-white">
                            <div class="relative h-56 bg-slate-100">
                                <img src="{{ $p['img'] }}" alt="{{ $p['title'] }}"
                                    class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105">
                                <div class="absolute inset-0 bg-black/10"></div>
                            </div>
                        </a>

                        <div class="mt-4">
                            <a href="{{ $p['href'] }}"
                                class="block text-lg font-semibold text-slate-900 leading-snug hover:text-gold-700"
                                style="font-family: var(--font-display);">
                                {{ $p['title'] }}
                            </a>

                            <div class="mt-3 flex items-center gap-4 text-xs text-slate-500">
                                @if($p['date'])
                                    <span class="inline-flex items-center gap-2">
                                        <i class="fa-regular fa-calendar text-gold-500"></i>
                                        {{ $p['date'] }}
                                    </span>
                                @endif
                                {{--
                                <span class="inline-flex items-center gap-2">
                                    <i class="fa-regular fa-comment text-gold-500"></i>
                                    {{ $p['comments'] }}
                                </span>
                                --}}
                            </div>
                        </div>
                    </article>
                @endforeach
            </div>

        </div>
    </section>
@endif

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

        const slides = Array.from(track.querySelectorAll('.blogSlide'));
        const dots = Array.from(document.querySelectorAll('.blogDot'));
        const prev = document.getElementById('blogPrev');
        const next = document.getElementById('blogNext');

        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>