script.js

// Hamburger Menu Toggle
const navToggle = document.querySelector('.nav-toggle');
const navLinks = document.querySelector('.nav-links');
const body = document.body;

navToggle.addEventListener('click', (e) => {
    e.stopPropagation(); // Prevent click from bubbling to document
    navToggle.classList.toggle('active');
    navLinks.classList.toggle('active');
    body.classList.toggle('no-scroll'); // Prevent background scrolling when menu is open
});

// Close menu when clicking outside
document.addEventListener('click', (e) => {
    if (!navLinks.contains(e.target) && !navToggle.contains(e.target)) {
        navToggle.classList.remove('active');
        navLinks.classList.remove('active');
        body.classList.remove('no-scroll');
    }
});

// Close menu when clicking a link
document.querySelectorAll('.nav-links a').forEach(link => {
    link.addEventListener('click', () => {
        navToggle.classList.remove('active');
        navLinks.classList.remove('active');
        body.classList.remove('no-scroll');
    });
});

// Optional: Close menu when scrolling
let lastScrollTop = 0;
window.addEventListener('scroll', () => {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    if (scrollTop > lastScrollTop) {
        navToggle.classList.remove('active');
        navLinks.classList.remove('active');
    }
    lastScrollTop = scrollTop;
});

// Add scroll padding for fixed header
document.documentElement.style.setProperty(
    '--scroll-padding',
    document.querySelector('nav').offsetHeight + 'px'
);

// Smooth Scroll Function
function smoothScroll(targetId) {
    const targetSection = document.getElementById(targetId);
    const headerHeight = document.querySelector('nav').offsetHeight;
    
    if (targetSection) {
        const targetPosition = targetSection.offsetTop - headerHeight;
        window.scrollTo({
            top: targetPosition,
            behavior: 'smooth'
        });
    }
}

// Handle Hero Buttons
document.addEventListener('DOMContentLoaded', () => {
    // Menangani kedua tombol dengan cara yang sama
    document.querySelectorAll('.hero-buttons a').forEach(button => {
        button.addEventListener('click', (e) => {
            e.preventDefault();
            const targetId = button.getAttribute('data-target');
            smoothScroll(targetId);
        });
    });
});

// Intersection Observer yang lebih cepat
const sectionObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            requestAnimationFrame(() => {
                entry.target.style.opacity = '1';
            });
        } else {
            requestAnimationFrame(() => {
                entry.target.style.opacity = '0.99'; // Nilai opacity yang lebih tinggi
            });
        }
    });
}, {
    threshold: 0.05, // Threshold lebih kecil untuk trigger lebih cepat
    rootMargin: '-10px'
});

// Inisialisasi yang lebih cepat
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('section').forEach(section => {
        // Transisi opacity yang lebih cepat
        section.style.transition = 'opacity 0.4s ease-out'; // Durasi dikurangi
        
        // Set background secara langsung
        if (section.id === 'portofolio' || section.id === 'kontak' || section.id === 'tentang') {
            section.style.backgroundColor = '#ffffff';
        }
        
        sectionObserver.observe(section);
    });
});

// AOS initialization dengan konfigurasi yang lebih halus
AOS.init({
    duration: 1000,
    easing: 'ease-in-out',
    once: false,
    mirror: true,
    offset: 100,
    anchorPlacement: 'top-bottom',
    disable: false
});

// Scroll Animations dengan arah yang berbeda
function initScrollAnimations() {
    const elements = document.querySelectorAll('.fade-up, .fade-left, .fade-right, .scale-up');
    
    const fadeAnimationObserver = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('active');
                if (entry.target.classList.contains('fade-up')) {
                    entry.target.style.transform = 'translateY(0)';
                } else if (entry.target.classList.contains('fade-left')) {
                    entry.target.style.transform = 'translateX(0)';
                } else if (entry.target.classList.contains('fade-right')) {
                    entry.target.style.transform = 'translateX(0)';
                } else if (entry.target.classList.contains('scale-up')) {
                    entry.target.style.transform = 'scale(1)';
                }
                entry.target.style.opacity = '1';
            } else {
                entry.target.classList.remove('active');
                if (entry.target.classList.contains('fade-up')) {
                    entry.target.style.transform = 'translateY(30px)';
                } else if (entry.target.classList.contains('fade-left')) {
                    entry.target.style.transform = 'translateX(-30px)';
                } else if (entry.target.classList.contains('fade-right')) {
                    entry.target.style.transform = 'translateX(30px)';
                } else if (entry.target.classList.contains('scale-up')) {
                    entry.target.style.transform = 'scale(0.95)';
                }
                entry.target.style.opacity = '0';
            }
        });
    }, {
        threshold: 0.2,
        rootMargin: '-20px'
    });

    elements.forEach(element => {
        element.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
        fadeAnimationObserver.observe(element);
    });
}

// Back to Top Button
function initBackToTop() {
    const backToTop = document.createElement('div');
    backToTop.classList.add('back-to-top');
    backToTop.innerHTML = '<i class="fas fa-arrow-up"></i>';
    document.body.appendChild(backToTop);

    window.addEventListener('scroll', () => {
        if (window.scrollY > 300) {
            backToTop.classList.add('visible');
        } else {
            backToTop.classList.remove('visible');
        }
    });

    backToTop.addEventListener('click', () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
}

// Progress Bar
function initScrollProgressBar() {
    const progressBar = document.createElement('div');
    progressBar.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: #007bff;
        z-index: 1001;
        transition: width 0.2s ease;
    `;
    document.body.appendChild(progressBar);

    window.addEventListener('scroll', () => {
        const totalScroll = document.documentElement.scrollHeight - window.innerHeight;
        const progress = (window.scrollY / totalScroll) * 100;
        progressBar.style.width = `${progress}%`;
    });
}

// Header Transparency on Scroll
function initHeaderTransparency() {
    const header = document.querySelector('nav');
    const transparencyThreshold = 100; // Scroll threshold in pixels

    window.addEventListener('scroll', () => {
        if (window.scrollY > transparencyThreshold) {
            header.classList.add('transparent');
        } else {
            header.classList.remove('transparent');
        }
    });
}

// Initialize everything when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    // Add animation classes to elements
    document.querySelectorAll('.service-card').forEach((card, index) => {
        card.classList.add('fade-up');
        card.style.transitionDelay = `${index * 0.1}s`;
    });

    document.querySelectorAll('.portfolio-item').forEach((item, index) => {
        item.classList.add(index % 2 === 0 ? 'fade-left' : 'fade-right');
        item.style.transitionDelay = `${index * 0.1}s`;
    });

    document.querySelector('.hero h1').classList.add('fade-up');
    document.querySelector('.hero p').classList.add('fade-up');
    document.querySelector('.hero .cta-button').classList.add('scale-up');

    // Initialize all features
    initScrollAnimations();
    initBackToTop();
    initScrollProgressBar();
    initHeaderTransparency();

    initButtonActions();
});

// Scroll Progress
window.addEventListener('scroll', () => {
    const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.querySelector('.scroll-progress').style.backgroundSize = scrolled + '% 100%';
});

// Tambahkan event listener untuk scroll
let scrollTimeout;
window.addEventListener('scroll', () => {
    if (scrollTimeout) {
        window.cancelAnimationFrame(scrollTimeout);
    }

    scrollTimeout = window.requestAnimationFrame(() => {
        const scrolled = window.scrollY;
        const windowHeight = window.innerHeight;
        
        document.querySelectorAll('[data-aos]').forEach(element => {
            const elementTop = element.getBoundingClientRect().top + scrolled;
            const elementVisible = 150; // Meningkatkan visibility threshold
            
            if (scrolled > elementTop - windowHeight + elementVisible) {
                element.classList.add('aos-animate');
            } else {
                element.classList.remove('aos-animate');
            }
        });
    });
});

// Fungsi untuk animasi counting
function animateCounter(element, target, duration = 2000) {
    let start = 0;
    const increment = target / (duration / 16); // 16ms adalah ~60fps
    
    function updateCount() {
        start += increment;
        if (start >= target) {
            element.textContent = target;
            return;
        }
        element.textContent = Math.floor(start);
        requestAnimationFrame(updateCount);
    }
    
    updateCount();
}

// Observer untuk trigger animasi counting
const statsObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const statItems = entry.target.querySelectorAll('.stat-item h3');
            statItems.forEach(item => {
                const target = parseInt(item.getAttribute('data-target'));
                if (!item.classList.contains('counted')) {
                    animateCounter(item, target);
                    item.classList.add('counted');
                }
            });
            statsObserver.unobserve(entry.target);
        }
    });
}, {
    threshold: 0.5
});

// Inisialisasi observer untuk stats section
document.addEventListener('DOMContentLoaded', () => {
    const statsSection = document.querySelector('.about-stats');
    if (statsSection) {
        statsObserver.observe(statsSection);
    }
    
    // Reset counting saat scroll ke atas
    window.addEventListener('scroll', () => {
        const statsSection = document.querySelector('.about-stats');
        if (statsSection) {
            const rect = statsSection.getBoundingClientRect();
            if (rect.top > window.innerHeight) {
                const statItems = statsSection.querySelectorAll('.stat-item h3');
                statItems.forEach(item => {
                    item.classList.remove('counted');
                    item.textContent = '0';
                });
                statsObserver.observe(statsSection);
            }
        }
    });
});

// Smooth scroll untuk link portfolio
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        
        const target = document.querySelector(this.getAttribute('href'));
        
        window.scrollTo({
            top: target.offsetTop - 80, // 80px offset untuk navbar
            behavior: 'smooth'
        });
    });
});

// Modal functionality
document.addEventListener('DOMContentLoaded', function() {
    // Mendapatkan semua elemen yang diperlukan
    const modal = document.getElementById('projectModal');
    const detailButtons = document.querySelectorAll('.btn-detail');
    const closeButton = document.querySelector('.close-modal');

    // Event listener untuk setiap tombol detail
    detailButtons.forEach(button => {
        button.addEventListener('click', function() {
            console.log('Button clicked'); // Debug log
            openModal();
        });
    });

    // Event listener untuk tombol close
    if (closeButton) {
        closeButton.addEventListener('click', closeModal);
    }

    // Event listener untuk klik di luar modal
    window.addEventListener('click', function(event) {
        if (event.target === modal) {
            closeModal();
        }
    });

    // Event listener untuk tombol ESC
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            closeModal();
        }
    });

    // Fungsi untuk membuka modal
    function openModal() {
        console.log('Opening modal'); // Debug log
        if (modal) {
            modal.style.display = 'flex';
            document.body.style.overflow = 'hidden';
        }
    }

    // Fungsi untuk menutup modal
    function closeModal() {
        if (modal) {
            modal.style.display = 'none';
            document.body.style.overflow = 'auto';
        }
    }
});