@extends('layouts.app')
@section('title', 'Inicio')
@section('body')
    @foreach ($events['cities'] as $city)
        @php
            $cities[] = [
                'name' => title_case_spanish($city['name']),
                'events' => $city['events'],
                'value' => $city['slug'],
            ];
        @endphp
    @endforeach
    <section @class([
        'bg-secondary-blue-200 relative' => env('APP_THEME') == 'vaope',
        'bg-gradient-to-r from-primary-200 to-primary-900 relative' =>
            env('APP_THEME') != 'vaope',
    ])>
        <div class="py-6 container space-y-6 flex flex-col items-center justify-center">
            <x-input-main :cities="$events['cities']" />
            {{-- <div class="w-full max-w-screen-sm">
                <main-search :cities="{{ json_encode($cities, JSON_UNESCAPED_UNICODE) }}"
                    default-value="{{ request()->segment(1) }}"></main-search>
            </div> --}}
            <x-slider-category :events="$events" />
        </div>
    </section>
    <section class="overflow-hidden w-full aspect-square md:aspect-[3168/1000]">
        <x-slider-main :sliders="$events['sliders']" />
    </section>
    <section class="bg-secondary-blue-50">
        @if (env('APP_THEME') == 'vaope')
            <header class="container flex items-center py-5 md:py-12">
                <h2 class="text-body md:text-heading-h4 font-bold">Encuentra algo cerca de ti</h2>
                <select-departaments :cities="{{ json_encode($cities, JSON_UNESCAPED_UNICODE) }}"
                    default-value="{{ request()->segment(1) }}"></select-departaments>
            </header>
        @endif
        <x-cards-main :events="$events" />
        <div class="bg-neutral-50 pb-8 flex items-center justify-center">
            @php
                $currentPath = request()->path();
                $segments = explode('/', $currentPath);
                $slug = end($segments);
                $ubicacion = empty($slug) ? 'todos' : $slug;

            @endphp
            <a href="{{ route('all.events', ['ubicacion' => $ubicacion]) }}" class="btn btn-primary relative">
                Mostrar más eventos
            </a>
        </div>

        <div class="container py-8">
            <div role="complementary"
                class="rounded-lg p-6 select-none lg:p-10 relative h-[14rem] overflow-hidden before:content-[''] before:absolute before:inset-0 before:z-[2] before:bg-gradient-to-r before:from-primary-200/60 before:to-primary-600/80 isolate">
                <img aria-hidden="true" src="{{ env('VITE_CDN_URL_ASSETS') . '/components/create-event/background.jpg' }}"
                    class="absolute top-0 left-0 z-[1] size-full pointer-events-none object-cover bg-blend-normal"
                    alt="luces de un evento">
                <div aria-hidden="true" class="absolute pointer-events-none right-0 bottom-0 z-[3] max-w-md">
                    <img src="{{ env('VITE_CDN_URL_ASSETS') . '/components/create-event/people.png' }}"
                        class="w-full h-full object-contain object-bottom scale-150 brightness-0"
                        alt="Gente disfrutando de un evento" loading="lazy" decoding="async">
                </div>
                <div class="w-max relative flex flex-col justify-center h-full z-[4]">
                    <h4 class="text-heading-h4 lg:text-heading-h1 text-white font-bold">¿Tienes un evento?</h4>
                    <p class="text-body lg:text-heading-h4 text-white font-medium">Crea un evento con nosotros</p>
                    <a href="/crear-evento" class="btn btn-secondary mt-4 mr-auto">
                        ¡Empezar ahora!
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection