app.js

// ===== NAVIGATION =====
function showSection(section) {
    // Hide all sections
    document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
    // Show target
    const target = document.getElementById(`section-${section}`);
    if (target) target.classList.add('active');

    // Update nav links
    document.querySelectorAll('.nav-link').forEach(link => {
        link.classList.toggle('active', link.dataset.section === section);
    });

    // Close any open game
    closeGame();

    // Scroll to top
    window.scrollTo(0, 0);
}

function toggleMenu() {
    document.getElementById('mobileMenu').classList.toggle('show');
}

// ===== GAME MODAL =====
let currentGame = null;

function openGame(game) {
    const modal = document.getElementById('game-modal');
    const container = document.getElementById('game-container');
    modal.classList.add('show');
    currentGame = game;

    switch(game) {
        case 'snake': createSnakeGame(container); break;
        case 'tictactoe': createTicTacToe(container); break;
        case 'memory': createMemoryGame(container); break;
        case 'clicker': createClickerGame(container); break;
    }
}

function closeGame() {
    const modal = document.getElementById('game-modal');
    if (modal) modal.classList.remove('show');
    currentGame = null;
    // Clear any game intervals
    if (window._clickerInterval) {
        clearInterval(window._clickerInterval);
    }
}

// Close modal on escape
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') closeGame();
});

// Close modal on backdrop click
document.getElementById('game-modal')?.addEventListener('click', (e) => {
    if (e.target === e.currentTarget) closeGame();
});

// ===== INTERSECTION OBSERVER FOR ANIMATIONS =====
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0)';
        }
    });
}, { threshold: 0.1 });

// Observe cards
document.querySelectorAll('.feature-card, .game-card, .tip-card').forEach(card => {
    card.style.opacity = '0';
    card.style.transform = 'translateY(20px)';
    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    observer.observe(card);
});

// ===== FUN: Confetti on hero button click =====
document.querySelector('.btn-primary')?.addEventListener('click', () => {
    for (let i = 0; i < 20; i++) {
        const confetti = document.createElement('div');
        const colors = ['#6C63FF', '#FF6B9D', '#FFD93D', '#4ECB71', '#00D2FF'];
        confetti.style.cssText = `
            position: fixed;
            width: ${Math.random() * 10 + 5}px;
            height: ${Math.random() * 10 + 5}px;
            background: ${colors[Math.floor(Math.random() * colors.length)]};
            border-radius: ${Math.random() > 0.5 ? '50%' : '2px'};
            top: ${Math.random() * 100}vh;
            left: ${Math.random() * 100}vw;
            pointer-events: none;
            z-index: 9999;
            animation: confettiFall ${Math.random() * 2 + 1}s ease forwards;
        `;
        document.body.appendChild(confetti);
        setTimeout(() => confetti.remove(), 3000);
    }
});

// Add confetti animation
const confettiStyle = document.createElement('style');
confettiStyle.textContent = `
    @keyframes confettiFall {
        0% { opacity: 1; transform: translateY(0) rotate(0deg); }
        100% { opacity: 0; transform: translateY(100vh) rotate(720deg); }
    }
`;
document.head.appendChild(confettiStyle);

// ===== CONSOLE EASTER EGG =====
console.log('%c🪙 YouFill', 'font-size: 30px; font-weight: bold; color: #6C63FF;');
console.log('%cBuilt for Maaz! 🚀', 'font-size: 16px; color: #FFD93D;');