@section('title', 'Blog')

<div>
    {{-- Banner --}}
    <div class="relative h-64 w-full bg-cover bg-center"
        style="background-image: url('{{ Vite::asset('resources/images/contact/texture.webp') }}');">
        <div class="absolute inset-0 bg-black opacity-50"></div>
        <div class="absolute inset-0 flex items-center justify-center">
            <h1 class="text-4xl md:text-5xl font-bold text-white uppercase tracking-wider">Blog</h1>
        </div>
    </div>

    <div class="container mx-auto px-4 py-12">
        <div class="lg:grid grid-cols-12">
            <div class="col-span-10 col-start-2">
                @if (count($loadedPosts) > 0)
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        @foreach ($loadedPosts as $post)
                            <x-blog::post-card :post="$post" :index="$loop->index" />
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-20">
                        <h2 class="text-2xl font-bold text-gray-500">No se encontraron artículos en el blog.</h2>
                        <p class="mt-2 text-gray-400">Vuelve más tarde para ver nuestras novedades.</p>
                    </div>
                @endif


                {{-- Infinite Scroll Trigger --}}
                @if ($loadMorePages)
                    <div x-data="{ shown: false }" x-intersect="$wire.loadMore(); shown = true"
                        x-intersect:leave="shown = false" class="flex justify-center py-10">
                        <div x-show="shown" x-transition>
                            <x-vaadin-spinner-third class="h-10 w-10 animate-spin text-red-600" />
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>