script.js

// Vorkflow Main JavaScript
// Shared functionality across all pages

class VorkflowApp {
    constructor() {
        this.init();
    }

    init() {
        // Initialize cursor follower
        this.initCursorFollower();
        
        // Initialize scroll animations
        this.initScrollAnimations();
        
        // Initialize page transitions
        this.initPageTransitions();
        
        // Initialize intersection observer for section reveals
        this.initSectionObserver();
    }

    initCursorFollower() {
        const cursor = document.querySelector('.cursor-follower');
        if (!cursor) return;

        let mouseX = 0;
        let mouseY = 0;
        let cursorX = 0;
        let cursorY = 0;

        document.addEventListener('mousemove', (e) => {
            mouseX = e.clientX;
            mouseY = e.clientY;
        });

        function animateCursor() {
            // Smooth movement
            const dx = mouseX - cursorX;
            const dy = mouseY - cursorY;
            
            cursorX += dx * 0.1;
            cursorY += dy * 0.1;
            
            cursor.style.left = cursorX + 'px';
            cursor.style.top = cursorY + 'px';
            
            requestAnimationFrame(animateCursor);
        }

        animateCursor();

        // Hover effects
        const interactiveElements = document.querySelectorAll('a, button, .hover-card, .cursor-parallax');
        interactiveElements.forEach(el => {
            el.addEventListener('mouseenter', () => {
                cursor.style.width = '60px';
                cursor.style.height = '60px';
                cursor.style.borderColor = 'rgba(56, 189, 248, 0.5)';
            });

            el.addEventListener('mouseleave', () => {
                cursor.style.width = '40px';
                cursor.style.height = '40px';
                cursor.style.borderColor = 'rgba(56, 189, 248, 0.3)';
            });
        });
    }

    initScrollAnimations() {
        // Initialize GSAP ScrollTrigger
        if (typeof gsap !== 'undefined' && typeof ScrollTrigger !== 'undefined') {
            gsap.registerPlugin(ScrollTrigger);

            // Animate sections on scroll
            gsap.utils.toArray('section').forEach(section => {
                gsap.from(section, {
                    opacity: 0,
                    y: 50,
                    duration: 1,
                    ease: "power3.out",
                    scrollTrigger: {
                        trigger: section,
                        start: "top 80%",
                        end: "bottom 20%",
                        toggleActions: "play none none reverse",
                    }
                });
            });

            // Parallax effect for background elements
            gsap.to('.parallax-bg', {
                yPercent: 20,
                    ease: "none",
                    scrollTrigger: {
                        trigger: 'main',
                        start: "top top",
                        end: "bottom top",
                        scrub: true,
                    }
                });
            }
        }
    }

    initPageTransitions() {
        // Handle internal link clicks
        document.addEventListener('click', (e) => {
            const link = e.target.closest('a');
            if (!link) return;

            const href = link.getAttribute('href');
            
            // Only handle internal links
            if (href && href.startsWith('/') || href.endsWith('.html')) {
                e.preventDefault();
                
                // Create transition overlay
                const overlay = document.createElement('div');
                overlay.className = 'page-transition active';
                document.body.appendChild(overlay);
                
                // Navigate after animation
                setTimeout(() => {
                    window.location.href = href;
                }, 600);
            }
        });
    }

    initSectionObserver() {
        const sections = document.querySelectorAll('section');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, {
            threshold: 0.1,
            rootMargin: '0px 0px -100px 0px'
        });

        sections.forEach(section => {
            observer.observe(section);
        });
    }

    // Form submission handler
    handleFormSubmit(formId) {
        const form = document.getElementById(formId);
        if (!form) return;

        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const submitBtn = form.querySelector('button[type="submit"]');
            const originalText = submitBtn.textContent;
            
            // Show loading state
            submitBtn.innerHTML = '<span class="loading-dots"><span></span><span></span><span></span></span>';
            submitBtn.disabled = true;
            
            // Simulate API call
            setTimeout(() => {
                // Show success message
                const successMessage = document.createElement('div');
                successMessage.className = 'fixed top-4 right-4 bg-gradient-to-r from-green-500 to-emerald-600 text-white px-6 py-4 rounded-xl shadow-2xl z-50 animate-slide-up';
                successMessage.innerHTML = `
                    <div class="flex items-center gap-3">
                        <i data-feather="check-circle" class="w-6 h-6"></i>
                    <div>
                        <p class="font-semibold">Strategic Session Requested</p>
                        <p class="text-sm opacity-90">Our AI team will contact you within 24 hours.</p>
                    </div>
                `;
                document.body.appendChild(successMessage);
                
                // Reset form
                form.reset();
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
                
                // Remove success message after 5 seconds
                setTimeout(() => {
                    successMessage.remove();
                }, 5000);
                
                // Replace icons
                if (window.feather) {
                    feather.replace();
                }
            }, 1500);
        });
    }

    // Counter animation
    animateCounter(elementId, targetValue, duration = 2000) {
        const element = document.getElementById(elementId);
        if (!element) return;

        let startValue = 0;
        const increment = targetValue / (duration / 16.67); // 60fps
        const timer = setInterval(() => {
            startValue += increment;
            if (startValue >= targetValue) {
                element.textContent = targetValue + '+';
                clearInterval(timer);
            } else {
                element.textContent = Math.floor(startValue) + '+';
            }
        }, 16.67);
    }
}

// Initialize the app when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    window.vorkflowApp = new VorkflowApp();
    
    // Handle any form submissions on the page
    vorkflowApp.handleFormSubmit('contact-form');
    vorkflowApp.handleFormSubmit('strategy-form');
    
    // Animate any counters
    vorkflowApp.animateCounter('counter-1', 42);
    vorkflowApp.animateCounter('counter-2', 65);
    vorkflowApp.animateCounter('counter-3', 87);
    vorkflowApp.animateCounter('counter-4', 98);
});

// Handle navigation active state
function setActiveNavLink() {
    const currentPath = window.location.pathname;
    const navLinks = document.querySelectorAll('custom-navbar a');
    
    navLinks.forEach(link => {
        const href = link.getAttribute('href');
        if (currentPath.includes(href) || (currentPath === '/' && href === 'index.html')) {
            link.classList.add('active');
        } else {
            link.classList.remove('active');
        }
    });
}

// Call on page load and navigation
setActiveNavLink();
window.addEventListener('popstate', setActiveNavLink);