// Function to load HTML content
async function loadContent(sectionId, contentFile) {
    try {
        console.log(`Loading content for ${sectionId} from ${contentFile}`);
        // Use correct relative path
        const response = await fetch(`/content/${contentFile}`);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const html = await response.text();
        console.log(`Successfully loaded content for ${sectionId}`);
        
        // Find the section and update its content
        const section = document.getElementById(sectionId);
        if (section) {
            // Preserve the close button
            const closeButton = section.querySelector('.close');
            section.innerHTML = html;
            if (closeButton) {
                section.insertBefore(closeButton, section.firstChild);
            }
            console.log(`Successfully updated content for ${sectionId}`);
        } else {
            console.error(`Section element not found for ${sectionId}`);
        }
    } catch (error) {
        console.error(`Error loading content for ${sectionId}:`, error);
        console.error(`Error details:`, {
            sectionId,
            contentFile,
            error: error.message,
            stack: error.stack
        });
        // Show error message in the section
        const section = document.getElementById(sectionId);
        if (section) {
            const closeButton = section.querySelector('.close');
            section.innerHTML = `<h2 class="major">Error</h2><p>Could not load content. Please try refreshing the page.</p><p>Error details: ${error.message}</p>`;
            if (closeButton) {
                section.insertBefore(closeButton, section.firstChild);
            }
        }
    }
}

// Load content when the page loads
document.addEventListener('DOMContentLoaded', () => {
    console.log('DOM Content Loaded - Starting content loading');
    // Map of section IDs to content files - only for sections that need external content
    const contentMap = {
        'announce': 'announce.html',
        'date': 'date.html',
        'showmetheway': 'directions.html',
        'rsvp': 'rsvp.html',
        'campinfos': 'campinfos.html'
    };
    
    // Load content for each section
    Object.entries(contentMap).forEach(([sectionId, contentFile]) => {
        console.log(`Queueing content load for ${sectionId} from ${contentFile}`);
        loadContent(sectionId, contentFile);
    });
});