// Theme switching functionality
document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-toggle');
    const body = document.body;
    const DARK_THEME = 'dark-theme';
    const LIGHT_THEME = 'light-theme';
    const THEME_KEY = '7sys-theme-preference';

    // Initialize stars background
    createStars();

    // Load saved theme preference
    const savedTheme = localStorage.getItem(THEME_KEY);
    if (savedTheme) {
        body.className = savedTheme;
    }

    // Theme toggle handler
    themeToggle.addEventListener('click', () => {
        const newTheme = body.classList.contains(DARK_THEME) ? LIGHT_THEME : DARK_THEME;
        body.className = newTheme;
        localStorage.setItem(THEME_KEY, newTheme);
    });

    // Create animated stars background
    function createStars() {
        const starsContainer = document.querySelector('.stars-background');
        const STARS_COUNT = 50;

        for (let i = 0; i < STARS_COUNT; i++) {
            const star = document.createElement('div');
            star.className = 'star';
            star.style.cssText = `
                position: absolute;
                width: ${Math.random() * 3}px;
                height: ${Math.random() * 3}px;
                background: ${body.classList.contains(DARK_THEME) ? '#fff' : '#1a365d'};
                left: ${Math.random() * 100}%;
                top: ${Math.random() * 100}%;
                opacity: ${Math.random()};
                border-radius: 50%;
                animation: twinkle ${2 + Math.random() * 3}s infinite ease-in-out;
            `;
            starsContainer.appendChild(star);
        }
    }

    // Add twinkling animation to stylesheet
    const style = document.createElement('style');
    style.textContent = `
        @keyframes twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 1; }
        }
    `;
    document.head.appendChild(style);
});