script.js

/**
 * LiteracAI - Interactive JavaScript
 *
 * Features:
 * - Mobile navigation toggle
 * - Header scroll effect
 * - Smooth scrolling for anchor links
 * - Scroll-triggered animations
 * - Animated counter for statistics
 * - Contact form handling
 */

(function() {
    'use strict';

    // ============================================
    // DOM ELEMENTS
    // ============================================

    const header = document.getElementById('header');
    const navToggle = document.getElementById('nav-toggle');
    const navMenu = document.getElementById('nav-menu');
    const navLinks = document.querySelectorAll('.nav-link');
    const contactForm = document.getElementById('contact-form');
    const animatedElements = document.querySelectorAll('.animate-on-scroll');
    const statNumbers = document.querySelectorAll('.stat-number[data-count]');


    // ============================================
    // MOBILE NAVIGATION
    // ============================================

    /**
     * Toggle mobile navigation menu
     */
    function toggleMobileNav() {
        const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
        navToggle.setAttribute('aria-expanded', !isExpanded);
        navMenu.classList.toggle('active');

        // Prevent body scroll when menu is open
        document.body.style.overflow = isExpanded ? '' : 'hidden';
    }

    /**
     * Close mobile navigation menu
     */
    function closeMobileNav() {
        navToggle.setAttribute('aria-expanded', 'false');
        navMenu.classList.remove('active');
        document.body.style.overflow = '';
    }

    // Event listeners for mobile nav
    if (navToggle) {
        navToggle.addEventListener('click', toggleMobileNav);
    }

    // Close menu when clicking a nav link
    navLinks.forEach(link => {
        link.addEventListener('click', closeMobileNav);
    });

    // Close menu when clicking outside (on the overlay)
    navMenu.addEventListener('click', (e) => {
        if (e.target === navMenu) {
            closeMobileNav();
        }
    });

    // Close menu on escape key
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && navMenu.classList.contains('active')) {
            closeMobileNav();
            navToggle.focus();
        }
    });


    // ============================================
    // HEADER SCROLL EFFECT
    // ============================================

    /**
     * Add/remove scrolled class on header based on scroll position
     */
    function handleHeaderScroll() {
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    }

    // Debounced scroll handler for performance
    let scrollTimeout;
    window.addEventListener('scroll', () => {
        if (scrollTimeout) {
            window.cancelAnimationFrame(scrollTimeout);
        }
        scrollTimeout = window.requestAnimationFrame(handleHeaderScroll);
    });

    // Initial check on page load
    handleHeaderScroll();


    // ============================================
    // SMOOTH SCROLLING
    // ============================================

    /**
     * Smooth scroll to anchor targets
     */
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');

            // Skip if it's just "#"
            if (targetId === '#') return;

            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                e.preventDefault();

                // Calculate offset for fixed header
                const headerHeight = header.offsetHeight;
                const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - headerHeight - 20;

                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });

                // Update URL hash without jumping
                history.pushState(null, null, targetId);
            }
        });
    });


    // ============================================
    // SCROLL-TRIGGERED ANIMATIONS
    // ============================================

    /**
     * Intersection Observer for scroll animations
     */
    const observerOptions = {
        root: null,
        rootMargin: '0px 0px -10% 0px',
        threshold: 0.1
    };

    const animationObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Add staggered delay for grid items
                const parent = entry.target.parentElement;
                if (parent && (parent.classList.contains('services-grid') ||
                              parent.classList.contains('approach-grid') ||
                              parent.classList.contains('testimonials-grid') ||
                              parent.classList.contains('stats-grid'))) {
                    const siblings = Array.from(parent.children);
                    const index = siblings.indexOf(entry.target);
                    entry.target.style.transitionDelay = `${index * 0.1}s`;
                }

                entry.target.classList.add('visible');

                // Unobserve after animation
                animationObserver.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Observe all animated elements
    animatedElements.forEach(el => {
        animationObserver.observe(el);
    });


    // ============================================
    // ANIMATED COUNTERS
    // ============================================

    /**
     * Animate a number from 0 to its target value
     * @param {HTMLElement} element - The element to animate
     * @param {number} target - The target number
     * @param {number} duration - Animation duration in ms
     */
    function animateCounter(element, target, duration = 2000) {
        const start = 0;
        const startTime = performance.now();

        function updateCounter(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);

            // Easing function (ease-out-cubic)
            const easeOut = 1 - Math.pow(1 - progress, 3);
            const current = Math.floor(start + (target - start) * easeOut);

            element.textContent = current.toLocaleString();

            if (progress < 1) {
                requestAnimationFrame(updateCounter);
            } else {
                element.textContent = target.toLocaleString();
            }
        }

        requestAnimationFrame(updateCounter);
    }

    /**
     * Intersection Observer for counter animations
     */
    const counterObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const target = parseInt(entry.target.dataset.count, 10);
                animateCounter(entry.target, target);
                counterObserver.unobserve(entry.target);
            }
        });
    }, {
        threshold: 0.5
    });

    // Observe all stat numbers
    statNumbers.forEach(el => {
        counterObserver.observe(el);
    });


    // ============================================
    // CONTACT FORM HANDLING
    // ============================================

    /**
     * Handle contact form submission
     */
    if (contactForm) {
        contactForm.addEventListener('submit', async function(e) {
            e.preventDefault();

            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            // Show loading state
            submitBtn.disabled = true;
            submitBtn.innerHTML = `
                <span class="loading-spinner"></span>
                Sending...
            `;

            // Gather form data
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());

            // Simulate form submission (replace with actual API call)
            try {
                // Simulated delay for demo purposes
                await new Promise(resolve => setTimeout(resolve, 1500));

                // Success message
                showNotification('Message sent successfully! We\'ll be in touch soon.', 'success');

                // Reset form
                this.reset();

            } catch (error) {
                // Error message
                showNotification('Something went wrong. Please try again.', 'error');
            } finally {
                // Restore button state
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        });
    }

    /**
     * Show a notification message
     * @param {string} message - The message to display
     * @param {string} type - 'success' or 'error'
     */
    function showNotification(message, type = 'success') {
        // Remove existing notifications
        const existing = document.querySelector('.notification');
        if (existing) {
            existing.remove();
        }

        // Create notification element
        const notification = document.createElement('div');
        notification.className = `notification notification-${type}`;
        notification.innerHTML = `
            <span class="notification-message">${message}</span>
            <button class="notification-close" aria-label="Close notification">&times;</button>
        `;

        // Add styles
        Object.assign(notification.style, {
            position: 'fixed',
            bottom: '20px',
            right: '20px',
            padding: '16px 24px',
            borderRadius: '8px',
            backgroundColor: type === 'success' ? '#4A9B7F' : '#D64545',
            color: 'white',
            display: 'flex',
            alignItems: 'center',
            gap: '12px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
            zIndex: '1000',
            animation: 'slideInRight 0.3s ease'
        });

        // Add animation keyframes if not exists
        if (!document.getElementById('notification-styles')) {
            const style = document.createElement('style');
            style.id = 'notification-styles';
            style.textContent = `
                @keyframes slideInRight {
                    from {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                    to {
                        transform: translateX(0);
                        opacity: 1;
                    }
                }
                @keyframes slideOutRight {
                    from {
                        transform: translateX(0);
                        opacity: 1;
                    }
                    to {
                        transform: translateX(100%);
                        opacity: 0;
                    }
                }
                .notification-close {
                    background: none;
                    border: none;
                    color: white;
                    font-size: 20px;
                    cursor: pointer;
                    padding: 0;
                    line-height: 1;
                    opacity: 0.8;
                }
                .notification-close:hover {
                    opacity: 1;
                }
                .loading-spinner {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    border: 2px solid rgba(255,255,255,0.3);
                    border-top-color: white;
                    border-radius: 50%;
                    animation: spin 0.8s linear infinite;
                }
                @keyframes spin {
                    to { transform: rotate(360deg); }
                }
            `;
            document.head.appendChild(style);
        }

        document.body.appendChild(notification);

        // Close button functionality
        const closeBtn = notification.querySelector('.notification-close');
        closeBtn.addEventListener('click', () => {
            removeNotification(notification);
        });

        // Auto-remove after 5 seconds
        setTimeout(() => {
            removeNotification(notification);
        }, 5000);
    }

    /**
     * Remove notification with animation
     * @param {HTMLElement} notification - The notification element to remove
     */
    function removeNotification(notification) {
        if (notification && notification.parentElement) {
            notification.style.animation = 'slideOutRight 0.3s ease forwards';
            setTimeout(() => {
                notification.remove();
            }, 300);
        }
    }


    // ============================================
    // ACTIVE NAV LINK HIGHLIGHTING
    // ============================================

    /**
     * Update active nav link based on scroll position
     */
    function updateActiveNavLink() {
        const sections = document.querySelectorAll('section[id]');
        const scrollPos = window.scrollY + 100;

        sections.forEach(section => {
            const top = section.offsetTop;
            const height = section.offsetHeight;
            const id = section.getAttribute('id');
            const navLink = document.querySelector(`.nav-link[href="#${id}"]`);

            if (navLink) {
                if (scrollPos >= top && scrollPos < top + height) {
                    navLinks.forEach(link => link.classList.remove('active'));
                    navLink.classList.add('active');
                }
            }
        });
    }

    // Add active nav link styles
    const navActiveStyle = document.createElement('style');
    navActiveStyle.textContent = `
        .nav-link.active {
            color: var(--color-primary);
        }
        .nav-link.active::after {
            width: 100%;
        }
    `;
    document.head.appendChild(navActiveStyle);

    // Update on scroll (throttled)
    let navScrollTimeout;
    window.addEventListener('scroll', () => {
        if (navScrollTimeout) {
            window.cancelAnimationFrame(navScrollTimeout);
        }
        navScrollTimeout = window.requestAnimationFrame(updateActiveNavLink);
    });


    // ============================================
    // INITIALIZATION
    // ============================================

    // Log successful initialization
    console.log('LiteracAI website initialized successfully.');

})();