main.js

const mobileMenuButton = document.getElementById("mobileMenuButton");
const mobileMenu = document.getElementById("mobileMenu");
const header = document.getElementsByTagName("header")[0];

window.onscroll = function () {
  const scrolledPixels = window.scrollY;
  if (scrolledPixels == 0) {
    header.classList.remove("shadow-lg");
    // For navbar-line, ensure header-scrolled is also managed if it's tied to shadow
    header.classList.remove("header-scrolled");
  } else {
    header.classList.add("shadow-lg");
    // For navbar-line
    header.classList.add("header-scrolled");
  }
};

mobileMenuButton.addEventListener("click", function () {
  mobileMenu.classList.toggle("open"); // Toggle 'open' class for CSS transition
});

// New functionality for the stats section - generalized
const observerOptions = {
  root: null,
  rootMargin: "0px",
  threshold: 0.1, // Trigger when 10% of the element is visible
};

const animationObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const animationClass = entry.target.dataset.animationClass;
      if (animationClass) {
        entry.target.classList.add(animationClass);
      } else {
        // Fallback or default animation if data-attribute is missing
        entry.target.classList.add("animate-fadeIn");
      }
      observer.unobserve(entry.target); // Animate only once
    }
  });
}, observerOptions);

// Observe elements with the 'animate-on-scroll' class
document.querySelectorAll(".animate-on-scroll").forEach((el) => {
  animationObserver.observe(el);
});

// Add this to your existing Tailwind config
tailwind.config = {
  theme: {
    extend: {
      animation: {
        fadeIn: "fadeIn 1s ease-in-out",
        fadeInUp: "fadeInUp 0.8s ease-out forwards",
        fadeInLeft: "fadeInLeft 0.8s ease-out forwards",
        fadeInRight: "fadeInRight 0.8s ease-out forwards",
        subtlePulse: "subtlePulse 2s infinite ease-in-out",
      },
      keyframes: {
        fadeIn: {
          "0%": { opacity: 0, transform: "translateY(20px)" },
          "100%": { opacity: 1, transform: "translateY(0)" },
        },
        fadeInUp: {
          "0%": { opacity: 0, transform: "translateY(30px)" },
          "100%": { opacity: 1, transform: "translateY(0)" },
        },
        fadeInLeft: {
          "0%": { opacity: 0, transform: "translateX(-30px)" },
          "100%": { opacity: 1, transform: "translateX(0)" },
        },
        fadeInRight: {
          "0%": { opacity: 0, transform: "translateX(30px)" },
          "100%": { opacity: 1, transform: "translateX(0)" },
        },
        subtlePulse: {
          "0%, 100%": { transform: "scale(1)", opacity: 1 },
          "50%": { transform: "scale(1.05)", opacity: 0.7 },
        },
      },
    },
  },
};

// Slider functionality - keep if used, remove if not.
const slider = document.querySelector(".overflow-x-auto");
let isDown = false;
let startX;
let scrollLeft;

if (slider) {
  // Check if slider element exists
  slider.addEventListener("mousedown", (e) => {
    isDown = true;
    slider.classList.add("active");
    startX = e.pageX - slider.offsetLeft;
    scrollLeft = slider.scrollLeft;
  });

  slider.addEventListener("mouseleave", () => {
    isDown = false;
    slider.classList.remove("active");
  });

  slider.addEventListener("mouseup", () => {
    isDown = false;
    slider.classList.remove("active");
  });

  slider.addEventListener("mousemove", (e) => {
    if (!isDown) return;
    e.preventDefault();
    const x = e.pageX - slider.offsetLeft;
    const walk = (x - startX) * 3; //scroll-fast
    slider.scrollLeft = scrollLeft - walk;
  });
}