script.js

// Mobile Menu Toggle
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
const navLinks = document.querySelector('.nav-links');
const navActions = document.querySelector('.nav-actions');

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

// Smooth Scrolling
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'
            });
        }
    });
});

// Pricing Toggle
const pricingToggle = document.getElementById('pricing-toggle');
const priceAmounts = document.querySelectorAll('.price-amount');

if (pricingToggle) {
    pricingToggle.addEventListener('change', function() {
        const isAnnual = this.checked;
        priceAmounts.forEach(amount => {
            const currentText = amount.textContent;
            if (currentText.includes('$')) {
                const monthlyPrice = parseInt(currentText.replace('$', ''));
                if (isAnnual) {
                    const annualPrice = Math.round(monthlyPrice * 12 * 0.8);
                    amount.textContent = `$${annualPrice}`;
                } else {
                    amount.textContent = `$${monthlyPrice}`;
                }
            }
        });
    });
}

// Navbar Dynamic Background Based on Section
const navbar = document.querySelector('.navbar');
const sections = document.querySelectorAll('section[data-section-theme], footer[data-section-theme]');

function updateNavbarTheme() {
    const scrollPosition = window.pageYOffset + navbar.offsetHeight + 100;
    
    let currentTheme = 'light'; // Default to light
    
    sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionBottom = sectionTop + section.offsetHeight;
        const theme = section.getAttribute('data-section-theme');
        
        if (scrollPosition >= sectionTop && scrollPosition < sectionBottom) {
            currentTheme = theme;
        }
    });
    
    // Update navbar classes
    if (currentTheme === 'dark') {
        navbar.classList.add('dark-theme');
    } else {
        navbar.classList.remove('dark-theme');
    }
    
    // Update shadow on scroll
    if (window.pageYOffset > 100) {
        navbar.style.boxShadow = currentTheme === 'dark' 
            ? '0 4px 6px -1px rgba(0, 0, 0, 0.3)' 
            : '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
    } else {
        navbar.style.boxShadow = 'none';
    }
}

// Update on scroll
window.addEventListener('scroll', updateNavbarTheme);
// Update on load
window.addEventListener('load', updateNavbarTheme);
// Update on resize
window.addEventListener('resize', updateNavbarTheme);

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

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, observerOptions);

// Observe feature cards
document.querySelectorAll('.feature-card').forEach(card => {
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(card);
});

// Observe testimonial cards
document.querySelectorAll('.testimonial-card').forEach(card => {
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(card);
});

// Observe pricing cards
document.querySelectorAll('.pricing-card').forEach(card => {
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
    observer.observe(card);
});

// Parallax Effect for Hero
window.addEventListener('scroll', () => {
    const scrolled = window.pageYOffset;
    const heroVisual = document.querySelector('.hero-visual');
    if (heroVisual && scrolled < window.innerHeight) {
        heroVisual.style.transform = `translateY(${scrolled * 0.3}px)`;
    }
});

// Add loading animation
window.addEventListener('load', () => {
    document.body.classList.add('loaded');
});