script.js

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 移动端导航菜单
    const hamburger = document.querySelector('.hamburger');
    const navMenu = document.querySelector('.nav-menu');

    hamburger.addEventListener('click', function() {
        navMenu.classList.toggle('active');
        hamburger.classList.toggle('active');
    });

    // 平滑滚动
    const navLinks = document.querySelectorAll('.nav-menu a');
    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const targetSection = document.querySelector(targetId);

            if (targetSection) {
                const offsetTop = targetSection.offsetTop - 80; // 考虑固定导航栏高度
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }

            // 关闭移动端菜单
            navMenu.classList.remove('active');
        });
    });

    // 滚动时的导航栏效果
    let lastScrollTop = 0;
    const header = document.querySelector('.header');

    window.addEventListener('scroll', function() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop;

        if (scrollTop > lastScrollTop && scrollTop > 100) {
            // 向下滚动 - 隐藏导航栏
            header.style.transform = 'translateY(-100%)';
        } else {
            // 向上滚动 - 显示导航栏
            header.style.transform = 'translateY(0)';
        }

        lastScrollTop = scrollTop;
    });

    // 机器人眼睛跟随鼠标效果
    const robotHead = document.querySelector('.robot-head');
    const eyes = document.querySelectorAll('.eye');

    if (robotHead && eyes.length > 0) {
        document.addEventListener('mousemove', function(e) {
            const rect = robotHead.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;

            const angleX = (e.clientX - centerX) / 30;
            const angleY = (e.clientY - centerY) / 30;

            eyes.forEach(eye => {
                const pupil = eye.querySelector('::after') || eye;
                eye.style.transform = `translate(${angleX}px, ${angleY}px)`;
            });
        });
    }

    // 功能卡片动画
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -100px 0px'
    };

    const observer = new IntersectionObserver(function(entries) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = '1';
                entry.target.style.transform = 'translateY(0)';
            }
        });
    }, observerOptions);

    // 观察所有功能卡片和图片
    const animateElements = document.querySelectorAll('.feature-card, .gallery-item, .spec-item');
    animateElements.forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
        observer.observe(el);
    });

    // 联系表单处理
    const contactForm = document.getElementById('contactForm');

    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();

            // 获取表单数据
            const formData = new FormData(contactForm);
            const name = formData.get('name');
            const email = formData.get('email');
            const message = formData.get('message');

            // 简单的表单验证
            if (!name || !email || !message) {
                showNotification('请填写所有必填字段！', 'error');
                return;
            }

            // 邮件格式验证
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                showNotification('请输入有效的邮箱地址！', 'error');
                return;
            }

            // 模拟发送（实际应用中这里应该发送到服务器）
            showNotification('感谢您的留言！我们会尽快回复您。', 'success');
            contactForm.reset();
        });
    }

    // 按钮点击效果
    const buttons = document.querySelectorAll('.btn');
    buttons.forEach(button => {
        button.addEventListener('click', function(e) {
            // 创建涟漪效果
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;

            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            ripple.classList.add('ripple');

            // 添加涟漪样式
            if (!document.querySelector('#ripple-style')) {
                const style = document.createElement('style');
                style.id = 'ripple-style';
                style.textContent = `
                    .btn {
                        position: relative;
                        overflow: hidden;
                    }
                    .ripple {
                        position: absolute;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.5);
                        transform: scale(0);
                        animation: ripple-animation 0.6s linear;
                        pointer-events: none;
                    }
                    @keyframes ripple-animation {
                        to {
                            transform: scale(4);
                            opacity: 0;
                        }
                    }
                `;
                document.head.appendChild(style);
            }

            this.appendChild(ripple);

            setTimeout(() => {
                ripple.remove();
            }, 600);

            // 特定按钮功能
            if (this.textContent.includes('立即购买')) {
                showNotification('购买功能即将上线！', 'info');
            } else if (this.textContent.includes('观看演示')) {
                showNotification('演示视频正在准备中！', 'info');
            }
        });
    });

    // 通知函数
    function showNotification(message, type = 'info') {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = `notification ${type}`;
        notification.textContent = message;

        // 添加通知样式
        if (!document.querySelector('#notification-style')) {
            const style = document.createElement('style');
            style.id = 'notification-style';
            style.textContent = `
                .notification {
                    position: fixed;
                    top: 100px;
                    right: 20px;
                    padding: 15px 20px;
                    border-radius: 8px;
                    color: white;
                    font-weight: bold;
                    z-index: 10000;
                    transform: translateX(100%);
                    transition: transform 0.3s ease;
                    max-width: 300px;
                }
                .notification.show {
                    transform: translateX(0);
                }
                .notification.success {
                    background: #50C878;
                }
                .notification.error {
                    background: #ff6b6b;
                }
                .notification.info {
                    background: #4A90E2;
                }
            `;
            document.head.appendChild(style);
        }

        document.body.appendChild(notification);

        // 显示通知
        setTimeout(() => {
            notification.classList.add('show');
        }, 100);

        // 3秒后自动隐藏
        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => {
                notification.remove();
            }, 300);
        }, 3000);
    }

    // 页面加载动画
    window.addEventListener('load', function() {
        document.body.style.opacity = '0';
        document.body.style.transition = 'opacity 0.5s ease';

        setTimeout(() => {
            document.body.style.opacity = '1';
        }, 100);
    });

    // 机器人交互功能
    const robotIllustration = document.querySelector('.robot-illustration');
    if (robotIllustration) {
        // 点击机器人时的反应
        robotIllustration.addEventListener('click', function() {
            this.style.animation = 'robot-bounce 0.5s ease';
            showNotification('汪汪！我是RoboDog，很高兴认识你！', 'success');

            setTimeout(() => {
                this.style.animation = '';
            }, 500);
        });

        // 添加机器人弹跳动画
        if (!document.querySelector('#robot-animation')) {
            const style = document.createElement('style');
            style.id = 'robot-animation';
            style.textContent = `
                @keyframes robot-bounce {
                    0%, 100% { transform: translateY(0); }
                    25% { transform: translateY(-10px); }
                    75% { transform: translateY(5px); }
                }
            `;
            document.head.appendChild(style);
        }
    }

    // 随机眨眼和动作
    setInterval(() => {
        const eyes = document.querySelectorAll('.eye');
        eyes.forEach(eye => {
            if (Math.random() > 0.8) {
                eye.style.transform = 'scaleY(0.1)';
                setTimeout(() => {
                    eye.style.transform = 'scaleY(1)';
                }, 150);
            }
        });
    }, 3000);

    console.log('🤖 RoboDog网站已加载完成！欢迎来到智能宠物机器人的世界！');
});