script.js

document.addEventListener('DOMContentLoaded', () => {
    initNavigation();
    initMobileMenu();
    initScrollEffects();
    initThemeToggle();
});
// ==================== THEME TOGGLE ====================
function initThemeToggle() {
    const root = document.documentElement;
    const toggleBtn = document.getElementById('theme-toggle');

    if (!toggleBtn) return;

    const storedTheme = localStorage.getItem('color-scheme');
    const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

    const initialTheme = storedTheme || (systemPrefersDark ? 'dark' : 'light');
    root.setAttribute('data-color-scheme', initialTheme);
    toggleBtn.textContent = initialTheme === 'dark' ? '☀️' : '🌙';

    toggleBtn.addEventListener('click', () => {
        const current = root.getAttribute('data-color-scheme');
        const next = current === 'dark' ? 'light' : 'dark';

        root.setAttribute('data-color-scheme', next);
        localStorage.setItem('color-scheme', next);
        toggleBtn.textContent = next === 'dark' ? '☀️' : '🌙';
    });
}

// ==================== NAVIGATION ====================
function initNavigation() {
    const navLinks = document.querySelectorAll('.nav-link');
    navLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = link.getAttribute('href');
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                const navHeight = document.querySelector('.navbar').offsetHeight;
                const targetPosition = targetElement.offsetTop - navHeight;
                window.scrollTo({
                    top: targetPosition,
                    behavior: 'smooth'
                });
                closeMobileMenu();
            }
        });
    });

    // Button actions
    const primaryBtns = document.querySelectorAll('.btn-primary');
    const secondaryBtns = document.querySelectorAll('.btn-secondary');
    
    primaryBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            if (btn.getAttribute('href') === '#') {
                e.preventDefault();
                showNotification('Feature coming soon!', 'info');
            }
        });
    });

    secondaryBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            if (btn.getAttribute('href') === '#' || btn.tagName === 'BUTTON') {
                e.preventDefault();
                showNotification('Feature coming soon!', 'info');
            }
        });
    });
}

function initMobileMenu() {
    const burger = document.querySelector('.burger');
    if (burger) {
        burger.addEventListener('click', () => {
            toggleMobileMenu();
        });
    }
}

function toggleMobileMenu() {
    const burger = document.querySelector('.burger');
    const navLinks = document.querySelector('.nav-links');
    const navActions = document.querySelector('.nav-actions');
    
    burger.classList.toggle('active');
    
    if (navLinks) {
        navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
    }
    if (navActions) {
        navActions.style.display = navActions.style.display === 'flex' ? 'none' : 'flex';
    }
}

function closeMobileMenu() {
    const burger = document.querySelector('.burger');
    const navLinks = document.querySelector('.nav-links');
    const navActions = document.querySelector('.nav-actions');
    
    if (burger && burger.classList.contains('active')) {
        burger.classList.remove('active');
    }
    if (navLinks) navLinks.style.display = 'none';
    if (navActions) navActions.style.display = 'none';
}

// ==================== SCROLL EFFECTS ====================
function initScrollEffects() {
    const navbar = document.querySelector('.navbar');
    
    window.addEventListener('scroll', () => {
        const scrollTop = window.scrollY;
        if (scrollTop > 10) {
            navbar.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1)';
        } else {
            navbar.style.boxShadow = '0 1px 2px 0 rgba(0, 0, 0, 0.05)';
        }
        fadeInOnScroll();
    });
}

function fadeInOnScroll() {
    const elements = document.querySelectorAll('.feature-item, .step-card');
    
    elements.forEach(element => {
        const rect = element.getBoundingClientRect();
        const isVisible = rect.top < window.innerHeight * 0.85;
        
        if (isVisible && !element.classList.contains('visible')) {
            element.classList.add('visible');
        }
    });
}

// ==================== NOTIFICATIONS ====================
function showNotification(message, type = 'info') {
    const existingNotification = document.querySelector('.notification');
    if (existingNotification) existingNotification.remove();
    
    const notification = document.createElement('div');
    notification.className = `notification notification-${type}`;
    notification.textContent = message;
    
    const bgColor = type === 'success' ? '#10B981' : type === 'error' ? '#EF4444' : '#3B82F6';
    
    notification.style.cssText = `
        position: fixed;
        top: 100px;
        right: 20px;
        padding: 1rem 1.5rem;
        background: ${bgColor};
        color: white;
        border-radius: 0.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 10000;
        font-weight: 500;
        max-width: 400px;
    `;
    
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.remove();
    }, 3000);
}

// ==================== EVENT LISTENERS ====================
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeMobileMenu();
});

// Burger menu styles
const style = document.createElement('style');
style.textContent = `
    .burger.active span:nth-child(1) {
        transform: rotate(45deg) translate(8px, 8px);
    }
    .burger.active span:nth-child(2) {
        opacity: 0;
    }
    .burger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
    }
    @media (max-width: 768px) {
        .nav-links, .nav-actions {
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            background: white;
            flex-direction: column;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            gap: 1rem;
            border-bottom: 1px solid #E5E7EB;
        }
    }
`;
document.head.appendChild(style);

console.log('UniSync initialized successfully!');