// Theme switcher functionality
document.addEventListener('DOMContentLoaded', () => {
    // Check for saved theme preference or use system preference
    const savedTheme = localStorage.getItem('theme') || 
                     (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
    document.documentElement.classList.toggle('dark', savedTheme === 'dark');
    
    // Theme toggle button
    document.querySelectorAll('[data-theme-toggle]').forEach(btn => {
        btn.addEventListener('click', () => {
            const isDark = document.documentElement.classList.toggle('dark');
            localStorage.setItem('theme', isDark ? 'dark' : 'light');
            
            // Update all theme toggle buttons
            document.querySelectorAll('[data-theme-toggle]').forEach(el => {
                const icon = el.querySelector('[data-feather]');
                if (icon) {
                    icon.setAttribute('data-feather', isDark ? 'sun' : 'moon');
                    feather.replace();
                }
            });
        });
    });
    
    // Smooth scroll for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
    
    // Copy code snippet functionality
    document.addEventListener('click', (e) => {
        if (e.target.closest('[data-copy-btn]')) {
            const btn = e.target.closest('[data-copy-btn]');
            const code = btn.parentElement.querySelector('code').innerText;
            
            navigator.clipboard.writeText(code).then(() => {
                const originalHtml = btn.innerHTML;
                btn.innerHTML = '<span>Copied!</span>';
                setTimeout(() => {
                    btn.innerHTML = originalHtml;
                }, 2000);
            });
        }
    });
});

// Intersection Observer for animations
const animateOnScroll = () => {
    const observers = [];
    
    const fadeUpObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-fade-up');
                fadeUpObserver.unobserve(entry.target);
            }
        });
    }, { threshold: 0.1 });
    
    document.querySelectorAll('[data-animate="fade-up"]').forEach(el => {
        fadeUpObserver.observe(el);
    });
    observers.push(fadeUpObserver);
    
    return () => observers.forEach(obs => obs.disconnect());
};

document.addEventListener('DOMContentLoaded', animateOnScroll);