window.addEventListener('load', function () {
    setTimeout(() => { AOS.init({}); }, 1500);
    
    // 新增捲動偵測來觸發 p3-items 的透明度動畫
    initP3ItemsAnimation();
});

// 初始化 p3-items 的透明度動畫
function initP3ItemsAnimation() {
    // 取得所有 p3-item 元素
    const itemClasses = ['.p3-item-01', '.p3-item-02', '.p3-item-03', '.p3-item-04'];
    
    // 為每個 p3-item 類別設置觀察器
    itemClasses.forEach(itemClass => {
        const items = document.querySelectorAll(itemClass);
        
        if (!items.length) return;
        
        // 為每個元素建立單獨的觀察器
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                // 當元素進入可視區域時，觸發淡入動畫
                if (entry.isIntersecting) {
                    entry.target.classList.add('fade-in');
                } else {
                    // 當元素脫離可視區域時，移除淡入效果
                    entry.target.classList.remove('fade-in');
                }
            });
        }, {
            threshold: 0.3, // 當元素的 30% 進入可視區域時觸發
            rootMargin: '0px' // 可視區域的邊界
        });
        
        // 開始觀察所有指定類別的元素
        items.forEach(item => {
            observer.observe(item);
        });
    });
}

function GA(action, category, label) {
    gtag('event', action, {
        'event_category': category,
        'event_label': label,
        'value': 1
    });
}

function goTo(selector) {
    setTimeout(() => {
        const element = document.querySelector(selector);
        const top = element.getBoundingClientRect().top + window.pageYOffset - 100;

        window.scrollTo({
            top: top,
            behavior: 'smooth'
        });
    }, 10);
}

function clickNav() {
    if (document.body.clientWidth <= 992) {
        const button = document.querySelector('.container-fluid > button');
        if (button) {
            button.click();
        }
    }
}