<?php
include("db.php"); 

// 1. OBTENER LOS DATOS DINÁMICOS DE CONFIGURACIÓN DEL BOT
$config = [
    'telefono' => '0343 423-1400', // Valores por defecto por las dudas
    'pago' => 'efectivo y transferencia bancaria'
];

// 2. OBTENER LAS PREGUNTAS CLAVE PARA LOS BOTONES DE LA VISTA PREVIA
$preguntas_bot = [];
$res_preguntas = $conexion->query("SELECT pregunta, keywords FROM bot_preguntas ORDER BY id ASC LIMIT 4");
if ($res_preguntas) {
    while($row = $res_preguntas->fetch_assoc()) {
        $preguntas_bot[] = $row;
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ayuda - La Pecosa</title>
    <link rel="stylesheet" href="css/all.min.css">
    <link rel="stylesheet" href="../diseño.css">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: 'Segoe UI', Roboto, sans-serif;
            background: #fffef8;
            color: #1a1a1a;
            min-height: 100vh;
        }

        /* ── HERO ── */
        .help-hero {
            background: #e02828;
            color: white;
            padding: 48px 40px 40px;
            text-align: center;
        }
        .help-hero h1 {
            font-size: 2rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-bottom: 8px;
        }
        .help-hero p {
            font-size: 1rem;
            opacity: 0.88;
            max-width: 500px;
            margin: 0 auto;
            line-height: 1.5;
        }

        /* ── TABS ── */
        .tabs-wrapper {
            background: white;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        }
        .tabs-menu {
            display: flex;
            max-width: 860px;
            margin: 0 auto;
            padding: 0 20px;
            gap: 4px;
            overflow-x: auto;
        }
        .tab-btn {
            background: none;
            border: none;
            padding: 16px 20px;
            font-size: 0.9rem;
            font-weight: 600;
            color: #888;
            cursor: pointer;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 7px;
        }
        .tab-btn:hover { color: #e02828; }
        .tab-btn.active {
            color: #e02828;
            border-bottom-color: #e02828;
        }

        /* ── CONTENIDO ── */
        .help-body {
            max-width: 860px;
            margin: 0 auto;
            padding: 40px 20px 80px;
        }
        .tab-content { display: none; }
        .tab-content.active {
            display: block;
            animation: fadeUp 0.3s ease;
        }
        @keyframes fadeUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        /* ── SECCIÓN INTRO ── */
        .section-intro {
            margin-bottom: 32px;
        }
        .section-intro h2 {
            font-size: 1.4rem;
            font-weight: 800;
            color: #111;
            margin-bottom: 6px;
        }
        .section-intro p {
            color: #666;
            font-size: 0.92rem;
            line-height: 1.5;
        }

        /* ── PASOS ── */
        .steps-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 36px;
        }
        .step-card {
            background: white;
            border: 1px solid #efefef;
            border-radius: 12px;
            padding: 20px 22px;
            display: flex;
            gap: 18px;
            align-items: flex-start;
            transition: box-shadow 0.2s;
        }
        .step-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
        .step-num {
            background: #e02828;
            color: white;
            font-weight: 800;
            font-size: 0.85rem;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }
        .step-body h3 {
            font-size: 1rem;
            font-weight: 700;
            color: #111;
            margin-bottom: 5px;
        }
        .step-body p {
            font-size: 0.88rem;
            color: #555;
            line-height: 1.55;
        }

        /* ── SIMULACIÓN ── */
        .sim-box {
            background: #fff8f8;
            border: 1px dashed #f5c0c0;
            border-radius: 10px;
            padding: 20px 22px;
            margin-top: 10px;
        }
        .sim-box .sim-title {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #e02828;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .sim-box ol {
            padding-left: 18px;
            font-size: 0.875rem;
            color: #444;
            line-height: 1.8;
        }
        .sim-box ul {
            padding-left: 18px;
            font-size: 0.875rem;
            color: #444;
            line-height: 1.8;
        }

        /* ── BADGE ── */
        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 5px;
            font-size: 0.78rem;
            font-weight: 700;
        }
        .badge-pendiente { background: #fef3c7; color: #856404; }
        .badge-retirar  { background: #d1fae5; color: #0c5460; }
        .badge-cancelado    { background: #fee2e2; color: #721c24; }
        .badge-preparacion   { background: #f1f5f9; color: #475569; }

        /* ── FAQ ── */
        .faq-list { display: flex; flex-direction: column; gap: 10px; }
        .faq-item {
            background: white;
            border: 1px solid #efefef;
            border-radius: 10px;
            overflow: hidden;
        }
        .faq-question {
            width: 100%;
            background: none;
            border: none;
            padding: 16px 20px;
            text-align: left;
            font-size: 0.92rem;
            font-weight: 600;
            color: #111;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            transition: background 0.15s;
        }
        .faq-question:hover { background: #fafafa; }
        .faq-question .faq-icon {
            color: #e02828;
            font-size: 0.8rem;
            flex-shrink: 0;
            transition: transform 0.2s;
        }
        .faq-question.open .faq-icon { transform: rotate(180deg); }
        .faq-answer {
            display: none;
            padding: 0 20px 16px;
            font-size: 0.875rem;
            color: #555;
            line-height: 1.6;
            border-top: 1px solid #f5f5f5;
            padding-top: 14px;
        }
        .faq-answer.open { display: block; }

        /* ── CHATBOT DEMO (Fiel a la realidad) ── */
        .chat-demo {
            background: white;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
            border: 1px solid #eaeaea;
            overflow: hidden;
            max-width: 400px; /* Lo ajustamos para que tenga forma de widget vertical */
            margin: 0 auto;
        }
        .chat-demo-header {
            background: #e02828;
            color: white;
            padding: 16px 20px;
            font-weight: 700;
            font-size: 1.05rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .chat-demo-header .header-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .chat-demo-header .close-bot {
            font-size: 1.2rem;
            opacity: 0.8;
            cursor: pointer;
        }
        .chat-demo-body {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            background: #fff;
            min-height: 250px;
        }
        
        /* Burbujas reales */
        .chat-bubble {
            max-width: 85%;
            padding: 12px 16px;
            border-radius: 14px;
            font-size: 0.9rem;
            line-height: 1.4;
            position: relative;
        }
        .bubble-bot {
            background: #fff;
            color: #1a1a1a;
            align-self: flex-start;
            border-top-left-radius: 4px;
            border: 1px solid #eaeaea;
            box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        }
        /* Línea roja decorativa al costado de la burbuja del bot */
        .bubble-bot::before {
            content: '';
            position: absolute;
            left: 4px;
            top: 12px;
            bottom: 12px;
            width: 3px;
            background: #e02828;
            border-radius: 2px;
        }
        .bubble-bot-text {
            padding-left: 8px;
        }
        .bubble-user {
            background: #f1f5f9;
            color: #334155;
            align-self: flex-end;
            border-bottom-right-radius: 4px;
        }

        /* Footer del chat: Input y sugerencias */
        .chat-demo-footer {
            padding: 15px 20px;
            background: #fff;
            border-top: 1px solid #f3f3f3;
        }
        .chat-input-row {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 8px;
        }
        .fake-input {
            flex: 1;
            border: 1.5px solid #e02828;
            border-radius: 25px;
            padding: 10px 18px;
            font-size: 0.9rem;
            color: #777;
            background: #fff;
        }
        .fake-send-btn {
            background: #e02828;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            box-shadow: 0 2px 8px rgba(224, 40, 40, 0.3);
        }
        
        /* Sugerencias en minúscula */
        .chat-keywords-row {
            font-size: 0.8rem;
            color: #a0a0a0;
            text-align: center;
            word-spacing: 2px;
            padding-top: 2px;
        }
        .chat-keywords-row span {
            color: #a0a0a0;
        }

        /* ── BOTONES OPCIONES CHATBOT ── */
        .chat-options-demo {
            padding: 14px 20px;
            background: #fafafa;
            border-top: 1px solid #f0f0f0;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .opt-demo {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            padding: 6px 14px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* ── ALERTA INFO ── */
        .info-banner {
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: 10px;
            padding: 14px 18px;
            font-size: 0.875rem;
            color: #78350f;
            margin-bottom: 24px;
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }
        .info-banner i { margin-top: 2px; flex-shrink: 0; }

        /* ── VOLVER ── */
        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #e02828;
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 28px;
            transition: opacity 0.2s;
        }
        .back-link:hover { opacity: 0.75; }

        /* ── RESPONSIVE ── */
        @media (max-width: 600px) {
            .help-hero { padding: 36px 20px 30px; }
            .help-hero h1 { font-size: 1.5rem; }
            .tabs-menu { gap: 0; }
            .tab-btn { padding: 14px 14px; font-size: 0.82rem; }
        }
    </style>
</head>
<body>

<div class="help-hero">
    <h1><i class="fa-solid fa-circle-question"></i> Centro de Ayuda</h1>
    <p>Todo lo que necesitás saber para hacer tu pedido en La Pecosa.</p>
</div>

<div class="tabs-wrapper">
    <div class="tabs-menu">
        <button class="tab-btn active" onclick="switchTab(event, 'tab-pedido')">
            <i class="fa-solid fa-bag-shopping"></i> Hacer un pedido
        </button>
        <button class="tab-btn" onclick="switchTab(event, 'tab-cuenta')">
            <i class="fa-solid fa-user"></i> Mi cuenta
        </button>
        <button class="tab-btn" onclick="switchTab(event, 'tab-chatbot')">
            <i class="fa-solid fa-comments"></i> Asistente virtual
        </button>
        <button class="tab-btn" onclick="switchTab(event, 'tab-faq')">
            <i class="fa-solid fa-circle-info"></i> Preguntas frecuentes
        </button>
    </div>
</div>

<div class="help-body">

    <a href="index.php" class="back-link">
        <i class="fa-solid fa-arrow-left"></i> Volver al inicio
    </a>

    <!-- ══ PESTAÑA 1: HACER UN PEDIDO ══ -->
    <div id="tab-pedido" class="tab-content active">

        <div class="section-intro">
            <h2>¿Cómo hacer un pedido?</h2>
            <p>Seguí estos pasos para completar tu compra sin inconvenientes.</p>
        </div>

        <div class="steps-list">

            <div class="step-card">
                <div class="step-num">1</div>
                <div class="step-body">
                    <h3>Iniciá sesión</h3>
                    <p>Para poder realizar un pedido necesitás tener una cuenta. Si todavía no te registraste, hacé clic en <strong>Login</strong> en el menú superior y completá tus datos.</p>
                </div>
            </div>

            <div class="step-card">
                <div class="step-num">2</div>
                <div class="step-body">
                    <h3>Explorá el catálogo</h3>
                    <p>Usá el menú <strong>Categorías</strong> para filtrar por tipo de producto: Rotisería, Carnes, Bebidas, Almacén y más. Los productos sin stock aparecen deshabilitados automáticamente.</p>
                </div>
            </div>

            <div class="step-card">
                <div class="step-num">3</div>
                <div class="step-body">
                    <h3>Agregá productos al carrito</h3>
                    <p>Hacé clic en <strong>"Agregar"</strong> en cada producto que quieras. El contador de pedido en la barra inferior se actualiza en tiempo real con la cantidad y el total acumulado.</p>
                </div>
            </div>

            <div class="step-card">
                <div class="step-num">4</div>
                <div class="step-body">
                    <h3>Revisá tu carrito y confirmá</h3>
                    <p>Ingresá a tu carrito haciendo clic en <strong>PEDIDO</strong> (barra roja inferior). Desde ahí podés modificar cantidades, eliminar productos y confirmar la compra.</p>

                    <div class="sim-box" style="margin-top: 14px;">
                        <div class="sim-title"><i class="fa-solid fa-list-check"></i> Ejemplo de pedido</div>
                        <ol>
                            <li>Seleccionás <strong>1x Milanesa napolitana</strong> y <strong>2x Empanadas de carne</strong>.</li>
                            <li>El total se calcula automáticamente en el carrito.</li>
                            <li>Presionás <strong>"Confirmar pedido"</strong>.</li>
                            <li>El sistema verifica que el local esté en horario de atención y que haya stock disponible.</li>
                            <li>Tu pedido queda registrado con estado <span class="badge badge-yellow">Pendiente</span> y recibís una confirmación por mensaje vía Whatsapp.</li>
                        </ol>
                    </div>
                </div>
            </div>

            <div class="step-card">
                <div class="step-num">5</div>
                <div class="step-body">
                    <h3>Seguí el estado de tu pedido</h3>
                    <p>Una vez confirmado, el local procesa tu pedido. Los estados posibles son:</p>
                    <div style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px;">
                        <span class="badge badge-pendiente">Pendiente</span>
                        <span class="badge badge-preparacion">En preparación</span>
                        <span class="badge badge-retirar">Listo para retirar</span>
                        <span class="badge badge-cancelado">Cancelado</span>
                    </div>
                </div>
            </div>

        </div>

        <div class="info-banner">
            <i class="fa-solid fa-clock"></i>
            <div>
                <strong>Horarios de atención:</strong> Lunes a Sábado de 08:30 a 13:30 y de 17:30 a 21:00 · Domingos de 09:00 a 13:00. Los pedidos solo se pueden realizar dentro de este horario.
            </div>
        </div>

    </div>

    <!-- ══ PESTAÑA 2: MI CUENTA ══ -->
    <div id="tab-cuenta" class="tab-content">

        <div class="section-intro">
            <h2>Gestión de tu cuenta</h2>
            <p>Todo lo que podés hacer desde tu perfil de usuario.</p>
        </div>

        <div class="steps-list">

            <div class="step-card">
                <div class="step-num"><i class="fa-solid fa-user-plus" style="font-size:0.75rem;"></i></div>
                <div class="step-body">
                    <h3>Crear una cuenta</h3>
                    <p>Hacé clic en <strong>Login</strong> en el menú superior y luego en <strong>"Registrate gratis"</strong>. Completá tu nombre, email y contraseña. Una vez registrado, podés empezar a pedir de inmediato.</p>
                </div>
            </div>

            <div class="step-card">
                <div class="step-num"><i class="fa-solid fa-right-to-bracket" style="font-size:0.75rem;"></i></div>
                <div class="step-body">
                    <h3>Iniciar sesión</h3>
                    <p>Ingresá tu email y contraseña en la pantalla de login. Si no la recordás, usá la opción <strong>"¿Olvidaste tu contraseña?"</strong> para recibir un código de verificación en tu correo.</p>
                </div>
            </div>

            <div class="step-card">
                <div class="step-num"><i class="fa-solid fa-key" style="font-size:0.75rem;"></i></div>
                <div class="step-body">
                    <h3>Recuperar contraseña</h3>
                    <p>Si olvidaste tu clave, el sistema te envía un código de 6 dígitos a tu email. Tenés <strong>15 minutos</strong> para ingresarlo antes de que expire. Seguí los 3 pasos que aparecen en pantalla.</p>

                    <div class="sim-box" style="margin-top: 14px;">
                        <div class="sim-title"><i class="fa-solid fa-rotate-right"></i> Pasos para recuperar tu contraseña</div>
                        <ol>
                            <li>Ingresás tu email registrado y presionás <strong>"Enviar código"</strong>.</li>
                            <li>Revisás tu casilla y escribís el código de 6 dígitos recibido.</li>
                            <li>Escribís tu nueva contraseña dos veces y confirmás el cambio.</li>
                        </ol>
                    </div>
                </div>
            </div>

            <div class="step-card">
                <div class="step-num"><i class="fa-solid fa-right-from-bracket" style="font-size:0.75rem;"></i></div>
                <div class="step-body">
                    <h3>Cerrar sesión</h3>
                    <p>Hacé clic en <strong>SALIR</strong> en el menú superior. Tu carrito se vaciará al cerrar la sesión, así que asegurate de confirmar tu pedido antes.</p>
                </div>
            </div>

        </div>
    </div>

    <!-- ══ PESTAÑA 3: CHATBOT DINÁMICO ══ -->
    <div id="tab-chatbot" class="tab-content">

        <div class="section-intro">
            <h2>Asistente virtual de La Pecosa</h2>
            <p>El asistente virtual está disponible en la esquina inferior derecha de la página principal. Te responde al instante las consultas más comunes.</p>
        </div>

        <div class="steps-list" style="margin-bottom: 28px;">
            <div class="step-card">
                <div class="step-num"><i class="fa-solid fa-comment-dots" style="font-size:0.75rem;"></i></div>
                <div class="step-body">
                    <h3>¿Para qué sirve?</h3>
                    <p>El bot responde preguntas frecuentes sobre horarios, métodos de pago, novedades, promociones y ubicación sin que necesites esperar atención del local. Para pedidos o consultas específicas, pedí el número y vas a poder llamar al local. En caso de consultas fuera de lugar, se permiten hasta tres intentos y luego se restringe por 10 minutos el chat.</p>
                </div>
            </div>
            <div class="step-card">
                <div class="step-num"><i class="fa-solid fa-hand-pointer" style="font-size:0.75rem;"></i></div>
                <div class="step-body">
                    <h3>¿Cómo se usa?</h3>
                    <p>Hacé clic en el botón rojo <i class="fa-solid fa-comments" style="color:#e02828;"></i> que aparece en la esquina inferior derecha. Luego escribí tu consulta o seleccioná una de las palabras clave para obtener una respuesta inmediata.</p>
                </div>
            </div>
        </div>

        <p style="font-size: 0.85rem; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px;">Vista previa del asistente virtual</p>

        <div class="chat-demo">
            <!-- Cabecera con la X de cierre -->
            <div class="chat-demo-header">
                <span class="header-title">🍎 La Pecosa Asistente Virtual</span>
                <span class="close-bot"><i class="fa-solid fa-xmark"></i></span>
            </div>
            
            <!-- Cuerpo de la conversación -->
            <div class="chat-demo-body">
                <div class="chat-bubble bubble-bot">
                    <div class="bubble-bot-text">¡Hola! Soy el asistente de La Pecosa 🍎 ¿En qué puedo ayudarte?</div>
                </div>
                
                <div class="chat-bubble bubble-user">
                    ¿Aceptan tarjeta?
                </div>
                
                <div class="chat-bubble bubble-bot">
                    <div class="bubble-bot-text">Aceptamos <strong><?php echo htmlspecialchars($config['pago']); ?></strong>. Al retirar tu pedido podés coordinar el método de pago con el local.</div>
                </div>
            </div>
            
            <!-- Footer con Input y palabras clave en línea -->
            <div class="chat-demo-footer">
                <div class="chat-input-row">
                    <div class="fake-input">Escribí tu consulta...</div>
                    <div class="fake-send-btn"><i class="fa-solid fa-paper-plane"></i></div>
                </div>
                
                <div class="chat-keywords-row">
                    <?php 
                    if(!empty($preguntas_bot)) {
                        $listado_keys = [];
                        foreach($preguntas_bot as $pb) {
                            // Extraemos las keywords cargadas por el admin
                            $keys_array = explode(',', $pb['keywords']);
                            if(!empty($keys_array[0])) {
                                $listado_keys[] = strtolower(trim($keys_array[0]));
                            }
                        }
                        // Las unimos con el puntito separador tal como se ve en la app real
                        echo implode(' · ', array_unique($listado_keys));
                    } else {
                        // Fallback por si la base de datos está vacía
                        echo "horarios · ubicación · pagos · teléfono · novedades · redes";
                    }
                    ?>
                </div>
            </div>
        </div>
    </div>

    <!-- ══ PESTAÑA 4: FAQ ══ -->
    <div id="tab-faq" class="tab-content">

        <div class="section-intro">
            <h2>Preguntas frecuentes</h2>
            <p>Las dudas más comunes de nuestros clientes, respondidas.</p>
        </div>

        <div class="faq-list">

            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Necesito una cuenta para ver los productos?
                    <i class="fa-solid fa-chevron-down faq-icon"></i>
                </button>
                <div class="faq-answer">
                    No, podés explorar el catálogo sin iniciar sesión. Sin embargo, para agregar productos al carrito y confirmar un pedido sí necesitás estar registrado y haber iniciado sesión.
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Puedo hacer un pedido fuera del horario de atención?
                    <i class="fa-solid fa-chevron-down faq-icon"></i>
                </button>
                <div class="faq-answer">
                    No. El sistema valida automáticamente que el local esté abierto al momento de confirmar. Si intentás pedir fuera del horario, vas a ver un aviso indicando que el local está cerrado.
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Hacen envíos a domicilio?
                    <i class="fa-solid fa-chevron-down faq-icon"></i>
                </button>
                <div class="faq-answer">
                    ¡Sí, hacemos envíos a domicilio! Al momento de finalizar tu compra en el carrito, vas a poder seleccionar la opción de entrega a domicilio para recibir tu pedido directamente en tu casa. También mantenemos la opción tradicional de retirar en el local si lo preferís.
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Cómo sé cuándo está listo mi pedido?
                    <i class="fa-solid fa-chevron-down faq-icon"></i>
                </button>
                <div class="faq-answer">
                    El estado de tu pedido se actualiza desde el local. Podés consultarlo en tus mensajes de Whatsapp o llamar directamente al local para confirmar.
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">
                    Un producto no tiene botón para agregar, ¿qué significa?
                    <i class="fa-solid fa-chevron-down faq-icon"></i>
                </button>
                <div class="faq-answer">
                    Significa que ese producto está sin stock en este momento. El botón se reactiva automáticamente cuando el local actualiza el inventario. Podés llamar para consultar disponibilidad.
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Qué hago si no me llegó el código para recuperar mi contraseña?
                    <i class="fa-solid fa-chevron-down faq-icon"></i>
                </button>
                <div class="faq-answer">
                    Revisá tu carpeta de <strong>spam o correo no deseado</strong>. Si tampoco está ahí, esperá unos minutos y volvé a solicitarlo. El código tiene una validez de 15 minutos.
                </div>
            </div>

            <div class="faq-item">
                <button class="faq-question" onclick="toggleFaq(this)">
                    ¿Cómo puedo cancelar un pedido?
                    <i class="fa-solid fa-chevron-down faq-icon"></i>
                </button>
                <div class="faq-answer">
                    Para cancelar un pedido ya confirmado, comunicate directamente con el local al <strong><?php echo htmlspecialchars($config['telefono']); ?></strong> lo antes posible.
                </div>
            </div>

        </div>
    </div>

</div>

<script>
    function switchTab(evt, tabId) {
        document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
        document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
        document.getElementById(tabId).classList.add('active');
        evt.currentTarget.classList.add('active');
    }

    function toggleFaq(btn) {
        const answer = btn.nextElementSibling;
        const isOpen = answer.classList.contains('open');
        // Cerrar todos
        document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));
        document.querySelectorAll('.faq-question').forEach(b => b.classList.remove('open'));
        // Abrir el clickeado si estaba cerrado
        if (!isOpen) {
            answer.classList.add('open');
            btn.classList.add('open');
        }
    }
</script>

</body>
</html>