@extends('layouts.app')

@section('title', 'Why Support Us - CHEER MEDICS FOUNDATION')

@section('content')
<!-- WHY SUPPORT US 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">Why Support Us</h1><p class="text-2xl max-w-4xl mx-auto">Your contribution makes a real difference in healthcare and education</p></div></section>
    <section class="py-20 bg-white">
        <div class="max-w-7xl mx-auto px-4">
            <!-- Private Donors -->
            <div class="mb-20">
                <h2 class="text-4xl font-black text-gray-900 mb-8 text-center">For Private Donors</h2>
                <div class="grid lg:grid-cols-2 gap-16 items-center">
                    <div><p class="text-gray-600 text-lg leading-relaxed mb-6">Your individual donation directly impacts the lives of medical students and elderly individuals in need. Every contribution, regardless of size, helps us provide scholarships, healthcare services, and mental health support to those who need it most.</p><p class="text-gray-600 text-lg leading-relaxed mb-6">As a private donor, you become part of a community dedicated to creating positive change in healthcare accessibility and medical education.</p><a href="{{ route('donate') }}" class="inline-flex items-center gradient-primary text-white px-10 py-5 rounded-full font-bold text-lg hover:shadow-2xl transition-all">Donate Now <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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a></div>
                    <div class="h-96 rounded-3xl overflow-hidden shadow-2xl"><img src="https://images.unsplash.com/photo-1469571486292-0ba58a3f068b?w=600" class="w-full h-full object-cover"></div>
                </div>
            </div>
            <!-- Transparency -->
            <div class="bg-gray-50 rounded-3xl p-12 mb-20">
                <h2 class="text-4xl font-black text-gray-900 mb-8 text-center">Transparency & Accountability</h2>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="text-center"><div class="text-5xl font-black text-gradient mb-4">92%</div><p class="text-gray-600 font-semibold">Of funds go directly to programs</p></div>
                    <div class="text-center"><div class="text-5xl font-black text-gradient mb-4">100%</div><p class="text-gray-600 font-semibold">Financial transparency in reports</p></div>
                    <div class="text-center"><div class="text-5xl font-black text-gradient mb-4">Annual</div><p class="text-gray-600 font-semibold">Independent audits conducted</p></div>
                </div>
                <div class="text-center mt-10"><a href="{{ route('reports') }}" class="inline-flex items-center border-2 border-gray-900 text-gray-900 px-8 py-4 rounded-full font-bold hover:bg-gray-900 hover:text-white transition-all">View Our Reports <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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a></div>
            </div>
            <!-- Corporate Partners -->
            <div class="mb-20">
                <h2 class="text-4xl font-black text-gray-900 mb-8 text-center">Corporate Partnerships</h2>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="gradient-primary rounded-3xl p-10 text-white shadow-2xl 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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></div><h3 class="text-2xl font-black mb-4">CSR Programs</h3><p class="text-white/90">Align your corporate social responsibility with meaningful healthcare initiatives</p></div>
                    <div class="gradient-secondary rounded-3xl p-10 text-white shadow-2xl 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div><h3 class="text-2xl font-black mb-4">Corporate Giving</h3><p class="text-white/90">Make a significant impact through corporate donations and matching programs</p></div>
                    <div class="bg-gradient-to-br from-emerald-500 to-teal-600 rounded-3xl p-10 text-white shadow-2xl 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg></div><h3 class="text-2xl font-black mb-4">Employee Engagement</h3><p class="text-white/90">Engage your team through volunteer opportunities and fundraising events</p></div>
                </div>
            </div>
            <!-- CTA -->
            <div class="gradient-primary rounded-3xl p-12 text-center text-white">
                <h2 class="text-4xl font-black mb-6">Ready to Make a Difference?</h2>
                <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">Join thousands of supporters who are helping us create lasting change in healthcare and education.</p>
                <div class="flex flex-col sm:flex-row gap-4 justify-center">
                    <a href="{{ route('donate') }}" class="bg-amber-500 hover:bg-amber-600 text-white px-10 py-5 rounded-full font-bold text-lg hover:shadow-2xl transition-all">Donate Now</a>
                    <a href="{{ route('contact') }}" class="bg-white/20 backdrop-blur text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-white/30 transition-all">Contact Us</a>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection