script.js

// --- Carousel Logic for Importing Captions Section ---
document.addEventListener('DOMContentLoaded', () => {
  const carouselSection = document.getElementById('feature-solutions');
  if (carouselSection) {
    const cards = carouselSection.querySelectorAll('.carousel-card');
    const videos = carouselSection.querySelectorAll('.feature-video');
    const tabs = carouselSection.querySelectorAll('.carousel-tab');
    let activeIdx = 0;
    let carouselTimer = null;

    function updateCarousel(resetTimer = true) {
      cards.forEach((card, idx) => {
        card.classList.remove('active', 'left', 'right');
        if (idx === activeIdx) {
          card.classList.add('active');
          card.style.pointerEvents = 'auto'; // Allow clicks on active card
        } else if (idx === (activeIdx + 1) % 3) {
          card.classList.add('right');
          card.style.pointerEvents = 'none'; // Disable clicks on side cards
        } else if (idx === (activeIdx + 2) % 3) {
          card.classList.add('left');
          card.style.pointerEvents = 'none'; // Disable clicks on side cards
        } else {
          card.style.pointerEvents = 'none'; // Disable clicks on other cards
        }
      });
      tabs.forEach((tab, idx) => {
        tab.classList.toggle('active', idx === activeIdx);
      });
      videos.forEach((video, idx) => {
        if (idx === activeIdx) {
          video.currentTime = 0;
          video.play();
        } else {
          video.pause();
          video.currentTime = 0;
        }
      });
      if (resetTimer) {
        resetCarouselTimer();
      }
    }

    function resetCarouselTimer() {
      if (carouselTimer) clearInterval(carouselTimer);
      carouselTimer = setInterval(() => {
        activeIdx = (activeIdx + 1) % 3;
        updateCarousel(false);
      }, 10000);
    }

    // Handle card clicks for navigation
    cards.forEach((card, idx) => {
      card.addEventListener('click', (e) => {
        e.stopPropagation(); // Prevent event from bubbling up
        
        // If clicking on a non-active card, go directly to that card
        if (idx !== activeIdx) {
          activeIdx = idx;
          updateCarousel();
          return;
        }
        
        // If clicking on active card, check click position for navigation
        const rect = card.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const cardWidth = rect.width;
        const zoneWidth = cardWidth * 0.4; // 40% of card width on each side
        
        if (clickX < zoneWidth) {
          // Clicked on left side - go to previous
          activeIdx = (activeIdx + 2) % 3;
        } else if (clickX > (cardWidth - zoneWidth)) {
          // Clicked on right side - go to next
          activeIdx = (activeIdx + 1) % 3;
        } else {
          // Clicked in middle - do nothing
          return;
        }
        
        updateCarousel();
      });
    });
    tabs.forEach((tab, idx) => {
      tab.addEventListener('click', () => {
        if (idx !== activeIdx) {
          activeIdx = idx;
          updateCarousel();
        }
      });
    });
    document.addEventListener('keydown', e => {
      if (!carouselSection.contains(document.activeElement)) return;
      if (e.key === 'ArrowLeft') {
        activeIdx = (activeIdx + 2) % 3;
        updateCarousel();
      } else if (e.key === 'ArrowRight') {
        activeIdx = (activeIdx + 1) % 3;
        updateCarousel();
      }
    });
    // Add click handlers for navigation overlays
    const leftNav = carouselSection.querySelector('.left-nav');
    const rightNav = carouselSection.querySelector('.right-nav');
    
    const navigateLeft = (e) => {
      e.stopPropagation();
      activeIdx = (activeIdx + 2) % 3; // Go to previous
      updateCarousel();
    };
    
    const navigateRight = (e) => {
      e.stopPropagation();
      activeIdx = (activeIdx + 1) % 3; // Go to next
      updateCarousel();
    };
    
    if (leftNav) {
      leftNav.addEventListener('click', navigateLeft);
    }
    
    if (rightNav) {
      rightNav.addEventListener('click', navigateRight);
    }
    
    // Also allow clicking on the side cards to navigate
    cards.forEach((card, idx) => {
      card.addEventListener('click', (e) => {
        if (card.classList.contains('left')) {
          navigateLeft(e);
        } else if (card.classList.contains('right')) {
          navigateRight(e);
        } else if (card.classList.contains('active')) {
          // Handle click on active card if needed
          e.stopPropagation();
        }
      });
    });

    // Start the timer and initialize
    updateCarousel();
  }
});

// --- Modal Functionality ---
document.addEventListener('DOMContentLoaded', () => {
    const modal = document.getElementById('subscribe-modal');
    const openBtn = document.getElementById('open-subscribe-modal');
    const closeBtn = document.getElementById('close-subscribe-modal');

    // Function to open the modal
    const openModal = () => {
        if (modal) {
            modal.style.display = 'block';
            document.body.classList.add('modal-open'); // Prevent background scroll
        }
    };

    // Function to close the modal
    const closeModal = () => {
        if (modal) {
            modal.style.display = 'none';
            document.body.classList.remove('modal-open'); // Allow background scroll
        }
    };

    // Event listener for the open button
    if (openBtn) {
        openBtn.addEventListener('click', openModal);
    }

    // Event listener for the close button
    if (closeBtn) {
        closeBtn.addEventListener('click', closeModal);
    }

    // Event listener to close modal if clicked outside the content
    if (modal) {
        modal.addEventListener('click', (event) => {
            // Check if the click is directly on the modal background (not the content)
            if (event.target === modal) {
                closeModal();
            }
        });
    }

    // Optional: Close modal with the Escape key
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && modal && modal.style.display === 'block') {
            closeModal();
        }
    });
});