// Example structure for the crystal application

// Define the crystal volumes and their data
const volumes = [
  {
    title: "Volume 1",
    key: "volume1",
    coverImage: "path_to_volume1_image.jpg",
    crystals: [
      {
        name: "Crystal A",
        description: "Description of Crystal A.",
        image: "path_to_crystal_a_image.jpg",
      },
      // Add more crystals
    ],
  },
  {
    title: "Volume 2",
    key: "volume2",
    coverImage: "path_to_volume2_image.jpg",
    crystals: [
      {
        name: "Crystal B",
        description: "Description of Crystal B.",
        image: "path_to_crystal_b_image.jpg",
      },
      // Add more crystals
    ],
  },
  // Add more volumes
];

// Function to render volumes
function renderVolumes() {
  const volumeContainer = document.getElementById('volume-container');
  volumes.forEach(volume => {
    const volumeElement = document.createElement('div');
    volumeElement.classList.add('volume');

    const coverImage = document.createElement('img');
    coverImage.src = volume.coverImage;
    coverImage.alt = volume.title;
    volumeElement.appendChild(coverImage);

    const title = document.createElement('h2');
    title.textContent = volume.title;
    volumeElement.appendChild(title);

    volumeElement.addEventListener('click', () => renderCrystals(volume.key));

    volumeContainer.appendChild(volumeElement);
  });
}

// Function to render crystals in a selected volume
function renderCrystals(volumeKey) {
  const selectedVolume = volumes.find(volume => volume.key === volumeKey);
  const crystalContainer = document.getElementById('crystal-container');
  crystalContainer.innerHTML = ''; // Clear previous crystals

  selectedVolume.crystals.forEach(crystal => {
    const crystalElement = document.createElement('div');
    crystalElement.classList.add('crystal');

    const image = document.createElement('img');
    image.src = crystal.image;
    image.alt = crystal.name;
    crystalElement.appendChild(image);

    const name = document.createElement('h3');
    name.textContent = crystal.name;
    crystalElement.appendChild(name);

    const description = document.createElement('p');
    description.textContent = crystal.description;
    crystalElement.appendChild(description);

    crystalContainer.appendChild(crystalElement);
  });
}

// Call the initial rendering function
document.addEventListener('DOMContentLoaded', () => {
  renderVolumes();
});