function smoothScrollTo(target) {
  const element = document.querySelector(target);
  if (element) {
    const headerHeight = document.querySelector('header').offsetHeight;
    const elementPosition = element.offsetTop - headerHeight - 20;
    
    window.scrollTo({
      top: elementPosition,
      behavior: 'smooth'
    });
  }
}

function addRippleEffect(e) {
  const button = e.currentTarget;
  const rect = button.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;
  
  const ripple = document.createElement('div');
  ripple.style.cssText = `
    position: absolute;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    left: ${x}px;
    top: ${y}px;
    width: ${size}px;
    height: ${size}px;
    pointer-events: none;
    z-index: 0;
  `;
  
  button.appendChild(ripple);
  
  setTimeout(() => {
    ripple.remove();
  }, 600);
}

function handleNavClick(e) {
  e.preventDefault();
  const href = e.currentTarget.getAttribute('href');
  
  if (href && href.startsWith('#')) {
    smoothScrollTo(href);
  }
  
  // Add ripple effect
  addRippleEffect(e);
}

function init() {
  // Add smooth scrolling to all navigation links
  const navLinks = document.querySelectorAll('a[href^="#"]');
  
  navLinks.forEach(link => {
    link.addEventListener('click', handleNavClick);
  });
  
  // Add CSS animation for ripple effect
  const style = document.createElement('style');
  style.textContent = `
    @keyframes ripple {
      to {
        transform: scale(4);
        opacity: 0;
      }
    }
    
    .nav-link-mobile {
      position: relative;
      overflow: hidden;
    }
  `;
  
  if (!document.querySelector('#ripple-style')) {
    style.id = 'ripple-style';
    document.head.appendChild(style);
  }
}

function teardown() {
  // Remove event listeners from navigation links
  const navLinks = document.querySelectorAll('a[href^="#"]');
  
  navLinks.forEach(link => {
    link.removeEventListener('click', handleNavClick);
  });
  
  // Remove added styles
  const rippleStyle = document.querySelector('#ripple-style');
  if (rippleStyle) {
    rippleStyle.remove();
  }
}

export { init, teardown };