<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contacto y Reservas | Rumbo Chiapas</title>
    <!-- Incluyendo Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8f8f8;
        }
        .contact-card {
            background-color: #ffffff;
            transition: box-shadow 0.3s ease;
        }
        .contact-card:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .input-style {
            border: 1px solid #d1d5db; /* gray-300 */
            border-radius: 0.5rem; /* rounded-lg */
            padding: 0.75rem;
            width: 100%;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        .input-style:focus {
            border-color: #3b82f6; /* blue-500 */
            outline: none;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        .submit-btn {
            background-color: #1d4ed8; /* blue-700 */
            transition: all 0.3s ease;
        }
        .submit-btn:hover {
            background-color: #3b82f6; /* blue-500 */
            transform: translateY(-1px);
        }
        /* Estilos específicos para la sección de información */
        .info-section {
            background-color: #1e3a8a; /* blue-900 */
            color: white;
        }
    </style>
</head>
<body class="min-h-screen">

    <!-- Contenedor Principal (Simulando #imCell_1) -->
    <div class="max-w-6xl mx-auto p-4 sm:p-6 lg:p-8">

        <header class="text-center py-10 mb-8">
            <h1 class="text-4xl sm:text-5xl font-extrabold text-gray-800 mb-2">
                ¿LISTO PARA TU AVENTURA? CONTÁCTANOS
            </h1>
            <p class="text-xl text-blue-600 font-medium">
                Estamos aquí para ayudarte a planear el viaje perfecto a Chiapas.
            </p>
        </header>

        <!-- Contenido de Dos Columnas (Simulando #imCell_2 y #imCell_3) -->
        <div class="flex flex-col lg:flex-row gap-8">

            <!-- Columna Izquierda: Formulario de Contacto (Simulando #imCell_2) -->
            <section class="lg:w-1/2 w-full contact-card p-6 sm:p-8 rounded-xl shadow-2xl">
                <h2 class="text-3xl font-bold text-gray-700 mb-6 border-b pb-3">Envíanos un Mensaje Directo</h2>
                
                <!-- Formulario -->
                <form id="imObjectForm_2" class="space-y-4" onsubmit="handleFormSubmit(event)">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nombre Completo <span class="text-red-500">*</span></label>
                        <input type="text" id="name" name="name" placeholder="Tu Nombre" required class="input-style">
                    </div>
                    
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico <span class="text-red-500">*</span></label>
                        <input type="email" id="email" name="email" placeholder="ejemplo@correo.com" required class="input-style">
                    </div>
                    
                    <div>
                        <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Teléfono (WhatsApp)</label>
                        <input type="tel" id="phone" name="phone" placeholder="+52 967 XXX XX XX" class="input-style">
                    </div>

                    <div>
                        <label for="interest" class="block text-sm font-medium text-gray-700 mb-1">Tema de Interés</label>
                        <select id="interest" name="interest" class="input-style">
                            <option value="paquetes">Paquetes de 3, 4, 6 Días</option>
                            <option value="tours-individuales">Tours de 1 Día</option>
                            <option value="cotizacion">Cotización Personalizada</option>
                            <option value="otro">Otro / Duda General</option>
                        </select>
                    </div>

                    <div>
                        <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Tu Mensaje <span class="text-red-500">*</span></label>
                        <textarea id="message" name="message" rows="4" placeholder="Cuéntanos sobre tu viaje ideal: fechas, número de personas, y lo que te gustaría visitar." required class="input-style"></textarea>
                    </div>

                    <button type="submit" class="submit-btn text-white font-bold py-3 rounded-xl uppercase tracking-wider w-full shadow-lg" id="imObjectForm_2_submit">
                        ENVIAR CONSULTA
                    </button>
                    
                    <div id="form-status" class="mt-4 text-center text-sm font-semibold hidden"></div>
                </form>
            </section>

            <!-- Columna Derecha: Información de Contacto y Mapa (Simulando #imCell_3) -->
            <section class="lg:w-1/2 w-full contact-card p-6 sm:p-8 rounded-xl shadow-2xl info-section">
                <h2 class="text-3xl font-bold mb-6 border-b border-blue-400 pb-3">Nuestra Información de Contacto</h2>

                <div class="space-y-6 text-lg">
                    <!-- WhatsApp -->
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 text-blue-400">📱</span>
                        <div>
                            <p class="font-semibold text-blue-300">WhatsApp de Reservas</p>
                            <p class="text-xl">+52 967 123 4567</p>
                            <p class="text-sm text-blue-200">Respuesta inmediata de 8:00 a 20:00 hrs (GMT-6).</p>
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 text-blue-400">📧</span>
                        <div>
                            <p class="font-semibold text-blue-300">Correo Electrónico</p>
                            <p class="text-xl break-words">reservas@rumbochiapas.com</p>
                            <p class="text-sm text-blue-200">Para cotizaciones detalladas y documentos.</p>
                        </div>
                    </div>

                    <!-- Ubicación -->
                    <div class="flex items-start">
                        <span class="text-2xl mr-4 text-blue-400">📍</span>
                        <div>
                            <p class="font-semibold text-blue-300">Oficina Principal (Solo Citas)</p>
                            <p class="text-xl">Calle Real de Guadalupe #10, Centro Histórico, SCLC.</p>
                            <p class="text-sm text-blue-200">A 2 cuadras del Parque Central.</p>
                        </div>
                    </div>
                </div>

                <!-- Mapa Placeholder (Google Maps Embed URL simulado) -->
                <div class="mt-8 pt-4 border-t border-blue-800">
                    <h3 class="text-2xl font-bold mb-3">¿Dónde Estamos?</h3>
                    <div class="w-full aspect-video rounded-lg overflow-hidden shadow-lg border-4 border-blue-400">
                        <!-- Usamos un placeholder para el mapa de Google Maps, el cual usualmente se inserta vía un iframe -->
                        <img src="https://placehold.co/600x400/3b82f6/ffffff?text=Ubicaci%C3%B3n+San+Crist%C3%B3bal+de+las+Casas" 
                             alt="Placeholder para la ubicación de la oficina en San Cristóbal de las Casas" 
                             class="w-full h-full object-cover" 
                             onerror="this.onerror=null; this.src='https://placehold.co/600x400/9ca3af/ffffff?text=Mapa+No+Disponible';">
                    </div>
                    <p class="text-xs text-blue-300 mt-2 text-center">Puedes encontrarnos en el corazón del Centro Histórico.</p>
                </div>
            </section>
        </div>
        
    </div>

    <!-- Script para manejo de formulario (simulado) -->
    <script type="text/javascript">
        function handleFormSubmit(event) {
            event.preventDefault(); // Detener el envío tradicional del formulario
            
            const formStatus = document.getElementById('form-status');
            const submitBtn = document.getElementById('imObjectForm_2_submit');
            
            // Simulación de envío
            submitBtn.disabled = true;
            submitBtn.textContent = 'Enviando...';
            formStatus.classList.remove('hidden', 'text-green-600', 'text-red-600');
            formStatus.textContent = 'Procesando tu solicitud...';
            formStatus.classList.add('text-gray-600');

            // Simular un retraso de red
            setTimeout(() => {
                // Simulación de éxito
                formStatus.textContent = '¡Mensaje Enviado con Éxito! Te contactaremos pronto.';
                formStatus.classList.remove('text-gray-600');
                formStatus.classList.add('text-green-600');
                document.getElementById('imObjectForm_2').reset(); // Limpiar formulario

                // Resetear botón después de 3 segundos
                setTimeout(() => {
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'ENVIAR CONSULTA';
                    formStatus.classList.add('hidden');
                }, 3000);

            }, 2000); 

            // Nota: En una aplicación real, aquí se usaría 'fetch' para enviar los datos a un servidor.
        }
    </script>
</body>
</html>