// Scroll to Top
document.addEventListener('DOMContentLoaded', () => {
  const construction_architect_btn = document.body.appendChild(document.createElement('button'));
  construction_architect_btn.className = 'return-to-top-btn';
  construction_architect_btn.innerHTML = '<span class="dashicons dashicons-arrow-up-alt"></span>';

  window.addEventListener('scroll', () =>
    construction_architect_btn.classList.toggle('show', window.scrollY > 300)
  );

  construction_architect_btn.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth' });
});

document.addEventListener("DOMContentLoaded", function () {
  const countersSection = document.querySelector(".counters-text");
  const counters = document.querySelectorAll(".counters-text h2");

  let hasAnimated = false;

  const animateCounters = () => {
    counters.forEach(counter => {
      const targetText = counter.textContent.trim();
      const targetNumber = parseInt(targetText.replace("+", ""), 10);

      let count = 0;
      const duration = 2000;
      const stepTime = Math.max(Math.floor(duration / targetNumber), 20);

      const increment = () => {
        count++;
        if (count <= targetNumber) {
          counter.textContent = count + "+";
          setTimeout(increment, stepTime);
        } else {
          counter.textContent = targetNumber + "+";
        }
      };

      increment();
    });
  };

  const observer = new IntersectionObserver(
    (entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting && !hasAnimated) {
          animateCounters();
          hasAnimated = true;
          observer.unobserve(countersSection); // Remove observer after animating once
        }
      });
    },
    {
      threshold: 0.4, // Trigger when 40% of the section is visible
    }
  );

  if (countersSection) {
    observer.observe(countersSection);
  }
});

// Slider
jQuery(document).ready(function ($) {

  const $construction_architect_slider = $('.slider-section');
  const $construction_architect_controls = $('.custom-dots');

  // Collect slides
  const $construction_architect_slides = $construction_architect_slider.children('.banner-wrap');
  const construction_architect_totalSlides = $construction_architect_slides.length;

  // Init Owl
  const owl = $construction_architect_slider.owlCarousel({
    items: 1,
    loop: true,
    nav: false,
    dots: false,
    autoplay: true,
    smartSpeed: 600
  });

  // Create number + heading controls
  $construction_architect_slides.each(function (i) {
    const construction_architect_title = $(this).find('.banner-title').text().trim();
    const construction_architect_num = (i + 1 < 10) ? '0' + (i + 1) : (i + 1);

    $construction_architect_controls.append(`
      <button class="num-dot" data-index="${i}">
        <span class="num">${construction_architect_num}</span>
        <span class="title">${construction_architect_title}</span>
      </button>
    `);
  });

  // Click → slide
  $construction_architect_controls.on('click', '.num-dot', function () {
    owl.trigger('to.owl.carousel', [$(this).data('index'), 400]);
  });

  // Active state sync
  owl.on('changed.owl.carousel', function (e) {
    const index =
      (e.item.index - e.relatedTarget._clones.length / 2 + e.item.count) %
      e.item.count;

    $construction_architect_controls.find('.num-dot')
      .removeClass('active')
      .eq(index)
      .addClass('active');
  });

  // First active
  $construction_architect_controls.find('.num-dot').eq(0).addClass('active');

});

// Toggle
document.addEventListener("DOMContentLoaded", () => {
  const construction_architect_toggle = document.querySelector(".header-open-btn a"),
        construction_architect_info = document.querySelector(".header-info"),
        construction_architect_close = document.querySelector(".header-close-btn a");

  if (!construction_architect_toggle || !construction_architect_info) return;

  construction_architect_toggle.onclick = () => (construction_architect_info.classList.add("active"), document.body.classList.add("header-info-open"));
  construction_architect_close && (construction_architect_close.onclick = () => (construction_architect_info.classList.remove("active"), document.body.classList.remove("header-info-open")));

  document.addEventListener("click", e => {
    if (document.body.classList.contains("header-info-open") &&
        !construction_architect_info.contains(e.target) && !construction_architect_toggle.contains(e.target)) {
      construction_architect_info.classList.remove("active");
      document.body.classList.remove("header-info-open");
    }
  });
});

document.addEventListener("DOMContentLoaded", () => {
  const construction_architect_toggleBtn = document.querySelector(".header-open-btn a"); // open button
  const construction_architect_infoBox = document.querySelector(".header-info"); // info box
  const construction_architect_closeBtn = document.querySelector(".header-close-btn a"); // close button

  if (!construction_architect_toggleBtn || !construction_architect_infoBox || !construction_architect_closeBtn) return;

  // OPEN the info box
  construction_architect_toggleBtn.addEventListener("click", () => {
    construction_architect_infoBox.classList.add("active");
    document.body.classList.add("header-info-active");

    // Optional: move keyboard focus inside
    const firstFocusable = construction_architect_infoBox.querySelector(
      'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
    );
    if (firstFocusable) firstFocusable.focus();
  });

  // CLOSE the info box (when clicking the close icon)
  construction_architect_closeBtn.addEventListener("click", () => {
    construction_architect_infoBox.classList.remove("active");
    document.body.classList.remove("header-info-active");
    construction_architect_toggleBtn.focus(); // return focus to the button
  });

  // Trap focus inside when active
  document.addEventListener("keydown", (e) => {
    if (!construction_architect_infoBox.classList.contains("active")) return;

    const focusable = construction_architect_infoBox.querySelectorAll(
      'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])'
    );
    const first = focusable[0];
    const last = focusable[focusable.length - 1];

    if (e.key === "Tab") {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }

    // ESC key also closes the box
    if (e.key === "Escape") {
      construction_architect_closeBtn.click();
    }
  });
});