@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
<div class="bg-black min-h-screen flex flex-col gap-y-5 p-4">
    <!-- Imágenes responsivas -->
    <div class="max-w-4xl mx-auto py-5">
        <img src="{{ asset('storage/detalle-evento/marco romero/1812-FOTO_25 AÑOS MARCO ROMERO.png') }}" 
             class="w-full h-auto object-cover object-center rounded-lg" 
             alt="">
    </div>
    <div class="max-w-4xl mx-auto py-5">
        <img src="{{ asset('storage/detalle-evento/marco romero/7426-Recurso 1.png') }}" 
             class="w-full h-auto object-cover object-center rounded-lg" 
             alt="">
    </div>
    <div class="max-w-4xl mx-auto py-5">
        <div class="grid grid-cols-1 gap-4 lg:gap-4 mt-5 md:mt-0">
            <div class="col-span-full">
                    <div class="space-y-1 w-full">
                        @php
                        $themeConfig = [
                            'bg' => 'transparent', // Fondo general para toda la tabla
                            'textPrimary' => 'text-white',
                            'textSecondary' => 'text-gray-500',
                            'descriptionColor' => 'text-gray-600',
                            'priceColor' => 'text-grey-100',
                            '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.'],
                            ['nombre' => 'Regular', '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>
    </div>

    <!-- Botón "Comprar ahora" -->
    {{-- <div class="flex justify-center pb-5">
        <div class="px-5">
            <a href="/checkout">
                <div class="btn-lg btn-primary text-center cursor-pointer bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg shadow-md">
                    <p class="md:text-xl text-sm py-2 px-6">
                        Comprar ahora
                    </p>
                </div>
            </a>
        </div>
    </div> --}}

    <!-- Sección de artistas -->
    <div class="max-w-4xl mx-auto py-5">
        <div class="my-4">
            <h3 class="text-lg md:text-xl font-bold text-gray-400 mb-4">Sobre los artistas</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg: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="{{ asset($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 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-lg">
                            Ver más
                        </button>
                        <span class="text-white text-xs sm:text-sm text-center px-2">{{ $artista['nombre'] }}</span>
                    </div>
                </div>
                @endforeach
            </div>
        </div>

        <!-- Sección de preguntas frecuentes -->
        <section class="mt-8">
            <div class="mx-auto w-full max-w-4xl p-4">
                <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-gray-800">¡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-gray-800 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-gray-800">
                                <div class="aspect-[16/9]">
                                    <iframe  class="w-full h-full"
                                        src="https://www.youtube.com/embed/0e5XqsgJscU">
                                    </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-gray-800">¿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-gray-800 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-gray-800">
                                <div class="aspect-[16/9]">
                                    <iframe  class="w-full h-full"
                                        src="https://www.youtube.com/embed/ofet95626vs">
                                    </iframe>
                                </div>
                            </div>0
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</div>
@endsection