script.js

// Main JavaScript for NanoMatter Technologies

// Intersection Observer for scroll animations
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// Initialize scroll animations
document.addEventListener('DOMContentLoaded', function() {
    // Add fade-in class to all sections
    const sections = document.querySelectorAll('section');
    sections.forEach(section => {
        section.classList.add('fade-in');
        observer.observe(section);
    });

    // Add particles to hero section
    createParticles();
    
    // Initialize feather icons
    feather.replace();
});

// Particle animation for hero section
function createParticles() {
    const heroSection = document.querySelector('section:first-of-type');
    const particleCount = 20;
    
    for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';
        
        // Random position
        const left = Math.random() * 100;
        const top = Math.random() * 100;
        const size = Math.random() * 3 + 2;
        const delay = Math.random() * 5;
        const duration = Math.random() * 3 + 4;
        
        particle.style.left = `${left}%`;
        particle.style.top = `${top}%`;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.animationDelay = `${delay}s`;
        particle.style.animationDuration = `${duration}s`;
        
        heroSection.appendChild(particle);
    }
}

// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }
    });
});

// Form handling
document.querySelector('form')?.addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Simple form validation
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    // Check if all fields are filled
    const allFilled = Object.values(data).every(value => value.trim() !== '');
    
    if (allFilled) {
        // Show success message (in a real app, you would send this to a server)
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.textContent;
        
        submitBtn.textContent = 'Sending...';
        submitBtn.disabled = true;
        
        // Simulate API call
        setTimeout(() => {
            submitBtn.textContent = 'Message Sent!';
            submitBtn.style.background = '#16a34a';
            
            setTimeout(() => {
                submitBtn.textContent = originalText;
                submitBtn.disabled = false;
                this.reset();
            }, 2000);
        }, 1000);
    } else {
        alert('Please fill in all fields');
    }
});
// Add loading animation to technology icons
document.querySelectorAll('.tech-icon, .service-icon').forEach(icon => {
    icon.addEventListener('mouseenter', function() {
        const featherIcon = this.querySelector('[data-feather]');
        if (featherIcon) {
            featherIcon.style.transform = 'scale(1.1)';
    });
    
    icon.addEventListener('mouseleave', function() {
        const featherIcon = this.querySelector('[data-feather]');
        if (featherIcon) {
            featherIcon.style.transform = 'scale(1)';
    });
});
// Mobile menu toggle (handled in navbar component)
// This is kept here for any additional functionality