// Load and populate homepage content from JSON

async function loadHomepage() {
  try {
    const response = await fetch(window.BASE_PATH + 'data/homepage.json');
    const data = await response.json();
    
    // Populate hero section
    const heroText = document.querySelector('.hero-text');
    if (heroText) {
      heroText.innerHTML = `
        <h1>${data.hero.title}</h1>
        <p>${data.hero.description}</p>
      `;
    }
    
    const heroImage = document.querySelector('.hero-image');
    if (heroImage && data.hero.imageUrl) {
      heroImage.innerHTML = `<img src="${data.hero.imageUrl}" alt="Hero image">`;
    }
    
    // Populate stats
    const statsSection = document.querySelector('.stats-section');
    if (statsSection && data.stats) {
      statsSection.innerHTML = data.stats.map(stat => `
        <div class="stat-card">
          <div class="stat-number">${stat.number}</div>
          <div class="stat-label">${stat.label}</div>
        </div>
      `).join('');
    }
    
    // Populate featured section
    const featuredSection = document.querySelector('[data-featured]');
    if (featuredSection && data.featured) {
      const title = document.querySelector('[data-featured] .section-title');
      const subtitle = document.querySelector('[data-featured] .section-subtitle');
      const grid = document.querySelector('[data-featured] .featured-grid');
      
      if (title) title.textContent = data.featured.title;
      if (subtitle) subtitle.textContent = data.featured.subtitle;
      
      if (grid && data.featured.cards) {
        grid.innerHTML = data.featured.cards.map(card => `
          <div class="featured-card">
            <div class="featured-card-image">
              <img src="${card.imageUrl}" alt="${card.title}">
            </div>
            <div class="featured-card-content">
              <h3>${card.title}</h3>
              <p>${card.description}</p>
              <a href="${card.linkUrl}">${card.linkText}</a>
            </div>
          </div>
        `).join('');
      }
    }
    
    // Populate CTA section
    const ctaSection = document.querySelector('[data-cta]');
    if (ctaSection && data.cta) {
      const h2 = ctaSection.querySelector('h2');
      const p = ctaSection.querySelector('p');
      const button = ctaSection.querySelector('a');
      
      if (h2) h2.textContent = data.cta.title;
      if (p) p.textContent = data.cta.description;
      if (button) {
        button.textContent = data.cta.buttonText;
        button.href = data.cta.buttonUrl;
      }
    }
    
  } catch (error) {
    console.log('Homepage data loaded (or will be added manually)');
  }
}

// Load on page load
document.addEventListener('DOMContentLoaded', loadHomepage);