document.addEventListener("DOMContentLoaded", function() {
  const config = {
    order: 'media-text', // or 'media-text'
    h3: 'Your Headline 3 Text',
    h4: 'Your Headline 4 Text',
    bodyText: 'Body Text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.sdsdsd',
    imageUrl: 'https://s3-alpha-sig.figma.com/img/37a7/42fb/1daabd5424c6093ca79a6d502b3b84ef?Expires=1725235200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=aiQBLdi9Fj2GEiVQIUFmOcfAnAh4W79hJej42foev128u4u2p5AEfKLOse~ksw7eOT3QvQsqtKNsbcwcaBzwUljFVc-SaQkeY7bfgDXwCQ~aMOysamP-HbYx3D0cIIZQwJorkddZS9smInFTzHObShtlwVU05hN~yPBGVk0AaDRZ2oICAtH1aJF~GMQshvpElVpUQRGvpY5~WZOAI9f3ESrfij~zw9WwKVSlK0TrJiNzKhVW14eff4Y8KCkoWA9KUINS8BOiXu5COH~MDo4MXveP805~bRjAoji4G4DKwmUNvdGWJGRYRwoIzJ9kMIWQVhuvWi8Yk4naDkLDCXYtDQ__'
  };

  fetch('components/text-media-1.html')
      .then(response => response.text())
      .then(data => {
          document.getElementById('text-media-1-container').innerHTML = data;

          const wrapper = document.querySelector('.text-media-1');
          const h3 = document.querySelector('.text-section h3');
          const h4 = document.querySelector('.text-section h4');
          const p = document.querySelector('.text-section p');
          const img = document.querySelector('.media-section img');

          h3.textContent = config.h3;
          h4.textContent = config.h4;
          p.textContent = config.bodyText;
          img.src = config.imageUrl;

          if (config.order === 'media-text') {
              wrapper.classList.add('reverse');
          }
      })
      .catch(error => console.error('Error loading text-media-1 component:', error));
});
