function displayJourney(journey) {
  document.getElementById('journey-title').textContent = journey.name;
  
  const container = document.getElementById('timeline-container');
  container.innerHTML = '';
  
  journey.markers.forEach(marker => {
    const markerEl = document.createElement('div');
    markerEl.className = 'timeline-event';
    markerEl.innerHTML = `
      <h3>${marker.content.title || 'Untitled Event'}</h3>
      <p class="date">${marker.content.date}</p>
      <p class="location">${marker.lngLat.lng.toFixed(4)}, ${marker.lngLat.lat.toFixed(4)}</p>
      <p>${marker.content.text}</p>
      ${marker.content.videoUrl ? `<iframe src="${marker.content.videoUrl}" frameborder="0"></iframe>` : ''}
      <div class="images-container">
        ${marker.content.images.map(img => `<img src="${img}" alt="Event image">`).join('')}
      </div>
    `;
    container.appendChild(markerEl);
  });
}

// Get journey ID from URL
const urlParams = new URLSearchParams(window.location.search);
const journeyId = urlParams.get('id');

// Load journey data from localStorage
if (journeyId) {
  loadJourneysFromLocalStorage();
  const journey = journeys.find(j => j.id === parseInt(journeyId));
  if (journey) {
    displayJourney(journey);
  } else {
    document.getElementById('journey-title').textContent = 'Journey not found';
  }
}