<!-- MAIN ZONE (1175x600px) - RSS Fade Display -->
<div id="mainZoneContainer" style="
  width: 1175px;
  height: 600px;
  position: relative;
  overflow: hidden;
  font-family: Arial, sans-serif;
  background-color: #000;
">
  <div id="mainZoneBackground" style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1603575448364-9a55f01d1c6b?fit=crop&w=1175&h=600&auto=format');
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    opacity: 1;
  "></div>

  <!-- Top Headline Bar -->
  <div id="mainZoneHeadline" style="
    position: absolute;
    bottom: 120px;
    left: 2%;
    width: 95%;
    background-color: rgba(0,102,204,0.8);
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 1px 25px;
    text-shadow: 1px 1px 4px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transition: opacity 0.24s ease-in-out;
  ">Main Zone Title Placeholder</div>

  <!-- Description Panel -->
  <div id="mainZoneDescription" style="
    position: absolute;
    bottom: 30px;
    left: 2%;
    width: 95%;
    background-color: rgba(255,255,255,0.8);
    color: #000;
    font-size: 34px;
    padding: 2px 25px;
    line-height: 1.2;
    max-height: 160px;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.24s ease-in-out;
  ">This is a placeholder description for the main content zone. RSS descriptions will appear here when feed is connected.</div>
</div>

<script>
(function () {
  const items = [
    {
      title: "GIVE BACK GIFT CARDS",
      desc: "Turn everyday spending into support for your local school, team, or charity.",
      image: "https://images.unsplash.com/photo-1581578017424-d3e93c6b7b9c?fit=crop&w=1175&h=600&auto=format"
    },
    {
      title: "FUNDRAISING FOR COMMUNITIES",
      desc: "Local businesses join forces to support community initiatives through sales.",
      image: "https://images.unsplash.com/photo-1603575448364-9a55f01d1c6b?fit=crop&w=1175&h=600&auto=format"
    },
    {
      title: "LEVEL UP FOR LOCAL",
      desc: "Exclusive deals that help grow your local economy while saving you money.",
      image: "https://images.unsplash.com/photo-1532635245-2798f5f2f8ae?fit=crop&w=1175&h=600&auto=format"
    },
    {
      title: "GIVE BACK MOMS",
      desc: "Empowering moms to promote local causes and support family-first giving.",
      image: "https://images.unsplash.com/photo-1543363136-3ed42b4f91c7?fit=crop&w=1175&h=600&auto=format"
    },
    {
      title: "COMMUNITY CONTRACTOR HEROES",
      desc: "Local tradespeople donate time and skill to causes that build stronger towns.",
      image: "https://images.unsplash.com/photo-1568605114967-8130f3a36994?fit=crop&w=1175&h=600&auto=format"
    }
  ];

  let index = 0;
  const bg = document.getElementById("mainZoneBackground");
  const title = document.getElementById("mainZoneHeadline");
  const desc = document.getElementById("mainZoneDescription");

  function updateMainZone() {
    title.style.opacity = 0;
    desc.style.opacity = 0;

    setTimeout(() => {
      bg.style.opacity = 0;

      setTimeout(() => {
        bg.style.backgroundImage = `linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), url('${items[index].image}')`;
        title.textContent = items[index].title;
        desc.textContent = items[index].desc;

        bg.style.opacity = 1;
        title.style.opacity = 1;
        desc.style.opacity = 1;

        index = (index + 1) % items.length;
      }, 250);
    }, 240);
  }

  updateMainZone();
  setInterval(updateMainZone, 15000);
})();
</script>



