/**
 * 网站主要交互逻辑
 * 包含：移动端菜单切换、作品筛选、表单提交模拟、导航栏滚动效果
 */

document.addEventListener('DOMContentLoaded', () => {
    
    // 1. 移动端菜单切换
    const btn = document.getElementById('mobile-menu-btn');
    const menu = document.getElementById('mobile-menu');

    btn.addEventListener('click', () => {
        menu.classList.toggle('hidden');
        // 切换图标
        const icon = btn.querySelector('i');
        if (menu.classList.contains('hidden')) {
            icon.classList.remove('fa-xmark');
            icon.classList.add('fa-bars');
        } else {
            icon.classList.remove('fa-bars');
            icon.classList.add('fa-xmark');
        }
    });

    // 点击菜单项后自动关闭菜单
    menu.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
            menu.classList.add('hidden');
            const icon = btn.querySelector('i');
            icon.classList.remove('fa-xmark');
            icon.classList.add('fa-bars');
        });
    });

    // 2. 导航栏滚动阴影效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 10) {
            navbar.classList.add('shadow-md');
            navbar.classList.replace('h-20', 'h-16'); // 滚动时缩小高度
        } else {
            navbar.classList.remove('shadow-md');
            navbar.classList.replace('h-16', 'h-20');
        }
    });

    // 3. 作品筛选功能
    const filterBtns = document.querySelectorAll('.filter-btn');
    const portfolioItems = document.querySelectorAll('.portfolio-item');

    filterBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            // 移除所有按钮的激活状态
            filterBtns.forEach(b => {
                b.classList.remove('bg-primary', 'text-white');
                b.classList.add('bg-white', 'text-gray-600');
            });
            // 激活当前按钮
            btn.classList.remove('bg-white', 'text-gray-600');
            btn.classList.add('bg-primary', 'text-white');

            const filterValue = btn.getAttribute('data-filter');

            portfolioItems.forEach(item => {
                if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                    item.style.display = 'block';
                    // 添加淡入动画
                    item.animate([
                        { opacity: 0, transform: 'scale(0.9)' },
                        { opacity: 1, transform: 'scale(1)' }
                    ], {
                        duration: 300,
                        easing: 'ease-out'
                    });
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });

    // 4. 联系表单提交模拟
    const form = document.getElementById('contactForm');
    const successMsg = document.getElementById('successMessage');

    form.addEventListener('submit', (e) => {
        e.preventDefault();
        
        // 获取按钮并显示加载状态
        const submitBtn = form.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerText;
        submitBtn.innerText = '发送中...';
        submitBtn.disabled = true;
        submitBtn.classList.add('opacity-75', 'cursor-not-allowed');

        // 模拟网络请求延迟
        setTimeout(() => {
            // 重置表单
            form.reset();
            
            // 恢复按钮
            submitBtn.innerText = originalText;
            submitBtn.disabled = false;
            submitBtn.classList.remove('opacity-75', 'cursor-not-allowed');

            // 显示成功消息
            successMsg.classList.remove('hidden');
            
            // 3秒后隐藏成功消息
            setTimeout(() => {
                successMsg.classList.add('hidden');
            }, 3000);
        }, 1500);
    });

    // 5. 简单的滚动显现动画 (Intersection Observer)
    const observerOptions =