const loadSection = (sectionName) =>{
    fetch(`data/${sectionName}.json`)
    .then(response => response.json())
    .then(data => {
      const container = document.getElementById(sectionName);
      container.innerHTML = renderItems(data)
    })
    .catch(error => console.error('Error loading JSON:', error));
}

// Recursive function to handle strings, arrays, and objects
const renderItems = (items) => {
    return items.map(item => {
      if (typeof item === 'string') {
        return `<p>${item}</p>`;
      } else if (Array.isArray(item)) {
        return renderItems(item); // recurse into nested array
      } else if (typeof item === 'object') {
        return `<p>${Object.entries(item).map(([key, value]) => 
          `<strong>${key}:</strong> ${value}`).join('<br>')}</p>`;
      } else {
        return `<p>${String(item)}</p>`;
      }
    }).join('');
  };



const sections = document.getElementsByClassName('section')
Array.from(sections).forEach(section =>{
    loadSection(section.id)
})