script.js

document.addEventListener('DOMContentLoaded', () => {
    const navButtons = document.querySelectorAll('.nav-btn');
    const screens = document.querySelectorAll('.screen');
    const viewCalendarLink = document.querySelector('.view-calendar');
    const calendarBackLink = document.querySelector('.calendar-back');

    // Navigation function
    function navigateToScreen(screenId, updateNav = false) {
        screens.forEach(screen => screen.classList.remove('active'));
        const targetScreen = document.getElementById(screenId);
        if (targetScreen) {
            targetScreen.classList.add('active');
        }
        
        if (updateNav) {
            navButtons.forEach(btn => btn.classList.remove('active'));
            const activeNavBtn = document.querySelector(`[data-screen="${screenId}"]`);
            if (activeNavBtn) {
                activeNavBtn.classList.add('active');
            }
        }
    }

    // Bottom navigation
    navButtons.forEach(button => {
        button.addEventListener('click', () => {
            const targetScreenId = button.dataset.screen;
            navigateToScreen(targetScreenId, true);
        });
    });

    // Splash screen auto-navigation (3 seconds)
    setTimeout(() => {
        if (document.getElementById('splash-screen').classList.contains('active')) {
            navigateToScreen('onboarding-1');
        }
    }, 3000);

    // Onboarding navigation
    let currentOnboarding = 1;
    const onboardingNextBtns = document.querySelectorAll('.onboarding-next');
    
    onboardingNextBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            if (currentOnboarding < 3) {
                currentOnboarding++;
                navigateToScreen(`onboarding-${currentOnboarding}`);
            } else {
                navigateToScreen('welcome-screen');
            }
        });
    });

    // Welcome screen navigation
    const welcomeLoginBtn = document.querySelector('.welcome-login');
    const welcomeSignupBtn = document.querySelector('.welcome-signup');
    const forgotPasswordLink = document.querySelector('.forgot-password-link');

    if (welcomeLoginBtn) {
        welcomeLoginBtn.addEventListener('click', () => {
            navigateToScreen('login-screen');
        });
    }

    if (welcomeSignupBtn) {
        welcomeSignupBtn.addEventListener('click', () => {
            navigateToScreen('signup-screen');
        });
    }

    if (forgotPasswordLink) {
        forgotPasswordLink.addEventListener('click', (e) => {
            e.preventDefault();
            navigateToScreen('forgot-password-screen');
        });
    }

    // Auth screen navigation
    const authLinks = document.querySelectorAll('.auth-link');
    const backBtns = document.querySelectorAll('.back-btn');
    const authSubmitBtns = document.querySelectorAll('.auth-submit');

    authLinks.forEach(link => {
        link.addEventListener('click', (e) => {
            e.preventDefault();
            const targetScreen = link.dataset.screen;
            navigateToScreen(targetScreen);
        });
    });

    backBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            const targetScreen = btn.dataset.screen;
            navigateToScreen(targetScreen);
        });
    });

    authSubmitBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            // Simulate successful auth
            navigateToScreen('dashboard-screen');
        });
    });

    // Dashboard action buttons
    const actionBtns = document.querySelectorAll('.action-btn');
    actionBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const targetScreen = btn.dataset.screen;
            navigateToScreen(targetScreen);
        });
    });

    // Navigate to Planting Calendar screen
    if (viewCalendarLink) {
        viewCalendarLink.addEventListener('click', (e) => {
            e.preventDefault();
            navigateToScreen('screen-4');
        });
    }

    // Back from calendar to screen-2
    if (calendarBackLink) {
        calendarBackLink.addEventListener('click', (e) => {
            e.preventDefault();
            navigateToScreen('screen-2', true);
        });
    }

    // Enhanced back button functionality with history tracking
    let navigationHistory = ['splash-screen'];
    
    function addToHistory(screenId) {
        if (navigationHistory[navigationHistory.length - 1] !== screenId) {
            navigationHistory.push(screenId);
            // Keep history manageable (max 10 screens)
            if (navigationHistory.length > 10) {
                navigationHistory.shift();
            }
        }
    }
    
    function goBack() {
        if (navigationHistory.length > 1) {
            navigationHistory.pop(); // Remove current screen
            const previousScreen = navigationHistory[navigationHistory.length - 1];
            navigateToScreen(previousScreen);
        }
    }
    
    // Enhanced back button event listeners with history tracking
    const allBackBtns = document.querySelectorAll('.back-btn');
    allBackBtns.forEach(btn => {
        btn.addEventListener('click', (e) => {
            e.preventDefault();
            const targetScreen = btn.dataset.screen;
            addToHistory(targetScreen);
            navigateToScreen(targetScreen);
        });
    });
    
    // Add keyboard navigation support
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            goBack();
        }
    });
    
    // Optimize animations for better performance
    function optimizeAnimations() {
        const animatedElements = document.querySelectorAll('.floating-leaf, .logo-icon, .onboarding-icon, .action-btn');
        animatedElements.forEach(el => {
            el.style.willChange = 'transform';
            el.style.backfaceVisibility = 'hidden';
        });
    }
    
    // Initialize performance optimizations
    optimizeAnimations();
    
    // Add intersection observer for lazy loading animations
    if ('IntersectionObserver' in window) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.style.animationPlayState = 'running';
                } else {
                    entry.target.style.animationPlayState = 'paused';
                }
            });
        });
        
        // Observe animated elements for performance
        const animatedElements = document.querySelectorAll('.floating-leaf, .logo-icon, .onboarding-icon');
        animatedElements.forEach(el => observer.observe(el));
    }
    
    // Add scroll event listener with throttling
    let ticking = false;
    function updateOnScroll() {
        if (!ticking) {
            requestAnimationFrame(() => {
                handleScroll();
                ticking = false;
            });
            ticking = true;
        }
    }
    
    document.addEventListener('scroll', updateOnScroll, { passive: true });
    
    // Preload critical screens for faster navigation
    function preloadCriticalScreens() {
        const criticalScreens = [
            'dashboard-screen', 
            'garden-planner-screen', 
            'plant-growth-tracker-screen', 
            'ai-gardening-assistant-screen',
             'community-forum-screen',
            'nearby-gardens-map-screen',
            'events-workshops-screen',
            'compost-guide-screen', 
            'progress-tracker-screen', 
            'ai-assistant-screen'
        ];
        criticalScreens.forEach(screenId => {
            const screen = document.getElementById(screenId);
            if (screen) {
                // Preload images and critical content
                const images = screen.querySelectorAll('img');
                images.forEach(img => {
                    if (img.dataset.src && !img.src) {
                        img.src = img.dataset.src;
                    }
                });
            }
        });
    }
    
    // Preload after initial load
    setTimeout(preloadCriticalScreens, 1000);
});