@extends('layouts.app')

@section('title', 'Reports & Financials - CHEER MEDICS FOUNDATION')

@section('content')
<!-- REPORTS PAGE -->
<div class="pt-20">
    <section class="relative py-32 animated-bg text-white overflow-hidden"><div class="absolute inset-0 bg-black/30"></div><div class="relative max-w-7xl mx-auto px-4 text-center"><h1 class="text-6xl md:text-7xl font-black mb-6">Reports & Financials</h1><p class="text-2xl max-w-4xl mx-auto">Transparency and accountability in everything we do</p></div></section>
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid md:grid-cols-2 gap-8 mb-16">
                <div class="gradient-primary rounded-3xl p-12 text-white shadow-2xl card-hover"><h3 class="text-5xl font-black mb-4">$2.5M</h3><p class="text-xl font-semibold">Total Raised in 2024</p></div>
                <div class="gradient-secondary rounded-3xl p-12 text-white shadow-2xl card-hover"><h3 class="text-5xl font-black mb-4">92%</h3><p class="text-xl font-semibold">Funds to Programs</p></div>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white rounded-3xl shadow-2xl p-10 card-hover"><div class="feature-icon mb-6"><svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg></div><h3 class="text-2xl font-black text-gray-900 mb-4">Annual Report 2024</h3><p class="text-gray-600 mb-6">Comprehensive overview of our programs, impact, and financial performance</p><button class="text-cyan-600 font-bold inline-flex items-center">Download PDF <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg></button></div>
                <div class="bg-white rounded-3xl shadow-2xl p-10 card-hover"><div class="feature-icon mb-6"><svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg></div><h3 class="text-2xl font-black text-gray-900 mb-4">Financial Statement</h3><p class="text-gray-600 mb-6">Detailed breakdown of income, expenses, and fund allocation</p><button class="text-cyan-600 font-bold inline-flex items-center">Download PDF <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg></button></div>
                <div class="bg-white rounded-3xl shadow-2xl p-10 card-hover"><div class="feature-icon mb-6"><svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg></div><h3 class="text-2xl font-black text-gray-900 mb-4">Impact Report</h3><p class="text-gray-600 mb-6">Measuring our social impact and outcomes achieved in communities</p><button class="text-cyan-600 font-bold inline-flex items-center">Download PDF <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"></path></svg></button></div>
            </div>
        </div>
    </section>
</div>
@endsection