gujurly.com/public/web/cs/js/timeline.js

// Sample company milestone data
const timelineData = [
  {
    year: 2010,
    title: "Company Founded",
    description: "Our company was founded with a vision to revolutionize the industry with innovative solutions.",
    image: "/placeholder.svg?height=400&width=600",
  },
  {
    year: 2013,
    title: "First Major Product Launch",
    description: "We launched our flagship product that set new standards in the market and gained immediate traction.",
    image: "/placeholder.svg?height=400&width=600",
  },
  {
    year: 2015,
    title: "International Expansion",
    description: "We expanded our operations to international markets, opening offices in Europe and Asia.",
    image: "/placeholder.svg?height=400&width=600",
  },
  {
    year: 2018,
    title: "Major Acquisition",
    description:
      "We acquired a leading competitor, strengthening our market position and expanding our product portfolio.",
    image: "/placeholder.svg?height=400&width=600",
  },
  {
    year: 2020,
    title: "Digital Transformation",
    description:
      "We underwent a complete digital transformation, adopting cutting-edge technologies to enhance our offerings.",
    image: "/placeholder.svg?height=400&width=600",
  },
  {
    year: 2023,
    title: "Sustainability Initiative",
    description: "We launched our comprehensive sustainability initiative, committing to carbon neutrality by 2030.",
    image: "/placeholder.svg?height=400&width=600",
  },
]

// DOM Elements
const datesContainer = document.getElementById("dates-container")
const contentContainer = document.getElementById("content-container")
const prevButton = document.getElementById("prev-btn")
const nextButton = document.getElementById("next-btn")

// State
let selectedIndex = 0
let isAnimating = false

// Initialize the timeline
function initTimeline() {
  // Create date buttons
  timelineData.forEach((item, index) => {
    const dateButton = document.createElement("button")
    dateButton.className = `date-button ${index === 0 ? "active" : ""}`
    dateButton.dataset.index = index
    dateButton.textContent = item.year
    dateButton.setAttribute("aria-label", `View milestone from ${item.year}: ${item.title}`)
    dateButton.addEventListener("click", () => handleDateClick(index))
    datesContainer.appendChild(dateButton)
  })

  // Create all content sections
  timelineData.forEach((item, index) => {
    const content = createContentElement(item, index)
    contentContainer.appendChild(content)
  })

  // Set initial content
  updateNavButtons()
}

// Create a content element
function createContentElement(item, index) {
  const content = document.createElement("div")
  content.className = `timeline-content ${index === selectedIndex ? "active" : index > selectedIndex ? "next" : "prev"}`
  content.dataset.index = index

  const contentHTML = `
    <div class="content-text">
      <div class="year-badge">${item.year}</div>
      <h2 class="content-title">${item.title}</h2>
      <p class="content-description">${item.description}</p>
    </div>
    <div class="content-image">
      <img src="${item.image}" alt="${item.title}">
    </div>
  `

  content.innerHTML = contentHTML
  return content
}

// Handle date button click
function handleDateClick(index) {
  if (isAnimating || index === selectedIndex) return

  const direction = index > selectedIndex ? "right" : "left"
  changeDateSelection(index)
  animateContentChange(index, direction)
}

// Change the selected date button
function changeDateSelection(newIndex) {
  // Update date buttons
  const dateButtons = document.querySelectorAll(".date-button")
  dateButtons.forEach((btn, idx) => {
    if (idx === newIndex) {
      btn.classList.add("active")
    } else {
      btn.classList.remove("active")
    }
  })

  selectedIndex = newIndex
  updateNavButtons()
}

// Animate content change with improved fade animations
function animateContentChange(newIndex, direction) {
  isAnimating = true

  const currentContent = document.querySelector(`.timeline-content.active`)
  const newContent = document.querySelector(`.timeline-content[data-index="${newIndex}"]`)

  if (!currentContent || !newContent) return

  // Position the new content
  newContent.classList.remove("prev", "next")
  newContent.classList.add(direction === "right" ? "next" : "prev")

  // Force a reflow
  void newContent.offsetWidth

  // Start animations
  currentContent.classList.add(direction === "right" ? "slide-out-left" : "slide-out-right")
  newContent.classList.add("slide-in")

  // After animation completes
  setTimeout(() => {
    currentContent.classList.remove("active", "slide-out-left", "slide-out-right")
    currentContent.classList.add(newIndex > selectedIndex ? "prev" : "next")

    newContent.classList.remove("slide-in", "prev", "next")
    newContent.classList.add("active")

    isAnimating = false
  }, 500) // Match the CSS transition duration
}

// Handle next button click
function handleNext() {
  if (isAnimating || selectedIndex >= timelineData.length - 1) return
  handleDateClick(selectedIndex + 1)
}

// Handle previous button click
function handlePrevious() {
  if (isAnimating || selectedIndex <= 0) return
  handleDateClick(selectedIndex - 1)
}

// Update navigation button states
function updateNavButtons() {
  prevButton.disabled = selectedIndex === 0
  nextButton.disabled = selectedIndex === timelineData.length - 1
}

// Add keyboard navigation
function handleKeyboardNavigation(e) {
  if (isAnimating) return

  if (e.key === "ArrowRight" || e.key === "ArrowDown") {
    if (selectedIndex < timelineData.length - 1) {
      handleNext()
    }
  } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
    if (selectedIndex > 0) {
      handlePrevious()
    }
  }
}

// Add event listeners
prevButton.addEventListener("click", handlePrevious)
nextButton.addEventListener("click", handleNext)
document.addEventListener("keydown", handleKeyboardNavigation)

// Initialize the timeline
document.addEventListener("DOMContentLoaded", initTimeline)