interative.js

document.addEventListener('DOMContentLoaded', () => {
    // Interactive Modals
    const interactiveItems = document.querySelectorAll('.interactive-item');
    const modals = document.querySelectorAll('.interactive-modal');
    const interactiveModalCloseButtons = document.querySelectorAll('.interactive-modal-close');
  
    interactiveItems.forEach(item => {
      item.addEventListener('click', () => {
        const modalId = item.getAttribute('data-modal');
        const modal = document.getElementById(modalId);
        if (modal) {
          modal.classList.add('active');
        }
      });
    });
  
    interactiveModalCloseButtons.forEach(button => {
      button.addEventListener('click', () => {
        const modal = button.closest('.interactive-modal');
        modal.classList.remove('active');
      });
    });
  
    // Early Access Form
    const earlyAccessForm = document.getElementById('early-access-form');
    if (earlyAccessForm) {
      earlyAccessForm.addEventListener('submit', (e) => {
        e.preventDefault();
        const email = e.target.querySelector('input').value;
        const useCase = e.target.querySelector('select').value;
        
        // Here you would typically send this data to a backend service
        alert(`Thank you for your interest!\nEmail: ${email}\nUse Case: ${useCase}`);
      });
    }
  
    // Learn More Button Interactions
    const learnMoreButtons = document.querySelectorAll('.learn-more-btn');
    learnMoreButtons.forEach(button => {
      button.addEventListener('click', (e) => {
        const parentCard = e.target.closest('.experience-card, .advanced-feature');
        const cardTitle = parentCard.querySelector('h3').textContent;
        alert(`You want to learn more about: ${cardTitle}. Detailed information coming soon!`);
      });
    });
  
    // New Interactive Elements
    const playgroundCards = document.querySelectorAll('.playground-card');
    playgroundCards.forEach(card => {
      card.addEventListener('mouseenter', () => {
        const tooltip = card.getAttribute('data-tooltip');
        const tooltipElement = document.createElement('div');
        tooltipElement.classList.add('playground-tooltip');
        tooltipElement.textContent = tooltip;
        card.appendChild(tooltipElement);
      });
  
      card.addEventListener('mouseleave', () => {
        const tooltip = card.querySelector('.playground-tooltip');
        if (tooltip) {
          card.removeChild(tooltip);
        }
      });
    });
  
    // Vision Section Modals
    const visionTriggers = document.querySelectorAll('.vision-trigger');
    const visionModalsContainer = document.getElementById('vision-modals');
    const visionModalCloseButtons = document.querySelectorAll('.modal-close');
  
    visionTriggers.forEach(trigger => {
      trigger.addEventListener('click', (e) => {
        const card = e.target.closest('.vision-card');
        const modalId = card.getAttribute('data-modal-target');
        const modal = document.getElementById(modalId);
        
        if (modal) {
          visionModalsContainer.classList.add('active');
          modal.classList.add('active');
        }
      });
    });
  
    visionModalCloseButtons.forEach(button => {
      button.addEventListener('click', () => {
        visionModalsContainer.classList.remove('active');
        const activeModal = document.querySelector('.vision-modal.active');
        if (activeModal) {
          activeModal.classList.remove('active');
        }
      });
    });
  
    // Dynamic Text Replacement Effect
    const reimagineElement = document.querySelector('.hero h1');
    if (reimagineElement) {
      const words = ['Transformed', 'Revolutionized', 'Redefined', 'Elevated', 'Unleashed'];
      let currentWordIndex = 0;
      
      function animateTextReplacement() {
        const originalText = 'Reimagined';
        const targetWord = words[currentWordIndex];
        const container = document.createElement('div');
        container.style.display = 'inline-block';
        container.style.position = 'relative';
        
        // Create a wrapper for the static text
        const staticTextSpan = document.createElement('span');
        staticTextSpan.textContent = 'Experience the Web, ';
        
        reimagineElement.innerHTML = '';
        reimagineElement.appendChild(staticTextSpan);
        reimagineElement.appendChild(container);
  
        // Cursor effect
        const cursor = document.createElement('span');
        cursor.textContent = '_';
        cursor.style.animation = 'blink 0.7s infinite';
        cursor.style.marginLeft = '3px';
        
        // Clear original text
        function clearText(callback) {
          let index = originalText.length;
          const clearIntervalId = setInterval(() => {
            container.textContent = originalText.slice(0, index);
            index--;
            if (index < 0) {
              clearInterval(clearIntervalId);
              callback();
            }
          }, 50);
        }
  
        // Type new text
        function typeText() {
          let index = 0;
          const typeIntervalId = setInterval(() => {
            container.textContent = targetWord.slice(0, index + 1);
            index++;
            
            if (index === targetWord.length) {
              clearInterval(typeIntervalId);
              container.appendChild(cursor);
              
              // Prepare for next iteration
              setTimeout(() => {
                currentWordIndex = (currentWordIndex + 1) % words.length;
                animateTextReplacement();
              }, 2000);
            }
          }, 100);
        }
  
        clearText(typeText);
      }
  
      // Add style for cursor blinking
      const style = document.createElement('style');
      style.textContent = `
        @keyframes blink {
          0%, 100% { opacity: 1; }
          50% { opacity: 0; }
        }
      `;
      document.head.appendChild(style);
  
      // Start the animation
      animateTextReplacement();
    }
  });