document.addEventListener("DOMContentLoaded", function () {
  // Target the menu icon and navigation bar
  const menuIcon = document.querySelector(".icon-menu");
  const navBar = document.querySelector(".nav-bar-small");

  // Add click event listener to the menu icon
  menuIcon.addEventListener("click", function () {
    // Toggle the 'active' class or directly toggle display style
    navBar.classList.toggle("active");
  });

  /* Slider animation */
  const container = document.querySelector(".work-photos");
  let targetScrollPosition = 0;
  let currentScrollPosition = 0;
  let scrollAmount = 5; // Adjust this value for speed

  function autoScroll() {
    // Calculate the next scroll position
    let nextScrollPosition = currentScrollPosition + scrollAmount;

    // Check if we've reached the end of the container
    if (nextScrollPosition < container.scrollWidth - container.clientWidth) {
      targetScrollPosition = nextScrollPosition;
    } else {
      // If at the end, reset positions for a continuous loop effect
      targetScrollPosition = 0;
      currentScrollPosition = 0;
      container.scrollLeft = 0;
    }

    // Smoothly interpolate towards the target scroll position
    currentScrollPosition += (targetScrollPosition - currentScrollPosition) * 0.1;
    container.scrollLeft = currentScrollPosition;

    // Request the next frame of the animation
    requestAnimationFrame(autoScroll);
  }

  // Optionally, control scroll on hover
  container.addEventListener("mouseover", () => {
    scrollAmount = 0;
  });
  container.addEventListener("mouseout", () => {
    scrollAmount = 5;
    currentScrollPosition = container.scrollLeft;
  }); // Adjust scroll amount back when not hovering

  container.addEventListener("scroll", () => {
    currentScrollPosition = container.scrollLeft;
  });
  // Start the auto-scroll animation
  requestAnimationFrame(autoScroll);

  // Listen for the form submit event
});