script.js

// MCP Website JavaScript

document.addEventListener('DOMContentLoaded', function() {
  // Newsletter subscription form
  const newsletterForm = document.getElementById('newsletter-form');
  if (newsletterForm) {
    newsletterForm.addEventListener('submit', function(e) {
      e.preventDefault();
      const email = this.querySelector('input[type="email"]').value;
      
      // In a real implementation, this would send the email to a server
      // For demonstration purposes, we'll show an alert
      alert(`Thank you for subscribing with ${email}! You'll receive MCP updates soon.`);
      this.reset();
    });
  }

  // Smooth scrolling for navigation links
  const navLinks = document.querySelectorAll('nav a[href^="#"]');
  navLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      const targetId = this.getAttribute('href');
      const targetElement = document.querySelector(targetId);
      
      if (targetElement) {
        window.scrollTo({
          top: targetElement.offsetTop - 80,
          behavior: 'smooth'
        });
      }
    });
  });

  // Add active class to navigation items on scroll
  const sections = document.querySelectorAll('section[id]');
  window.addEventListener('scroll', function() {
    const scrollPosition = window.scrollY + 150;
    
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;
      const sectionId = section.getAttribute('id');
      
      if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
        document.querySelector(`nav a[href="#${sectionId}"]`).classList.add('active');
      } else {
        document.querySelector(`nav a[href="#${sectionId}"]`).classList.remove('active');
      }
    });
  });

  // Create a simple syntax highlighting effect for code blocks
  const codeBlocks = document.querySelectorAll('pre code');
  codeBlocks.forEach(block => {
    // Simple keyword highlighting
    const keywords = ['import', 'const', 'let', 'var', 'function', 'return', 'async', 'await', 'new', 'class'];
    const punctuation = ['{', '}', '[', ']', '(', ')', ',', ';', '.', ':'];
    const strings = ['"', "'", '`'];
    
    // Get the text content
    let content = block.textContent;
    
    // This is a very simple implementation - in a real-world scenario,
    // you would use a proper syntax highlighting library like Prism.js or highlight.js
    
    // For now, we'll just add a CSS class to the block to enable some basic styling
    block.classList.add('syntax-highlighted');
  });
});