// Mobile Menu Toggle
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');

mobileMenuBtn.addEventListener('click', () => {
    mobileMenu.classList.toggle('hidden');
    // Toggle icon between menu and x
    const icon = mobileMenuBtn.querySelector('i');
    if (mobileMenu.classList.contains('hidden')) {
        icon.setAttribute('data-feather', 'menu');
    } else {
        icon.setAttribute('data-feather', 'x');
    }
    feather.replace();
});

// Navbar Scroll Effect (change background on scroll)
const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {
    if (window.scrollY > 20) {
        navbar.classList.add('shadow-lg');
        navbar.classList.replace('bg-dark-bg/80', 'bg-dark-bg/95');
    } else {
        navbar.classList.remove('shadow-lg');
        navbar.classList.replace('bg-dark-bg/95', 'bg-dark-bg/80');
    }
});

// Simple Reveal on Scroll Animation
const revealElements = document.querySelectorAll('.reveal-on-scroll');

const revealOnScroll = () => {
    const windowHeight = window.innerHeight;
    const elementVisible = 100;

    revealElements.forEach((reveal) => {
        const elementTop = reveal.getBoundingClientRect().top;
        if (elementTop < windowHeight - elementVisible) {
            reveal.classList.add('animate-fade-in');
            reveal.classList.remove('opacity-0');
        }
    });
};

window.addEventListener('scroll', revealOnScroll);
// Trigger once on load
revealOnScroll();