<x-main-inner-page 
    category="Contact" title="Donations & Grants" 
    subtitle="Support global academic research, scholarships, and CSR projects driven by GARI."
>
<!-- Intro/Hero -->
<div class="flex flex-col lg:flex-row gap-10 items-center mb-16">
    <div class="lg:w-1/2">
        <span class="text-brand-600 text-xs font-bold uppercase tracking-widest mb-2 block">Empower Knowledge</span>
        <h2 class="text-3xl lg:text-4xl font-bold text-slate-900 leading-tight mb-6">Invest in the Future of Academic Discovery.</h2>
        <p class="text-slate-600 leading-relaxed text-lg mb-8">Your contributions help fund early-career researchers, sponsor academic publications for developing nations, and support our global CSR initiatives in education.</p>
        
        <div class="flex flex-wrap gap-4">
            <button class="bg-slate-900 hover:bg-slate-800 text-white font-bold px-8 py-4 rounded-xl shadow-lg transition-all flex items-center gap-2">
                Donate Now <i class="fas fa-heart text-red-500"></i>
            </button>
            <button class="bg-white border-2 border-slate-200 text-slate-700 hover:border-brand-500 hover:text-brand-600 font-bold px-8 py-4 rounded-xl transition-all flex items-center gap-2">
                Corporate Sponsorship
            </button>
        </div>
    </div>
    
    <div class="lg:w-1/2 relative">
        <div class="absolute inset-0 bg-brand-600 rounded-3xl transform rotate-3 scale-105 opacity-10"></div>
        <img src="https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80" alt="Charity/Donation" class="w-full relative z-10 rounded-3xl shadow-xl object-cover h-[400px]">
    </div>
</div>

<!-- Where it goes -->
<div class="bg-slate-50 border border-slate-100 rounded-3xl p-10 md:p-16 mb-16">
    <div class="text-center mb-12">
        <h2 class="text-3xl font-bold text-slate-900">How Your Donation Helps</h2>
        <p class="text-slate-500 mt-2">Every contribution is allocated to sustainable academic progress.</p>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div class="text-center">
            <div class="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm">
                <i class="fas fa-graduation-cap text-emerald-600 text-3xl"></i>
            </div>
            <h3 class="font-bold text-xl text-slate-900 mb-3">Student Scholarships</h3>
            <p class="text-slate-600 text-sm leading-relaxed">Funding travel and registration grants for talented postgraduate students from under-represented backgrounds.</p>
        </div>
        <div class="text-center">
            <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm">
                <i class="fas fa-book-open text-blue-600 text-3xl"></i>
            </div>
            <h3 class="font-bold text-xl text-slate-900 mb-3">Open Access Publishing</h3>
            <p class="text-slate-600 text-sm leading-relaxed">Subsidizing publication fees to ensure vital research is freely available to the global public via our Research Library.</p>
        </div>
        <div class="text-center">
            <div class="w-20 h-20 bg-brand-100 rounded-full flex items-center justify-center mx-auto mb-6 shadow-sm">
                <i class="fas fa-hands-helping text-brand-600 text-3xl"></i>
            </div>
            <h3 class="font-bold text-xl text-slate-900 mb-3">CSR Educational Projects</h3>
            <p class="text-slate-600 text-sm leading-relaxed">Providing library books, computers, and learning resources to rural schools through the GARI community outreach program.</p>
        </div>
    </div>
</div>

<!-- Partner Log -->
<div class="text-center border-t border-slate-100 pt-16">
    <p class="text-slate-400 text-sm font-bold uppercase tracking-widest mb-8">Trusted by Global Organizations</p>
    <div class="flex flex-wrap justify-center items-center gap-10 opacity-50 grayscale">
        <i class="fab fa-aws text-5xl"></i>
        <i class="fab fa-google text-4xl"></i>
        <i class="fab fa-microsoft text-4xl"></i>
        <i class="fab fa-stripe text-4xl"></i>
        <i class="fab fa-paypal text-4xl"></i>
    </div>
</div>

</x-main-inner-page>