<!-- Hero Section -->
<section class="w-full py-12 md:py-24 lg:py-32 xl:py-48">
    <div class="container mx-auto px-4 md:px-6">
        <div class="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_600px]">
            <div class="flex flex-col justify-center space-y-4">
                <div class="space-y-2">
                    <h1 class="font-headline text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl">
                        Unlock Your Future with EMTAF
                    </h1>
                    <p class="max-w-[600px] text-gray-500 md:text-xl">
                        The Executive Mayor's Tertiary Assistance Fund is here to support your educational journey. Apply for bursaries and manage your application with ease.
                    </p>
                </div>
                <div class="flex flex-col gap-2 min-[400px]:flex-row">
                    <a href="/bursaries" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-md text-lg hover:bg-blue-700 transition">View Bursaries</a>
                    <a href="/auth/register" class="inline-block bg-gray-200 text-gray-900 px-6 py-3 rounded-md text-lg hover:bg-gray-300 transition">Apply Now</a>
                </div>
            </div>
            <img
            alt="Happy students at graduation"
            class="mx-auto aspect-video overflow-hidden   sm:w-full lg:order-last lg:aspect-square "
            src="images/logo.png" style="width: fit-content;"
            />
        </div>

        <!-- Carousel -->
        <div class="mt-12">
            <div class="swiper" id="featured-bursaries-carousel">
                <div class="swiper-wrapper">
                    <!-- Dynamic slides will be injected here -->
                </div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                <div class="swiper-pagination"></div>
            </div>
            <div id="carousel-loading" class="text-center text-gray-500 mt-4 hidden">
                <svg class="h-6 w-6 animate-spin inline-block mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Loading featured bursaries...
            </div>
            <div id="carousel-error" class="text-center text-red-600 mt-4 hidden"></div>
        </div>
    </div>
</section>

<!-- How It Works Section -->
<section id="how-it-works" class="w-full bg-white py-12 md:py-24 lg:py-32">
    <div class="container mx-auto px-4 md:px-6">
        <div class="flex flex-col items-center justify-center space-y-4 text-center">
            <div class="space-y-2">
                <span class="inline-block rounded-lg bg-blue-100 px-3 py-1 text-sm text-blue-800">How It Works</span>
                <h2 class="font-headline text-3xl font-bold tracking-tighter sm:text-5xl">A Simple Path to Funding</h2>
                <p class="max-w-[900px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                    Our streamlined process ensures you can apply and track your bursary application without hassle.
                </p>
            </div>
        </div>
        <div class="mx-auto grid max-w-5xl items-start gap-8 sm:grid-cols-2 md:gap-12 lg:grid-cols-3 lg:gap-16 mt-12">
            <div class="grid gap-1 text-center">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 mb-4">
                    <svg class="h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold font-headline">1. Register & Apply</h3>
                <p class="text-sm text-gray-500">
                    Create an account and fill out the online application for the bursary that fits your needs.
                </p>
            </div>
            <div class="grid gap-1 text-center">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 mb-4">
                    <svg class="h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold font-headline">2. Upload Documents</h3>
                <p class="text-sm text-gray-500">
                    Securely upload all required supporting documents directly through the portal.
                </p>
            </div>
            <div class="grid gap-1 text-center">
                <div class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-50 mb-4">
                    <svg class="h-8 w-8 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <h3 class="text-lg font-bold font-headline">3. Track & Succeed</h3>
                <p class="text-sm text-gray-500">
                    Monitor your application status and receive notifications on the outcome.
                </p>
            </div>
        </div>
    </div>
</section>

<!-- Featured Bursaries Section -->
<section id="featured-bursaries" class="w-full py-12 md:py-24 lg:py-32">
    <div class="container mx-auto grid items-center justify-center gap-4 px-4 text-center md:px-6">
        <div class="space-y-3">
            <h2 class="font-headline text-3xl font-bold tracking-tighter md:text-4xl/tight">Featured Bursaries</h2>
            <p class="mx-auto max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed">
                Explore some of the top opportunities available right now.
            </p>
        </div>
        <div id="bursaries-grid" class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 pt-8">
            <!-- Bursary cards will be injected here -->
        </div>
        <div class="mt-8">
            <a href="/bursaries" class="text-lg text-blue-600 hover:underline flex items-center justify-center">
                View All Bursaries
                <svg class="ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                </svg>
            </a>
        </div>
    </div>
</section>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.6.2/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>

<script nonce="<%= nonce %>">
    // Initialize API
    const api = axios.create({
        baseURL: window.location.hostname === 'localhost' ? 'http://localhost:3001' : '/api',
        timeout: 10000,
        headers: {
            'Content-Type': 'application/json',
        }
    });

    document.addEventListener('DOMContentLoaded', async () => {
        const swiperContainer = document.querySelector('#featured-bursaries-carousel');
        const loading = document.querySelector('#carousel-loading');
        const error = document.querySelector('#carousel-error');
        const swiperWrapper = swiperContainer.querySelector('.swiper-wrapper');
        const bursariesGrid = document.querySelector('#bursaries-grid');

        // Static fallback data with working image URLs
        const fallbackBursaries = [
        {
            id: '1',
            title: 'Godfrey Pitje Tertiary Assistance Fund (GPTAF)',
            description: 'The Executive Mayor\'s discretionary bursary for undergraduate studies',
            amount: 'R50,000 - R100,000',
            deadline: '30 December 2025',
            imageUrl: 'https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=400&q=80'
        },
        {
            id: '2',
            title: 'Engineering Excellence Bursary',
            description: 'Support for students pursuing engineering degrees',
            amount: 'R75,000 - R120,000',
            deadline: '15 January 2026',
            imageUrl: 'https://images.unsplash.com/photo-1581092160562-40aa08e78837?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=400&q=80'
        },
        {
            id: '3',
            title: 'Medical Studies Support Fund',
            description: 'Comprehensive funding for medical and health science students',
            amount: 'R100,000 - R200,000',
            deadline: '28 February 2026',
            imageUrl: 'https://images.unsplash.com/photo-1559757148-5c350d0d3c56?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=400&q=80'
        },
        {
            id: '4',
            title: 'IT Innovation Scholarship',
            description: 'Supporting the next generation of tech leaders and innovators',
            amount: 'R60,000 - R90,000',
            deadline: '20 March 2026',
            imageUrl: 'https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=400&q=80'
        }
        ];

        let swiperInstance = null;

        // Initialize Swiper with bursary data
        function renderCarousel(bursaries) {
            if (!bursaries || bursaries.length === 0) {
                console.warn('No bursaries to render in carousel');
                return;
            }

            swiperWrapper.innerHTML = bursaries.map(bursary => `
                    <div class="swiper-slide">
                        <div class="relative rounded-lg overflow-hidden shadow-lg">
                            <img
                                src="${bursary.imageUrl}"
                                alt="${bursary.title}"
                                class="w-full h-[400px] object-cover"
                                onerror="this.src='https://images.unsplash.com/photo-1523240795612-9a054b0db644?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&h=400&q=80'"
                            />
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black via-black/70 to-transparent text-white p-6">
                                <h5 class="font-headline text-xl font-bold mb-2">${bursary.title}</h5>
                                <p class="text-sm mb-2">${bursary.description}</p>
                                <p class="text-xs opacity-90">Amount: ${bursary.amount || 'Contact for details'}</p>
                            </div>
                        </div>
                    </div>
                `).join('');

            // Destroy existing swiper instance if it exists
            if (swiperInstance) {
                swiperInstance.destroy(true, true);
            }

            // Initialize new Swiper instance
            swiperInstance = new Swiper('#featured-bursaries-carousel', {
                loop: bursaries.length > 1,
                autoplay: bursaries.length > 1 ? {
                    delay: 5000,
                    disableOnInteraction: false
                } : false,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    dynamicBullets: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                slidesPerView: 1,
                spaceBetween: 20,
                breakpoints: {
                    640: {
                        slidesPerView: Math.min(2, bursaries.length),
                        spaceBetween: 20
                    },
                    1024: {
                        slidesPerView: Math.min(3, bursaries.length),
                        spaceBetween: 30
                    }
                },
                on: {
                    init: function() {
                        console.log('Swiper initialized successfully');
                    }
                }
            });
        }

        // Render bursary cards in the grid
        function renderBursaryGrid(bursaries) {
            if (!bursaries || bursaries.length === 0) {
                bursariesGrid.innerHTML = '<p class="text-gray-500 col-span-full">No bursaries available at the moment.</p>';
                return;
            }

            // Take only first 3 for the grid
            const gridBursaries = bursaries.slice(0, 3);

            bursariesGrid.innerHTML = gridBursaries.map(bursary => `
                    <div class="bg-white shadow-lg rounded-lg overflow-hidden bursary-card hover:shadow-xl transition-shadow duration-300">
                        <div class="p-6">
                            <h3 class="text-xl font-bold font-headline mb-2">${bursary.title}</h3>
                            <p class="text-sm text-gray-600 mb-3 line-clamp-3">${bursary.description}</p>
                            <div class="space-y-1 text-sm text-gray-500">
                                <p><strong>Amount:</strong> ${bursary.amount || 'Contact for details'}</p>
                                <p><strong>Deadline:</strong> ${bursary.deadline || 'Open application'}</p>
                            </div>
                        </div>
                        <div class="p-6 pt-0">
                            <a href="/bursaries/${bursary.id}" class="inline-block bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition-colors duration-200">
                                Apply Now
                            </a>
                        </div>
                    </div>
                `).join('');
        }

        // Fetch featured bursaries from API
        async function fetchFeaturedBursaries() {
            loading.classList.remove('hidden');
            error.classList.add('hidden');

            try {
                // Simulate API call delay
                await new Promise(resolve => setTimeout(resolve, 1000));

                // Try to fetch from API (will fail in this demo)
                // const response = await api.get('/v1/featured-bursaries');
                // const bursaries = response.data;

                // For demo purposes, we'll simulate an API failure and use fallback
                throw new Error('API not available in demo');

            } catch (err) {
                console.error('Error fetching featured bursaries:', err);

                // Use fallback data
                renderCarousel(fallbackBursaries);
                renderBursaryGrid(fallbackBursaries);

                // Hide error message for smoother demo experience
                // In production, you might want to show this
                // error.classList.remove('hidden');
                // error.textContent = 'Using demo data. Connect to API for live content.';
            } finally {
                loading.classList.add('hidden');
            }
        }

        // Initialize the page
        try {
            await fetchFeaturedBursaries();
        } catch (err) {
            console.error('Failed to initialize page:', err);
            // Fallback to static content
            renderCarousel(fallbackBursaries);
            renderBursaryGrid(fallbackBursaries);
            loading.classList.add('hidden');
        }
    });
</script>
