{% extends "base.html" %}

{% block title %}Centro de Ayuda - TallArt{% endblock %}

{% block extra_css %}
<style>
    .faq-item {
        transition: all 0.3s ease;
    }
    .faq-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }
    .faq-answer.active {
        max-height: 500px;
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50 py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="text-center mb-16">
            <h1 class="text-5xl font-bold text-gray-900 mb-4">
                Centro de Ayuda
            </h1>
            <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                Encuentra respuestas rápidas a tus preguntas sobre TallArt
            </p>
        </div>

        <!-- Búsqueda rápida -->
        <div class="max-w-3xl mx-auto mb-12">
            <div class="relative">
                <input type="text" 
                       id="search-help"
                       placeholder="Busca tu pregunta aquí..."
                       class="w-full px-6 py-4 pl-14 text-lg border-2 border-gray-300 rounded-2xl focus:border-purple-500 focus:ring-2 focus:ring-purple-200 outline-none transition-all shadow-lg">
                <svg class="absolute left-5 top-5 w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                </svg>
            </div>
        </div>

        <!-- Categorías de ayuda -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">
            <!-- Para Clientes -->
            <div class="bg-white rounded-2xl shadow-xl p-8 text-center hover:shadow-2xl transition-all transform hover:-translate-y-2">
                <div class="w-20 h-20 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full mx-auto mb-6 flex items-center justify-center">
                    <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-3">Para Clientes</h3>
                <p class="text-gray-600 mb-4">Guías sobre cómo comprar, favoritos y más</p>
                <a href="#clientes-faq" class="inline-block px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
                    Ver Guías
                </a>
            </div>

            <!-- Para Empresas -->
            <div class="bg-white rounded-2xl shadow-xl p-8 text-center hover:shadow-2xl transition-all transform hover:-translate-y-2">
                <div class="w-20 h-20 bg-gradient-to-br from-green-400 to-green-600 rounded-full mx-auto mb-6 flex items-center justify-center">
                    <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"/>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-3">Para Empresas</h3>
                <p class="text-gray-600 mb-4">Gestiona productos, eventos y estadísticas</p>
                <a href="#empresas-faq" class="inline-block px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors">
                    Ver Guías
                </a>
            </div>

            <!-- Contacto -->
            <div class="bg-white rounded-2xl shadow-xl p-8 text-center hover:shadow-2xl transition-all transform hover:-translate-y-2">
                <div class="w-20 h-20 bg-gradient-to-br from-purple-400 to-purple-600 rounded-full mx-auto mb-6 flex items-center justify-center">
                    <svg class="w-10 h-10 text-white" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                        <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                    </svg>
                </div>
                <h3 class="text-2xl font-bold text-gray-900 mb-3">Contacto</h3>
                <p class="text-gray-600 mb-4">¿No encuentras lo que buscas?</p>
                <a href="#contacto" class="inline-block px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition-colors">
                    Contáctanos
                </a>
            </div>
        </div>

        <!-- FAQ para Clientes -->
        <div id="clientes-faq" class="mb-16">
            <h2 class="text-3xl font-bold text-gray-900 mb-8 flex items-center">
                <svg class="w-8 h-8 mr-3 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"/>
                </svg>
                Preguntas Frecuentes para Clientes
            </h2>
            
            <div class="space-y-4">
                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Cómo registro una cuenta?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            1. Haz clic en "Registrarse" en la barra de navegación<br>
                            2. Completa tus datos (nombre, email, contraseña)<br>
                            3. Selecciona tu tipo de usuario (Cliente o Empresa)<br>
                            4. Acepta los términos y condiciones<br>
                            5. ¡Listo! Ya puedes empezar a explorar productos
                        </p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Cómo agrego productos al carrito?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            1. Navega por la sección de "Productos"<br>
                            2. Haz clic en el producto que te interesa<br>
                            3. Selecciona la cantidad deseada<br>
                            4. Presiona el botón "Agregar al Carrito"<br>
                            5. El contador del carrito se actualizará automáticamente
                        </p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Qué métodos de pago aceptan?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            Aceptamos los siguientes métodos de pago:<br>
                            • Tarjeta de crédito/débito<br>
                            • PayPal<br>
                            • Transferencia bancaria<br>
                            <br>
                            <strong>Nota:</strong> El pago en efectivo fue removido por políticas de seguridad.
                        </p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Cómo guardo productos en favoritos?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            1. Busca el icono de corazón en el producto<br>
                            2. Haz clic para agregarlo a favoritos<br>
                            3. Accede a "Mis Favoritos" desde el menú de usuario<br>
                            4. Desde ahí puedes ver todos tus productos guardados
                        </p>

                    </div>
                </div>
            </div>
        </div>

        <!-- FAQ para Empresas -->
        <div id="empresas-faq" class="mb-16">
            <h2 class="text-3xl font-bold text-gray-900 mb-8 flex items-center">
                <svg class="w-8 h-8 mr-3 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h8a2 2 0 012 2v12a1 1 0 110 2h-3a1 1 0 01-1-1v-2a1 1 0 00-1-1H9a1 1 0 00-1 1v2a1 1 0 01-1 1H4a1 1 0 110-2V4zm3 1h2v2H7V5zm2 4H7v2h2V9zm2-4h2v2h-2V5zm2 4h-2v2h2V9z" clip-rule="evenodd"/>
                </svg>
                Preguntas Frecuentes para Empresas
            </h2>
            
            <div class="space-y-4">
                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Cómo creo mi empresa en TallArt?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            1. Regístrate como usuario tipo "Empresa"<br>
                            2. Ve a "Mi Empresa" desde el menú<br>
                            3. Haz clic en "Crear Empresa"<br>
                            4. Completa todos los datos (nombre, descripción, dirección, redes sociales)<br>
                            5. Sube el logo de tu empresa<br>
                            6. ¡Listo! Tu empresa está publicada
                        </p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Cómo agrego productos a mi catálogo?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            1. Ve a "Mis Productos" en el menú de empresa<br>
                            2. Haz clic en "Agregar Producto"<br>
                            3. Completa: nombre, descripción, precio, stock, categoría<br>
                            4. Sube fotos del producto<br>
                            5. Marca si es destacado (opcional)<br>
                            6. El producto estará visible inmediatamente
                        </p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Cómo veo las estadísticas de mi empresa?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            1. Abre el menú de usuario<br>
                            2. Selecciona "Estadísticas"<br>
                            3. Verás métricas como:<br>
                            - Total de productos activos/inactivos<br>
                            - Stock total<br>
                            - Calificaciones y comentarios<br>
                            - Distribución por categorías<br>
                            - Productos recientes
                        </p>
                    </div>
                </div>

                <div class="faq-item bg-white rounded-xl shadow-lg overflow-hidden">
                    <button onclick="toggleFaq(this)" class="w-full px-6 py-4 text-left flex items-center justify-between hover:bg-gray-50 transition-colors">
                        <h3 class="text-lg font-semibold text-gray-800">¿Cómo creo eventos para promocionar mi negocio?</h3>
                        <svg class="w-6 h-6 text-gray-400 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </button>
                    <div class="faq-answer px-6 pb-4">
                        <p class="text-gray-600">
                            1. Ve a "Mis Eventos" desde el menú<br>
                            2. Haz clic en "Crear Evento"<br>
                            3. Completa: título, descripción, fechas, ubicación<br>
                            4. Define capacidad y precio (puede ser gratis)<br>
                            5. El evento aparecerá en el calendario público<br>
                            6. Los clientes podrán verlo y consultarlo
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sección de Contacto -->
        <div id="contacto" class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl shadow-2xl p-12 text-white">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-4xl font-bold mb-4">¿Necesitas más ayuda?</h2>
                <p class="text-xl mb-8 opacity-90">
                    Nuestro equipo está aquí para ayudarte. Contáctanos por cualquiera de estos medios:
                </p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="bg-white bg-opacity-20 rounded-xl p-6 backdrop-blur-sm">
                        <svg class="w-12 h-12 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
                            <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
                        </svg>
                        <h3 class="font-bold text-lg mb-2">Email</h3>
                        <p>soporte@tallart.com</p>
                    </div>
                    
                    <div class="bg-white bg-opacity-20 rounded-xl p-6 backdrop-blur-sm">
                        <svg class="w-12 h-12 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
                        </svg>
                        <h3 class="font-bold text-lg mb-2">Teléfono</h3>
                        <p>+591 123 45678</p>
                    </div>
                    
                    <div class="bg-white bg-opacity-20 rounded-xl p-6 backdrop-blur-sm">
                        <svg class="w-12 h-12 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                        </svg>
                        <h3 class="font-bold text-lg mb-2">Horario</h3>
                        <p>Lun - Vie: 9:00 - 18:00</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
function toggleFaq(button) {
    const answer = button.nextElementSibling;
    const icon = button.querySelector('svg');
    
    // Toggle la respuesta
    answer.classList.toggle('active');
    icon.classList.toggle('rotate-180');
}

// Funcionalidad de búsqueda
document.getElementById('search-help').addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const faqItems = document.querySelectorAll('.faq-item');
    
    faqItems.forEach(item => {
        const question = item.querySelector('h3').textContent.toLowerCase();
        const answer = item.querySelector('.faq-answer').textContent.toLowerCase();
        
        if (question.includes(searchTerm) || answer.includes(searchTerm)) {
            item.style.display = 'block';
        } else {
            item.style.display = searchTerm === '' ? 'block' : 'none';
        }
    });
});
</script>
{% endblock %}