async function loadLinks() {
    const container = document.getElementById('links-container');
    if (!container) return;

    try {
        const response = await fetch('./assets/data/links.json');
        if (!response.ok) {
            throw new Error(`Failed to load links: ${response.status}`);
        }

        const groups = await response.json();

        container.innerHTML = groups.map(group => `
            <!-- ${group.title} Card -->
            <div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
                <div class="flex items-center space-x-3 mb-6">
                    <div class="w-10 h-10 ${group.iconColorClass} rounded-lg flex items-center justify-center">
                        ${group.iconSvg}
                    </div>
                    <h3 class="text-xl font-bold text-gray-900">${group.title}</h3>
                </div>
                
                <div class="space-y-3">
                    ${group.links.map(link => `
                        <a href="${link.url}" target="_blank"
                           class="flex items-center justify-between p-4 ${link.containerClass} rounded-xl transition-all group">
                            <div class="flex items-center space-x-3">
                                ${link.iconClass ? `<div class="${link.iconClass}"></div>` : link.iconSvg}
                                ${link.subtitle ? `
                                    <div>
                                        <div class="font-medium text-gray-900 ${link.textHoverClass}">${link.title}</div>
                                        <div class="text-xs text-gray-500">${link.subtitle}</div>
                                    </div>
                                ` : `
                                    <span class="font-medium text-gray-900 ${link.textHoverClass}">${link.title}</span>
                                `}
                            </div>
                            ${link.badge ? `
                                <span class="px-3 py-1 ${link.badgeColorClass} text-white text-xs font-semibold rounded-full">${link.badge}</span>
                            ` : ''}
                            ${link.arrowIcon ? `
                                <svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                                </svg>
                            ` : ''}
                        </a>
                    `).join('')}
                </div>
            </div>
        `).join('');

    } catch (error) {
        console.error('Error loading links:', error);
        container.innerHTML = `
            <div class="col-span-full p-4 bg-red-50 text-red-600 rounded-xl border border-red-200">
                Failed to load application links. Please try refreshing the page.
            </div>
        `;
    }
}

// Load links when the DOM is loaded
document.addEventListener('DOMContentLoaded', loadLinks);