<!-- HEADLINE ZONE: 1125x290px, Single-Line Title, Optimized Font Sizes -->
<div id="rssHeadlineZone" style="
  width: 1125px;
  height: 290px;
  background-color: #000;
  color: #fff;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30px;
  overflow: hidden;
  position: relative;
  text-align: left;
">
  <div id="rssHeadlineContent" style="
    opacity: 0;
    transition: opacity 1s ease-in-out;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  ">
    Loading events...
  </div>
</div>

<script>
(function () {
  const headlines = [
    {
      title: "MEMBER APPRECIATION DAY MARKET",
      dateTime: "Sat, Nov 25, 2025 — 12:30 PM to 3:00 PM",
      location: "1189 Ritson Rd N #4a, Oshawa, Ontario",
      organizer: "L.A. Fitness Oshawa"
    },
    {
      title: "LOCAL BUSINESS NETWORKING NIGHT",
      dateTime: "Tue, Dec 5, 2025 — 6:00 PM to 9:00 PM",
      location: "Durham Event Centre, Whitby",
      organizer: "Canada’s Marketplace"
    }
  ];

  const display = document.getElementById("rssHeadlineContent");
  let i = 0;

  function showNext() {
    const e = headlines[i];
    display.style.opacity = 0;
    setTimeout(() => {
      display.innerHTML = `
        <div style="
          font-weight: bold;
          font-size: 48px;
          text-transform: uppercase;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        ">${e.title}</div>

        <div style="font-size: 50px;">${e.dateTime}</div>
        <div style="font-size: 46px;">${e.location}</div>
        <div style="font-size: 42px;">Organized by: ${e.organizer}</div>
      `;
      display.style.opacity = 1;
      i = (i + 1) % headlines.length;
    }, 1000);
  }

  showNext();
  setInterval(showNext, 12000);
})();
</script>
