script.js

document.addEventListener('DOMContentLoaded', function() {
    // Initialize GSAP animations
    initAnimations();
    
    // Add particles to quantum sphere
    createParticles();
    
    // Smooth scrolling for navigation links
    initSmoothScroll();
    
    // Add form submission handler
    initFormHandler();
});

/* @tweakable number of particles in the quantum sphere visualization */
const particleCount = 15;

/* @tweakable primary glow color (matches CSS variable) */
const primaryGlowColor = '#7400e0';

/* @tweakable secondary glow color (matches CSS variable) */
const secondaryGlowColor = '#00d4ff';

/* @tweakable particle size range */
const particleSizeRange = {min: 3, max: 8};

function initAnimations() {
    // Animate tech cards on scroll
    gsap.from('.tech-card', {
        scrollTrigger: {
            trigger: '.technology',
            start: 'top 80%',
        },
        y: 50,
        opacity: 0,
        duration: 0.8,
        stagger: 0.2,
        ease: 'power3.out'
    });
    
    // Animate use cases on scroll
    gsap.from('.use-case', {
        scrollTrigger: {
            trigger: '.use-cases',
            start: 'top 80%',
        },
        y: 30,
        opacity: 0,
        duration: 0.6,
        stagger: 0.15,
        ease: 'power2.out'
    });
    
    // Animate goals on scroll
    gsap.from('.goal', {
        scrollTrigger: {
            trigger: '.goals',
            start: 'top 80%',
        },
        scale: 0.9,
        opacity: 0,
        duration: 0.7,
        stagger: 0.2,
        ease: 'back.out(1.5)'
    });
}

function createParticles() {
    const particles = document.querySelector('.particles');
    
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        // Random size
        const size = Math.random() * (particleSizeRange.max - particleSizeRange.min) + particleSizeRange.min;
        
        // Random position
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        
        // Random color (between primary and secondary glow)
        const color = i % 2 === 0 ? primaryGlowColor : secondaryGlowColor;
        
        // Set particle styles
        particle.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: ${color};
            border-radius: 50%;
            top: ${posY}%;
            left: ${posX}%;
            box-shadow: 0 0 ${size * 2}px ${color};
            opacity: ${Math.random() * 0.5 + 0.3};
            animation: particle-float ${Math.random() * 4 + 3}s ease-in-out infinite alternate-reverse;
        `;
        
        // Add to container
        particles.appendChild(particle);
    }
}

function initSmoothScroll() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            e.preventDefault();
            
            const targetId = this.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 100,
                    behavior: 'smooth'
                });
            }
        });
    });
}

function initFormHandler() {
    const contactForm = document.querySelector('.contact-form form');
    
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Get form values
            const name = document.getElementById('name').value;
            const email = document.getElementById('email').value;
            const interest = document.getElementById('interest').value;
            const message = document.getElementById('message').value;
            
            // In a real application, you would send this data to your server
            console.log('Form submitted:', { name, email, interest, message });
            
            // Show success message
            alert('Thank you for your interest! We will get back to you soon.');
            
            // Reset form
            contactForm.reset();
        });
    }
}

// Add window resize handler for mobile optimization
window.addEventListener('resize', function() {
    // This could be used to adjust animations or layouts based on window size
    if (window.innerWidth < 768) {
        // Mobile optimizations
    }
});