@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
<div class="bg-gradient-to-r from-purple-200 to-purple-900 relative">
    <h3 style="color: #fff;" class="max-w-[1184px] mx-auto p-6 my-4o text-xl md:text-2xl font-bold mb-4 text-start">
        Blog
    </h3>
</div>

<section class="max-w-[1184px] mx-auto p-6 my-4">
    <div class="flex items-center ms-2 mb-3 hover:cursor-pointer">
        <img src="{{ asset('storage/icons/arrow_back.svg') }}" alt="Volver">
        <a href="/blog">
            <p class="text-grey-600">Volver</p>
        </a>
    </div>

    <a href="/blog"><span class="text-grey-400">Blog /</span></a>
    <span class="text-purple-200"> Prensa</span>
</section>

<div class="relative p-4">
    <div x-data="{ 
        isDragging: false, 
        startX: 0, 
        scrollLeft: 0,
        handleMouseDown(e) {
            if (e.target.tagName === 'IMG') {
                e.preventDefault();
                return;
            }
            this.isDragging = true;
            this.startX = e.pageX - this.$el.offsetLeft;
            this.scrollLeft = this.$el.scrollLeft;
        }
    }" 
        x-on:mousedown="handleMouseDown"
        x-on:mouseleave="isDragging = false"
        x-on:mouseup="isDragging = false"
        x-on:mousemove="if (isDragging) { 
            $event.preventDefault();
            const x = $event.pageX - $el.offsetLeft;
            const walk = (x - startX);
            $el.scrollLeft = scrollLeft - walk;
        }"
        class="overflow-x-auto no-scrollbar touch-pan-x snap-x snap-mandatory flex space-x-2 justify-start md:justify-center md:pb-[15px] pb-[10px] scroll-smooth"
        style="scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none;">
        
        <button class="flex items-center space-x-2 bg-white rounded-[24px] px-[12px] py-[4px] h-[30px] whitespace-nowrap snap-start select-none border border-purple-500">
            <p style="color: #32076C;" class="text-sm select-none">Prensa</p>
        </button>
        
        <button class="flex items-center space-x-2 bg-white rounded-[24px] px-[12px] py-[4px] h-[30px] whitespace-nowrap snap-start select-none">
            <p class="text-sm select-none">Tips</p>
        </button>
        
        <button class="flex items-center space-x-2 bg-white rounded-[24px] px-[12px] py-[4px] h-[30px] whitespace-nowrap snap-start select-none">
            <p class="text-sm select-none">Consultas</p>
        </button>
        
        <button class="flex items-center space-x-2 bg-white rounded-[24px] px-[12px] py-[4px] h-[30px] whitespace-nowrap snap-start select-none">
            <p class="text-sm select-none">Entretenimiento</p>
        </button>
        
        <button class="flex items-center space-x-2 bg-white rounded-[24px] px-[12px] py-[4px] h-[30px] whitespace-nowrap snap-start select-none">
            <p class="text-sm select-none">Permisos</p>
        </button>
    </div>
</div>

<div class="max-w-[1184px] mx-auto p-6 my-4">
    <div class="w-full">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-4 mt-5 md:mt-0">
            <!-- Left column -->
            <div class="col-span-full lg:col-span-9 rounded-[20px] lg:rounded-[32px]">
                <div>
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        <div style="max-height: 400px;" class="overflow-hidden lg:block lg:w-full lg:col-span-2 relative rounded-[20px] lg:rounded-[32px]">
                            <!-- gradiente-->
                            <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6)); border-radius: inherit; z-index: 1;">
                            </div>
                            <img src="{{ asset('storage/blog/banda-grande.png') }}" alt="Event Image" class="w-full object-cover rounded-[20px] lg:rounded-[32px] z-0">
                            <!-- Contenido de la imagen -->
                            <div class="absolute bottom-4 text-white ml-4 z-10">
                                <div class="flex flex-col items-start">
                                    <a href="#" style="background: #fff;" class="text-black text-sm md:text-base py-2 px-4 rounded-full mb-2">Concierto</a>
                                    <h3 class="text-base font-semibold mb-1">Rock al Amanecer: La Gira Inolvidable de La Banda Sin Fronteras</h3>
                                    <p class="text-sm md:text-base">20 de noviembre | 7:30 p.m.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>       
            <!-- Right column -->
            <div class="col-span-full lg:col-span-3">
                <div>
                    <div class="grid grid-cols-1 lg:grid-cols-2">
                        <div style="max-height: 400px;" class="hidden lg:block lg:w-full lg:col-span-2 my-0 mx-auto">
                            <a href="/crear-evento">
                                <img src="{{ asset('storage/create-event-vertical.png') }}" alt="Event Image" class="h-full object-cover rounded-lg">
                            </a>
                        </div>
                        <div class="block lg:hidden">
                            <a href="/crear-evento">
                                <img src="{{ asset('storage/create-event-lg.png') }}" alt="Event Image" class="w-full object-cover rounded-lg">
                            </a> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="max-w-[1184px] mx-auto p-6 my-4">
    <div>
        <h3 style="color: #262626;" class="text-xl md:text-2xl font-bold mb-6">
            Prensa
        </h3>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">DGTL LIMA - evento tour FANS 2024 evento de luces</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">DGTL LIMA - evento tour FANS 2024 evento de luces</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">DGTL LIMA - evento tour FANS 2024 evento de luces</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href=""><img class="w-full" src="{{ asset('storage/blog/photo.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">DGTL LIMA - evento tour FANS 2024 evento de luces</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="/detalle-blog"><img class="w-full" src="{{ asset('storage/blog/photo-1.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">Las Obras de Teatro Más Aclamadas del Año y por Qué No Puedes Perdértelas</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo-6.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">Guía Completa para Asistir a un Festival de Varios Días: Qué Llevar y Qué Esperar</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo-4.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">Los Festivales Más Populares de Perú: Música, Cultura y Experiencias Inolvidables</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">DGTL LIMA - evento tour FANS 2024 evento de luces</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">DGTL LIMA - evento tour FANS 2024 evento de luces</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo-5.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">Las Obras de Teatro Más Aclamadas del Año y por Qué No Puedes Perdértelas</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo-6.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">Guía Completa para Asistir a un Festival de Varios Días: Qué Llevar y Qué Esperar</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>
        <x-card2>  
            <a href="#"><img class="w-full" src="{{ asset('storage/blog/photo-4.png') }}" alt="Event Image"></a>
            
            <div class="md:px-1 md:pt-4">
                <div class="flex items-center sm:items-center gap-y-2 gap-x-2 pt-2">
                    <div class="inline-flex gap-x-2 px-2 py-1 bg-yellow-100 rounded-md">
                        <img src="{{ asset('storage/blog/calendar_today.svg') }}" />
                        <span class="text-yellow-600 text-xs md:text-clip-sm">31 de Octubre</span>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Prensa</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Tips</span></a>
                    </div>
                    <div class="inline-flex border-grey-100 border-2 rounded-lg">
                        <a href="#"><span class="text-grey-400 text-xs px-1 py-1 mr-1">Consulta</span></a>
                    </div>
                </div>
                    <div class="font-bold my-2 text-sm text-grey-500 truncate">Los Festivales Más Populares de Perú: Música, Cultura y Experiencias Inolvidables</div>
                    <p class="text-grey-300 text-sm mb-2">
                        Un análisis de las obras de teatro actuales más recomendadas, con detalles sobre la trama, los actores y las críticas.
                    </p>
            </div>
        </x-card2>         
    </div> 
</div>
@endsection