@extends('layouts.website')

@section('title', 'Our Impact')

@section('content')

<x-website.page-header
    title="Our Impact"
    subtitle="Measuring lives reached, communities strengthened, partnerships built and futures transformed." />

{{-- INTRODUCTION --}}
<section class="py-20 bg-white">

    <div class="max-w-5xl mx-auto px-6 text-center">

        <h2 class="text-4xl font-bold mb-8">
            Transforming Lives Through Action
        </h2>

        <p class="text-lg leading-8 text-gray-700">

            At {{ config('organization.short_name') }}, impact is measured not only by the number of services delivered, but by healthier families, empowered individuals, strengthened communities and sustainable opportunities created. Through integrated health, education, economic empowerment and volunteer engagement programs, we continue to improve quality of life for vulnerable and underserved populations.

        </p>

        <p class="mt-6 text-lg leading-8 text-gray-700">

            Our work contributes to local development priorities while supporting national and global aspirations including Uganda Vision 2040, the Sustainable Development Goals (SDGs) and Agenda 2063: The Africa We Want.

        </p>

    </div>

</section>

{{-- IMPACT DASHBOARD --}}
@include('website.partials.impact-stats')

{{-- SERVICES DELIVERED --}}
<section class="py-24 bg-white">

    <div class="max-w-7xl mx-auto px-6">

        <h2 class="text-4xl font-bold text-center mb-16">
            Healthcare Services Delivered
        </h2>

        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">493</h3>
                <p class="mt-3">General Consultations</p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">218</h3>
                <p class="mt-3">Malaria Tests Conducted</p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">117</h3>
                <p class="mt-3">HIV Tests Conducted</p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">200</h3>
                <p class="mt-3">TB Screenings</p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">75</h3>
                <p class="mt-3">Dental Services</p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">50</h3>
                <p class="mt-3">Hepatitis B Tests</p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">96</h3>
                <p class="mt-3">Maternal & Child Health Services</p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-3xl font-bold text-green-600">35</h3>
                <p class="mt-3">Referrals Facilitated</p>
            </div>

        </div>

    </div>

</section>

{{-- HEALTH OUTCOMES --}}
<section class="py-24 bg-green-50">

    <div class="max-w-7xl mx-auto px-6">

        <h2 class="text-4xl font-bold text-center mb-16">
            Health Outcomes Achieved
        </h2>

        <div class="grid md:grid-cols-3 gap-10">

            <div class="bg-white rounded-xl p-8 shadow-sm">
                <h3 class="text-4xl font-bold text-green-700">107</h3>
                <p class="mt-4">
                    Malaria positive cases identified, treated and provided with health education.
                </p>
            </div>

            <div class="bg-white rounded-xl p-8 shadow-sm">
                <h3 class="text-4xl font-bold text-green-700">3</h3>
                <p class="mt-4">
                    HIV positive clients linked to care and support services.
                </p>
            </div>

            <div class="bg-white rounded-xl p-8 shadow-sm">
                <h3 class="text-4xl font-bold text-green-700">30</h3>
                <p class="mt-4">
                    Presumptive TB cases identified and referred for further management.
                </p>
            </div>

        </div>

    </div>

</section>

{{-- DEVELOPMENT IMPACT --}}
<section class="py-24 bg-white">

    <div class="max-w-6xl mx-auto px-6">

        <h2 class="text-4xl font-bold text-center mb-16">
            Beyond Healthcare
        </h2>

        <div class="grid md:grid-cols-3 gap-8">

            <div class="border rounded-xl p-8">
                <h3 class="text-xl font-bold mb-4">
                    Community Awareness
                </h3>
                <p>
                    Increased awareness of disease prevention, health-seeking behavior, hygiene and healthy lifestyles.
                </p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-xl font-bold mb-4">
                    Volunteer Development
                </h3>
                <p>
                    Providing opportunities for professionals and young people to contribute skills and gain practical experience.
                </p>
            </div>

            <div class="border rounded-xl p-8">
                <h3 class="text-xl font-bold mb-4">
                    Stronger Partnerships
                </h3>
                <p>
                    Building collaboration between communities, healthcare providers, local government and development partners.
                </p>
            </div>

        </div>

    </div>

</section>

{{-- VALUE FOR MONEY --}}
<section class="py-24 bg-green-50">

    <div class="max-w-5xl mx-auto px-6 text-center">

        <h2 class="text-4xl font-bold mb-12">
            Value For Money
        </h2>

        <div class="grid md:grid-cols-3 gap-8">

            <div class="bg-white rounded-xl p-8">
                <h3 class="text-4xl font-bold text-green-700">UGX 7M</h3>
                <p class="mt-3">Total Outreach Investment</p>
            </div>

            <div class="bg-white rounded-xl p-8">
                <h3 class="text-4xl font-bold text-green-700">493</h3>
                <p class="mt-3">People Reached</p>
            </div>

            <div class="bg-white rounded-xl p-8">
                <h3 class="text-4xl font-bold text-green-700">UGX 14,200</h3>
                <p class="mt-3">Average Cost Per Beneficiary</p>
            </div>

        </div>

    </div>

</section>

{{-- GALLERY --}}
@include('website.partials.gallery-preview')

{{-- CTA --}}
@include('website.partials.cta-support')

@endsection