script.js

// Mobile menu toggle functionality
document.addEventListener('DOMContentLoaded', function() {
    const hamburger = document.getElementById('hamburger');
    const navMobile = document.getElementById('navMobile');
    
    // Add header scroll effect
    const header = document.querySelector('.header');
    
    // Smooth scrolling for anchor links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function(e) {
            const targetId = this.getAttribute('href');
            if (targetId === '#' || !document.querySelector(targetId)) return;
            
            e.preventDefault();
            
            // Close mobile menu if open
            if (hamburger && navMobile) {
                hamburger.classList.remove('active');
                navMobile.classList.remove('active');
                document.body.style.overflow = '';
            }
            
            // Smooth scroll to target
            const targetElement = document.querySelector(targetId);
            if (targetElement) {
                window.scrollTo({
                    top: targetElement.offsetTop - 80, // Account for fixed header
                    behavior: 'smooth'
                });
            }
        });
    });
    
    // Header scroll effect
    if (header) {
        window.addEventListener('scroll', () => {
            if (window.scrollY > 50) {
                header.classList.add('scrolled');
            } else {
                header.classList.remove('scrolled');
            }
        });
        
        // Initialize header state
        if (window.scrollY > 50) {
            header.classList.add('scrolled');
        }
    }
    
    // Mobile menu toggle
    if (hamburger && navMobile) {
        hamburger.addEventListener('click', function(e) {
            e.stopPropagation();
            this.classList.toggle('active');
            navMobile.classList.toggle('active');
            document.body.style.overflow = navMobile.classList.contains('active') ? 'hidden' : '';
        });
        
        // Close mobile menu when clicking on a link
        const mobileLinks = document.querySelectorAll('.nav-mobile-links a');
        mobileLinks.forEach(link => {
            link.addEventListener('click', () => {
                hamburger.classList.remove('active');
                navMobile.classList.remove('active');
                document.body.style.overflow = '';
            });
        });
        
        // Close mobile menu when clicking outside
        document.addEventListener('click', (e) => {
            if (!hamburger.contains(e.target) && !navMobile.contains(e.target)) {
                hamburger.classList.remove('active');
                navMobile.classList.remove('active');
                document.body.style.overflow = '';
            }
        });
    }
    
    // Initialize Intersection Observer for fade-in animations
    const fadeElements = document.querySelectorAll('.fade-in');
    
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    fadeElements.forEach(element => {
        observer.observe(element);
    });
    
    // Add animation delay to credential cards
    const cards = document.querySelectorAll('.credential-card');
    cards.forEach((card, index) => {
        card.style.animationDelay = `${index * 0.15}s`;
    });
});

// Upcoming Book Projects Slider
function initProjectsSlider() {
    const track = document.querySelector('.projects-slider .slider-track');
    const cards = Array.from(track.children);
    const leftArrow = document.querySelector('.projects-slider .slider-arrow.left');
    const rightArrow = document.querySelector('.projects-slider .slider-arrow.right');
    let currentIndex = 0;
    const total = cards.length;

    function getCardsToShow() {
        if (window.innerWidth >= 900) return 3;
        if (window.innerWidth >= 600) return 2;
        return 1;
    }

    function updateSlider() {
        const cardsToShow = getCardsToShow();
        const cardWidth = cards[0].offsetWidth + 24; // card width + margin
        track.style.transition = 'transform 0.5s cubic-bezier(.77,0,.18,1)';
        track.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
    }

    leftArrow.addEventListener('click', function() {
        const cardsToShow = getCardsToShow();
        currentIndex = (currentIndex - 1 + total) % total;
        updateSlider();
    });
    rightArrow.addEventListener('click', function() {
        const cardsToShow = getCardsToShow();
        currentIndex = (currentIndex + 1) % total;
        updateSlider();
    });
    window.addEventListener('resize', updateSlider);
    updateSlider();
}

document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.projects-slider')) {
        initProjectsSlider();
    }
});