/* Scoped to: history-template-hero */
(function() {
  'use strict';
  var componentRoots = document.querySelectorAll('[data-component-slug="history-template-hero"]');
  componentRoots.forEach(function(componentRoot) {
    // Helper to query within component, with fallback to document for sibling elements
    var $ = function(sel) { 
      return componentRoot.querySelector(sel) || document.querySelector('[data-component-slug="history-template-hero"] ~ ' + sel) || document.querySelector(sel);
    };
    var $$ = function(sel) { 
      var results = componentRoot.querySelectorAll(sel);
      return results.length ? results : document.querySelectorAll(sel);
    };
    // Original component JS runs in this scope
    (function () { const slides = document.querySelectorAll(".slide"); const miniTrack = document.getElementById("miniTrack"); const progressFill = document.getElementById("progressFill"); const indexEl = document.getElementById("slideIndex"); const heroTitle = document.getElementById("heroTitle"); const heroDesc = document.getElementById("heroDesc"); const heroCtaText = document.getElementById("heroCtaText"); const slideContent = [ { title: document.getElementById("heroTitle").textContent.trim(), desc: document.getElementById("heroDesc").textContent.trim(), cta: document.getElementById("heroCtaText").textContent.trim(), }, { title: document.getElementById("hero_title_2").textContent.trim(), desc: document.getElementById("hero_desc_2").textContent.trim(), cta: document.getElementById("hero_cta_text_2").textContent.trim(), }, { title: document.getElementById("hero_title_3").textContent.trim(), desc: document.getElementById("hero_desc_3").textContent.trim(), cta: document.getElementById("hero_cta_text_3").textContent.trim(), }, { title: document.getElementById("hero_title_4").textContent.trim(), desc: document.getElementById("hero_desc_4").textContent.trim(), cta: document.getElementById("hero_cta_text_4").textContent.trim(), }, ]; const shift = 272.3046875 + 24; const duration = 5000; let index = 0; let miniIndex = 0; let autoSlide; const allThumbs = Array.from(miniTrack.children); const totalThumbs = allThumbs.length; miniTrack.innerHTML = ""; allThumbs.forEach((t) => miniTrack.appendChild(t)); allThumbs.forEach((t) => miniTrack.appendChild(t.cloneNode(true))); miniTrack.style.transition = "transform 0.6s cubic-bezier(0.4,0,0.2,1)"; miniTrack.style.willChange = "transform"; function moveMini(offset = 0) { miniTrack.style.transform = `translate3d(-${miniIndex * shift + offset}px,0,0)`; } function updateContent(manual = false) { slides.forEach((s) => s.classList.remove("active")); slides[index].classList.add("active"); heroTitle.textContent = slideContent[index].title; heroDesc.textContent = slideContent[index].desc; heroCtaText.textContent = slideContent[index].cta; indexEl.textContent = `0${index + 1}`; if (!manual) { progressFill.style.transition = "none"; progressFill.style.width = "0%"; requestAnimationFrame(() => { progressFill.style.transition = "width 5s linear"; progressFill.style.width = "100%"; }); } moveMini(); } function nextSlide(manual = false) { index = (index + 1) % slides.length; miniIndex++; if (miniIndex >= totalThumbs) { miniTrack.style.transition = "none"; miniIndex = 0; moveMini(); requestAnimationFrame(() => { miniTrack.style.transition = "transform 0.6s cubic-bezier(0.4,0,0.2,1)"; }); } updateContent(manual); } function prevSlide() { index = (index - 1 + slides.length) % slides.length; miniIndex = Math.max(0, miniIndex - 1); updateContent(true); } function startAuto() { clearInterval(autoSlide); autoSlide = setInterval(() => nextSlide(false), duration); } updateContent(); startAuto(); const slideNumbers = document.querySelectorAll('[data-component-type="Hero Slider"] .flex.items-center span'); slideNumbers.forEach((num, i) => { num.style.cursor = "pointer"; num.addEventListener("click", () => { clearInterval(autoSlide); index = i; miniIndex = i; updateContent(true); startAuto(); }); }); let startX = 0; let currentX = 0; let isDragging = false; function dragStart(x) { clearInterval(autoSlide); startX = x; isDragging = true; } function dragMove(x) { if (!isDragging) return; currentX = x; moveMini(startX - currentX); } function dragEnd() { if (!isDragging) return; isDragging = false; const diff = startX - currentX; if (diff > 60) nextSlide(true); else if (diff < -60) prevSlide(); else moveMini(); startAuto(); } miniTrack.addEventListener("touchstart", (e) => { dragStart(e.touches[0].clientX); }); miniTrack.addEventListener("touchmove", (e) => { dragMove(e.touches[0].clientX); }); miniTrack.addEventListener("touchend", dragEnd); miniTrack.addEventListener("mousedown", (e) => { e.preventDefault(); dragStart(e.clientX); }); window.addEventListener("mousemove", (e) => { dragMove(e.clientX); }); window.addEventListener("mouseup", dragEnd); const heroSlider = document.querySelector('[data-component-type="Hero Slider"]'); let bgStartX = 0; let bgDragging = false; heroSlider.addEventListener("mousedown", (e) => { bgDragging = true; bgStartX = e.clientX; clearInterval(autoSlide); }); heroSlider.addEventListener("mouseup", (e) => { if (!bgDragging) return; bgDragging = false; const diff = bgStartX - e.clientX; if (diff > 80) nextSlide(true); else if (diff < -80) prevSlide(); startAuto(); }); heroSlider.addEventListener("mouseleave", () => { bgDragging = false; }); heroSlider.addEventListener("touchstart", (e) => { bgStartX = e.touches[0].clientX; clearInterval(autoSlide); }); heroSlider.addEventListener("touchend", (e) => { const diff = bgStartX - e.changedTouches[0].clientX; if (diff > 80) nextSlide(true); else if (diff < -80) prevSlide(); startAuto(); }); })();
  });
})();