/**
 * Still very experimental, does not yet work as intended.
 * Will keep updating this.
 */
document.addEventListener("DOMContentLoaded", () => {
  const images = document.querySelectorAll("img");
  images.forEach(img => {
    if (!img.dataset.src) {
      img.dataset.src = img.src;
      img.src = ""; // prevent immediate loading
    }
  });

  const svgs = document.querySelectorAll("svg");
  svgs.forEach(svg => {
    if (!svg.dataset.svg) {
      svg.dataset.svg = svg.innerHTML;
      svg.innerHTML = ""; // clear for lazy-loading
    }
  });

  const lazyElements = document.querySelectorAll("img[data-src], svg[data-svg]");

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver((entries, obs) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const el = entry.target;

          if (el.tagName === "IMG" && el.dataset.src) {
            el.src = el.dataset.src;
            el.removeAttribute("data-src");
          }

          if (el.tagName === "SVG" && el.dataset.svg) {
            el.innerHTML = el.dataset.svg;
            el.removeAttribute("data-svg");
          }

          obs.unobserve(el);
        }
      });
    }, { rootMargin: "100px" });

    lazyElements.forEach(el => observer.observe(el));
  } else {
    // Fallback: load all immediately
    lazyElements.forEach(el => {
      if (el.tagName === "IMG" && el.dataset.src) el.src = el.dataset.src;
      if (el.tagName === "SVG" && el.dataset.svg) el.innerHTML = el.dataset.svg;
    });
  }
});