LauckCycles/resources/views/faq.blade.php

<x-layout title="FAQ y Manual - Lauck">
    <x-section-header subtitle="Soporte y Documentación" title="Preguntas " highlight="Frecuentes" />

    <div class="w-full max-w-4xl mx-auto space-y-8">
        
        <!-- Sección Manual de Usuario -->
        <div class="bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b border-gray-200 dark:border-neutral-800 bg-gray-50 dark:bg-neutral-800/50">
                <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
                    <svg class="w-6 h-6 text-lime-600 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                    </svg>
                    Manual de Uso Rápido
                </h2>
                <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Conceptos básicos para navegar por el sistema Lauck.</p>
            </div>
            <div class="p-6 space-y-6">
                <!-- Punto 1 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">1</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Dashboard</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">El panel principal muestra un resumen de las métricas clave, accesos directos a tus módulos más importantes y un panorama general del negocio.</p>
                    </div>
                </div>
                <!-- Punto 2 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">2</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Stock y Productos</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Registra bicicletas, accesorios y repuestos. Mantén las cantidades actualizadas para evitar quiebres de inventario mediante la gestión de tu stock.</p>
                    </div>
                </div>
                <!-- Punto 3 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">3</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Taller</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Administra la agenda de reparaciones, asigna estados (pendiente, en proceso, listo) y mantén un registro de los servicios realizados a cada cliente.</p>
                    </div>
                </div>
                <!-- Punto 4 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">4</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Ventas y Clientes</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Genera nuevas ventas, consulta el historial, y gestiona la base de datos de tus clientes para ofrecer un servicio más personalizado.</p>
                    </div>
                </div>
                <!-- Punto 5 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">5</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Proveedores y Pedidos</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Administra la información de tus proveedores y genera órdenes de compra para reabastecer tu inventario de forma organizada.</p>
                    </div>
                </div>
                <!-- Punto 6 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">6</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Control de Gastos</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Registra los gastos operativos del local (servicios, insumos, etc.) para tener un control financiero preciso de tu negocio.</p>
                    </div>
                </div>
                <!-- Punto 7 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">7</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Agenda de Turnos</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Organiza las reservas y turnos de los clientes mediante un calendario integrado, facilitando la planificación del tiempo en el taller.</p>
                    </div>
                </div>
                <!-- Punto 8 -->
                <div class="flex gap-4">
                    <div class="flex-shrink-0 w-8 h-8 rounded-full bg-lime-100 dark:bg-lime-900/30 flex items-center justify-center text-lime-600 dark:text-neon-lime font-bold">8</div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Copias de Seguridad (Admin)</h3>
                        <p class="text-gray-600 dark:text-gray-400 mt-1">Si tienes rol de administrador, puedes generar, descargar y restaurar copias de seguridad de la base de datos para proteger la información del sistema.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preguntas Frecuentes -->
        <h2 class="text-2xl font-bold text-gray-900 dark:text-white mt-10 mb-6 flex items-center gap-2">
            <svg class="w-6 h-6 text-lime-600 dark:text-neon-lime" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Preguntas Frecuentes (FAQ)
        </h2>
        
        <div class="space-y-4">
            <!-- FAQ 1 -->
            <details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
                    <span>¿Cómo agrego un nuevo producto al stock?</span>
                    <span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
                        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                    </span>
                </summary>
                <div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
                    <p>Dirígete a la sección <strong>Stock</strong> desde el menú principal, haz clic en el botón superior derecho de agregar nuevo producto y completa el formulario con los detalles (SKU, nombre, precio, etc).</p>
                </div>
            </details>

            <!-- FAQ 2 -->
            <details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
                    <span>¿Puedo registrar una venta si el cliente no está registrado?</span>
                    <span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
                        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                    </span>
                </summary>
                <div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
                    <p>Sí, al crear una nueva venta desde la sección <strong>Ventas</strong> puedes seleccionar un cliente genérico ("Consumidor Final") o bien ingresar los datos de un cliente nuevo en el mismo momento para que quede registrado en tu base de datos.</p>
                </div>
            </details>

            <!-- FAQ 3 -->
            <details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
                    <span>¿Qué pasa si olvido mi contraseña?</span>
                    <span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
                        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6-6-6"></path></svg>
                    </span>
                </summary>
                <div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
                    <p>En la pantalla de inicio de sesión, haz clic en el enlace "¿Olvidaste tu contraseña?". Te enviaremos un correo electrónico con instrucciones para restablecerla de forma segura. Si el problema persiste, contacta al administrador del sistema.</p>
                </div>
            </details>
            
            <!-- FAQ 4 -->
            <details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
                    <span>¿Puedo cambiar el modo oscuro de la página por uno claro?</span>
                    <span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
                        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                    </span>
                </summary>
                <div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
                    <p>Si. El sistema se sincroniza automáticamente con el tema de tu dispositivo. Para alternar entre ambos modos, modificá la preferencia visual directamente desde la configuración de tu navegador web.</p>
                </div>
            </details>

            <!-- FAQ 5 -->
            <details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
                    <span>¿Cómo funciona el registro de gastos?</span>
                    <span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
                        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                    </span>
                </summary>
                <div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
                    <p>En la sección <strong>Gastos</strong>, puedes registrar las salidas de dinero del negocio (por ejemplo, pago de servicios, compra de insumos, mantenimiento). Esto te ayudará a tener una visión más clara de la rentabilidad real de la tienda.</p>
                </div>
            </details>

            <!-- FAQ 6 -->
            <details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
                    <span>¿Es seguro el sistema? ¿Cómo evito perder información?</span>
                    <span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
                        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                    </span>
                </summary>
                <div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50">
                    <p>Los administradores tienen acceso al módulo de <strong>Copias de Seguridad (Backups)</strong>. Desde allí, puedes generar y descargar respaldos de tu base de datos en cualquier momento. Te recomendamos hacer copias periódicas por seguridad y resguardarlas fuera del servidor.</p>
                </div>
            </details>
        </div>
        <details class="group bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-800 rounded-lg shadow-sm [&_summary::-webkit-details-marker]:hidden">
                <summary class="flex items-center justify-between p-5 cursor-pointer font-semibold text-gray-900 dark:text-white transition-colors hover:bg-gray-50 dark:hover:bg-neutral-800/50 rounded-lg">
                    <span>¿Qué diferencias de permisos hay entre Administrador y Empleado?</span>
                    <span class="transition-transform duration-300 group-open:-rotate-180 text-gray-500">
                        <svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" viewBox="0 0 24 24" width="24"><path d="M6 9l6 6 6-6"></path></svg>
                    </span>
                </summary>
                <div class="px-5 pb-5 pt-2 text-gray-600 dark:text-gray-400 border-t border-gray-100 dark:border-neutral-800/50 space-y-3">
                    <p>El sistema cuenta con dos niveles de acceso para garantizar la seguridad de la información:</p>
                    <ul class="list-disc pl-5 space-y-1">
                        <li><strong>Administrador (Dueño):</strong> Tiene control total del sistema. Posee acceso exclusivo al módulo de personal (para dar de alta, baja o modificar empleados). Además, es el <strong>único</strong> autorizado para modificar o eliminar registros en el sistema (productos, clientes, proveedores, etc.).</li>
                        <li><strong>Empleado:</strong> Tiene un acceso diseñado específicamente para la operatoria diaria del local. Puede agregar nuevos registros (crear ventas, cargar clientes nuevos, agendar turnos en el taller), pero <strong>no puede modificar ni eliminar</strong> información ya guardada.</li>
                    </ul>
                </div>
            </details>
        <div id="contact" class="mt-8 p-6 bg-lime-50 dark:bg-lime-900/10 border border-lime-200 dark:border-lime-900/30 rounded-xl text-center shadow-sm">
            <h3 class="text-lg font-bold text-lime-800 dark:text-neon-lime mb-2">¿Necesitas más ayuda?</h3>
            <p class="text-sm text-lime-700 dark:text-gray-400 mb-5">Si tienes alguna otra duda o experimentas problemas técnicos, nuestro equipo de soporte está disponible para ayudarte.</p>
            <a href="mailto:soporte@lauck.com" class="inline-flex items-center justify-center px-6 py-3 text-sm font-bold text-neutral-900 bg-lime-400 dark:bg-neon-lime rounded-lg hover:bg-lime-500 hover:dark:bg-[#b3e600] transition-colors shadow-lg shadow-lime-500/20 dark:shadow-neon-lime/20 transform hover:-translate-y-0.5 duration-200 uppercase tracking-wide">
                Contactar a Soporte
            </a>
        </div>
    </div>
</x-layout>