<div class="timeline-container">
  <!-- Cột năm -->
  <div class="timeline-years">
    <div class="year-item active" data-year="2017">2017</div>
    <div class="year-item" data-year="2019">2019</div>
    <div class="year-item" data-year="2020">2020</div>
    <div class="year-item" data-year="2022">2022</div>
    <div class="year-item" data-year="2023">2023</div>
    <div class="year-item" data-year="2025">2025</div>
  </div>

  <!-- Tiêu đề cố định -->
  <div class="timeline-title">
    <p id="timeline-active-title">2017</p>
  </div>

  <!-- Nội dung -->
  <div class="timeline-contents">
    <div class="content-item active" data-year="2017">
      <p>World Export was established, launching our first biomass facility and laying the foundation for our global expansion.</p>
    </div>

    <div class="content-item" data-year="2019">
      <p>
        1 factories <br>
        8 countries to be exported <br>
        100+ customers worldwide
      </p>
    </div>

    <div class="content-item" data-year="2020">
      <p>
        2 factories<br>
        10 countries to be exported<br>
        130+ customers worldwide
      </p>
    </div>

    <div class="content-item" data-year="2022">
      <p>
        4 factories<br>
        20 countries to be exported<br>
        200+ customers worldwide
      </p>
    </div>

    <div class="content-item" data-year="2023">
      <p>
        5 factories<br>
        23 countries to be exported<br>
        250+ customers worldwide
      </p>
    </div>

    <div class="content-item" data-year="2025">
      <p>
        6 factories<br>
        25 countries to be exported<br>
        300+ customers worldwide
      </p>
    </div>
  </div>
</div>

.timeline-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  font-family: sans-serif;
}

/* Cột năm */
.timeline-years {
  display: flex;
  flex-direction: column;
  max-height: 330px;
  overflow-y: auto;
  padding-right: 20px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 10%;
}
.timeline-years::-webkit-scrollbar { display: none; }

.timeline-years .year-item {
  font-size: 34px;
  font-weight: 700;
  color: #999;
  margin: 10px 0;
  cursor: pointer;
  transition: all 0.3s;
  padding: 10px 0;
}
.timeline-years .year-item.active {
  color: var(--bricks-color-ybghtf);
}

/* Tiêu đề cố định */
.timeline-title {
  position: relative;
  min-width: 120px;
  width: 32%
}
.timeline-title p {
  font-size: 120px;
  font-weight: 800;
  margin: 0;
  position: sticky;
  top: 50%;
  transform: translateY(50%);
  text-align: center;
  transition: opacity 0.5s, transform 0.5s;
  color: var(--bricks-color-ybghtf);
}

/* Nội dung */
.timeline-contents {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-height: 330px;        /* giới hạn chiều cao */
  overflow-y: auto;         /* bật cuộn dọc */
  padding-right: 30px;
  scroll-behavior: smooth;

  /* Ẩn scrollbar */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none; 
  width: 58%;
}

.timeline-contents .content-item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  opacity: 0.3;
  animation: fadeIn 0.5s ease-in-out;
}

.timeline-contents .content-item.active {
  opacity: 1;
}
.timeline-contents .content-item p {
  font-size: 20px;
  font-weight: 700;
  margin-left: 50px;
}
@keyframes fadeIn {
  from {opacity:0; transform:translateY(20px);}
  to {opacity:1; transform:translateY(0);}
}

document.addEventListener("DOMContentLoaded", function () {
  const years = document.querySelectorAll(".year-item");
  const contents = document.querySelectorAll(".content-item");
  const title = document.getElementById("timeline-active-title");
  const yearsContainer = document.querySelector(".timeline-years");
  const contentsContainer = document.querySelector(".timeline-contents");

  function smoothScroll(container, target) {
    if (!container || !target) return;

    const containerRect = container.getBoundingClientRect();
    const targetRect = target.getBoundingClientRect();

    // vị trí của target so với container
    const offsetTop = targetRect.top - containerRect.top;

    let scrollTop =
      container.scrollTop +
      offsetTop -
      container.clientHeight / 2 +
      target.clientHeight / 2;

    // tránh scroll vượt giới hạn
    scrollTop = Math.max(0, Math.min(scrollTop, container.scrollHeight - container.clientHeight));

    container.scrollTo({
      top: scrollTop,
      behavior: "smooth",
    });
  }

  function setActive(year) {
    // update year
    years.forEach((y) =>
      y.classList.toggle("active", y.dataset.year === year)
    );
    // update content
    contents.forEach((c) =>
      c.classList.toggle("active", c.dataset.year === year)
    );
    // update title
    title.textContent = year;

    // scroll year vào giữa
    const activeYear = document.querySelector(`.year-item[data-year="${year}"]`);
    if (activeYear) smoothScroll(yearsContainer, activeYear);

    // scroll content vào giữa
    const activeContent = document.querySelector(
      `.content-item[data-year="${year}"]`
    );
    if (activeContent) smoothScroll(contentsContainer, activeContent);
  }

  years.forEach((year) => {
    year.addEventListener("click", () => {
      setActive(year.dataset.year);
    });
  });

  contents.forEach((content) => {
    content.addEventListener("click", () => {
      setActive(content.dataset.year);
    });
  });
});