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

// Dark/Light mode toggle
function toggleDarkMode() {
    const isDark = document.documentElement.classList.toggle('dark');
    document.documentElement.classList.toggle('light', !isDark);
    localStorage.setItem('darkMode', isDark ? 'true' : 'false');
    
    // Dispatch custom event for navbar to listen to
    window.dispatchEvent(new CustomEvent('themeChanged', {
        detail: { isDark }
    }));
}

function updateModeIcon(isDark) {
    window.dispatchEvent(new CustomEvent('updateThemeIcon', {
        detail: { isDark }
    }));
}

// Listen for navbar toggle requests
window.addEventListener('toggleTheme', () => {
    toggleDarkMode();
});

// Initialize mode preference - default to light theme
document.addEventListener('DOMContentLoaded', () => {
    // Set default to light mode
    const storedMode = localStorage.getItem('darkMode');
    
    if (storedMode === 'true') {
        document.documentElement.classList.add('dark');
        document.documentElement.classList.remove('light');
    } else {
        document.documentElement.classList.remove('dark');
        document.documentElement.classList.add('light');
        localStorage.setItem('darkMode', 'false');
    }

    // Update icon on load
    const isDark = document.documentElement.classList.contains('dark');
    updateModeIcon(isDark);
});

// Intersection Observer for animations
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            entry.target.classList.add('fade-in');
        }
    });
}, {
    threshold: 0.1
});

document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});