@extends('layouts.website')

@section('title', 'Reports & Publications')

@section('content')

{{-- PAGE HEADER --}}
<x-website.page-header
    title="Reports & Publications"
    subtitle="Evidence of impact, accountability, learning and organizational growth." />

{{-- 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">
            Transparency Through Reporting
        </h2>

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

            EPDFU is committed to accountability,
            evidence-based programming and transparent
            reporting to beneficiaries, partners,
            donors and stakeholders.

        </p>

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

            Our reports document outreach activities,
            program achievements, lessons learned,
            organizational growth and impact across
            the communities we serve.

        </p>

    </div>

</section>

{{-- REPORT CATEGORIES --}}
<section class="py-16 bg-gray-50">

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

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

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

                <h3 class="font-bold text-lg">
                    Annual Reports
                </h3>

                <p class="mt-3 text-sm text-gray-600">
                    Organizational performance,
                    finances and achievements.
                </p>

            </div>

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

                <h3 class="font-bold text-lg">
                    Medical Outreach Reports
                </h3>

                <p class="mt-3 text-sm text-gray-600">
                    Community health interventions
                    and outcomes.
                </p>

            </div>

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

                <h3 class="font-bold text-lg">
                    Program Evaluations
                </h3>

                <p class="mt-3 text-sm text-gray-600">
                    Results, lessons learned
                    and recommendations.
                </p>

            </div>

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

                <h3 class="font-bold text-lg">
                    Research & Publications
                </h3>

                <p class="mt-3 text-sm text-gray-600">
                    Studies, assessments
                    and technical papers.
                </p>

            </div>

        </div>

    </div>

</section>

{{-- REPORTS LIBRARY --}}
<section class="py-24">

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

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

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

            <div class="bg-white border rounded-xl overflow-hidden shadow-sm">

                <div class="bg-green-700 text-white p-4">

                    Medical Outreach Report

                </div>

                <div class="p-8">

                    <h3 class="text-xl font-bold">
                        Nabifudu Medical Camp Report
                    </h3>

                    <p class="mt-4 text-gray-600">

                        Detailed report covering
                        services delivered,
                        disease burden identified,
                        referrals made and lessons learned.

                    </p>

                    <a href="/documents/nabifudu-medical-camp-report.pdf"
                       class="inline-block mt-6 text-green-700 font-semibold">

                        Download Report →

                    </a>

                </div>

            </div>

            <div class="bg-white border rounded-xl overflow-hidden shadow-sm">

                <div class="bg-blue-700 text-white p-4">

                    Program Report

                </div>

                <div class="p-8">

                    <h3 class="text-xl font-bold">
                        Community Health Report
                    </h3>

                    <p class="mt-4 text-gray-600">

                        Community outreach achievements,
                        health indicators and impact metrics.

                    </p>

                    <a href="/documents/community-health-report.pdf"
                       class="inline-block mt-6 text-green-700 font-semibold">

                        Download Report →

                    </a>

                </div>

            </div>

            <div class="bg-white border rounded-xl overflow-hidden shadow-sm">

                <div class="bg-amber-600 text-white p-4">

                    Annual Report

                </div>

                <div class="p-8">

                    <h3 class="text-xl font-bold">
                        Annual Report 2026
                    </h3>

                    <p class="mt-4 text-gray-600">

                        Organizational achievements,
                        partnerships, finances,
                        governance and strategic progress.

                    </p>

                    <a href="/documents/annual-report-2026.pdf"
                       class="inline-block mt-6 text-green-700 font-semibold">

                        Download Report →

                    </a>

                </div>

            </div>

        </div>

    </div>

</section>

{{-- ACCOUNTABILITY DOCUMENTS --}}
<section class="py-20 bg-gray-50">

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

        <h2 class="text-4xl font-bold mb-12">
            Related Accountability Documents
        </h2>

        <div class="flex flex-wrap justify-center gap-4">

            <a href="{{ route('governance') }}"
               class="bg-white border px-6 py-3 rounded-lg hover:bg-gray-100">

                Governance Structure

            </a>

            <a href="{{ route('resources') }}"
               class="bg-white border px-6 py-3 rounded-lg hover:bg-gray-100">

                Organization Documents

            </a>

            <a href="/documents/strategic-plan.pdf"
               class="bg-white border px-6 py-3 rounded-lg hover:bg-gray-100">

                Strategic Plan

            </a>

            <a href="/documents/organization-profile.pdf"
               class="bg-white border px-6 py-3 rounded-lg hover:bg-gray-100">

                Organization Profile

            </a>

        </div>

    </div>

</section>

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

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

        <h2 class="text-4xl font-bold">
            Accountability, Evidence & Learning
        </h2>

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

            EPDFU is committed to responsible stewardship
            of resources, transparent reporting,
            continuous learning and evidence-driven
            decision making.

        </p>

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

            We believe that sharing results openly
            strengthens trust, improves programs
            and enhances community impact.

        </p>

    </div>

</section>

@endsection