@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
<!-- Keep header and blur sections unchanged -->
<div class="relative w-full h-auto z-10 overflow-hidden">
  <!-- Unchanged blur background -->
  <div class="absolute inset-0 z-30 blur-[10px] overflow-hidden"
      style="background-image: url('/storage/detalle-evento/2195-SLIDER-FESTIVAL-ROCK-.jpg'); background-size: cover; background-position: center;">
  </div>
  <div class="absolute inset-0 z-40 bg-gray-900/50"></div>
  <div class="w-full mx-auto md:h-full relative z-50 flex items-center justify-center p-4 md:p-6">
      <div class="relative w-full">
          <picture>
              <source 
                  srcset="/storage/detalle-evento/1351-WEB-FESTIVAL-ROCK-.jpg" 
                  media="(max-width: 900px)">
              <img 
                  src="/storage/detalle-evento/2195-SLIDER-FESTIVAL-ROCK-.jpg" 
                  class="mx-auto md:min-w-7xl md:h-full max-h-[416px] object-cover rounded-[36px]" 
                  alt="Banner del Evento">
          </picture>
      </div>
  </div>
</div>

<!-- Information container with fixed overflow -->
<div class="max-w-7xl mx-auto mt-12 relative z-50 px-4">
    <div class="w-full h-auto mt-[-80px]">
        <div class="relative z-50">
            <!-- Updated layout for better mobile display -->
            <div class="flex items-end sm:items-end gap-4">
                <!-- Date div -->
                <div class="flex flex-col justify-center px-2 py-2 text-white bg-purple-200 text-center rounded-lg w-24 md:w-28 leading-5">
                    <p class="text-xl md:text-2xl font-bold">30</p>
                    <p class="text-lg md:text-2xl font-bold">ABR</p>
                    <p class="text-sm md:text-md font-semibold">4:00 PM</p>
                </div>
                
                <!-- Event details -->
                <div class="sm:ml-4">
                    <h2 class="text-lg md:text-2xl font-bold text-grey-500">Club Trujillo - vaope</h2>
                    <h4 class="text-sm md:text-lg font-medium text-grey-400">HUANCHACO - LA LIBERTAD</h4>
                </div>
                
                <!-- Buy button - desktop -->
                <div class="hidden md:block ml-auto">
                    <a href="/checkout">
                        <button class="btn btn-primary">
                            Comprar Entradas
                        </button>
                    </a>
                    <p class="text-grey-300 mt-2 text-xs">*Apto para todas las edades</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main content area -->
<div class="max-w-7xl mx-auto md:mt-5 z-50 px-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 - Content -->
            <div class="col-span-full lg:col-span-7 bg-white rounded-[20px] lg:rounded-[32px] overflow-hidden">
                <div class="p-4 md:p-6 xl:p-7">
                    <h2 class="text-lg md:text-2xl font-bold text-grey-500 leading-8">
                        Festival Rock Music con Vilma Palma e Vampiros,Rio,Bareto y más en Trujillo
                    </h2>
                    
                    <p class="mt-3 text-base md:text-lg text-grey-400">¡Disfruta del mejor concierto!</p>
                    
                    <!-- Event details -->
                    <div class="mt-8 md:mt-14">
                        <h3 class="text-lg md:text-xl font-bold text-grey-400 mb-4">Detalle del Evento</h3>
                        <div class="space-y-3 md:space-y-4">
                            <!-- Date -->
                            <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr] gap-2">
                                <p class="font-bold min-w-[80px]">Fecha:</p>
                                <p>Sábado 08 febrero de 2025</p>
                            </div>
                            <!-- Time -->
                            <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr] gap-2">
                                <p class="font-bold min-w-[80px]">Hora:</p>
                                <p>10:00 AM - 6:00 PM</p>
                            </div>
                            <!-- Address -->
                            <div class="grid grid-cols-1 sm:grid-cols-[auto,1fr] gap-2">
                                <p class="font-bold min-w-[80px]">Dirección:</p>
                                <p>Rinconcito Huanuqueño, HUANUCO - HUÁNUCO</p>
                            </div>
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="mt-8">
                        <p class="text-center text-grey-400 text-sm md:text-base">
                            ¡La fiesta está asegurada en Huánuco con los Hermanos Yaipén, Los Capos de
                            Colombia y más grandes artistas! 🎶🔥 Prepárate para una noche llena de
                            ritmo, sabor y energía, donde la cumbia peruana y colombiana se unen para
                            hacerte bailar sin parar. Disfruta de los éxitos que han marcado
                            generaciones en un espectáculo inolvidable, ideal para compartir con
                            amigos y familia en un ambiente lleno de alegría y buena música. ¡No te lo
                            pierdas!
                        </p>
                    </div>

                    <!-- Event image -->
                    <div class="mt-5">
                        <img
                            src="storage/detalle-evento/7420-croquiss-rock-music.png"
                            class="md:px-24 lg:max-w-full h-auto mx-auto"
                            alt=""
                        />
                    </div>

                    <!-- Artists section -->
                    <div class="my-4 lg:block hidden">
                        <h3 class="text-lg md:text-xl font-bold text-grey-400 mb-4">Sobre los artistas</h3>
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">

                            @php
                                $artistas = [
                                    [
                                        'nombre' => 'Tomás Suárez Vértiz',
                                        'imagen' => 'storage/detalle-evento/907-LANDING_TOMAS-SUAREZ-VERTIZ.jpg',
                                        'descripcion' => 'Banda principal'
                                    ],
                                    [
                                        'nombre' => 'Rio',
                                        'imagen' => 'storage/detalle-evento/156-LANDING_RIO.jpg',
                                        'descripcion' => 'Banda invitada'
                                    ],
                                    [
                                        'nombre' => 'Bareto',
                                        'imagen' => 'storage/detalle-evento/9674-LANDING_BARETO.jpg',
                                        'descripcion' => 'Banda invitada'
                                    ]
                                ];
                            @endphp

                            @foreach($artistas as $artista)
                            <div class="relative rounded-2xl overflow-hidden group aspect-square">
                                <img
                                    src="{{ $artista['imagen'] }}"
                                    alt="Artista {{ $artista['nombre'] }}"
                                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                                />
                                <div class="absolute inset-0 bg-black/60 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                                    <button class="btn-sm btn-primary mb-2">
                                        Ver más
                                    </button>
                                    <span class="text-white text-sm text-center px-2">{{ $artista['nombre'] }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <section class="lg:block hidden" >
                        <div class="mx-auto w-full max-w-4xl md:p-10">
                            <div aria-label="accordion-content" class="accordion-tutorial space-y-2">
                                <!-- Primer acordeón -->
                                <div x-data="{ open: false }" class="accordion-item">
                                    <label 
                                        x-on:click="open = !open" 
                                        class="accordion-header flex w-full cursor-pointer select-none items-center justify-between rounded-lg bg-gray-200 p-4 hover:bg-gray-300 transition-colors"
                                    >
                                        <span class="text-base font-bold leading-tight text-gun-300">¡Así de fácil se compra en VAOPE.COM!</span>
                                        <svg 
                                            xmlns="http://www.w3.org/2000/svg" 
                                            fill="none" 
                                            viewBox="0 0 24 24" 
                                            stroke="currentColor"
                                            class="h-6 w-6 text-gun-300 transform transition-transform duration-300"
                                            :class="{'rotate-180': open}"
                                        >
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                        </svg>
                                    </label>
                                    <div 
                                        x-show="open" 
                                        x-transition:enter="transition ease-out duration-300"
                                        x-transition:enter-start="opacity-0 transform scale-y-90"
                                        x-transition:enter-end="opacity-100 transform scale-y-100"
                                        x-transition:leave="transition ease-in duration-300"
                                        x-transition:leave-start="opacity-100 transform scale-y-100"
                                        x-transition:leave-end="opacity-0 transform scale-y-90"
                                        class="accordion-body"
                                    >
                                        <div class="space-y-4 p-4 text-sm leading-relaxed text-gun-300">
                                            <div class="aspect-[16/9]">
                                                <iframe 
                                                    width="100%" 
                                                    height="450" 
                                                    src="https://www.youtube.com/embed/0e5XqsgJscU"
                                                    title="¿Cómo descargo mis entradas en VAOPE.COM?" 
                                                    frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen="allowfullscreen">
                                                </iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    
                                <!-- Segundo acordeón -->
                                <div x-data="{ open: false }" class="accordion-item">
                                    <label 
                                        x-on:click="open = !open" 
                                        class="accordion-header flex w-full cursor-pointer select-none items-center justify-between rounded-lg bg-gray-200 p-4 hover:bg-gray-300 transition-colors"
                                    >
                                        <span class="text-base font-bold leading-tight text-gun-300">¿Cómo descargo mis entradas?</span>
                                        <svg 
                                            xmlns="http://www.w3.org/2000/svg" 
                                            fill="none" 
                                            viewBox="0 0 24 24" 
                                            stroke="currentColor"
                                            class="h-6 w-6 text-gun-300 transform transition-transform duration-300"
                                            :class="{'rotate-180': open}"
                                        >
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                        </svg>
                                    </label>
                                    <div 
                                        x-show="open" 
                                        x-transition:enter="transition ease-out duration-300"
                                        x-transition:enter-start="opacity-0 transform scale-y-90"
                                        x-transition:enter-end="opacity-100 transform scale-y-100"
                                        x-transition:leave="transition ease-in duration-300"
                                        x-transition:leave-start="opacity-100 transform scale-y-100"
                                        x-transition:leave-end="opacity-0 transform scale-y-90"
                                        class="accordion-body"
                                    >
                                        <div class="space-y-4 p-4 text-sm leading-relaxed text-gun-300">
                                            <div class="aspect-[16/9]">
                                                <iframe 
                                                    width="100%" 
                                                    height="450" 
                                                    src="https://www.youtube.com/embed/ofet95626vs"
                                                    title="¿Cómo descargo mis entradas en VAOPE.COM?" 
                                                    frameborder="0"
                                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen="allowfullscreen">
                                                </iframe>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                    <style>
                    .accordion-body {
                        transform-origin: top;
                    }
                    </style>
                </div>
            </div>
          
            <!-- Right column - Tickets -->
            <div class="col-span-full lg:col-span-5">
                <div class="bg-white rounded-[20px] lg:rounded-[32px] p-4 md:p-6 lg:p-8 sticky top-5">
                    <div class="space-y-1">
                        <h2 class="text-lg md:text-xl font-bold text-grey-500">ENTRADAS</h2>
                        <p class="text-sm md:text-base text-grey-400">Disfruta más que nunca.</p>
                        @php
                        $themeConfig = [
                            'bg' => 'transparent', // Fondo general para toda la tabla
                            'textPrimary' => 'text-black',
                            'textSecondary' => 'text-gray-500',
                            'descriptionColor' => 'text-gray-600',
                            'priceColor' => 'text-grey-700',
                            'border' => 'border-gray-200',
                            'button' => 'bg-purple-200 text-white hover:bg-purple-600 py-4',
                        ];
                        
                        $tickets = [
                            [
                                'tipo' => 'ZONA VIP',
                                'color' => 'bg-purple-200',
                                'precios' => [
                                    'Preventa 1' => 'S/ 100.00',
                                    'Preventa 2' => 'S/ 100.00',
                                    'Regular' => 'S/ 130.00',
                                ],
                            ],
                            [
                                'tipo' => 'ZONA GENERAL',
                                'color' => 'bg-blue-200',
                                'precios' => [
                                    'Preventa 1' => 'S/ 50.00',
                                    'Preventa 2' => 'S/ 60.00',
                                    'Regular' => 'S/ 80.00',
                                ],
                            ],
                            [
                                'tipo' => 'ZONA PREMIUM',
                                'color' => 'bg-green-200',
                                'precios' => [
                                    'Preventa 1' => 'S/ 50.00',
                                    'Preventa 2' => 'S/ 60.00',
                                    'Regular' => 'S/ 80.00',
                                ],
                            ],
                        ];
                        
                        $priceTypes = [
                            ['nombre' => 'Preventa 1', 'descripcion' => 'Válido del 22/08/24 hasta el 23/08/24 y/o hasta agotar stock.'],
                            ['nombre' => 'Preventa 2', 'descripcion' => 'Válido del 22/08/24 hasta el 23/08/24 y/o hasta agotar stock.'],

                        ];
                        @endphp
                        
                        <event-fee 
                            :theme-config='@json($themeConfig)' 
                            :tickets='@json($tickets)' 
                            :price-types='@json($priceTypes)'
                        ></event-fee>
                        <div class="buy-button"></div>
                    </div>
                </div>
            </div>
             <!-- Artists section -->
             <div class="mt-8 block lg:hidden">
                <h3 class="text-lg md:text-xl font-bold text-grey-400 mb-4">Sobre los artistas</h3>
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">

                    @php
                        $artistas = [
                            [
                                'nombre' => 'Tomás Suárez Vértiz',
                                'imagen' => 'storage/detalle-evento/907-LANDING_TOMAS-SUAREZ-VERTIZ.jpg',
                                'descripcion' => 'Banda principal'
                            ],
                            [
                                'nombre' => 'Rio',
                                'imagen' => 'storage/detalle-evento/156-LANDING_RIO.jpg',
                                'descripcion' => 'Banda invitada'
                            ],
                            [
                                'nombre' => 'Bareto',
                                'imagen' => 'storage/detalle-evento/9674-LANDING_BARETO.jpg',
                                'descripcion' => 'Banda invitada'
                            ]
                        ];
                    @endphp

                    @foreach($artistas as $artista)
                    <div class="relative rounded-2xl overflow-hidden group aspect-square">
                        <img
                            src="{{ $artista['imagen'] }}"
                            alt="Artista {{ $artista['nombre'] }}"
                            class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
                        />
                        <div class="absolute inset-0 bg-black/60 flex flex-col items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <button class="btn-sm btn-primary mb-2">
                                Ver más
                            </button>
                            <span class="text-white text-sm text-center px-2">{{ $artista['nombre'] }}</span>
                        </div>
                    </div>
                    @endforeach
                </div>
                <section>
                    <div class="mx-auto w-full max-w-4xl md:p-10 my-5">
                        <div aria-label="accordion-content" class="accordion-tutorial space-y-2">
                            <!-- Primer acordeón -->
                            <div x-data="{ open: false }" class="accordion-item">
                                <label 
                                    x-on:click="open = !open" 
                                    class="accordion-header flex w-full cursor-pointer select-none items-center justify-between rounded-lg bg-gray-200 p-4 hover:bg-gray-300 transition-colors"
                                >
                                    <span class="text-base font-bold leading-tight text-gun-300">¡Así de fácil se compra en VAOPE.COM!</span>
                                    <svg 
                                        xmlns="http://www.w3.org/2000/svg" 
                                        fill="none" 
                                        viewBox="0 0 24 24" 
                                        stroke="currentColor"
                                        class="h-6 w-6 text-gun-300 transform transition-transform duration-300"
                                        :class="{'rotate-180': open}"
                                    >
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </label>
                                <div 
                                    x-show="open" 
                                    x-transition:enter="transition ease-out duration-300"
                                    x-transition:enter-start="opacity-0 transform scale-y-90"
                                    x-transition:enter-end="opacity-100 transform scale-y-100"
                                    x-transition:leave="transition ease-in duration-300"
                                    x-transition:leave-start="opacity-100 transform scale-y-100"
                                    x-transition:leave-end="opacity-0 transform scale-y-90"
                                    class="accordion-body"
                                >
                                    <div class="space-y-4 p-4 text-sm leading-relaxed text-gun-300">
                                        <div class="aspect-[16/9]">
                                            <iframe 
                                                width="100%" 
                                                height="450" 
                                                src="https://www.youtube.com/embed/0e5XqsgJscU"
                                                title="¿Cómo descargo mis entradas en VAOPE.COM?" 
                                                frameborder="0"
                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                allowfullscreen="allowfullscreen">
                                            </iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                
                            <!-- Segundo acordeón -->
                            <div x-data="{ open: false }" class="accordion-item">
                                <label 
                                    x-on:click="open = !open" 
                                    class="accordion-header flex w-full cursor-pointer select-none items-center justify-between rounded-lg bg-gray-200 p-4 hover:bg-gray-300 transition-colors"
                                >
                                    <span class="text-base font-bold leading-tight text-gun-300">¿Cómo descargo mis entradas?</span>
                                    <svg 
                                        xmlns="http://www.w3.org/2000/svg" 
                                        fill="none" 
                                        viewBox="0 0 24 24" 
                                        stroke="currentColor"
                                        class="h-6 w-6 text-gun-300 transform transition-transform duration-300"
                                        :class="{'rotate-180': open}"
                                    >
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                                    </svg>
                                </label>
                                <div 
                                    x-show="open" 
                                    x-transition:enter="transition ease-out duration-300"
                                    x-transition:enter-start="opacity-0 transform scale-y-90"
                                    x-transition:enter-end="opacity-100 transform scale-y-100"
                                    x-transition:leave="transition ease-in duration-300"
                                    x-transition:leave-start="opacity-100 transform scale-y-100"
                                    x-transition:leave-end="opacity-0 transform scale-y-90"
                                    class="accordion-body"
                                >
                                    <div class="space-y-4 p-4 text-sm leading-relaxed text-gun-300">
                                        <div class="aspect-[16/9]">
                                            <iframe 
                                                width="100%" 
                                                height="450" 
                                                src="https://www.youtube.com/embed/ofet95626vs"
                                                title="¿Cómo descargo mis entradas en VAOPE.COM?" 
                                                frameborder="0"
                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                                                allowfullscreen="allowfullscreen">
                                            </iframe>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <style>
                .accordion-body {
                    transform-origin: top;
                }
                </style>
            </div>
        </div>
    </div>
</div>


<section class="mobile-buy-bar">
    <mobile-buy-bar />
</section>
@endsection