/**
 * MAIN INTERACTIVE JAVASCRIPT
 * SMK Teratai Putih Global 3 Bekasi
 */

document.addEventListener('DOMContentLoaded', () => {
  // Mobile Navigation Menu Toggle
  const mobileToggle = document.getElementById('mobileToggle');
  const navMenu = document.getElementById('navMenu');

  if (mobileToggle && navMenu) {
    mobileToggle.addEventListener('click', () => {
      navMenu.classList.toggle('active');
      const icon = mobileToggle.querySelector('i');
      if (icon) {
        icon.classList.toggle('fa-bars');
        icon.classList.toggle('fa-xmark');
      }
    });
  }


  // Hero Image Slider - Dynamic rotation from CMS data (window.heroSliders)
  const sliderImgEl = document.getElementById('heroSliderImg');
  const sliderCapEl = document.getElementById('heroSliderCap');

  if (sliderImgEl && sliderCapEl && window.heroSliders && window.heroSliders.length > 1) {
    let currentSlide = 0;

    setInterval(() => {
      currentSlide = (currentSlide + 1) % window.heroSliders.length;
      const next = window.heroSliders[currentSlide];

      sliderImgEl.style.opacity = '0.3';
      setTimeout(() => {
        sliderImgEl.src = next.url;
        sliderCapEl.textContent = next.caption;
        sliderImgEl.style.opacity = '1';
      }, 300);
    }, 5000);
  }


  const cbtModal = document.getElementById('cbtModal');
  const cbtTriggers = document.querySelectorAll('.trigger-cbt-modal');
  const cbtCloseBtn = document.getElementById('closeCbtModal');

  if (cbtModal) {
    cbtTriggers.forEach(btn => {
      btn.addEventListener('click', (e) => {
        e.preventDefault();
        cbtModal.classList.add('show');
      });
    });

    if (cbtCloseBtn) {
      cbtCloseBtn.addEventListener('click', () => {
        cbtModal.classList.remove('show');
      });
    }

    // Close on outside click
    cbtModal.addEventListener('click', (e) => {
      if (e.target === cbtModal) {
        cbtModal.classList.remove('show');
      }
    });
  }

  // Counter Animation for Statistics
  const counters = document.querySelectorAll('.stat-counter');
  let animated = false;

  const animateCounters = () => {
    counters.forEach(counter => {
      const targetStr = counter.getAttribute('data-target');
      // Extract numeric value and any text suffix/prefix (like '+')
      const targetNum = parseInt(targetStr.replace(/[^0-9]/g, '')) || 0;
      const suffix = targetStr.replace(/[0-9]/g, '');
      let count = 0;
      const speed = targetNum / 50;

      const updateCount = () => {
        count += speed;
        if (count < targetNum) {
          counter.innerText = Math.ceil(count) + suffix;
          setTimeout(updateCount, 30);
        } else {
          counter.innerText = targetStr;
        }
      };

      updateCount();
    });
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !animated) {
        animateCounters();
        animated = true;
      }
    });
  }, { threshold: 0.5 });

  const statsSec = document.querySelector('.stats-section');
  if (statsSec) {
    observer.observe(statsSec);
  }

  // ==========================================
  // SCROLL REVEAL TRANSITION ANIMATION SYSTEM
  // ==========================================
  const revealTargets = document.querySelectorAll('.section-padding, .major-card, .testimonial-card, .news-card, .lab-tabs, .cta-box, .section-title, .hero-content');
  
  const revealObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('is-revealed');
      }
    });
  }, {
    threshold: 0.12,
    rootMargin: '0px 0px -40px 0px'
  });

  revealTargets.forEach(el => {
    el.classList.add('reveal-item');
    revealObserver.observe(el);
  });
});
