document.addEventListener("DOMContentLoaded", async () => {
  const container = document.querySelector(".carousel-placeholder");
  if (!container) return;

  try {
    const res = await fetch("https://www.veltron.net/carousel.html");
    const html = await res.text();

    // Inject HTML
    container.innerHTML = html;

    // Let the browser paint once before heavy DOM work
    await new Promise(requestAnimationFrame);

    const buttonsWrapper = container.querySelector(".carousel-buttons > div");
    if (!buttonsWrapper) return;

    // Prevent double-run
    if (buttonsWrapper.dataset.cloned === "true") return;
    buttonsWrapper.dataset.cloned = "true";

    const originals = buttonsWrapper.querySelectorAll("a");

    // Use DocumentFragment to avoid layout thrashing
    const fragment = document.createDocumentFragment();

    originals.forEach((btn) => {
      fragment.appendChild(btn.cloneNode(true));
    });

    buttonsWrapper.appendChild(fragment);
  } catch (err) {
    console.error("Carousel load failed:", err);
  }
});