document.addEventListener("DOMContentLoaded", function() {
    const cells = document.querySelectorAll(".cell");
    
    cells.forEach(cell => {
      cell.addEventListener("click", function() {
        const sectionId = cell.getAttribute("data-section");
        const sectionElement = document.querySelector(sectionId);

        if (sectionElement) {
          sectionElement.scrollIntoView({ behavior: "smooth" });
        }
      });
    });
  });



/* section3 */

document.addEventListener('DOMContentLoaded', function() {
    const textBoxesTop = document.querySelectorAll('.text-box-top');
    const textBoxesBottom = document.querySelectorAll('.text-box-bottom');
    const selectedImage = document.getElementById('selected-image');
    const bottomBox = document.querySelector('.bottom-box');
  
    textBoxesTop.forEach(function(textBox) {
      textBox.addEventListener('click', function() {
        const imageSrc = this.dataset.image;
        const textContent = this.dataset.text;
  
        selectedImage.src = imageSrc;
        selectedImage.alt = textContent;
  
        textBoxesBottom.forEach(function(bottomTextBox) {
          if (bottomTextBox.dataset.image === imageSrc) {
            bottomTextBox.style.display = 'block';
          } else {
            bottomTextBox.style.display = 'none';
          }
        });
      });
    });
  });

  $('.text-box-top').click(function(){
    $('.text-box-top').removeClass("oncolor");
    $(this).addClass("oncolor");
  });

  /* section4 */

  
  /* section6 */