@extends('layouts.app')
@section('title', 'Inicio')
@section('body')
    <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']" />
            <x-slider-category :events="$events" />
        </div>
    </section>
    <section>
        <x-slider-main :sliders="$events['sliders']" />
    </section>
    <section class="bg-secondary-blue-50">
        @if (env('APP_THEME') == 'vaope')
            @php
                function title_case_spanish($string)
                {
                    $lowercaseWords = ['de', 'la', 'del', 'y', 'en', 'el', 'los', 'las', 'un', 'una'];
                    $words = explode(' ', mb_strtolower($string, 'UTF-8'));
                    foreach ($words as $i => $word) {
                        if ($i === 0 || !in_array($word, $lowercaseWords)) {
                            $words[$i] = mb_convert_case($word, MB_CASE_TITLE, 'UTF-8');
                        }
                    }
                    return implode(' ', $words);
                }
            @endphp

            @foreach ($events['cities'] as $city)
                @php
                    $cities[] = [
                        'name' => title_case_spanish($city['name']),
                        'events' => $city['events'],
                    ];
                @endphp
            @endforeach
            <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="Lima"></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