<div id="offerZone" style="
  width: 745px;
  height: 419px;
  background-color: #000;
  position: relative;
  overflow: hidden;
  font-family: Arial, sans-serif;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
">
  <div id="offerZoneLoader">Loading Offers...</div>
</div>

<script>
(function() {
  // --- SETTINGS ---
  // This value has been changed to 10 seconds
  const FADE_INTERVAL_MS = 10000;
  const RSS_FEED_URL = "https://lafitnessoshawa.givebackpromotions.org/la-fitness-oshawa-sponsors/sponsor-offers?task=directoryrss.getOffersRss";

  // --- DO NOT EDIT BELOW THIS LINE ---
  const zone = document.getElementById("offerZone");
  const loader = document.getElementById("offerZoneLoader");
  const slides = [];
  let currentIndex = 0;

  // Use a CORS proxy to bypass browser security restrictions
  const proxyUrl = `https://api.allorigins.win/raw?url=${encodeURIComponent(RSS_FEED_URL)}`;

  // This function now creates a DIV with a background image
  function createSlideElement(src, index) {
    const slide = document.createElement("div");
    slide.style.cssText = `
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background-image: url('${src}');
      background-size: cover;
      background-position: center;
      opacity: ${index === 0 ? 1 : 0};
      transition: opacity 1.5s ease-in-out;
    `;
    return slide;
  }

  function rotateSlides() {
    if (slides.length < 2) return;
    const nextIndex = (currentIndex + 1) % slides.length;
    
    slides[currentIndex].style.opacity = 0;
    slides[nextIndex].style.opacity = 1;
    
    currentIndex = nextIndex;
  }

  async function initializeFeed() {
    try {
      const response = await fetch(proxyUrl);
      if (!response.ok) throw new Error(`Network response was not ok: ${response.statusText}`);
      const text = await response.text();
      
      const parser = new DOMParser();
      const xml = parser.parseFromString(text, "text/xml");
      const items = xml.querySelectorAll("item");

      if (items.length === 0 && loader) {
        loader.textContent = "No offers found in the feed.";
        return;
      }

      items.forEach((item, index) => {
        const imageUrl = item.querySelector("enclosure")?.getAttribute("url");
        if (imageUrl) {
          const slide = createSlideElement(imageUrl, index);
          zone.appendChild(slide);
          slides.push(slide);
        }
      });

      if (loader) loader.style.display = 'none';

      if (slides.length > 1) {
        setInterval(rotateSlides, FADE_INTERVAL_MS);
      }

    } catch (error) {
      console.error("Failed to load or parse RSS feed:", error);
      if (loader) loader.textContent = "Error loading offers.";
    }
  }

  initializeFeed();
})();
</script>