async function loadComponent(id, url) {
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error(`Failed to load ${url}`);
        const html = await response.text();
        const container = document.getElementById(id);
        if (container) {
            container.innerHTML = html;
            return true;
        }
    } catch (error) {
        console.error("Error loading component:", error);
    }
    return false;
}

window.loadComponents = async function () {
    const components = [
        { id: 'nav-placeholder', url: 'components/nav.html' },
        { id: 'hero-placeholder', url: 'components/hero.html' },
        { id: 'stats-placeholder', url: 'components/stats.html' },
        { id: 'about-placeholder', url: 'components/about.html' },
        { id: 'courses-placeholder', url: 'components/courses.html' },
        { id: 'testimonials-placeholder', url: 'components/testimonials.html' },
        { id: 'partners-placeholder', url: 'components/partners.html' },
        { id: 'cta-placeholder', url: 'components/cta.html' },
        { id: 'newsletter-placeholder', url: 'components/newsletter.html' },
        { id: 'footer-placeholder', url: 'components/footer.html' }
    ];

    const promises = components.map(c => loadComponent(c.id, c.url));
    await Promise.all(promises);

    // Initialize scripts after components are loaded
    if (window.initScripts) {
        window.initScripts();
    }
};

document.addEventListener('DOMContentLoaded', window.loadComponents);
