@extends('template.layout')
@section('title', 'Contacto - Globo Puerto Teotihuán')

@section('content')
    <!-- Hero Section -->
    <section class="page-header"
        style="background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); margin-top: var(--navbar-height); text-align: center; padding: 4rem 2rem; position: relative; overflow: hidden;">
        <div
            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(circle at 2px 2px, rgba(4,205,255,0.08) 1px, transparent 1px); background-size: 40px 40px;">
        </div>
        <div class="container" style="position: relative; z-index: 2;">
            <div
                style="display: inline-flex; align-items: center; gap: 8px; background: var(--surface); backdrop-filter: blur(10px); padding: 0.5rem 1.5rem; border-radius: 50px; margin-bottom: 1.5rem;">
                <i class="fas fa-headset" style="color: var(--accent);"></i>
                <span
                    style="color: var(--text-secondary); font-size: 0.85rem;">Atención 24/7</span>
            </div>
            <h1
                style="font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 1rem;">
                ¿Listo para <span
                    style="color: var(--accent);">volar</span>?
            </h1>
            <p style="color: var(--text-secondary); font-size: 1.1rem; max-width: 600px; margin: 0 auto;">
                Contáctanos y comienza tu aventura en los cielos de Teotihuacán
            </p>
        </div>
    </section>

    <!-- Tarjetas de Contacto Modernas -->
    <section class="contact-cards" style="padding: 4rem 2rem; max-width: var(--max-width); margin: 0 auto;">
        <div class="container">
            <div class="cards-grid"
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem;">

                <!-- Tarjeta 1 - Ubicación -->
                <div class="contact-card-modern"
                    style="background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 2rem; text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden;">
                    <div
                        style="position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);">
                    </div>
                    <div
                        style="width: 70px; height: 70px; background: var(--accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: transform var(--transition-fast);">
                        <i class="fas fa-map-marker-alt" style="font-size: 2rem; color: white;"></i>
                    </div>
                    <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary);">
                        Ubicación</h3>
                    <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 1rem;">
                        Carretera Federal México-Tulancingo-Ecatepec Km 28.1<br>
                        Constitucion de 1917, 55850 San Martín Centro, Méx.
                    </p>
                    <a href="https://maps.google.com/?q=Carretera+Federal+Mexico+Tulancingo+Ecatepec+Km+28.1"
                        target="_blank"
                        style="color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; transition: gap var(--transition-fast);">
                        <i class="fas fa-directions"></i> Cómo llegar
                    </a>
                </div>

                <!-- Tarjeta 2 - Teléfonos -->
                <div class="contact-card-modern"
                    style="background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 2rem; text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden;">
                    <div
                        style="position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);">
                    </div>
                    <div
                        style="width: 70px; height: 70px; background: var(--accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: transform var(--transition-fast);">
                        <i class="fas fa-phone-alt" style="font-size: 2rem; color: white;"></i>
                    </div>
                    <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary);">
                        Teléfonos</h3>
                    <div style="display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem;">
                        <a href="tel:+525651292249" id="tel1-contacto"
                            style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem; background: var(--surface-light); border-radius: 12px; text-decoration: none; color: var(--text-primary); transition: all var(--transition-fast);">
                            <i class="fab fa-whatsapp" style="color: #25D366; font-size: 1.2rem;"></i>
                            <span>WhatsApp: (+52) 56 51 29 2249</span>
                        </a>
                        <a href="tel:+56 51 29 2249" id="tel3-contacto"
                            style="display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0.75rem; background: var(--surface-light); border-radius: 12px; text-decoration: none; color: var(--text-primary); transition: all var(--transition-fast);">
                            <i class="fas fa-phone" style="color: var(--accent); font-size: 1.2rem;"></i>
                            <span>Local: (+52) 56 51 29 2249</span>
                        </a>
                    </div>
                    <p
                        style="color: var(--text-tertiary); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px;">
                        <i class="fas fa-clock"></i>
                        Lunes a Domingo: 6:00 AM - 6:00 PM
                    </p>
                </div>

                <!-- Tarjeta 3 - Correo -->
                <div class="contact-card-modern"
                    style="background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 2rem; text-align: center; transition: all var(--transition-base); position: relative; overflow: hidden;">
                    <div
                        style="position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--accent-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);">
                    </div>
                    <div
                        style="width: 70px; height: 70px; background: var(--accent-gradient); border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; transition: transform var(--transition-fast);">
                        <i class="fas fa-envelope" style="font-size: 2rem; color: white;"></i>
                    </div>
                    <h3 style="font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary);">
                        Correo Electrónico</h3>
                    <a href="mailto:contacto@globopuertoteotihuacan.com"
                        style="color: var(--accent); text-decoration: none; word-break: break-all; display: inline-block; margin-bottom: 1rem; transition: all var(--transition-fast);">
                        contacto@globopuertoteotihuacan.com
                    </a>
                    <p
                        style="color: var(--text-tertiary); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px;">
                        <i class="fas fa-reply-all"></i>
                        Tiempo de respuesta: 24 horas
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Sección de Contacto Principal con Formulario -->
    <section class="main-contact-section" style="padding: 4rem 2rem; background: var(--secondary);">
        <div class="container" style="max-width: 1200px; margin: 0 auto;">
            <div class="contact-wrapper"
                style="display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; background: var(--surface); border-radius: 32px; overflow: hidden; box-shadow: var(--shadow-lg); transition: transform var(--transition-base);">

                <!-- Panel Izquierdo - Información -->
                <div class="info-panel"
                    style="background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); padding: 3rem; position: relative; overflow: hidden;">
                    <div
                        style="position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(4,205,255,0.05) 0%, transparent 70%);">
                    </div>
                    <div style="position: relative; z-index: 2;">
                        <div class="block-title text-left" style="text-align: left;">
                            <p
                                style="color: var(--accent); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.5rem;">
                                Contáctanos</p>
                            <h3
                                style="font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary);">
                                ¿Tienes alguna pregunta?
                            </h3>
                        </div>

                        <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 2rem;">
                            Estamos aquí para ayudarte. Contáctanos y uno de nuestros ejecutivos te atenderá personalmente.
                        </p>

                        <!-- Horarios -->
                        <div style="margin-bottom: 2rem;">
                            <div class="info-row"
                                style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface-light); border-radius: 16px; margin-bottom: 1rem; transition: all var(--transition-fast);">
                                <div
                                    style="width: 45px; height: 45px; background: var(--accent-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-clock" style="color: white;"></i>
                                </div>
                                <div>
                                    <h4 style="font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary);">
                                        Horario de atención</h4>
                                    <p style="color: var(--text-secondary); font-size: 0.85rem;">
                                        Lunes a Domingo: 6:00 AM - 6:00 PM
                                    </p>
                                </div>
                            </div>
                            <div class="info-row"
                                style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--surface-light); border-radius: 16px; transition: all var(--transition-fast);">
                                <div
                                    style="width: 45px; height: 45px; background: var(--accent-gradient); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-reply-all" style="color: white;"></i>
                                </div>
                                <div>
                                    <h4 style="font-weight: 600; margin-bottom: 0.25rem; color: var(--text-primary);">
                                        Tiempo de respuesta</h4>
                                    <p style="color: var(--text-secondary); font-size: 0.85rem;">
                                        Máximo 24 horas hábiles
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Redes Sociales -->
                        <div>
                            <h4 style="font-size: 1rem; margin-bottom: 1rem; color: var(--text-primary);">
                                Síguenos en redes</h4>
                            <div style="display: flex; gap: 1rem;">
                                <a href="https://www.facebook.com/GlobopuertoTeotihuacan/" target="_blank"
                                    class="social-link-modern"
                                    style="width: 45px; height: 45px; background: var(--surface-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition-fast);">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="https://www.instagram.com/globopuerto.teotihuacan/" target="_blank"
                                    class="social-link-modern"
                                    style="width: 45px; height: 45px; background: var(--surface-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: all var(--transition-fast);">
                                    <i class="fab fa-instagram"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Panel Derecho - Formulario -->
                <div class="form-panel" style="padding: 3rem;">
                    <div style="text-align: center; margin-bottom: 2rem;">
                        <i class="fas fa-paper-plane"
                            style="font-size: 2.5rem; color: var(--accent); margin-bottom: 1rem; display: inline-block;"></i>
                        <h3 style="font-size: 1.5rem; font-weight: 700; color: var(--text-primary);">
                            Envía tu mensaje</h3>
                        <p style="color: var(--text-secondary);">
                            Completa el formulario y te responderemos pronto
                        </p>
                    </div>

                    <form id="form_contacto" class="modern-form">
                        @csrf
                        <div style="display: flex; flex-direction: column; gap: 1.25rem;">
                            <div class="form-group-modern">
                                <input type="text" id="nombre_contacto" name="nombre_contacto"
                                    placeholder="Nombre completo"
                                    style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); transition: all var(--transition-fast);">
                                <small class="error-message" id="error_nombre"
                                    style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
                            </div>

                            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
                                <div class="form-group-modern">
                                    <input type="email" id="email_contacto" name="email_contacto"
                                        placeholder="Correo electrónico"
                                        style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); transition: all var(--transition-fast);">
                                    <small class="error-message" id="error_email"
                                        style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
                                </div>
                                <div class="form-group-modern">
                                    <input type="tel" id="telefono_contacto" name="telefono_contacto"
                                        placeholder="Teléfono"
                                        style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); transition: all var(--transition-fast);">
                                    <small class="error-message" id="error_telefono"
                                        style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
                                </div>
                            </div>

                            <div class="form-group-modern">
                                <select id="asunto_contacto" name="asunto_contacto"
                                    style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); cursor: pointer; transition: all var(--transition-fast);">
                                    <option value="">
                                        Selecciona un asunto</option>
                                    <option value="reserva">Reserva de vuelo</option>
                                    <option value="informacion">Información general</option>
                                    <option value="grupos">Grupos y eventos especiales</option>
                                    <option value="queja">Sugerencia o queja</option>
                                </select>
                                <small class="error-message" id="error_asunto"
                                    style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
                            </div>

                            <div class="form-group-modern">
                                <textarea id="mensaje_contacto" name="mensaje_contacto"
                                    placeholder="Escribe tu mensaje" rows="5"
                                    style="width: 100%; padding: 1rem; background: var(--surface-light); border: 2px solid var(--border); border-radius: 12px; color: var(--text-primary); resize: vertical; transition: all var(--transition-fast);"></textarea>
                                <small class="error-message" id="error_mensaje"
                                    style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
                                <small class="char-counter" id="char_counter"
                                    style="display: block; color: var(--text-tertiary); font-size: 0.7rem; margin-top: 0.25rem; text-align: right;">0
                                    / 500 caracteres</small>
                            </div>

                            <div class="form-group-modern">
                                <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                                    <input type="checkbox" id="privacy_checkbox"
                                        style="width: 18px; height: 18px; cursor: pointer;">
                                    <span style="color: var(--text-secondary); font-size: 0.85rem;">
                                        Acepto la <a href="#"
                                            style="color: var(--accent); text-decoration: none;">política de privacidad</a>
                                    </span>
                                </label>
                                <small class="error-message" id="error_privacy"
                                    style="display: none; color: #ff4444; font-size: 0.75rem; margin-top: 0.25rem;"></small>
                            </div>

                            <button type="button" id="btnEnviarContacto" onclick="formularioContacto()"
                                style="width: 100%; padding: 1rem; background: var(--accent-gradient); border: none; border-radius: 12px; color: white; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all var(--transition-base); display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; overflow: hidden;">
                                <span class="btn-text">Enviar mensaje</span>
                                <span class="btn-loader" style="display: none;"><i class="fas fa-spinner fa-spin"></i></span>
                                <i class="fas fa-arrow-right"></i>
                            </button>
                        </div>
                    </form>

                    <div id="mensaje_div" style="margin-top: 1rem;"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- Mapa de Ubicación -->
    <section class="map-section" style="padding: 4rem 2rem; max-width: var(--max-width); margin: 0 auto;">
        <div class="container">
            <div class="map-container-modern"
                style="background: var(--surface); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-lg); transition: all var(--transition-base);">
                <div style="padding: 1.5rem; text-align: center; border-bottom: 1px solid var(--border);">
                    <i class="fas fa-map-marked-alt"
                        style="font-size: 2rem; color: var(--accent); margin-bottom: 0.5rem; display: inline-block;"></i>
                    <h3 style="font-size: 1.3rem; font-weight: 700; color: var(--text-primary);">
                        Encuéntranos</h3>
                    <p style="color: var(--text-secondary); margin-top: 0.5rem;">
                        Visítanos en nuestras instalaciones en Teotihuacán
                    </p>
                </div>
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3762.5432!2d-98.8595!3d19.6896!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x85d1b7c8b9e3d8f7%3A0x8b7c6f5e4d3c2b1a!2sCarretera%20Federal%20Mexico-Tulancingo%20Ecatepec%20Km%2028.1!5e0!3m2!1ses!2smx!4v1700000000000!5m2!1ses!2smx"
                    width="100%" height="350"
                    style="border:0; display: block; filter: grayscale(0.3); transition: filter var(--transition-base);"
                    allowfullscreen="" loading="lazy"
                    title="Ubicación Globopuerto Teotihuacán">
                </iframe>
            </div>
        </div>
    </section>
@endsection

@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
<link rel="stylesheet" href="{{ asset('assets/css/contacto.css') }}">
<style>
    /* Estilos adicionales para hover effects */
    .contact-card-modern:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }
    
    .contact-card-modern:hover > div:first-child {
        transform: scaleX(1);
    }
    
    .contact-card-modern:hover .contact-icon {
        transform: scale(1.1);
    }
    
    .info-row:hover {
        transform: translateX(5px);
        background: var(--surface) !important;
    }
    
    .social-link-modern:hover {
        transform: translateY(-3px);
        background: var(--accent) !important;
        color: white !important;
    }
    
    .submit-btn-modern:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(4,205,255,0.3);
    }
    
    .map-container-modern:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-xl);
    }
    
    .map-container-modern:hover iframe {
        filter: grayscale(0);
    }
    
    @keyframes pulseRing {
        0% {
            transform: scale(1);
            opacity: 0.5;
        }
        100% {
            transform: scale(1.5);
            opacity: 0;
        }
    }
</style>
@endpush

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/validator/13.11.0/validator.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Inicializar contador de caracteres
    const textarea = document.getElementById('mensaje_contacto');
    const counter = document.getElementById('char_counter');
    
    if(textarea && counter) {
        textarea.addEventListener('input', function() {
            const count = this.value.length;
            counter.textContent = count + ' / 500 caracteres';
            
            if(count > 500) {
                counter.style.color = '#ff4444';
                this.style.borderColor = '#ff4444';
            } else {
                counter.style.color = 'var(--text-tertiary)';
                this.style.borderColor = 'var(--border)';
            }
        });
    }
    
    // Validaciones en tiempo real
    const nombreInput = document.getElementById('nombre_contacto');
    const emailInput = document.getElementById('email_contacto');
    const telefonoInput = document.getElementById('telefono_contacto');
    
    if(nombreInput) {
        nombreInput.addEventListener('input', function() {
            if(this.value.trim().length < 3 && this.value.trim().length > 0) {
                document.getElementById('error_nombre').textContent = 'El nombre debe tener al menos 3 caracteres';
                document.getElementById('error_nombre').style.display = 'block';
                this.style.borderColor = '#ff4444';
            } else {
                document.getElementById('error_nombre').style.display = 'none';
                this.style.borderColor = 'var(--border)';
            }
        });
    }
    
    if(emailInput) {
        emailInput.addEventListener('input', function() {
            const isValid = validator.isEmail(this.value);
            if(!isValid && this.value.length > 0) {
                document.getElementById('error_email').textContent = 'Ingresa un correo electrónico válido';
                document.getElementById('error_email').style.display = 'block';
                this.style.borderColor = '#ff4444';
            } else {
                document.getElementById('error_email').style.display = 'none';
                this.style.borderColor = 'var(--border)';
            }
        });
    }
    
    if(telefonoInput) {
        telefonoInput.addEventListener('input', function() {
            const phoneRegex = /^[0-9+\-\s()]{10,15}$/;
            if(!phoneRegex.test(this.value) && this.value.length > 0) {
                document.getElementById('error_telefono').textContent = 'Ingresa un número de teléfono válido';
                document.getElementById('error_telefono').style.display = 'block';
                this.style.borderColor = '#ff4444';
            } else {
                document.getElementById('error_telefono').style.display = 'none';
                this.style.borderColor = 'var(--border)';
            }
        });
    }
});

// Función principal para enviar el formulario
function formularioContacto() {
    // Limpiar mensajes de error previos
    document.querySelectorAll('.error-message').forEach(el => el.style.display = 'none');
    document.querySelectorAll('input, select, textarea').forEach(el => el.style.borderColor = 'var(--border)');
    
    let isValid = true;
    
    // Validar nombre
    const nombre = document.getElementById('nombre_contacto');
    if(!nombre.value.trim()) {
        showError('error_nombre', 'El nombre es obligatorio');
        nombre.style.borderColor = '#ff4444';
        isValid = false;
    } else if(nombre.value.trim().length < 3) {
        showError('error_nombre', 'El nombre debe tener al menos 3 caracteres');
        nombre.style.borderColor = '#ff4444';
        isValid = false;
    }
    
    // Validar email
    const email = document.getElementById('email_contacto');
    if(!email.value.trim()) {
        showError('error_email', 'El correo electrónico es obligatorio');
        email.style.borderColor = '#ff4444';
        isValid = false;
    } else if(!validator.isEmail(email.value.trim())) {
        showError('error_email', 'Ingresa un correo electrónico válido');
        email.style.borderColor = '#ff4444';
        isValid = false;
    }
    
    // Validar teléfono
    const telefono = document.getElementById('telefono_contacto');
    const phoneRegex = /^[0-9+\-\s()]{10,15}$/;
    if(telefono.value.trim() && !phoneRegex.test(telefono.value.trim())) {
        showError('error_telefono', 'Ingresa un número de teléfono válido');
        telefono.style.borderColor = '#ff4444';
        isValid = false;
    }
    
    // Validar asunto
    const asunto = document.getElementById('asunto_contacto');
    if(!asunto.value) {
        showError('error_asunto', 'Selecciona un asunto');
        asunto.style.borderColor = '#ff4444';
        isValid = false;
    }
    
    // Validar mensaje
    const mensaje = document.getElementById('mensaje_contacto');
    if(!mensaje.value.trim()) {
        showError('error_mensaje', 'El mensaje es obligatorio');
        mensaje.style.borderColor = '#ff4444';
        isValid = false;
    } else if(mensaje.value.trim().length > 500) {
        showError('error_mensaje', 'El mensaje no puede exceder los 500 caracteres');
        mensaje.style.borderColor = '#ff4444';
        isValid = false;
    }
    
    // Validar checkbox de privacidad
    const privacy = document.getElementById('privacy_checkbox');
    if(!privacy.checked) {
        showError('error_privacy', 'Debes aceptar la política de privacidad');
        isValid = false;
    }
    
    if(isValid) {
        // Mostrar loader
        const btn = document.getElementById('btnEnviarContacto');
        const btnText = btn.querySelector('.btn-text');
        const btnLoader = btn.querySelector('.btn-loader');
        const btnArrow = btn.querySelector('.fa-arrow-right');
        
        btnText.textContent = 'Enviando...';
        btnLoader.style.display = 'inline-block';
        btnArrow.style.display = 'none';
        btn.disabled = true;
        
        // Simular envío (aquí iría tu llamada AJAX real)
        setTimeout(() => {
            mostrarMensaje('¡Mensaje enviado con éxito! Nos pondremos en contacto contigo pronto.', 'success');
            
            // Resetear formulario
            document.getElementById('form_contacto').reset();
            
            // Resetear botón
            btnText.textContent = 'Enviar mensaje';
            btnLoader.style.display = 'none';
            btnArrow.style.display = 'inline-block';
            btn.disabled = false;
            
            // Resetear contador
            const counter = document.getElementById('char_counter');
            if(counter) counter.textContent = '0 / 500 caracteres';
        }, 2000);
    }
}

function showError(elementId, message) {
    const errorElement = document.getElementById(elementId);
    if(errorElement) {
        errorElement.textContent = message;
        errorElement.style.display = 'block';
    }
}

function mostrarMensaje(mensaje, tipo) {
    const divMensaje = document.getElementById('mensaje_div');
    if(divMensaje) {
        const color = tipo === 'success' ? '#4CAF50' : '#f44336';
        divMensaje.innerHTML = `
            <div style="background: ${color}20; border: 2px solid ${color}; border-radius: 12px; padding: 1rem; text-align: center;">
                <i class="fas ${tipo === 'success' ? 'fa-check-circle' : 'fa-exclamation-circle'}" style="color: ${color}; margin-right: 10px;"></i>
                <span style="color: ${color};">${mensaje}</span>
            </div>
        `;
        
        setTimeout(() => {
            divMensaje.innerHTML = '';
        }, 5000);
    }
}
</script>
@endpush