// ============================================
// MENÚ HAMBURGUESA (Mobile)
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.getElementById('hamburger');
    const nav = document.querySelector('.nav');
    const headerActions = document.querySelector('.header__actions');
    
    if (hamburger) {
        hamburger.addEventListener('click', function() {
            nav.classList.toggle('active');
            headerActions.classList.toggle('active');
            this.classList.toggle('active');
            
            // Animación del icono hamburguesa
            const spans = this.querySelectorAll('span');
            if (this.classList.contains('active')) {
                spans[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
                spans[1].style.opacity = '0';
                spans[2].style.transform = 'rotate(-45deg) translate(5px, -5px)';
            } else {
                spans[0].style.transform = 'none';
                spans[1].style.opacity = '1';
                spans[2].style.transform = 'none';
            }
        });
    }
    
    // Cerrar menú al hacer clic en un enlace (mobile)
    const navLinks = document.querySelectorAll('.nav__list a');
    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            nav.classList.remove('active');
            headerActions.classList.remove('active');
            hamburger.classList.remove('active');
            const spans = hamburger.querySelectorAll('span');
            spans[0].style.transform = 'none';
            spans[1].style.opacity = '1';
            spans[2].style.transform = 'none';
        });
    });
});

// ============================================
// HEADER SCROLL EFFECT (Transparencia)
// ============================================
let lastScroll = 0;
const header = document.querySelector('.header');

window.addEventListener('scroll', function() {
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    
    if (currentScroll > 50) {
        header.style.background = 'rgba(255, 255, 255, 0.95)';
        header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.08)';
    } else {
        header.style.background = 'rgba(255, 255, 255, 0.85)';
        header.style.boxShadow = 'none';
    }
    
    lastScroll = currentScroll;
});

// ============================================
// SMOOTH SCROLL para enlaces internos
// ============================================
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const target = document.querySelector(targetId);
        if (target) {
            e.preventDefault();
            const offsetTop = target.getBoundingClientRect().top + window.pageYOffset - 80;
            window.scrollTo({
                top: offsetTop,
                behavior: 'smooth'
            });
        }
    });
});

// ============================================
// ANIMACIONES AL SCROLL (Intersection Observer)
// ============================================
const animateElements = document.querySelectorAll('.value__item, .plan, .feature, .testimonial');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
});

animateElements.forEach(el => {
    el.style.opacity = '0';
    el.style.transform = 'translateY(30px)';
    el.style.transition = 'all 0.6s ease';
    observer.observe(el);
});

// ============================================
// MODALES LEGALES (Términos y Aviso de Privacidad)
// ============================================
function createLegalModal(content, title) {
    // Verificar si ya existe un modal y eliminarlo
    const existingModal = document.querySelector('.legal-modal-overlay');
    if (existingModal) {
        existingModal.remove();
    }

    // Crear overlay
    const overlay = document.createElement('div');
    overlay.className = 'legal-modal-overlay';
    overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(6px);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        animation: fadeIn 0.3s ease;
    `;

    // Crear modal
    const modal = document.createElement('div');
    modal.className = 'legal-modal';
    modal.style.cssText = `
        background: white;
        border-radius: 16px;
        max-width: 700px;
        width: 100%;
        max-height: 80vh;
        padding: 32px;
        position: relative;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
        animation: slideUp 0.3s ease;
        overflow-y: auto;
    `;

    // Botón cerrar
    const closeBtn = document.createElement('button');
    closeBtn.innerHTML = '✕';
    closeBtn.style.cssText = `
        position: sticky;
        top: 0;
        float: right;
        background: none;
        border: none;
        font-size: 1.5rem;
        cursor: pointer;
        color: #94a3b8;
        padding: 4px 8px;
        transition: color 0.2s ease;
        z-index: 10;
    `;
    closeBtn.onmouseover = () => closeBtn.style.color = '#1e293b';
    closeBtn.onmouseout = () => closeBtn.style.color = '#94a3b8';

    // Título
    const titleEl = document.createElement('h2');
    titleEl.textContent = title;
    titleEl.style.cssText = `
        font-size: 1.5rem;
        font-weight: 700;
        color: #143062;
        margin-bottom: 16px;
        padding-right: 40px;
    `;

    // Contenido
    const contentEl = document.createElement('div');
    contentEl.style.cssText = `
        font-size: 0.9rem;
        line-height: 1.7;
        color: #334155;
        white-space: pre-wrap;
    `;
    contentEl.textContent = content;

    // Ensamblar
    modal.appendChild(closeBtn);
    modal.appendChild(titleEl);
    modal.appendChild(contentEl);
    overlay.appendChild(modal);
    document.body.appendChild(overlay);

    // Cerrar al hacer clic en el overlay (fuera del modal)
    overlay.addEventListener('click', function(e) {
        if (e.target === overlay) {
            overlay.remove();
        }
    });

    // Cerrar con tecla ESC
    const escHandler = function(e) {
        if (e.key === 'Escape') {
            overlay.remove();
            document.removeEventListener('keydown', escHandler);
        }
    };
    document.addEventListener('keydown', escHandler);

    // Cerrar con botón X
    closeBtn.addEventListener('click', function() {
        overlay.remove();
        document.removeEventListener('keydown', escHandler);
    });
}

// ============================================
// TEXTOS LEGALES (Genéricos para México)
// ============================================
const legalTexts = {
    terminos: {
        title: 'Términos y Condiciones de Uso',
        content: `TÉRMINOS Y CONDICIONES DE USO

Fecha de última actualización: 2026

1. Aceptación de los Términos
Al acceder y utilizar TimbraApp, usted acepta cumplir con estos Términos y Condiciones. Si no está de acuerdo, no utilice nuestros servicios.

2. Descripción del Servicio
TimbraApp es una plataforma SaaS de facturación electrónica CFDI 4.0 que permite a los negocios emitir facturas de forma rápida y segura.

3. Registro y Cuenta
El usuario debe proporcionar información veraz y actualizada para crear una cuenta. Es responsable de mantener la confidencialidad de sus credenciales.

4. Planes y Pagos
Los servicios se ofrecen bajo planes de suscripción mensual. Los pagos son prepagados y no reembolsables. Los precios pueden ser actualizados con previo aviso.

5. Propiedad Intelectual
Todo el contenido, diseño y código de TimbraApp es propiedad de sus titulares y está protegido por las leyes de propiedad intelectual de México.

6. Limitación de Responsabilidad
TimbraApp no se hace responsable por daños indirectos o pérdidas derivadas del uso del servicio. El servicio se proporciona "tal cual".

7. Ley Aplicable
Estos términos se rigen por las leyes de los Estados Unidos Mexicanos.

8. Contacto
Para cualquier duda, contáctenos en: contacto@timbraapp.com`
    },
    aviso: {
        title: 'Aviso de Privacidad',
        content: `AVISO DE PRIVACIDAD

Fecha de última actualización: 2026

1. Responsable
TimbraApp es responsable del tratamiento de sus datos personales.

2. Datos Personales Recopilados
Recopilamos: nombre, correo electrónico, teléfono, RFC, razón social, y datos de facturación necesarios para emitir CFDI.

3. Finalidad del Tratamiento
Sus datos serán utilizados para: proveer el servicio de facturación electrónica, gestionar su cuenta, enviar comunicaciones relacionadas al servicio, y cumplir con obligaciones fiscales.

4. Transferencia de Datos
Sus datos podrán ser transferidos a terceros proveedores de servicios (como procesadores de pago y plataformas de timbrado) para la operación del servicio.

5. Derechos ARCO
Usted tiene derecho a Acceder, Rectificar, Cancelar u Oponerse al tratamiento de sus datos. Para ejercer estos derechos, contáctenos en: contacto@timbraapp.com

6. Medidas de Seguridad
Implementamos medidas técnicas y organizativas para proteger sus datos contra acceso no autorizado.

7. Cambios al Aviso
Nos reservamos el derecho de actualizar este aviso. Le notificaremos de cambios significativos a través de nuestra plataforma.

8. Consentimiento
Al utilizar TimbraApp, usted otorga su consentimiento para el tratamiento de sus datos conforme a este aviso.`
    }
};

// ============================================
// EVENT LISTENERS PARA ENLACES LEGALES
// ============================================
document.querySelectorAll('.legal-link').forEach(link => {
    link.addEventListener('click', function(e) {
        e.preventDefault();
        const legalType = this.getAttribute('data-legal');
        const legalData = legalTexts[legalType];
        
        if (legalData) {
            createLegalModal(legalData.content, legalData.title);
        }
    });
});

// ============================================
// MOSTRAR/OCULTAR FORMULARIO DE DEMO
// ============================================
const demoBtn = document.getElementById('demoBtn');
const demoForm = document.getElementById('demoForm');

if (demoBtn && demoForm) {
    demoBtn.addEventListener('click', function(e) {
        e.preventDefault();
        if (demoForm.style.display === 'none') {
            demoForm.style.display = 'block';
            setTimeout(() => {
                demoForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }, 100);
        } else {
            demoForm.style.display = 'none';
        }
    });
}

// ============================================
// ENVÍO DE FORMULARIO DE REGISTRO (Pago)
// ============================================
const registroForm = document.getElementById('registroForm');
if (registroForm) {
    registroForm.addEventListener('submit', function(e) {
        e.preventDefault();
        alert('🚀 Redirigiendo a la pasarela de pago... (Demo)');
        // Aquí iría la integración con Stripe/Mercado Pago
        // window.location.href = '/checkout';
    });
}

// ============================================
// ENVÍO DE FORMULARIO DE DEMO
// ============================================
const demoSolicitudForm = document.getElementById('demoSolicitudForm');
if (demoSolicitudForm) {
    demoSolicitudForm.addEventListener('submit', function(e) {
        e.preventDefault();
        alert('✅ ¡Solicitud enviada! Te contactaremos en menos de 24 horas.');
        demoSolicitudForm.reset();
        // Ocultar formulario después de enviar
        const demoFormContainer = document.getElementById('demoForm');
        if (demoFormContainer) {
            demoFormContainer.style.display = 'none';
        }
    });
}

// ============================================
// ESTILOS DINÁMICOS PARA ANIMACIONES DEL MODAL
// ============================================
const styleSheet = document.createElement('style');
styleSheet.textContent = `
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes slideUp {
        from { 
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }
        to { 
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    .legal-modal::-webkit-scrollbar {
        width: 6px;
    }
    .legal-modal::-webkit-scrollbar-track {
        background: #f1f5f9;
        border-radius: 8px;
    }
    .legal-modal::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 8px;
    }
    .legal-modal::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
`;
document.head.appendChild(styleSheet);

console.log('🚀 TimbraApp Landing Page cargada correctamente.');
console.log('📋 Modales legales disponibles: Términos y Aviso de Privacidad.');
console.log('📝 Flujo principal: Registro + Pago');
console.log('🧪 Flujo secundario: Solicitar Prueba Gratis (7 días) - Discreto');