// Enhanced JavaScript for UK Data Services Website
document.addEventListener('DOMContentLoaded', function() {
    
    // Rotating Hero Text Effect (like original UK Data Services site)
    const rotatingText = document.getElementById('rotating-text');
    const heroSubtitle = document.getElementById('hero-subtitle');
    
    if (rotatingText && heroSubtitle) {
        const slides = [
            {
                title: "Voted UK's No.1 Web Scraping Service",
                subtitle: "We are experts in web scraping, data analysis and competitor price monitoring."
            },
            {
                title: "UK-based Team",
                subtitle: "Our team is based in the UK for a clearer, faster response."
            },
            {
                title: "Professional Price Monitoring",
                subtitle: "Let us monitor your competitor's pricing and product ranges."
            },
            {
                title: "Bespoke Software Solutions",
                subtitle: "Let our experts build your ideal scraping solution."
            }
        ];
        
        let currentSlide = 0;
        
        function rotateSlide() {
            // Fade out
            rotatingText.style.opacity = '0';
            heroSubtitle.style.opacity = '0';
            
            setTimeout(() => {
                // Change text
                rotatingText.textContent = slides[currentSlide].title;
                heroSubtitle.textContent = slides[currentSlide].subtitle;
                
                // Fade in
                rotatingText.style.opacity = '1';
                heroSubtitle.style.opacity = '1';
                
                currentSlide = (currentSlide + 1) % slides.length;
            }, 500);
        }
        
        // Add transition styles immediately
        rotatingText.style.transition = 'opacity 0.5s ease-in-out';
        heroSubtitle.style.transition = 'opacity 0.5s ease-in-out';
        
        // Start rotation after a short delay
        setTimeout(() => {
            rotateSlide();
            setInterval(rotateSlide, 4000); // Change every 4 seconds
        }, 2000); // Start after 2 seconds
        
        console.log('Hero text rotation initialized');
    } else {
        console.log('Rotating text elements not found');
    }
    
    // Mobile Navigation Toggle with ARIA and Focus Trap
    const navToggle = document.getElementById('nav-toggle');
    const navMenu = document.getElementById('nav-menu');

    if (navToggle && navMenu) {
        // Get focusable elements in the menu
        const getFocusableElements = () => {
            return navMenu.querySelectorAll('a[href], button:not([disabled])');
        };

        // Focus trap handler
        const handleFocusTrap = (e) => {
            if (!navMenu.classList.contains('active')) return;

            const focusableElements = getFocusableElements();
            const firstElement = focusableElements[0];
            const lastElement = focusableElements[focusableElements.length - 1];

            if (e.key === 'Tab') {
                if (e.shiftKey && document.activeElement === firstElement) {
                    e.preventDefault();
                    lastElement.focus();
                } else if (!e.shiftKey && document.activeElement === lastElement) {
                    e.preventDefault();
                    firstElement.focus();
                }
            }

            // Close menu on Escape key
            if (e.key === 'Escape') {
                closeMenu();
            }
        };

        const openMenu = () => {
            navMenu.classList.add('active');
            navToggle.classList.add('active');
            navToggle.setAttribute('aria-expanded', 'true');
            document.addEventListener('keydown', handleFocusTrap);
            // Focus first menu item
            const firstFocusable = getFocusableElements()[0];
            if (firstFocusable) {
                setTimeout(() => firstFocusable.focus(), 100);
            }
        };

        const closeMenu = () => {
            navMenu.classList.remove('active');
            navToggle.classList.remove('active');
            navToggle.setAttribute('aria-expanded', 'false');
            document.removeEventListener('keydown', handleFocusTrap);
            navToggle.focus();
        };

        navToggle.addEventListener('click', function() {
            const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
            if (isExpanded) {
                closeMenu();
            } else {
                openMenu();
            }
        });

        // Close mobile menu when clicking on a link
        const navLinks = document.querySelectorAll('.nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', () => {
                closeMenu();
            });
        });

        // Close menu when clicking outside
        document.addEventListener('click', (e) => {
            if (navMenu.classList.contains('active') &&
                !navMenu.contains(e.target) &&
                !navToggle.contains(e.target)) {
                closeMenu();
            }
        });
    }
    
    // Navbar Scroll Effect
    const navbar = document.getElementById('navbar');
    
    function handleNavbarScroll() {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    }
    
    window.addEventListener('scroll', handleNavbarScroll);
    
    // Smooth Scrolling for Navigation Links
    const smoothScrollLinks = document.querySelectorAll('a[href^="#"]');
    
    smoothScrollLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);
            
            if (targetSection) {
                const headerOffset = 80;
                const elementPosition = targetSection.getBoundingClientRect().top;
                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
                
                window.scrollTo({
                    top: offsetPosition,
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Enhanced Scroll Animations
    const animatedElements = document.querySelectorAll('.animate-on-scroll, .service-card, .feature, .step');
    
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animated');
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    animatedElements.forEach((element, index) => {
        // Set initial state
        element.style.opacity = '0';
        element.style.transform = 'translateY(30px)';
        element.style.transition = `opacity 0.8s ease-out ${index * 0.1}s, transform 0.8s ease-out ${index * 0.1}s`;
        observer.observe(element);
    });
    
    // Add hover animations to service cards
    const serviceCards = document.querySelectorAll('.service-card');
    serviceCards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px) scale(1.02)';
            this.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.15)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0) scale(1)';
            this.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08)';
        });
    });
    
    // Add pulse animation to CTA buttons
    const ctaButtons = document.querySelectorAll('.btn-primary');
    ctaButtons.forEach(btn => {
        btn.addEventListener('mouseenter', function() {
            this.style.animation = 'pulse 0.5s ease-in-out';
        });
        
        btn.addEventListener('mouseleave', function() {
            this.style.animation = 'none';
        });
    });
    
    console.log('Enhanced animations initialized');
    
    // Initialize reCAPTCHA and form tracking
    let interactionScore = 0;
    let formStartTime = Date.now();
    
    // Track user interactions for bot detection
    document.addEventListener('mousemove', () => interactionScore += 1);
    document.addEventListener('keydown', () => interactionScore += 2);
    document.addEventListener('click', () => interactionScore += 3);
    
    // Set form timestamp
    const timestampField = document.getElementById('form_timestamp');
    if (timestampField) {
        timestampField.value = formStartTime;
    }
    
    // Form Validation and Enhancement with ARIA support
    const contactForm = document.querySelector('.contact-form form');

    // Helper function to set field error state
    function setFieldError(fieldId, errorMessage) {
        const field = document.getElementById(fieldId);
        const errorSpan = document.getElementById(fieldId + '-error');
        if (field && errorSpan) {
            field.setAttribute('aria-invalid', 'true');
            errorSpan.textContent = errorMessage;
        }
    }

    // Helper function to clear field error state
    function clearFieldError(fieldId) {
        const field = document.getElementById(fieldId);
        const errorSpan = document.getElementById(fieldId + '-error');
        if (field && errorSpan) {
            field.setAttribute('aria-invalid', 'false');
            errorSpan.textContent = '';
        }
    }

    // Clear all form errors
    function clearAllErrors() {
        ['name', 'email', 'company', 'message'].forEach(clearFieldError);
    }

    if (contactForm) {
        // Real-time validation on blur
        const requiredFields = contactForm.querySelectorAll('[required]');
        requiredFields.forEach(field => {
            field.addEventListener('blur', function() {
                validateField(this);
            });
            field.addEventListener('input', function() {
                if (this.getAttribute('aria-invalid') === 'true') {
                    validateField(this);
                }
            });
        });

        function validateField(field) {
            const value = field.value.trim();
            const fieldId = field.id;

            if (fieldId === 'name' && value.length < 2) {
                setFieldError(fieldId, 'Please enter a valid name (at least 2 characters)');
                return false;
            } else if (fieldId === 'email' && !isValidEmail(value)) {
                setFieldError(fieldId, 'Please enter a valid email address');
                return false;
            } else if (fieldId === 'company' && value.length < 2) {
                setFieldError(fieldId, 'Please enter your organisation name');
                return false;
            } else if (fieldId === 'message' && value.length < 10) {
                setFieldError(fieldId, 'Please provide more details (at least 10 characters)');
                return false;
            }

            clearFieldError(fieldId);
            return true;
        }

        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            clearAllErrors();

            // Basic form validation
            const formData = new FormData(this);
            const name = formData.get('name');
            const email = formData.get('email');
            const company = formData.get('company');
            const message = formData.get('message');

            // Validation
            let isValid = true;
            let firstErrorField = null;

            if (!name || name.trim().length < 2) {
                setFieldError('name', 'Please enter a valid name (at least 2 characters)');
                isValid = false;
                if (!firstErrorField) firstErrorField = document.getElementById('name');
            }

            if (!email || !isValidEmail(email)) {
                setFieldError('email', 'Please enter a valid email address');
                isValid = false;
                if (!firstErrorField) firstErrorField = document.getElementById('email');
            }

            if (!company || company.trim().length < 2) {
                setFieldError('company', 'Please enter your organisation name');
                isValid = false;
                if (!firstErrorField) firstErrorField = document.getElementById('company');
            }

            if (!message || message.trim().length < 10) {
                setFieldError('message', 'Please provide more details (at least 10 characters)');
                isValid = false;
                if (!firstErrorField) firstErrorField = document.getElementById('message');
            }

            // Focus first error field for accessibility
            if (!isValid && firstErrorField) {
                firstErrorField.focus();
                return;
            }

            if (isValid) {
                // Show loading state
                const submitButton = this.querySelector('button[type="submit"]');
                const originalText = submitButton.textContent;
                submitButton.textContent = 'Sending...';
                submitButton.disabled = true;

                // Update form timestamp to current time (ensures it's fresh at submission)
                const timestampField = document.getElementById('form_timestamp');
                if (timestampField) {
                    timestampField.value = Date.now();
                }
                // Recreate formData after updating timestamp
                const freshFormData = new FormData(this);

                // Execute reCAPTCHA and submit form
                if (typeof grecaptcha !== 'undefined') {
                    grecaptcha.ready(() => {
                        grecaptcha.execute(window.recaptchaSiteKey, {action: 'contact_form'}).then((token) => {
                            // Add reCAPTCHA token and interaction data
                            freshFormData.set('recaptcha_response', token);
                            freshFormData.set('interaction_token', btoa(JSON.stringify({score: Math.min(interactionScore, 100), time: Date.now() - formStartTime})));
                            
                            // Submit form
                            fetch('contact-handler.php', {
                                method: 'POST',
                                headers: {
                                    'X-Requested-With': 'XMLHttpRequest'
                                },
                                body: freshFormData
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    showNotification('Message sent successfully! We\'ll get back to you soon.', 'success');
                                    this.reset();
                                } else {
                                    showNotification(data.message || 'There was an error sending your message. Please try again.', 'error');
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                showNotification('There was an error sending your message. Please try again.', 'error');
                            })
                            .finally(() => {
                                submitButton.textContent = originalText;
                                submitButton.disabled = false;
                            });
                        });
                    });
                } else {
                    // Fallback if reCAPTCHA not loaded
                    showNotification('Security verification not available. Please refresh the page.', 'error');
                    submitButton.textContent = originalText;
                    submitButton.disabled = false;
                }
            } else {
                showNotification(errors.join('<br>'), 'error');
            }
        });
    }
    
    // Email validation function
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    // Notification system
    function showNotification(message, type = 'info') {
        // Remove existing notifications
        const existingNotification = document.querySelector('.notification');
        if (existingNotification) {
            existingNotification.remove();
        }
        
        // Create notification element
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <div class="notification-content">
                <span class="notification-message">${message}</span>
                <button class="notification-close">&times;</button>
            </div>
        `;
        
        // Add styles
        notification.style.cssText = `
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};
            color: white;
            padding: 16px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            max-width: 400px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.3s ease;
        `;
        
        notification.querySelector('.notification-content').style.cssText = `
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
        `;
        
        notification.querySelector('.notification-close').style.cssText = `
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            cursor: pointer;
            padding: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        `;
        
        // Add to page
        document.body.appendChild(notification);
        
        // Animate in
        setTimeout(() => {
            notification.style.opacity = '1';
            notification.style.transform = 'translateX(0)';
        }, 100);
        
        // Handle close button
        notification.querySelector('.notification-close').addEventListener('click', () => {
            hideNotification(notification);
        });
        
        // Auto hide after 5 seconds
        setTimeout(() => {
            if (document.body.contains(notification)) {
                hideNotification(notification);
            }
        }, 5000);
    }
    
    function hideNotification(notification) {
        notification.style.opacity = '0';
        notification.style.transform = 'translateX(100%)';
        setTimeout(() => {
            if (document.body.contains(notification)) {
                notification.remove();
            }
        }, 300);
    }
    
    // Stats Counter Animation
    const stats = document.querySelectorAll('.stat-number');
    
    function animateStats() {
        stats.forEach(stat => {
            const originalText = stat.textContent.trim();
            console.log('Animating stat:', originalText);
            
            // Handle different stat types
            if (originalText.includes('£2.5M+')) {
                return; // Keep as is, don't animate currency
            } else if (originalText.includes('99.8%')) {
                animateNumber(stat, 0, 99.8, '%');
            }
        });
    }
    
    function animateNumber(element, start, end, suffix = '') {
        let current = start;
        const increment = (end - start) / 60; // 60 steps for smoother animation
        
        const timer = setInterval(() => {
            current += increment;
            if (current >= end) {
                current = end;
                clearInterval(timer);
            }
            
            element.textContent = current.toFixed(1) + suffix;
        }, 50); // Every 50ms
    }
    
    // Trigger stats animation when section is visible
    const statsSection = document.querySelector('.hero-stats');
    if (statsSection) {
        const statsObserver = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    console.log('Stats section is visible, starting animation');
                    setTimeout(() => {
                        animateStats();
                    }, 500); // Small delay
                    statsObserver.unobserve(entry.target);
                }
            });
        }, { threshold: 0.3 });
        
        statsObserver.observe(statsSection);
    } else {
        console.log('Stats section not found');
    }
    
    // Enhanced Lazy Loading for Images with WebP support
    const images = document.querySelectorAll('img[loading="lazy"]');
    
    // WebP support detection
    function supportsWebP() {
        const canvas = document.createElement('canvas');
        canvas.width = 1;
        canvas.height = 1;
        return canvas.toDataURL('image/webp').indexOf('webp') !== -1;
    }
    
    if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    
                    // Handle data-src for lazy loading
                    if (img.dataset.src) {
                        img.src = img.dataset.src;
                    }
                    
                    // Handle WebP support
                    if (img.dataset.webp && supportsWebP()) {
                        img.src = img.dataset.webp;
                    }
                    
                    img.classList.add('loaded');
                    img.style.opacity = '1';
                    imageObserver.unobserve(img);
                }
            });
        }, {
            rootMargin: '50px 0px',
            threshold: 0.1
        });
        
        images.forEach(img => {
            // Set initial opacity for lazy images
            if (img.loading === 'lazy') {
                img.style.opacity = '0';
                img.style.transition = 'opacity 0.3s ease';
            }
            imageObserver.observe(img);
        });
    }
    
    // Scroll to Top Button
    const scrollTopBtn = document.createElement('button');
    scrollTopBtn.innerHTML = '↑';
    scrollTopBtn.className = 'scroll-top-btn';
    scrollTopBtn.style.cssText = `
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    `;
    
    document.body.appendChild(scrollTopBtn);
    
    scrollTopBtn.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    
    // Show/hide scroll to top button
    function handleScrollTopButton() {
        if (window.scrollY > 500) {
            scrollTopBtn.style.opacity = '1';
            scrollTopBtn.style.visibility = 'visible';
        } else {
            scrollTopBtn.style.opacity = '0';
            scrollTopBtn.style.visibility = 'hidden';
        }
    }
    
    window.addEventListener('scroll', handleScrollTopButton);
    
    // Performance: Throttle scroll events
    let scrollTimeout;
    const originalHandlers = [handleNavbarScroll, handleScrollTopButton];
    
    function throttledScrollHandler() {
        if (!scrollTimeout) {
            scrollTimeout = setTimeout(() => {
                originalHandlers.forEach(handler => handler());
                scrollTimeout = null;
            }, 16); // ~60fps
        }
    }
    
    window.removeEventListener('scroll', handleNavbarScroll);
    window.removeEventListener('scroll', handleScrollTopButton);
    window.addEventListener('scroll', throttledScrollHandler);
    
    // Preload critical resources with WebP support
    function preloadResource(href, as = 'image', type = null) {
        const link = document.createElement('link');
        link.rel = 'preload';
        link.href = href;
        link.as = as;
        if (type) {
            link.type = type;
        }
        document.head.appendChild(link);
    }
    
    // Preload critical images with WebP format preference
    function preloadCriticalImages() {
        const criticalImages = [
            'assets/images/ukds-main-logo.png',
            'assets/images/hero-data-analytics.svg'
        ];
        
        criticalImages.forEach(imagePath => {
            // Try WebP first if supported
            if (supportsWebP()) {
                const webpPath = imagePath.replace(/\.(jpg|jpeg|png)$/i, '.webp');
                preloadResource(webpPath, 'image', 'image/webp');
            } else {
                preloadResource(imagePath, 'image');
            }
        });
    }
    
    // Initialize critical image preloading
    preloadCriticalImages();
    
    // Initialize tooltips (if needed)
    const tooltipElements = document.querySelectorAll('[data-tooltip]');
    
    tooltipElements.forEach(element => {
        element.addEventListener('mouseenter', function() {
            const tooltipText = this.getAttribute('data-tooltip');
            const tooltip = document.createElement('div');
            tooltip.className = 'tooltip';
            tooltip.textContent = tooltipText;
            tooltip.style.cssText = `
                position: absolute;
                background: #1a1a1a;
                color: white;
                padding: 8px 12px;
                border-radius: 6px;
                font-size: 14px;
                white-space: nowrap;
                z-index: 10000;
                opacity: 0;
                transition: opacity 0.3s ease;
                pointer-events: none;
            `;
            
            document.body.appendChild(tooltip);
            
            const rect = this.getBoundingClientRect();
            tooltip.style.left = rect.left + (rect.width / 2) - (tooltip.offsetWidth / 2) + 'px';
            tooltip.style.top = rect.top - tooltip.offsetHeight - 10 + 'px';
            
            setTimeout(() => {
                tooltip.style.opacity = '1';
            }, 100);
            
            this.addEventListener('mouseleave', function() {
                tooltip.style.opacity = '0';
                setTimeout(() => {
                    if (document.body.contains(tooltip)) {
                        tooltip.remove();
                    }
                }, 300);
            }, { once: true });
        });
    });
    
    // Security: Prevent XSS in dynamic content
    function sanitizeHTML(str) {
        const temp = document.createElement('div');
        temp.textContent = str;
        return temp.innerHTML;
    }
    
    // Service Worker Registration (for PWA capabilities)
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/sw.js')
                .then(registration => {
                    console.log('SW registered: ', registration);
                })
                .catch(registrationError => {
                    console.log('SW registration failed: ', registrationError);
                });
        });
    }
    
    // Performance monitoring
    if ('performance' in window) {
        window.addEventListener('load', function() {
            setTimeout(() => {
                const perfData = performance.getEntriesByType('navigation')[0];
                if (perfData) {
                    console.log('Page Load Performance:', {
                        'DNS Lookup': Math.round(perfData.domainLookupEnd - perfData.domainLookupStart),
                        'TCP Connection': Math.round(perfData.connectEnd - perfData.connectStart),
                        'Request/Response': Math.round(perfData.responseEnd - perfData.requestStart),
                        'DOM Processing': Math.round(perfData.domComplete - perfData.domLoading),
                        'Total Load Time': Math.round(perfData.loadEventEnd - perfData.navigationStart)
                    });
                }
            }, 0);
        });
    }
    
    console.log('UK Data Services website initialized successfully');
    console.log('Performance optimizations: Lazy loading, WebP support, and preloading enabled');
    
    // Universal Blog Pagination System
    initializeBlogPagination();
    
    function initializeBlogPagination() {
        const paginationContainer = document.querySelector('.blog-pagination');
        const articlesGrid = document.querySelector('.articles-grid');
        
        if (!paginationContainer || !articlesGrid) {
            return; // No pagination on this page
        }
        
        const prevButton = paginationContainer.querySelector('button:first-child');
        const nextButton = paginationContainer.querySelector('button:last-child');
        const paginationInfo = paginationContainer.querySelector('.pagination-info');
        
        if (!prevButton || !nextButton || !paginationInfo) {
            return; // Invalid pagination structure
        }
        
        // Get current page from URL or default to 1
        const urlParams = new URLSearchParams(window.location.search);
        let currentPage = parseInt(urlParams.get('page')) || 1;
        
        // Get all articles on the page
        const allArticles = Array.from(articlesGrid.querySelectorAll('.article-card'));
        const articlesPerPage = 6;
        const totalPages = Math.ceil(allArticles.length / articlesPerPage);
        
        // If we have actual multiple pages of content, use the original pagination logic
        // Otherwise, implement client-side pagination
        if (totalPages <= 1) {
            // Hide pagination if not needed
            paginationContainer.style.display = 'none';
            return;
        }
        
        function renderPage(page, shouldScroll = false) {
            // Hide all articles
            allArticles.forEach(article => {
                article.style.display = 'none';
            });
            
            // Show articles for current page
            const startIndex = (page - 1) * articlesPerPage;
            const endIndex = startIndex + articlesPerPage;
            
            for (let i = startIndex; i < endIndex && i < allArticles.length; i++) {
                allArticles[i].style.display = 'block';
                allArticles[i].style.animation = 'fadeInUp 0.6s ease forwards';
            }
            
            // Update pagination info
            paginationInfo.textContent = `Page ${page} of ${totalPages}`;
            
            // Update button states
            prevButton.disabled = (page <= 1);
            nextButton.disabled = (page >= totalPages);
            
            // Update URL without page reload
            const newUrl = new URL(window.location);
            if (page > 1) {
                newUrl.searchParams.set('page', page);
            } else {
                newUrl.searchParams.delete('page');
            }
            window.history.replaceState({}, '', newUrl);
            
            // Only scroll to articles section when navigating between pages
            if (shouldScroll) {
                articlesGrid.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        }
        
        // Event listeners
        prevButton.addEventListener('click', function(e) {
            e.preventDefault();
            if (currentPage > 1) {
                currentPage--;
                renderPage(currentPage, true);
            }
        });
        
        nextButton.addEventListener('click', function(e) {
            e.preventDefault();
            if (currentPage < totalPages) {
                currentPage++;
                renderPage(currentPage, true);
            }
        });
        
        // Initialize first page (don't scroll on initial load)
        renderPage(currentPage, false);
        
        // Add CSS animation for article transitions
        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(20px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
            
            .article-card {
                transition: opacity 0.3s ease, transform 0.3s ease;
            }
            
            .article-card[style*="display: none"] {
                opacity: 0;
                transform: translateY(20px);
            }
        `;
        document.head.appendChild(style);
        
        console.log(`Blog pagination initialized: ${totalPages} pages, ${allArticles.length} articles`);
    }
    
    // Viewport-based Image Loading Optimization
    function initializeViewportImageLoading() {
        // Intersection Observer for lazy loading optimization
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    
                    // Load high-quality version when in viewport
                    if (img.dataset.src) {
                        img.src = img.dataset.src;
                        img.removeAttribute('data-src');
                    }
                    
                    // Load WebP for supported browsers
                    if (img.dataset.webp && supportsWebP()) {
                        img.src = img.dataset.webp;
                    }
                    
                    observer.unobserve(img);
                }
            });
        }, {
            rootMargin: '50px 0px',
            threshold: 0.01
        });
        
        // Observe all images with data-src
        document.querySelectorAll('img[data-src]').forEach(img => {
            imageObserver.observe(img);
        });
        
        // WebP support detection
        function supportsWebP() {
            return new Promise(resolve => {
                const webP = new Image();
                webP.onload = webP.onerror = () => resolve(webP.height === 2);
                webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
            });
        }
    }
    
    // Touch Target Optimization for Mobile
    function optimizeTouchTargets() {
        const minTouchSize = 44; // 44px minimum touch target
        
        // Check and optimize button sizes
        document.querySelectorAll('button, .btn, a[role="button"]').forEach(element => {
            const rect = element.getBoundingClientRect();
            if (rect.width < minTouchSize || rect.height < minTouchSize) {
                element.style.minWidth = minTouchSize + 'px';
                element.style.minHeight = minTouchSize + 'px';
                element.style.display = 'inline-flex';
                element.style.alignItems = 'center';
                element.style.justifyContent = 'center';
            }
        });
        
        // Add touch-friendly spacing
        document.querySelectorAll('.nav-menu a, .social-links a').forEach(element => {
            element.style.padding = '12px 16px';
            element.style.margin = '4px';
        });
    }
    
    // Initialize optimizations
    initializeViewportImageLoading();
    if ('ontouchstart' in window) {
        optimizeTouchTargets();
    }
});