@extends('layouts.website')

@section('title', 'Volunteer With EPDFU')

@section('content')

<x-website.page-header
title=“Volunteer With EPDFU”
subtitle=“Join a growing network of professionals, students, community leaders and changemakers committed to transforming lives through service, compassion and sustainable development.” />

{{-- 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">
        Service That Creates Lasting Impact
    </h2>
    <p class="text-lg leading-8 text-gray-700">
        Volunteers are at the heart of our mission. Through medical outreach, health promotion, education initiatives, community development programs and partnership activities, volunteers help extend opportunities and essential services to underserved communities across Uganda.
    </p>
    <p class="mt-6 text-lg leading-8 text-gray-700">
        Whether you are a healthcare professional, student, educator, development practitioner, entrepreneur or community leader, your skills and experience can contribute to meaningful and sustainable change.
    </p>
    <div class="mt-10">
        <a href="{{ route('volunteer.create') }}"
           class="bg-green-600 hover:bg-green-700 text-white px-10 py-4 rounded-lg">
            Apply Now
        </a>
    </div>
</div>
</section>

{{-- WHY VOLUNTEER --}}

<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">
            Why Volunteer With EPDFU?
        </h2>
        <p class="mt-4 text-lg text-gray-600">
            Service, learning, leadership and community transformation working together.
        </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">
                Create Impact
            </h3>
            <p>
                Contribute to programs that improve health outcomes, strengthen livelihoods and support community resilience.
            </p>
        </div>
        <div class="bg-white rounded-2xl p-8 shadow-sm">
            <h3 class="font-bold text-xl mb-4">
                Build Experience
            </h3>
            <p>
                Gain practical field exposure while working alongside experienced professionals and community leaders.
            </p>
        </div>
        <div class="bg-white rounded-2xl p-8 shadow-sm">
            <h3 class="font-bold text-xl mb-4">
                Grow Professionally
            </h3>
            <p>
                Strengthen leadership, communication, teamwork and technical skills through meaningful service.
            </p>
        </div>
        <div class="bg-white rounded-2xl p-8 shadow-sm">
            <h3 class="font-bold text-xl mb-4">
                Expand Networks
            </h3>
            <p>
                Connect with healthcare professionals, educators, development partners and fellow volunteers.
            </p>
        </div>
    </div>
</div>
</section>

{{-- VOLUNTEER IMPACT --}}

<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">
            Volunteer Impact
        </h2>
        <p class="mt-4 text-lg text-gray-600">
            Every volunteer contributes to measurable improvements in community wellbeing.
        </p>
    </div>
    <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 text-center">
        <div class="bg-green-50 p-8 rounded-xl">
            <h3 class="text-5xl font-bold text-green-700">
                493
            </h3>
            <p class="mt-3">
                Beneficiaries Reached
            </p>
        </div>
        <div class="bg-green-50 p-8 rounded-xl">
            <h3 class="text-5xl font-bold text-green-700">
                43
            </h3>
            <p class="mt-3">
                Volunteers Mobilized
            </p>
        </div>
        <div class="bg-green-50 p-8 rounded-xl">
            <h3 class="text-5xl font-bold text-green-700">
                107
            </h3>
            <p class="mt-3">
                Malaria Cases Identified & Treated
            </p>
        </div>
        <div class="bg-green-50 p-8 rounded-xl">
            <h3 class="text-5xl font-bold text-green-700">
                35
            </h3>
            <p class="mt-3">
                Referrals Facilitated
            </p>
        </div>
    </div>
</div>
</section>

{{-- VOLUNTEER OPPORTUNITIES --}}

<section class="py-24 bg-gray-50">
<div class="max-w-7xl mx-auto px-6">
    <h2 class="text-4xl font-bold text-center mb-16">
        Volunteer Opportunities
    </h2>
    <div class="grid md:grid-cols-3 gap-8">
        <div class="bg-white rounded-xl p-8 shadow-sm">
            <h3 class="font-bold text-xl mb-6">
                Healthcare
            </h3>
            <ul class="space-y-3">
                <li>Medical Doctors</li>
                <li>Nurses & Midwives</li>
                <li>Clinical Officers</li>
                <li>Laboratory Personnel</li>
                <li>Pharmacists</li>
                <li>Public Health Professionals</li>
            </ul>
        </div>
        <div class="bg-white rounded-xl p-8 shadow-sm">
            <h3 class="font-bold text-xl mb-6">
                Education & Mentorship
            </h3>
            <ul class="space-y-3">
                <li>Teachers</li>
                <li>Mentors</li>
                <li>Community Trainers</li>
                <li>Youth Facilitators</li>
                <li>Career Coaches</li>
                <li>Leadership Mentors</li>
            </ul>
        </div>
        <div class="bg-white rounded-xl p-8 shadow-sm">
            <h3 class="font-bold text-xl mb-6">
                Community Support
            </h3>
            <ul class="space-y-3">
                <li>Community Mobilizers</li>
                <li>Drivers</li>
                <li>IT Specialists</li>
                <li>Photographers & Media Teams</li>
                <li>Fundraising Volunteers</li>
                <li>Project Support Personnel</li>
            </ul>
        </div>
    </div>
</div>
</section>

{{-- VOLUNTEER JOURNEY --}}

<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">
        Your Volunteer Journey
    </h2>
    <div class="grid md:grid-cols-5 gap-4 text-center">
        <div class="bg-white border rounded-xl p-6">
            Application
        </div>
        <div class="bg-white border rounded-xl p-6">
            Review
        </div>
        <div class="bg-white border rounded-xl p-6">
            Orientation
        </div>
        <div class="bg-white border rounded-xl p-6">
            Deployment
        </div>
        <div class="bg-white border rounded-xl p-6">
            Community Impact
        </div>
    </div>
</div>
</section>

{{-- REQUIREMENTS --}}

<section class="py-24 bg-green-50">
<div class="max-w-5xl mx-auto px-6">
    <h2 class="text-4xl font-bold text-center mb-16">
        Volunteer Requirements
    </h2>
    <div class="bg-white rounded-xl shadow-sm p-10">
        <ul class="space-y-4">
            <li>✓ Commitment to service and community development</li>
            <li>✓ Professional conduct, integrity and accountability</li>
            <li>✓ Respect for safeguarding and ethical principles</li>
            <li>✓ Ability to work collaboratively in diverse teams</li>
            <li>✓ Willingness to learn, contribute and grow</li>
        </ul>
    </div>
</div>
</section>

@include('website.partials.development-alignment')

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

@endsection