The Dream Stream

<script>
/* Widebody kit */
 setTimeout(function() {
   let $row = $('#page-content .container .columns .row');
   $row.find('.col-md-2').remove();
   $row.find('.col-md-10').removeClass('col-md-10').addClass('col-md-12');
 }, 1);
</script>

<style>
/* Overall Layout */
#scroll-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 20px 0;
  background-color: #fff;
}

/* Fading Effect on Edges */
#scroll-wrapper:before,
#scroll-wrapper:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  pointer-events: none;
  z-index: 1;
}

#scroll-wrapper:before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

#scroll-wrapper:after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

#scroll-content {
  display: flex;
  flex-direction: row; /* Align items horizontally */
  gap: 30px; /* Spacing between decades */
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 20px;
}

#scroll-content::-webkit-scrollbar {
  display: none;
}

/* Decade Groups */
.decade-group {
  flex: 0 0 auto;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px;
  position: relative;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

/* Cards */
.poc-instance {
  flex: 0 0 auto;
  width: 250px;
  height: 350px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.poc-instance img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
}

.poc-instance p {
  font-size: 14px;
  line-height: 1.4;
  height: 80px; /* Limit text height */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  color: #fff;
}

/* Navigation */
#decade-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 0;
}

#decade-nav a {
  padding: 10px 15px;
  text-decoration: none;
  color: #fff;
  background: #05242D;
  border-radius: 5px;
  transition: background 0.3s ease;
}

#decade-nav a:hover {
  background: #0056b3;
  color: #fff;
}

#decade-nav a:focus {
  color: #fff;
}

/* Scroll Buttons */
.scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: #05242D;
  color: #fff;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.scroll-btn.left {
  left: 10px;
}

.scroll-btn.right {
  right: 10px;
}

.scroll-btn:hover {
  background: #0056b3;
}
</style>

<div id="decade-nav"></div>
<div id="scroll-wrapper">
  <button class="scroll-btn left">◀</button>
  <button class="scroll-btn right">▶</button>
  <div id="scroll-content">
    <!-- Populate with .poc-instance cards grouped by decade -->
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
  const teasers = document.querySelectorAll(".poc-instance");
  const scrollContent = document.getElementById("scroll-content");
  const navContainer = document.getElementById("decade-nav");

  const decades = {};
  const navLinks = [];

  // Group teasers by decade
  teasers.forEach(teaser => {
    const yearText = teaser.querySelector("h3 span").innerText;
    const year = parseInt(yearText, 10);

    if (isNaN(year)) return; // Skip invalid years

    const decade = Math.floor(year / 10) * 10 + "s";

    // Create decade group if it doesn't exist
    if (!decades[decade]) {
      const group = document.createElement("div");
      group.classList.add("decade-group");
      group.setAttribute("data-decade", decade);
      scrollContent.appendChild(group);

      // Add navigation link
      navLinks.push(`<a href="#" data-decade="${decade}">${decade}</a>`);
      decades[decade] = group;
    }

    decades[decade].appendChild(teaser);
  });

  // Add navigation links
  navContainer.innerHTML = navLinks.join("");

  // Smooth scroll for navigation
  navContainer.querySelectorAll("a").forEach(link => {
    link.addEventListener("click", e => {
      e.preventDefault();
      const targetDecade = e.currentTarget.getAttribute("data-decade");
      const group = document.querySelector(`.decade-group[data-decade="${targetDecade}"]`);
      const scrollAmount = group.offsetLeft - scrollContent.offsetLeft;
      scrollContent.scrollTo({
        left: scrollAmount,
        behavior: "smooth",
      });
    });
  });

  // Scroll buttons
  document.querySelector(".scroll-btn.left").addEventListener("click", () => {
    scrollContent.scrollBy({ left: -300, behavior: "smooth" });
  });

  document.querySelector(".scroll-btn.right").addEventListener("click", () => {
    scrollContent.scrollBy({ left: 300, behavior: "smooth" });
  });
});
</script>