/* EmilMD home page: scroll-colored intro text, advantages slider and the non-surgical tabs.
   Exact copy of https://skjy5h.csb.app/pages/home.js as of Oct 22, 2026, served from the site's own asset storage so the live site does not depend on a sandbox host. */
document.addEventListener("DOMContentLoaded", function () {
  initTextAnimations();
  initAdvantageSwiper();
});

function initTextAnimations() {
  const textElements = document.querySelectorAll(".about_text");

  textElements.forEach((el) => {
    const split = new SplitText(el, { type: "lines, words" });

    gsap.to(split.words, {
      color: "#521F19",
      stagger: 0.1,
      duration: 1,
      ease: "power2.out",
      scrollTrigger: {
        trigger: el,
        start: "top 80%",
        end: "top 30%",
        scrub: true,
      },
    });
  });
}

function initAdvantageSwiper() {
  const tabs = document.querySelectorAll(".advantage_gallery_tab_item");
  const swiperElement = document.querySelector(".swiper.advantage");

  if (!swiperElement) return;

  const swiperAdvantage = new Swiper(swiperElement, {
    centeredSlides: true,
    slidesPerView: 1,
    spaceBetween: 80,
    speed: 800,
    preventClicks: true,
    autoplay: {
      delay: 3000,
      disableOnInteraction: false,
    },
    breakpoints: {
      768: {
        slidesPerView: "auto",
      },
    },
    on: {
      init: function () {
        updateActiveTab(this.realIndex, tabs);
      },
      slideChange: function () {
        updateActiveTab(this.realIndex, tabs);
      },
    },
  });

  tabs.forEach((tab, index) => {
    tab.addEventListener("click", () => {
      swiperAdvantage.slideToLoop(index);
    });
  });
}

// function updateActiveTab(index, tabs) {
//   tabs.forEach((tab) => tab.classList.remove("is-active"));
//   if (tabs[index]) {
//     tabs[index].classList.add("is-active");
//   }
// }
/*
function updateActiveTab(index, tabs) {
  tabs.forEach((tab) => tab.classList.remove("is-active"));

  const activeTab = tabs[index];

  if (activeTab) {
    activeTab.classList.add("is-active");

    activeTab.scrollIntoView({
      behavior: "smooth",
      inline: "center",
      block: "nearest",
    });
  }
}
*/

function updateActiveTab(index, tabs) {
  tabs.forEach((tab) => tab.classList.remove("is-active"));

  const activeTab = tabs[index];
  if (!activeTab) return;

  activeTab.classList.add("is-active");

  // Horizontal-only centering (no document vertical scroll)
  const container = activeTab.closest(".advantage_gallery_tab_wrap");
  if (!container) return;

  const containerRect = container.getBoundingClientRect();
  const tabRect = activeTab.getBoundingClientRect();

  const delta =
    tabRect.left +
    tabRect.width / 2 -
    (containerRect.left + containerRect.width / 2);

  container.scrollTo({
    left: container.scrollLeft + delta,
    behavior: "smooth",
  });
}

window.Webflow = window.Webflow || [];
window.Webflow.push(function () {
  const section = document.querySelector(".non-surgical_layout");
  if (!section) return;

  const buttons = section.querySelectorAll(".non-surgical_button_text_wrap");
  const images = section.querySelectorAll(".non-surgical_visual_img_wrap");

  // IMPORTANT: scoped to this section, not the whole page
  const learnMoreLink = section.querySelector(
    ".button_main_wrap .clickable_link"
  );

  const tabLinks = [
    "/procedures/botox-injections",
    "/procedures/prp-treatment",
    "/procedures/microneedling-w-radiofrequency",
    "/procedures/fillers",
  ];

  function activateTab(index) {
    buttons.forEach((btn) => btn.classList.remove("is-active"));
    images.forEach((img) => img.classList.remove("is-active"));

    if (buttons[index]) buttons[index].classList.add("is-active");
    if (images[index]) images[index].classList.add("is-active");

    if (learnMoreLink && tabLinks[index]) {
      learnMoreLink.setAttribute("href", tabLinks[index]);
    }
  }

  buttons.forEach((btn, index) => {
    btn.addEventListener("click", function () {
      activateTab(index);
    });
  });

  activateTab(0);
});