@extends('layouts.website')

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

@section('content')

<x-website.page-header
    title="Our Programs"
    subtitle="Integrated programs that improve health, strengthen livelihoods, expand opportunities and build resilient communities." />

{{-- 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">
            Creating Sustainable Community Impact
        </h2>

        <p class="text-lg leading-8 text-gray-700">
            {{ config('organization.short_name') }} implements integrated community development programs that address health, education, economic empowerment and community wellbeing.
        </p>

        <p class="mt-6 text-lg leading-8 text-gray-700">
            Through collaboration with communities, volunteers, government institutions, civil society organizations and development partners, we support locally driven solutions that improve quality of life and strengthen resilience.
        </p>

    </div>
</section>

{{-- STRATEGIC PROGRAM AREAS --}}
<section class="py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-6">

        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold">Strategic Program Areas</h2>
            <p class="mt-4 text-lg text-gray-600">
                Integrated interventions addressing the interconnected drivers of community wellbeing.
            </p>
        </div>

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

            <div class="bg-white rounded-2xl p-8 shadow-sm">
                <h3 class="font-bold text-xl mb-4">Health & Wellbeing</h3>
                <p>Community health outreach, disease prevention, screening, referrals and health education.</p>
            </div>

            <div class="bg-white rounded-2xl p-8 shadow-sm">
                <h3 class="font-bold text-xl mb-4">Education & Skills Development</h3>
                <p>Learning opportunities, leadership development, health literacy and youth empowerment.</p>
            </div>

            <div class="bg-white rounded-2xl p-8 shadow-sm">
                <h3 class="font-bold text-xl mb-4">Economic Empowerment</h3>
                <p>Livelihood strengthening, entrepreneurship support and household resilience initiatives.</p>
            </div>

            <div class="bg-white rounded-2xl p-8 shadow-sm">
                <h3 class="font-bold text-xl mb-4">Community Development</h3>
                <p>Volunteer engagement, partnerships, social inclusion and locally led development.</p>
            </div>

        </div>

    </div>
</section>

{{-- HEALTH & WELLBEING --}}
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16 items-center">

            <div>
                <img src="/images/programs/health.jpg"
                     alt="Health & Wellbeing"
                     class="rounded-2xl shadow-xl w-full">
            </div>

            <div>
                <span class="text-green-700 font-semibold uppercase tracking-wide">
                    Program Area
                </span>

                <h2 class="text-4xl font-bold mt-4 mb-6">
                    Health & Wellbeing
                </h2>

                <p class="text-lg leading-8 text-gray-700">
                    We improve access to essential healthcare services through community outreach, prevention initiatives and health system strengthening.
                </p>

                <ul class="mt-8 space-y-3">
                    <li>✓ Medical Outreach Programs</li>
                    <li>✓ Disease Screening & Early Detection</li>
                    <li>✓ HIV Testing & Counselling</li>
                    <li>✓ Tuberculosis Screening</li>
                    <li>✓ Maternal & Child Health</li>
                    <li>✓ Health Education & Promotion</li>
                    <li>✓ Referral & Follow-Up Services</li>
                </ul>
            </div>

        </div>
    </div>
</section>

{{-- EDUCATION & SKILLS --}}
<section class="py-24 bg-gray-50">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16 items-center">

            <div>
                <h2 class="text-4xl font-bold mb-6">
                    Education & Skills Development
                </h2>

                <p class="text-lg leading-8 text-gray-700">
                    Education empowers individuals and communities to make informed decisions and pursue sustainable opportunities.
                </p>

                <ul class="mt-8 space-y-3">
                    <li>✓ Health Literacy Programs</li>
                    <li>✓ Community Awareness Campaigns</li>
                    <li>✓ Youth Development Initiatives</li>
                    <li>✓ School-Based Programs</li>
                    <li>✓ Leadership Development</li>
                    <li>✓ Skills Development & Mentorship</li>
                </ul>
            </div>

            <div>
                <img src="/images/programs/education.jpg"
                     alt="Education & Skills Development"
                     class="rounded-2xl shadow-xl w-full">
            </div>

        </div>
    </div>
</section>

{{-- ECONOMIC EMPOWERMENT --}}
<section class="py-24 bg-white">
    <div class="max-w-7xl mx-auto px-6">
        <div class="grid lg:grid-cols-2 gap-16 items-center">

            <div>
                <img src="/images/programs/economic.jpg"
                     alt="Economic Empowerment"
                     class="rounded-2xl shadow-xl w-full">
            </div>

            <div>
                <h2 class="text-4xl font-bold mb-6">
                    Economic Empowerment
                </h2>

                <p class="text-lg leading-8 text-gray-700">
                    Sustainable development requires economic opportunity. We support initiatives that strengthen livelihoods and household resilience.
                </p>

                <ul class="mt-8 space-y-3">
                    <li>✓ Entrepreneurship Support</li>
                    <li>✓ Livelihood Enhancement Programs</li>
                    <li>✓ Financial Inclusion Initiatives</li>
                    <li>✓ Youth Economic Participation</li>
                    <li>✓ Women's Empowerment Programs</li>
                    <li>✓ Community Enterprise Development</li>
                </ul>
            </div>

        </div>
    </div>
</section>

{{-- RESEARCH & INNOVATION --}}
<section class="py-24 bg-gray-50">

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

        <div class="grid lg:grid-cols-2 gap-16 items-center">

            <div>

                <h2 class="text-4xl font-bold mb-6">
                    Research, Innovation & Digital Transformation
                </h2>

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

                    Sustainable development requires evidence, innovation and technology. EPDFU promotes data-driven decision making, digital solutions and collaborative innovation that improve service delivery and strengthen community outcomes.

                </p>

                <ul class="mt-8 space-y-3">
                    <li>✓ Digital Health Solutions</li>
                    <li>✓ Community Data Systems</li>
                    <li>✓ Research & Learning</li>
                    <li>✓ Monitoring & Evaluation</li>
                    <li>✓ Innovation Partnerships</li>
                    <li>✓ Knowledge Management</li>
                </ul>

            </div>

            <div>

                <img
                    src="/images/programs/innovation.jpg"
                    alt="Research & Innovation"
                    class="rounded-2xl shadow-xl w-full">

            </div>

        </div>

    </div>

</section>

{{-- COMMUNITY DEVELOPMENT --}}
<section class="py-24 bg-green-50">
    <div class="max-w-7xl mx-auto px-6">

        <div class="text-center mb-16">
            <h2 class="text-4xl font-bold">
                Community Development & Volunteerism
            </h2>

            <p class="mt-6 text-lg max-w-3xl mx-auto text-gray-700">
                Volunteers, professionals and community leaders play a critical role in creating sustainable change.
            </p>
        </div>

        <div class="grid md:grid-cols-4 gap-8">
            <div class="bg-white border rounded-xl p-6 text-center">Medical Professionals</div>
            <div class="bg-white border rounded-xl p-6 text-center">Educators</div>
            <div class="bg-white border rounded-xl p-6 text-center">Community Mobilizers</div>
            <div class="bg-white border rounded-xl p-6 text-center">Development Practitioners</div>
        </div>

    </div>
</section>

{{-- CROSS CUTTING THEMES --}}
<section class="py-24 bg-white">

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

        <div class="text-center mb-16">

            <h2 class="text-4xl font-bold">
                Cross-Cutting Themes
            </h2>

            <p class="mt-4 text-lg text-gray-600">
                Principles embedded across all programs and interventions.
            </p>

        </div>

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

            <div class="border rounded-xl p-6 text-center">
                Youth Empowerment
            </div>

            <div class="border rounded-xl p-6 text-center">
                Gender Equity
            </div>

            <div class="border rounded-xl p-6 text-center">
                Inclusion
            </div>

            <div class="border rounded-xl p-6 text-center">
                Sustainability
            </div>

            <div class="border rounded-xl p-6 text-center">
                Accountability
            </div>

            <div class="border rounded-xl p-6 text-center">
                Community Ownership
            </div>

        </div>

    </div>

</section>

{{-- DELIVERY APPROACH --}}
<section class="py-24 bg-green-50">

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

        <div class="text-center mb-16">

            <h2 class="text-4xl font-bold">
                How We Deliver Impact
            </h2>

        </div>

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

            <div class="bg-white p-8 rounded-xl shadow-sm">

                <h3 class="font-bold text-xl mb-4">
                    Community-Led Solutions
                </h3>

                <p>
                    Programs are designed and implemented with active participation from communities and local stakeholders.
                </p>

            </div>

            <div class="bg-white p-8 rounded-xl shadow-sm">

                <h3 class="font-bold text-xl mb-4">
                    Strategic Partnerships
                </h3>

                <p>
                    Collaboration with government, development partners, institutions and volunteers strengthens impact and sustainability.
                </p>

            </div>

            <div class="bg-white p-8 rounded-xl shadow-sm">

                <h3 class="font-bold text-xl mb-4">
                    Evidence-Based Programming
                </h3>

                <p>
                    Monitoring, evaluation and continuous learning guide decision-making and program improvement.
                </p>

            </div>

        </div>

    </div>

</section>

{{-- DEVELOPMENT ALIGNMENT --}}
<section class="py-24 bg-white">
    <div class="max-w-5xl mx-auto px-6 text-center">

        <h2 class="text-4xl font-bold">
            Supporting Shared Development Goals
        </h2>

        <p class="mt-6 text-lg leading-8 text-gray-700">
            Our programs contribute to community-level progress aligned with national development priorities, the Sustainable Development Goals (SDGs) and Agenda 2063: The Africa We Want.
        </p>

    </div>
</section>

@include('website.partials.cta-partnership')

@endsection