document.addEventListener('DOMContentLoaded', function () {
  'use strict';

  /*--------------------------------------------------------------
    AJAX Submit Form (Vanilla JS - No jQuery)
  --------------------------------------------------------------*/
  const forms = document.querySelectorAll('.needs-validation');

  forms.forEach(form => {
    form.addEventListener('submit', function (event) {
      event.preventDefault();

      if (!form.checkValidity()) {
        form.classList.add('was-validated');
        return;
      }

      const submitBtn =
        form.querySelector('.submit_form') ||
        form.querySelector('.submit_subscribe');

      if (submitBtn) submitBtn.textContent = 'Sending...';

      // ⏳ Simulasi AJAX (no backend)
      setTimeout(() => {
        if (submitBtn) {
          submitBtn.textContent =
            submitBtn.classList.contains('submit_subscribe')
              ? 'Subscribed'
              : 'Send Message';
        }

        // Toast success
        const toastEl = document.querySelector(
          submitBtn?.classList.contains('submit_subscribe')
            ? '.success_msg_subscribe'
            : '.success_msg'
        );

        toastEl && new bootstrap.Toast(toastEl).show();

        form.reset();
        form.classList.remove('was-validated');

      }, 1200); // simulate request delay
    });
  });


  /*--------------------------------------------------------------
    Swiper Slider
  --------------------------------------------------------------*/
  const swiper = new Swiper('.mySwiper', {
    slidesPerView: 1,
    spaceBetween: 20,
    loop: true,
    centeredSlides: false, // make sure this is false to avoid centering the first slide
    slideToClickedSlide: false,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    breakpoints: {
      768: {
        slidesPerView: 2
      },
      1024: {
        slidesPerView: 3
      }
    }
  });

  /*--------------------------------------------------------------
      Number Counter
    --------------------------------------------------------------*/
  /**
   * Animates a count-up effect on the given element.
   * @param {number} [duration=2000] - Duration of the animation in milliseconds.
   */
  function animateCount(el, duration = 2000) {
    const target = parseFloat(el.dataset.count) || 0;
    const suffix = el.dataset.suffix || '';
    const startTime = performance.now();
    const isInteger = Number.isInteger(target);

    function update(currentTime) {
      const elapsed = currentTime - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const value = target * progress;

      el.textContent =
        (isInteger ? Math.floor(value) : value.toFixed(1)) + suffix;

      if (progress < 1) requestAnimationFrame(update);
    }

    requestAnimationFrame(update);
  }

  const counterObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !entry.target.classList.contains('counted')) {
        animateCount(entry.target);
        entry.target.classList.add('counted');
        observer.unobserve(entry.target);
      }
    });
  }, { threshold: 0.6 });

  document.querySelectorAll('.count-up').forEach(el => {
    counterObserver.observe(el);
  });

  /*--------------------------------------------------------------
    YT Video Player Overlay
  --------------------------------------------------------------*/
  const overlay = document.getElementById('videoOverlay');
  const frame = document.getElementById('youtubeFrame');

  function showVideoOverlay() {
    overlay.classList.remove('d-none');

    if (!frame.src) {
      frame.src = frame.dataset.src + '&autoplay=1';
    }
  }

  function hideVideoOverlay() {
    overlay.classList.add('d-none');

    // stop video & free resources
    frame.src = '';
  }

  document.querySelectorAll('.btn-play')
    .forEach(btn => btn.addEventListener('click', showVideoOverlay));

  document.querySelectorAll('.btn-close-overlay')
    .forEach(btn => btn.addEventListener('click', hideVideoOverlay));

  /*--------------------------------------------------------------
      Animate On Scroll (AOS)
    --------------------------------------------------------------*/
  // Initialize AOS (Animate On Scroll)
  AOS.init({
    duration: 800,
    once: true
  });

});
