storagebox.fi/script.js

// === Navbar scroll effect ===
const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {
    if (window.scrollY > 50) {
        navbar.classList.add('scrolled');
    } else {
        navbar.classList.remove('scrolled');
    }
});

// === Mobile nav toggle ===
const navToggle = document.getElementById('navToggle');
const navLinks = document.getElementById('navLinks');

navToggle.addEventListener('click', () => {
    navToggle.classList.toggle('active');
    navLinks.classList.toggle('active');
});

// Close mobile nav on link click
navLinks.querySelectorAll('a').forEach(link => {
    link.addEventListener('click', () => {
        navToggle.classList.remove('active');
        navLinks.classList.remove('active');
    });
});

// === Scroll animations (Intersection Observer) ===
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');
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

// Add fade-in class to animatable elements
document.querySelectorAll('.feature-card, .pricing-card, .contact-info-card, .section-title, .section-subtitle').forEach(el => {
    el.classList.add('fade-in');
    observer.observe(el);
});

// === Contact form ===
const contactForm = document.getElementById('contactForm');
const formStatus = document.getElementById('formStatus');

contactForm.addEventListener('submit', async (e) => {
    e.preventDefault();

    const submitBtn = contactForm.querySelector('button[type="submit"]');
    const originalText = submitBtn.textContent;
    submitBtn.textContent = 'Lähetetään...';
    submitBtn.disabled = true;

    try {
        const formData = new FormData(contactForm);
        const response = await fetch('send.php', {
            method: 'POST',
            body: formData,
        });

        const result = await response.json();

        if (result.success) {
            formStatus.className = 'form-status success';
            formStatus.textContent = result.message;
            contactForm.reset();
        } else {
            formStatus.className = 'form-status error';
            formStatus.textContent = result.message;
        }
    } catch (error) {
        formStatus.className = 'form-status error';
        formStatus.textContent = 'Yhteysvirhe. Ota yhteyttä suoraan: box@storagebox.fi';
    }

    submitBtn.textContent = originalText;
    submitBtn.disabled = false;

    setTimeout(() => {
        formStatus.className = 'form-status';
    }, 8000);
});