// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', (e) => {
    e.preventDefault();
    const href = anchor.getAttribute('href');
    if (href) {
      const target = document.querySelector(href);
      if (target) {
        target.scrollIntoView({
          behavior: 'smooth'
        });
      }
    }
  });
});

// 滚动动画
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

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

// 观察所有卡片元素
document.querySelectorAll('.product-card, .feature-card, .testimonial-card, .download-item').forEach(el => {
  observer.observe(el);
});

// 添加淡入动画样式
const style = document.createElement('style');
style.textContent = `
  .product-card,
  .feature-card,
  .testimonial-card,
  .download-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
`;
document.head.appendChild(style);

// 按钮点击效果
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', (e: Event) => {
    const mouseEvent = e as MouseEvent;
    const ripple = document.createElement('span');
    ripple.style.cssText = `
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      width: 100px;
      height: 100px;
      margin-top: -50px;
      margin-left: -50px;
      animation: ripple 0.6s;
      pointer-events: none;
    `;

    const rect = (btn as HTMLElement).getBoundingClientRect();
    ripple.style.left = (mouseEvent.clientX - rect.left) + 'px';
    ripple.style.top = (mouseEvent.clientY - rect.top) + 'px';

    btn.appendChild(ripple);

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

// 添加波纹动画
const rippleStyle = document.createElement('style');
rippleStyle.textContent = `
  @keyframes ripple {
    from {
      opacity: 1;
      transform: scale(0);
    }
    to {
      opacity: 0;
      transform: scale(2);
    }
  }

  .btn {
    position: relative;
    overflow: hidden;
  }
`;
document.head.appendChild(rippleStyle);

console.log('HelloWorld website loaded successfully!');