async function loadTemplate(path, targetId) {
    try {
        const response = await fetch(path);
        const html = await response.text();
        document.getElementById(targetId).innerHTML = html;
        
        // Initialize TradingView widget after trading-chart template is loaded
        if (targetId === 'trading-chart') {
            initTradingViewWidget();
        }
    } catch (error) {
        console.error(`Error loading template ${path}:`, error);
    }
}

document.addEventListener('DOMContentLoaded', async () => {
    await Promise.all([
        loadTemplate('components/header.html', 'header'),
        loadTemplate('components/pi-info.html', 'pi-info'),
        loadTemplate('components/gallery.html', 'gallery'),
        loadTemplate('components/investment-calc.html', 'investment-calc'),
        loadTemplate('components/trading-chart.html', 'trading-chart'),
        loadTemplate('components/exchange-info.html', 'exchange-info')
    ]);
    
    // Initialize AOS after components are loaded
    AOS.init({
        duration: 1000,
        once: true,
        offset: 100
    });

    // Smooth scroll for arrow down
    document.querySelector('.scroll-indicator')?.addEventListener('click', () => {
        document.querySelector('.pi-info').scrollIntoView({ 
            behavior: 'smooth' 
        });
    });
});