document.addEventListener('DOMContentLoaded', function() {
    // Load featured scholarships
    fetchFeaturedScholarships();
    
    // Language switcher functionality
    const langSwitcher = document.getElementById('lang-switcher');
    if (langSwitcher) {
        langSwitcher.addEventListener('change', function() {
            // In a real app, this would redirect to the appropriate language version
            alert('Language switched to: ' + this.value);
        });
    }
    
    // Mobile menu toggle
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');
    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }
});

function fetchFeaturedScholarships() {
    // In a real app, this would fetch from your API
    const scholarships = [
        {
            id: 1,
            title: "Master's in Computer Science",
            university: "ETH Zurich",
            country: "Switzerland",
            deadline: "2023-12-15",
            category: "Computer Science"
        },
        {
            id: 2,
            title: "PhD in Mathematics",
            university: "University of Oxford",
            country: "UK",
            deadline: "2024-01-10",
            category: "Mathematics"
        },
        {
            id: 3,
            title: "Undergraduate Physics Program",
            university: "University of Cape Town",
            country: "South Africa",
            deadline: "2023-11-30",
            category: "Physics"
        }
    ];
    
    const container = document.getElementById('featured-scholarships');
    if (!container) return;
    
    container.innerHTML = scholarships.map(scholarship => `
        <div class="scholarship-card bg-white rounded-xl shadow-md overflow-hidden fade-in">
            <div class="p-6">
                <div class="flex justify-between items-start mb-2">
                    <span class="bg-accent bg-opacity-20 text-primary text-xs px-2 py-1 rounded">${scholarship.category}</span>
                    <span class="text-xs text-gray-500">${formatDate(scholarship.deadline)}</span>
                </div>
                <h3 class="font-bold text-xl mb-2">${scholarship.title}</h3>
                <p class="text-gray-600 mb-4">${scholarship.university}, ${scholarship.country}</p>
                <a href="scholarship.html?id=${scholarship.id}" class="text-secondary font-semibold text-sm flex items-center gap-1">
                    View Details <i data-feather="arrow-right" class="w-4 h-4"></i>
                </a>
            </div>
        </div>
    `).join('');
    
    feather.replace();
}

function formatDate(dateString) {
    const options = { year: 'numeric', month: 'short', day: 'numeric' };
    return new Date(dateString).toLocaleDateString('en-US', options);
}