script.js

// Esperar a que el DOM esté completamente cargado
document.addEventListener('DOMContentLoaded', function() {

    // Animación de desplazamiento suave para los enlaces de navegación
    document.querySelectorAll('.nav-link').forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Obtener el destino desde el atributo href
            const targetId = this.getAttribute('href').substring(1);
            const targetSection = document.getElementById(targetId);
            
            // Desplazamiento suave
            window.scrollTo({
                top: targetSection.offsetTop - 70,
                behavior: 'smooth'
            });
        });
    });
    
    // Efecto parallax en el header
    const hero = document.getElementById('hero');
    window.addEventListener('scroll', function() {
        const scrollPosition = window.scrollY;
        if (scrollPosition < 600) {
            hero.style.backgroundPositionY = `${scrollPosition * 0.5}px`;
        }
    });
    
    // Resaltar la sección activa en la navegación
    const sections = document.querySelectorAll('section');
    const navLinks = document.querySelectorAll('.nav-link');
    
    function highlightNavigation() {
        let scrollPosition = window.scrollY;
        
        sections.forEach(section => {
            const sectionTop = section.offsetTop - 100;
            const sectionHeight = section.offsetHeight;
            const sectionId = section.getAttribute('id');
            
            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === `#${sectionId}`) {
                        link.classList.add('active');
                    }
                });
            }
        });
    }
    
    // Agregar clase 'active' a los enlaces de navegación
    window.addEventListener('scroll', highlightNavigation);
    
    // Añadir animaciones de entrada a las tarjetas de gráficos
    const chartCards = document.querySelectorAll('.chart-card');
    
    // Función para verificar si un elemento está en el viewport
    function isInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
            rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.bottom >= 0
        );
    }
    
    // Función para animar los elementos cuando entran en el viewport
    function animateOnScroll() {
        chartCards.forEach(card => {
            if (isInViewport(card) && !card.classList.contains('animated')) {
                card.classList.add('animated');
                card.style.animation = 'fadeInUp 0.6s ease forwards';
                card.style.opacity = '1';
            }
        });
    }
    
    // Inicialmente ocultar todas las tarjetas de gráficos
    chartCards.forEach(card => {
        card.style.opacity = '0';
    });
    
    // Escuchar el evento de scroll para animar los elementos
    window.addEventListener('scroll', animateOnScroll);
    
    // Ejecutar una vez al cargar para animar los elementos ya visibles
    animateOnScroll();
    
    // Agregar animación CSS para el efecto fadeInUp
    const style = document.createElement('style');
    style.innerHTML = `
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translate3d(0, 40px, 0);
            }
            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }
        
        .nav-link.active {
            background-color: rgba(44, 123, 229, 0.1);
            color: var(--primary-color);
            font-weight: 600;
        }
        
        .loading-message {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
            color: #6c757d;
            text-align: center;
            padding: 20px;
        }
        
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-left-color: var(--primary-color);
            animation: spin 1s linear infinite;
            margin-bottom: 15px;
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    `;
    document.head.appendChild(style);
    
    // Función para verificar si los iframes han sido cargados correctamente
    function checkIframesLoaded() {
        const chartContainers = document.querySelectorAll('.chart-container');
        
        chartContainers.forEach(container => {
            if (!container.querySelector('iframe')) {
                // Mostrar mensaje de carga si no hay iframe
                const loadingMsg = document.createElement('div');
                loadingMsg.className = 'loading-message';
                loadingMsg.innerHTML = `
                    <div class="spinner"></div>
                    <p>Esperando a que insertes el iframe del gráfico...</p>
                `;
                container.appendChild(loadingMsg);
            }
        });
    }
    
    // Ejecutar la verificación de iframes una vez al cargar
    checkIframesLoaded();
    
    // Función para manejar el estado de carga del sitio
    window.addEventListener('load', function() {
        // Añadir la clase 'loaded' al body cuando toda la página se haya cargado
        document.body.classList.add('loaded');
        
        // Mostrar mensaje de ayuda para insertar iframes después de 3 segundos
        setTimeout(function() {
            if (!document.querySelector('.chart-container iframe')) {
                // Crear mensaje de ayuda solo si no hay iframes cargados
                const helpMessage = document.createElement('div');
                helpMessage.className = 'help-message';
                helpMessage.innerHTML = `
                    <div class="help-overlay"></div>
                    <div class="help-content">
                        <h3>Cómo insertar los gráficos</h3>
                        <p>Para completar tu proyecto, necesitas insertar los iframes de tus gráficos:</p>
                        <ol>
                            <li>En Google Sheets, selecciona tu gráfico</li>
                            <li>Haz clic en los tres puntos (⋮) y selecciona "Publicar gráfico"</li>
                            <li>Copia el código iframe proporcionado</li>
                            <li>Pégalo en la sección correspondiente del HTML</li>
                        </ol>
                        <button id="closeHelp" class="btn btn-primary">Entendido</button>
                    </div>
                `;
                document.body.appendChild(helpMessage);
                
                // Agregar el estilo para el mensaje de ayuda
                const helpStyle = document.createElement('style');
                helpStyle.innerHTML = `
                    .help-overlay {
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: rgba(0, 0, 0, 0.7);
                        z-index: 1000;
                    }
                    
                    .help-content {
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background-color: white;
                        padding: 30px;
                        border-radius: 10px;
                        z-index: 1001;
                        max-width: 500px;
                        width: 90%;
                    }
                    
                    .help-content h3 {
                        margin-top: 0;
                        margin-bottom: 20px;
                        color: var(--primary-color);
                    }
                    
                    .help-content ol {
                        margin-bottom: 25px;
                        padding-left: 20px;
                    }
                    
                    .help-content li {
                        margin-bottom: 10px;
                    }
                    
                    .help-content button {
                        display: block;
                        margin: 0 auto;
                    }
                `;
                document.head.appendChild(helpStyle);
                document.addEventListener('DOMContentLoaded', function() {
                    document.querySelectorAll('.nav-link').forEach(link => {
                        link.addEventListener('click', function(e) {
                            e.preventDefault();
                            const targetId = this.getAttribute('href').substring(1);
                            const targetSection = document.getElementById(targetId);
                            window.scrollTo({
                                top: targetSection.offsetTop - 70,
                                behavior: 'smooth'
                            });
                        });
                    });
                
                    const hero = document.getElementById('hero');
                    window.addEventListener('scroll', function() {
                        const scrollPosition = window.scrollY;
                        if (scrollPosition < 600) {
                            hero.style.backgroundPositionY = `${scrollPosition * 0.5}px`;
                        }
                    });
                
                    const sections = document.querySelectorAll('section');
                    const navLinks = document.querySelectorAll('.nav-link');
                
                    function highlightNavigation() {
                        let scrollPosition = window.scrollY;
                
                        sections.forEach(section => {
                            const sectionTop = section.offsetTop - 100;
                            const sectionHeight = section.offsetHeight;
                            const sectionId = section.getAttribute('id');
                
                            if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                                navLinks.forEach(link => {
                                    link.classList.remove('active');
                                    if (link.getAttribute('href') === `#${sectionId}`) {
                                        link.classList.add('active');
                                    }
                                });
                            }
                        });
                    }
                
                    window.addEventListener('scroll', highlightNavigation);
                
                    const chartCards = document.querySelectorAll('.chart-card');
                
                    function isInViewport(element) {
                        const rect = element.getBoundingClientRect();
                        return (
                            rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
                            rect.bottom >= 0
                        );
                    }
                
                    function animateOnScroll() {
                        chartCards.forEach(card => {
                            if (isInViewport(card) && !card.classList.contains('animated')) {
                                card.classList.add('animated');
                                card.style.animation = 'fadeInUp 0.6s ease forwards';
                                card.style.opacity = '1';
                            }
                        });
                    }
                
                    chartCards.forEach(card => {
                        card.style.opacity = '0';
                    });
                
                    window.addEventListener('scroll', animateOnScroll);
                    animateOnScroll();
                
                    const style = document.createElement('style');
                    style.innerHTML = `
                        @keyframes fadeInUp {
                            from {
                                opacity: 0;
                                transform: translate3d(0, 40px, 0);
                            }
                            to {
                                opacity: 1;
                                transform: translate3d(0, 0, 0);
                            }
                        }
                
                        .nav-link.active {
                            background-color: rgba(44, 123, 229, 0.1);
                            color: var(--primary-color);
                            font-weight: 600;
                        }
                
                        .loading-message {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            background-color: #f8f9fa;
                            color: #6c757d;
                            text-align: center;
                            padding: 20px;
                        }
                
                        .spinner {
                            width: 40px;
                            height: 40px;
                            border: 4px solid rgba(0, 0, 0, 0.1);
                            border-radius: 50%;
                            border-left-color: var(--primary-color);
                            animation: spin 1s linear infinite;
                            margin-bottom: 15px;
                        }
                
                        @keyframes spin {
                            to {
                                transform: rotate(360deg);
                            }
                        }
                    `;
                    document.head.appendChild(style);
                
                    function checkIframesLoaded() {
                        const chartContainers = document.querySelectorAll('.chart-container');
                
                        chartContainers.forEach(container => {
                            if (!container.querySelector('iframe')) {
                                const loadingMsg = document.createElement('div');
                                loadingMsg.className = 'loading-message';
                                loadingMsg.innerHTML = `
                                    <div class="spinner"></div>
                                    <p>Esperando a que insertes el iframe del gráfico...</p>
                                `;
                                container.appendChild(loadingMsg);
                            }
                        });
                    }
                
                    checkIframesLoaded();
                
                    window.addEventListener('load', function() {
                        document.body.classList.add('loaded');
                
                        setTimeout(function() {
                            if (!document.querySelector('.chart-container iframe')) {
                                const helpMessage = document.createElement('div');
                                helpMessage.className = 'help-message';
                                helpMessage.innerHTML = `
                                    <div class="help-overlay"></div>
                                    <div class="help-content">
                                        <h3>Cómo insertar los gráficos</h3>
                                        <p>Para completar tu proyecto, necesitas insertar los iframes de tus gráficos:</p>
                                        <ol>
                                            <li>En Google Sheets, selecciona tu gráfico</li>
                                            <li>Haz clic en los tres puntos (⋮) y selecciona "Publicar gráfico"</li>
                                            <li>Copia el código iframe proporcionado</li>
                                            <li>Pégalo en la sección correspondiente del HTML</li>
                                        </ol>
                                        <button id="closeHelp" class="btn btn-primary">Entendido</button>
                                    </div>
                                `;
                                document.body.appendChild(helpMessage);
                
                                const helpStyle = document.createElement('style');
                                helpStyle.innerHTML = `
                                    .help-overlay {
                                        position: fixed;
                                        top: 0;
                                        left: 0;
                                        right: 0;
                                        bottom: 0;
                                        background-color: rgba(0, 0, 0, 0.7);
                                        z-index: 1000;
                                    }
                
                                    .help-content {
                                        position: fixed;
                                        top: 50%;
                                        left: 50%;
                                        transform: translate(-50%, -50%);
                                        background-color: white;
                                        padding: 30px;
                                        border-radius: 10px;
                                        z-index: 1001;
                                        max-width: 500px;
                                        width: 90%;
                                    }
                
                                    .help-content h3 {
                                        margin-top: 0;
                                        margin-bottom: 20px;
                                        color: var(--primary-color);
                                    }
                
                                    .help-content ol {
                                        margin-bottom: 25px;
                                        padding-left: 20px;
                                    }
                
                                    .help-content li {
                                        margin-bottom: 10px;
                                    }
                
                                    .help-content button {
                                        display: block;
                                        margin: 0 auto;
                                    }
                                `;
                                document.head.appendChild(helpStyle);
                
                                document.getElementById('closeHelp').addEventListener('click', function() {
                                    document.body.removeChild(helpMessage);
                                });
                            }
                        }, 3000);
                    });
                
                    function createScrollIndicator() {
                        const indicator = document.createElement('div');
                        indicator.className = 'scroll-indicator';
                        indicator.innerHTML = '<i class="fas fa-chevron-down"></i>';
                        document.body.appendChild(indicator);
                
                        const scrollIndicatorStyle = document.createElement('style');
                        scrollIndicatorStyle.innerHTML = `
                            .scroll-indicator {
                                position: fixed;
                                bottom: 20px;
                                left: 50%;
                                transform: translateX(-50%);
                                background-color: var(--primary-color);
                                color: white;
                                width: 40px;
                                height: 40px;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                cursor: pointer;
                                z-index: 100;
                                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                                opacity: 1;
                                transition: opacity 0.3s ease;
                                animation: bounce 2s infinite;
                            }
                
                            @keyframes bounce {
                                0%, 20%, 50%, 80%, 100% {
                                    transform: translateX(-50%) translateY(0);
                                }
                                40% {
                                    transform: translateX(-50%) translateY(-10px);
                                }
                                60% {
                                    transform: translateX(-50%) translateY(-5px);
                                }
                            }
                
                            .scroll-indicator.hidden {
                                opacity: 0;
                            }
                        `;
                        document.head.appendChild(scrollIndicatorStyle);
                
                        window.addEventListener('scroll', function() {
                            if (window.scrollY > 300) {
                                indicator.classList.add('hidden');
                            } else {
                                indicator.classList.remove('hidden');
                            }
                        });
                
                        indicator.addEventListener('click', function() {
                            window.scrollTo({
                                top: window.innerHeight,
                                behavior: 'smooth'
                            });
                        });
                    }
                
                    createScrollIndicator();
                });