@if (env('APP_THEME') == 'vaope')
    <footer class="bg-secondary-blue-600">
        <section class="container pt-16 grid md:grid-cols-[auto_1fr_auto] gap-8">
            <div class="space-y-3">
                <img src="{{ env('VITE_CDN_URL_ASSETS') . '/brand/' . env('APP_THEME') . '/logo.svg' }}"
                    class="w-auto h-4" alt="Logo Vaope">
                <div class="text-body text-white">Habla? Vao?</div>
            </div>
            <div class="grid grid-cols-2 md:flex md:justify-evenly gap-8">
                <div class="flex flex-col gap-3 text-white">
                    <p class="text-body font-semibold">Empresa</p>
                    <a href="{{ route('sobre-nosotros') }}"
                        class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                        Sobre nosotros
                    </a>
                    <a href="{{ route('crear-evento') }}"
                        class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                        Crea tu evento
                    </a>
                    <a href="{{ route('blog') }}"
                        class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                        Blog
                    </a>
                </div>
                <div class="flex flex-col gap-3 text-white">
                    <p class="text-body font-semibold">Legal</p>
                    <a href="{{ route('politicas-cookies') }}"
                        class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                        Política de cookies
                    </a>
                    <a href="{{ route('politicas-privacidad') }}"
                        class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                        Políticas de Privacidad
                    </a>
                    <a href="{{ route('terminos-condiciones') }}"
                        class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                        Términos y condiciones
                    </a>
                </div>
                <div class="space-y-3 text-white max-md:col-span-2 max-md:grid max-md:grid-cols-2">
                    <div class="flex flex-col gap-3">
                        <p class="text-body font-semibold">Ayuda</p>
                        <a href="{{ route('centro-ayuda') }}"
                            class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                            Centro de ayuda
                        </a>
                        <a href="{{ route('contacto') }}"
                            class="text-subtitle font-medium transition-colors duration-200 hover:text-primary-300">
                            Contáctanos
                        </a>
                    </div>
                    <a href="{{ route('libro.reclamaciones') }}">
                        <img src="{{ env('VITE_CDN_URL_ASSETS') . '/libro-reclamaciones.svg' }}"
                            alt="libro de reclamaciones" class="w-auto h-14">
                    </a>
                </div>
            </div>
            <div class="flex flex-col gap-3 text-white">
                <p class="text-body font-semibold">Redes sociales</p>
                <div class="flex gap-x-2.5">
                    @if (env('REDES_YT'))
                        <a href="{{ env('REDES_YT') }}" class="p-2 inline-flex">
                            <svg class="size-6 close">
                                <use xlink:href="{{ asset('/assets/sprite.svg#youtube') }}" />
                            </svg>
                        </a>
                    @endif
                    @if (env('REDES_IG'))
                        <a href="{{ env('REDES_IG') }}" class="p-2 inline-flex">
                            <svg class="size-6 close">
                                <use xlink:href="{{ asset('/assets/sprite.svg#instagram') }}" />
                            </svg>
                        </a>
                    @endif
                    @if (env('REDES_FB'))
                        <a href="{{ env('REDES_FB') }}" class="p-2 inline-flex">
                            <svg class="size-6 close">
                                <use xlink:href="{{ asset('/assets/sprite.svg#facebook') }}" />
                            </svg>
                        </a>
                    @endif
                    @if (env('REDES_TK'))
                        <a href="{{ env('REDES_TK') }}" class="p-2 inline-flex">
                            <svg class="size-6 close">
                                <use xlink:href="{{ asset('/assets/sprite.svg#tiktok') }}" />
                            </svg>
                        </a>
                    @endif
                </div>
            </div>
        </section>
        <div class="container flex py-6 flex-col text-subtitle font-medium text-white">
            <span>© VAOpe.com</span>
            <span>Todos los derechos reservados</span>
        </div>
    </footer>
@else
    <footer id="footer" class="bg-[#262626] w-full left-0 right-0">
        <div class="max-w-5xl mx-auto p-4">
            <div class="flex flex-col md:flex-row justify-between">
                <div class="text-white flex-shrink-0 lg:mr-44 mb-6 md:mb-0 p-2">
                    <img src="https://static.vaope.com/public/repository/5824-tuentrada.png" alt="Logo" />
                    <p class="text-sm my-3">¡Vamos juntos!</p>
                    <p class="text-sm">¡Vamos todos!</p>
                </div>
                <div class="grid grid-cols-2 md:grid-cols-4 flex-grow gap-6 md:gap-2 mx-2">
                    <div class="text-white">
                        <h3 class="text-lg mb-2">Empresa</h3>
                        <ul class="flex flex-col gap-y-3">
                            <a href="{{ route('sobre-nosotros') }}">
                                <li class="text-sm">Sobre nosotros</li>
                            </a>
                            <a href="#">
                                <li class="text-sm">Crea tu evento</li>
                            </a>
                            <a href="{{ route('blog') }}">
                                <li class="text-sm">Blog</li>
                            </a>
                        </ul>
                    </div>
                    <div class="text-white">
                        <h3 class="text-lg mb-2">Legal</h3>
                        <ul class="flex flex-col gap-y-3">
                            <a href="{{ route('politicas-cookies') }}">
                                <li class="text-sm">Política de cookies</li>
                            </a>
                            <a href="{{ route('politicas-privacidad') }}">
                                <li class="text-sm">Políticas de Privacidad</li>
                            </a>
                            <a href="{{ route('terminos-condiciones') }}">
                                <li class="text-sm">Términos y condiciones</li>
                            </a>
                        </ul>
                    </div>
                    <div class="text-white">
                        <h3 class="text-lg mb-2">Ayuda</h3>
                        <ul class="flex flex-col gap-y-3">
                            <li class="text-sm">
                                <a href="{{ route('centro-ayuda') }}">
                                    Centro de ayuda
                                </a>
                            </li>
                            <li>
                                <a href="{{ route('libro.reclamaciones') }}">
                                    <img src="{{ env('VITE_CDN_URL_ASSETS') . '/libro-reclamaciones.svg' }}"
                                        alt="Libro de Reclamaciones" />
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="block flex-shrink-0">
                        <p class="text-white mb-3 text-lg">Redes sociales</p>
                        <div class="flex gap-x-5">
                            <a href="{{ env('REDES_YT') }}">
                                <svg class="size-5 youtube">
                                    <use xlink:href="{{ asset('/assets/sprite.svg#youtube') }}" />
                                </svg>
                            </a>
                            <a href="{{ env('REDES_IG') }}" class="cursor-pointer">
                                <svg class="size-5 instagram">
                                    <use xlink:href="{{ asset('/assets/sprite.svg#instagram') }}" />
                                </svg>
                            </a>
                            <a href="{{ env('REDES_FB') }}">
                                <svg class="size-5 facebook">
                                    <use xlink:href="{{ asset('/assets/sprite.svg#facebook') }}" />
                                </svg>
                            </a>
                            <a href="{{ env('REDES_TK') }}">
                                <svg class="size-5 tiktok">
                                    <use xlink:href="{{ asset('/assets/sprite.svg#tiktok') }}" />
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
@endif