@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
    <div class="max-w-7xl mx-auto mt-5">
        <div class="relative w-full h-[400px] overflow-hidden rounded-[32px]">
            <!-- Imagen con oscurecimiento -->
            <img src="{{ asset('storage/detalle-evento/banner.png') }}" class="w-full h-full object-cover"
                alt="Banner del Evento">

        </div>


        <div class="mt-5">
            <div class="bg-purple-50 p-4 rounded-[32px]">
                <div class="grid grid-cols-6 gap-x-10 items-center">
                    <div class="col-span-6 md:col-span-3">
                        <h1 class="md:text-4xl md:block hidden text-grey-500 font-bold text-center">Cascanueces</h1>
                    </div>
                    <div class="col-span-6 md:col-span-3">
                        <h4 class="text-grey-500 font-semibold text-[24px]">06 al 26 de Diciembre/2024</h4>
                        <div class="md:flex gap-x-2">
                            <h4 class="text-grey-500 font-semibold">7:20 PM</h4> <span class="mt-2 text-grey-500">Apertura
                                de puertas: 06:50 PM</span>
                        </div>
                        <a href="/checkout">
                            <button class="btn btn-primary mt-2 buy-button">
                                Comprar ahora
                            </button>
                        </a>
                        <p class="text-grey-500 mt-2">*Apto para todas las edades</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-5">
            <div class="grid grid-cols-3 gap-x-6">
                <div class="col-span-3 md:col-span-2 bg-white rounded-[32px]">
                    <h4 class="text-center my-8 font-semibold text-grey-500">Plano referencial</h4>
                    <img class="mx-auto" src="{{ asset('storage/detalle-evento/image 317.png') }}" alt="">
                    <div class="mt-5">
                        <event-fee />
                    </div>
                </div>
                <div class="col-span-3 md:col-span-1">
                    <div class="bg-white rounded-[32px] p-4">
                        <img class="mx-auto mt-2" src="{{ asset('storage/detalle-evento/image 363.png') }}" alt="">
                        <p class="mt-4 text-grey-400 text-lg">Este espectáculo es más que una puesta en escena, es un evento
                            inolvidable que reúne a la familia para celebrar la magia de la Navidad. Asegura tu lugar en el
                            Teatro Municipal y prepárate para ser transportado a un mundo de fantasía que cautiva al público
                            de todas las edades.
                        </p>
                        <p class="mt-6 text-grey-400 text-lg">No pierdas la oportunidad de disfrutar de esta gran producción
                            del Ballet Municipal de Lima. ¡Haz que tu temporada navideña sea inolvidable con CASCANUECES!
                        </p>
                        <img class="mx-auto mt-4 w-full" src="{{ asset('storage/detalle-evento/image 364.png') }}"
                            alt="">
                    </div>
                    <div class="bg-white rounded-[32px] p-4 mt-5">
                        <h3 class="text-grey-500 font-semibold">Conoce al artista</h3>
                        <img class="mx-auto mt-4 w-full" src="{{ asset('storage/detalle-evento/image 320.png') }}"
                            alt="">
                        <p class="text-grey-400 mt-4">Sigue al Ballet Municipal de Lima en:</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="mobile-buy-bar "> <mobile-buy-bar /></section>
@endsection