@extends('layouts.layout')
@section('title', 'Inicio')
@section('body')
    <div class="bg-gradient-to-r from-purple-200 to-purple-900 relative">
        <div class="max-w-7xl mx-auto text-center pt-5 pb-10">
            <section id="search">
                <h2 class="text-white font-semibold">Centro de Ayuda</h2>
                <p class="text-white pb-3">Encuentra respuestas rápidas a tus preguntas y obtén soporte personalizado.</p>
                <div class="relative max-w-[546px] mx-auto">
                    <input type="search" class="form-control w-full px-4 py-2 rounded-lg" id="search" name="search"
                        placeholder="Escribe una palabra clave o frase sobre el tema que buscas.">
                    <a href="/centro-ayuda-articulo-busqueda">
                        <button
                            class="absolute right-5 top-1/2 -translate-y-1/2 p-2 bg-purple-200 hover:bg-purple-700 rounded-2xl transition-colors">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="11" cy="11" r="8" />
                                <line x1="21" y1="21" x2="16.65" y2="16.65" />
                            </svg>
                        </button>
                    </a>
                </div>
            </section>
        </div>
    </div>
    <section class="max-w-7xl mx-auto pt-5 pb-10">
        <!-- Tabs Navigation -->
        <div class="flex justify-center border-b border-gray-200 mb-6">
            <div id="ticketsTab"
                class="tab cursor-pointer px-6 py-3 text-center transition-all duration-200 border-b-2 border-purple-600 text-purple-600 font-medium">
                <span>Comprar entradas</span>
            </div>
            <div id="organizerTab"
                class="tab cursor-pointer px-6 py-3 text-center transition-all duration-200 text-gray-500 hover:text-gray-700">
                <span>Soy organizador</span>
            </div>
        </div>

        <!-- Tab Contents -->
        <div class="mt-6">
            <!-- Tickets Tab -->
            <div id="ticketsContent" class="space-y-8">
                <div class="flex items-center gap-x-4">
                    <h3 class="text-xl font-semibold">¿En qué podemos ayudarte?</h3>
                    <p class="text-purple-200 font-semibold cursor-pointer">Ver más</p>
                </div>
                <div class="grid  grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                    <a href="/centro-ayuda-articulo-detalle">
                        <div
                            class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                            <img src="{{ asset('storage/centro-ayuda/comprar entradas.svg') }}" class="flex mx-auto"
                                alt="">
                            <h4 class="font-medium text-base my-1">¿Cómo comprar mis entradas?</h4>
                            <p class="mt-2 text-gray-600 text-sm">Descubre cómo buscar eventos, elegir tu tipo de boleto y
                                completar la compra de manera segura.</p>
                        </div>
                    </a>
                    <a href="/centro-ayuda-articulo-detalle">
                        <div
                            class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                            <img src="{{ asset('storage/centro-ayuda/Durante evento.svg') }}" class="flex mx-auto"
                                alt="">
                            <h4 class="font-medium text-base my-1">Durante el evento</h4>
                            <p class="mt-2 text-gray-600 text-sm">Encuentra toda la información sobre acceso, normas y
                                recomendaciones para aprovechar al máximo tu experiencia en el evento.</p>
                        </div>
                    </a>
                    <a href="/centro-ayuda-articulo-detalle">
                        <div
                            class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center h-full">
                            <img src="{{ asset('storage/centro-ayuda/Devoluciones.svg') }}" class="flex mx-auto"
                                alt="">
                            <h4 class="font-medium text-base my-1">Devoluciones</h4>
                            <p class="mt-2 text-gray-600 text-sm">Conoce los pasos y políticas para solicitar una devolución
                                en caso de que no puedas asistir a un evento.</p>
                        </div>
                    </a>
                    <a href="/centro-ayuda-articulo-detalle">
                        <div
                            class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center h-full">
                            <img src="{{ asset('storage/centro-ayuda/Medios Pago.svg') }}" class="flex mx-auto"
                                alt="">
                            <h4 class="font-medium text-base my-1">Medios de Pago</h4>
                            <p class="mt-2 text-gray-600 text-sm">Infórmate sobre los métodos de pago aceptados, seguridad
                                en transacciones y opciones de pago en cuotas.</p>
                        </div>
                    </a>
                    <a href="/centro-ayuda-articulo-detalle">
                        <div
                            class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center h-full">
                            <img src="{{ asset('storage/centro-ayuda/Enviar solicitud.svg') }}" class="flex mx-auto"
                                alt="">
                            <h4 class="font-medium text-base my-1">Enviar solicitud</h4>
                            <p class="mt-2 text-gray-600 text-sm">Nuestro equipo de soporte está disponible para ayudarte en
                                lo que necesites.</p>
                        </div>
                    </a>
                </div>

                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">Articulos más populares</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 my-3">
                        <div class="flex gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100">
                            <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                            <p class="text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100">
                            <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                            <p class="text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100">
                            <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                            <p class="text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100">
                            <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                            <p class="text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100">
                            <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                            <p class="text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100">
                            <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                            <p class="text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                    </div>
                </div>
                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">¿Necesitas contactarnos?</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 my-5">
                        <div class="flex flex-col gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100 bg-success-50">
                            <img src="{{ asset('storage/centro-ayuda/ws-icon.svg') }}" width="48px" alt="">
                            <h5>Chatea con un asesor</h5>
                            <p class=" my-3 text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <button class="btn btn-secondary bg-white w-36">Contáctanos</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Organizer Tab -->
            <div id="organizerContent" class="space-y-8" style="display: none;">
                <div class="flex items-center gap-x-4">
                    <h3 class="text-xl font-semibold">¿En qué podemos ayudarte?</h3>
                    <p class="text-purple-200 font-semibold cursor-pointer">Ver más</p>
                </div>
                <div class="grid  grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
                    <div
                        class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                        <img src="{{ asset('storage/centro-ayuda/comprar entradas.svg') }}" class="flex mx-auto"
                            alt="">
                        <h4 class="font-medium text-base my-1">Crear un evento</h4>
                        <p class="mt-2 text-gray-600 text-sm">Aprende a crear y gestionar tu evento de manera fácil y
                            rápida. Te guiamos paso a paso para que tu evento sea un éxito.</p>
                    </div>
                    <div
                        class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                        <img src="{{ asset('storage/centro-ayuda/Durante evento.svg') }}" class="flex mx-auto"
                            alt="">
                        <h4 class="font-medium text-base my-1">Gestión de Asistentes</h4>
                        <p class="mt-2 text-gray-600 text-sm">Administra a tus asistentes de forma eficiente. Desde la
                            confirmación de asistencia hasta el seguimiento personalizado.</p>
                    </div>
                    <div
                        class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                        <img src="{{ asset('storage/centro-ayuda/Devoluciones.svg') }}" class="flex mx-auto"
                            alt="">
                        <h4 class="font-medium text-base my-1">Devoluciones</h4>
                        <p class="mt-2 text-gray-600 text-sm">Encuentra aquí el proceso completo y resuelve cualquier duda
                            sobre reembolsos y políticas de cancelación.</p>
                    </div>
                    <div
                        class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                        <img src="{{ asset('storage/centro-ayuda/Medios Pago.svg') }}" class="flex mx-auto"
                            alt="">
                        <h4 class="font-medium text-base my-1">Medios de Pago</h4>
                        <p class="mt-2 text-gray-600 text-sm">Descubre los diferentes métodos de pago disponibles. Te
                            explicamos cómo habilitar y gestionar pagos seguros para tus eventos.</p>
                    </div>
                    <div
                        class="bg-white p-4 border rounded-[24px] shadow-sm hover:shadow-md transition-shadow text-center">
                        <img src="{{ asset('storage/centro-ayuda/Enviar solicitud.svg') }}" class="flex mx-auto"
                            alt="">
                        <h4 class="font-medium text-base my-1">Enviar solicitud</h4>
                        <p class="mt-2 text-gray-600 text-sm">¿Tienes una duda o problema? Nuestro equipo de soporte te
                            ayudará a resolverlo lo antes posible.</p>
                    </div>
                </div>

                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">Articulos más populares</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 my-3">
                        <div class="flex justify-between py-3 px-4 rounded-[24px] border border-grey-100">
                            <div class="flex gap-x-4">
                                <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                                <p class="text-sm text-grey-500">¿Cómo crear un evento?</p>
                            </div>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex justify-between py-3 px-4 rounded-[24px] border border-grey-100">
                            <div class="flex gap-x-4">
                                <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                                <p class="text-sm text-grey-500">Gestionar detalles de pago</p>
                            </div>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex justify-between py-3 px-4 rounded-[24px] border border-grey-100">
                            <div class="flex gap-x-4">
                                <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                                <p class="text-sm text-grey-500">¿Cómo es el cobro de pagos e impuestos?</p>
                            </div>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex justify-between py-3 px-4 rounded-[24px] border border-grey-100">
                            <div class="flex gap-x-4">
                                <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                                <p class="text-sm text-grey-500">Facturas</p>
                            </div>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex justify-between py-3 px-4 rounded-[24px] border border-grey-100">
                            <div class="flex gap-x-4">
                                <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                                <p class="text-sm text-grey-500">Marketing del evento</p>
                            </div>
                            <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px" alt="">
                        </div>
                        <div class="flex justify-between py-3 px-4 rounded-[24px] border border-grey-100">
                            <div class="flex gap-x-4">
                                <img src="{{ asset('storage/icons/article.svg') }}" width="15px" alt="">
                                <p class="text-sm text-grey-500">Gestión de asistentes</p>
                                <div>
                                    <img src="{{ asset('storage/icons/arrow_forward.svg') }}" width="15px"
                                        alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="w-full bg-white rounded-[24px] py-[24px] px-[15px]">
                    <h3 class="text-xl font-semibold">¿Necesitas contactarnos?</h3>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-5 my-5">
                        <div class="flex flex-col gap-x-4 py-3 px-4 rounded-[24px] border border-grey-100 bg-success-50">
                            <img src="{{ asset('storage/centro-ayuda/ws-icon.svg') }}" width="48px" alt="">
                            <h5>Chatea con un asesor</h5>
                            <p class=" my-3 text-sm text-grey-500">¿Cuáles son los métodos de pago disponibles?</p>
                            <button class="btn btn-secondary bg-white w-36">Contáctanos</button>
                        </div>
                    </div>
                </div>
    </section>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ticketsTab = document.getElementById('ticketsTab');
            const organizerTab = document.getElementById('organizerTab');
            const ticketsContent = document.getElementById('ticketsContent');
            const organizerContent = document.getElementById('organizerContent');

            function switchTab(activeTab, activeContent, inactiveTab, inactiveContent) {
                // Actualizar estilos de las pestañas
                activeTab.classList.add('border-b-2', 'border-purple-600', 'text-purple-600', 'font-medium');
                activeTab.classList.remove('text-gray-500');

                inactiveTab.classList.remove('border-b-2', 'border-purple-600', 'text-purple-600', 'font-medium');
                inactiveTab.classList.add('text-gray-500');

                // Mostrar/ocultar contenido con una animación suave
                activeContent.style.opacity = '0';
                activeContent.style.display = 'block';
                inactiveContent.style.display = 'none';

                // Animar la aparición del contenido activo
                setTimeout(() => {
                    activeContent.style.transition = 'opacity 300ms ease-out';
                    activeContent.style.opacity = '1';
                }, 50);
            }

            ticketsTab.addEventListener('click', function() {
                switchTab(ticketsTab, ticketsContent, organizerTab, organizerContent);
            });

            organizerTab.addEventListener('click', function() {
                switchTab(organizerTab, organizerContent, ticketsTab, ticketsContent);
            });
        });
    </script>
@endsection