/*=============== toggle icon navbar =========== */

(function() {
  function peblogInitMenu() {
    let menuIcon = document.querySelector(".mobile-burger-menu");
    let navbar = document.querySelector(".navbar");

    if (!menuIcon || !navbar) {
      return;
    }

    function peblogCloseMenu() {
      menuIcon.classList.remove("open");
      menuIcon.setAttribute("aria-expanded", "false");
      navbar.classList.remove("active");
      document.body.style.overflow = "";
    }

    function peblogOpenMenu() {
      menuIcon.classList.add("open");
      menuIcon.setAttribute("aria-expanded", "true");
      navbar.classList.add("active");
      document.body.style.overflow = "hidden";
    }

    function peblogToggleMenu() {
      if (navbar.classList.contains("active")) {
        peblogCloseMenu();
      } else {
        peblogOpenMenu();
      }
    }

    menuIcon.addEventListener("click", peblogToggleMenu);

    // Close menu when clicking outside
    document.addEventListener("click", (e) => {
      if (navbar.classList.contains("active")) {
        if (!navbar.contains(e.target) && !menuIcon.contains(e.target)) {
          peblogCloseMenu();
        }
      }
    });

    // Close menu on Escape key
    document.addEventListener("keydown", (e) => {
      if (e.key === "Escape" && navbar.classList.contains("active")) {
        peblogCloseMenu();
        menuIcon.focus();
      }
    });

    // Close menu when focus leaves the menu (keyboard navigation)
    const getFocusableElements = (element) => {
      const focusableSelectors = [
        'a[href]',
        'button:not([disabled])',
        'textarea:not([disabled])',
        'input:not([disabled])',
        'select:not([disabled])',
        '[tabindex]:not([tabindex="-1"])'
      ].join(', ');
      return Array.from(element.querySelectorAll(focusableSelectors));
    };

    // Track focus within menu
    navbar.addEventListener("focusout", (e) => {
      setTimeout(() => {
        const focusableElements = getFocusableElements(navbar);
        const isFocusInMenu = focusableElements.some(el => el === document.activeElement);
        const isFocusOnButton = menuIcon === document.activeElement;
        
        if (!isFocusInMenu && !isFocusOnButton && navbar.classList.contains("active")) {
          peblogCloseMenu();
        }
      }, 0);
    });
  }

  // Initialize menu when DOM is ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", peblogInitMenu);
  } else {
    peblogInitMenu();
  }
})();

/*=============== sticky header =========== */
(function() {
  function peblogInitStickyHeader() {
    let header = document.querySelector(".header");
    if (!header) {
      return;
    }

    window.addEventListener("scroll", () => {
      header.classList.toggle("sticky", window.scrollY > 100);
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", peblogInitStickyHeader);
  } else {
    peblogInitStickyHeader();
  }
})();

/*=============== dark mode =========== */

(function() {
  const body = document.body;
  
  // Load saved theme from localStorage
  const savedTheme = localStorage.getItem("theme");
  
  // Apply saved theme or default to light mode
  if (savedTheme === "dark") {
    body.classList.add("dark");
  } else {
    body.classList.remove("dark");
  }
  
  // Function to toggle dark mode
  function peblogToggleDarkMode(e) {
    if (e) {
      e.preventDefault();
      e.stopPropagation();
    }
    
    body.classList.toggle("dark");
    
    if (body.classList.contains("dark")) {
      localStorage.setItem("theme", "dark");
    } else {
      localStorage.setItem("theme", "light");
    }
  }
  
  // Use event delegation on document to catch all dark mode clicks
  document.addEventListener("click", function(e) {
    // Check if clicked element or its parent has dark-mode class
    const darkModeButton = e.target.closest(".dark-mode");
    if (darkModeButton) {
      peblogToggleDarkMode(e);
    }
  });
  
  // Also add direct listeners when DOM is ready
  function peblogInitDarkMode() {
    const darkModeButtons = document.querySelectorAll(".dark-mode");
    darkModeButtons.forEach((button) => {
      if (button) {
        button.addEventListener("click", peblogToggleDarkMode);
      }
    });
  }

  // Initialize dark mode when DOM is ready
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", peblogInitDarkMode);
  } else {
    // DOM is already ready
    peblogInitDarkMode();
  }
})();

// swiper latest post
(function() {
  function peblogInitLatestPostSwiper() {
    const latestPostSlider = document.querySelector(".latest-post-slider");
    if (!latestPostSlider || typeof Swiper === "undefined") {
      return;
    }

    var peblogLatestPostSwiper = new Swiper(".latest-post-slider", {
      slidesPerView: 3,
      spaceBetween: 30,
      autoplay: true,
      loop: true,
      // Navigation arrows
      navigation: {
        nextEl: ".next-slide",
        prevEl: ".prev-slide",
      },
      breakpoints: {
        340: {
          slidesPerView: 1,
        },
        940: {
          slidesPerView: 3,
        },
      },
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", peblogInitLatestPostSwiper);
  } else {
    peblogInitLatestPostSwiper();
  }
})();

// post filter
(function() {
  function peblogInitCategoryFilter() {
    const categoryBoxes = document.querySelectorAll(".category-box");
    const filterPosts = document.querySelectorAll(".filter-post");

    if (categoryBoxes.length === 0 || filterPosts.length === 0) {
      return;
    }

    categoryBoxes.forEach((categoryBox) => {
      categoryBox.addEventListener("click", () => {
        const selectedFilter = categoryBox.dataset.filter;

        filterPosts.forEach((post) => {
          const postFilter = post.dataset.category.toLowerCase();
          if (selectedFilter === "all" || postFilter === selectedFilter) {
            post.style.display = "flex";
          } else {
            post.style.display = "none";
          }
        });

        categoryBoxes.forEach((box) => {
          box.classList.remove("active");
        });

        categoryBox.classList.add("active");
      });
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", peblogInitCategoryFilter);
  } else {
    peblogInitCategoryFilter();
  }
})();

// two design home
(function() {
  function peblogInitHeroSwiper() {
    const heroSlider = document.querySelector(".twoDesing");
    if (!heroSlider || typeof Swiper === "undefined") {
      return;
    }

    var peblogHeroSwiper = new Swiper(".twoDesing", {
      slidesPerView: "auto",
      spaceBetween: 10,
      centeredSlides: true,
      initialSlide: 1,
      // Navigation arrows
      navigation: {
        nextEl: ".next-slide-two",
        prevEl: ".prev-slide-two",
      },
      breakpoints: {
        // Mobile: single slide
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
          centeredSlides: true,
        },
        // Tablet Portrait: single slide for better UX
        768: {
          slidesPerView: 1,
          spaceBetween: 20,
          centeredSlides: true,
        },
        // Desktop: auto (3D effect)
        1024: {
          slidesPerView: "auto",
          spaceBetween: 10,
          centeredSlides: true,
        },
      },
    });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", peblogInitHeroSwiper);
  } else {
    peblogInitHeroSwiper();
  }
})();

