@extends('layouts.website')

@section('title', 'Gallery')

@section('content')

<x-website.page-header
    title="Gallery"
    subtitle="Capturing moments of service, hope, partnership and community transformation." />

{{-- 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">
            Stories Told Through Images
        </h2>

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

            Every image represents a story of compassion, service and community transformation. Through healthcare outreach, education initiatives, volunteer engagement and development programs, EPDFU works alongside communities to create opportunities, strengthen resilience and improve quality of life.

        </p>

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

            This gallery highlights some of the moments, partnerships and people behind our journey of empowering communities and transforming futures.

        </p>

    </div>

</section>

{{-- VIDEO HIGHLIGHTS --}}
<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">
                Featured Videos
            </h2>

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

                Watch highlights from community outreach activities, volunteer engagement and development initiatives.

            </p>

        </div>

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

            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">

                <div class="aspect-video bg-gray-200 flex items-center justify-center">

                    <span class="text-gray-500">
                        Outreach Video Placeholder
                    </span>

                </div>

                <div class="p-6">

                    <h3 class="font-bold text-xl">
                        Community Medical Outreach
                    </h3>

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

                        Highlights from community screening, consultations, health education and volunteer service activities.

                    </p>

                </div>

            </div>

            <div class="bg-white rounded-2xl shadow-lg overflow-hidden">

                <div class="aspect-video bg-gray-200 flex items-center justify-center">

                    <span class="text-gray-500">
                        Volunteer Video Placeholder
                    </span>

                </div>

                <div class="p-6">

                    <h3 class="font-bold text-xl">
                        Volunteer Impact Stories
                    </h3>

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

                        Meet volunteers and community members whose lives have been impacted through service and partnership.

                    </p>

                </div>

            </div>

        </div>

    </div>

</section>

{{-- GALLERY CATEGORIES --}}
<section class="py-12 bg-white">

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

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

            <span class="bg-green-700 text-white px-5 py-2 rounded-full">
                All
            </span>

            <span class="bg-white border px-5 py-2 rounded-full">
                Medical Camps
            </span>

            <span class="bg-white border px-5 py-2 rounded-full">
                Volunteers
            </span>

            <span class="bg-white border px-5 py-2 rounded-full">
                Community Health
            </span>

            <span class="bg-white border px-5 py-2 rounded-full">
                Education
            </span>

            <span class="bg-white border px-5 py-2 rounded-full">
                Economic Empowerment
            </span>

            <span class="bg-white border px-5 py-2 rounded-full">
                Partnerships
            </span>

        </div>

    </div>

</section>

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

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

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

            <img
                src="/images/camps/camp1.jpg"
                alt="Community Outreach"
                class="rounded-2xl shadow-xl w-full h-full object-cover">

            <div>

                <span class="text-green-700 font-semibold uppercase tracking-wide">
                    Featured Outreach
                </span>

                <h2 class="text-4xl font-bold mt-4">
                    Community Health & Development Outreach
                </h2>

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

                    Through collaboration with healthcare professionals, volunteers, local leaders and development partners, EPDFU continues to provide integrated community services including health screening, consultations, referrals, health education and empowerment initiatives.

                </p>

                <div class="grid grid-cols-2 gap-6 mt-10">

                    <div>

                        <h3 class="text-4xl font-bold text-green-700">
                            493
                        </h3>

                        <p>
                            Beneficiaries Reached
                        </p>

                    </div>

                    <div>

                        <h3 class="text-4xl font-bold text-green-700">
                            43
                        </h3>

                        <p>
                            Volunteers Mobilized
                        </p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

{{-- PHOTO GALLERY --}}
<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">
            Outreach In Pictures
        </h2>

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

            <div class="group">
                <img src="/images/gallery/outreach1.jpg"
                     alt="Community Medical Screening"
                     class="rounded-xl shadow-lg w-full h-72 object-cover group-hover:scale-105 transition duration-300">
                <p class="mt-4 font-medium">
                    Community Medical Screening
                </p>
            </div>

            <div class="group">
                <img src="/images/gallery/outreach2.jpg"
                     alt="Volunteer Team"
                     class="rounded-xl shadow-lg w-full h-72 object-cover group-hover:scale-105 transition duration-300">
                <p class="mt-4 font-medium">
                    Volunteer Service Team
                </p>
            </div>

            <div class="group">
                <img src="/images/gallery/outreach3.jpg"
                     alt="Health Education"
                     class="rounded-xl shadow-lg w-full h-72 object-cover group-hover:scale-105 transition duration-300">
                <p class="mt-4 font-medium">
                    Community Health Education
                </p>
            </div>

            <div class="group">
                <img src="/images/gallery/outreach4.jpg"
                     alt="Patient Registration"
                     class="rounded-xl shadow-lg w-full h-72 object-cover group-hover:scale-105 transition duration-300">
                <p class="mt-4 font-medium">
                    Patient Registration
                </p>
            </div>

            <div class="group">
                <img src="/images/gallery/outreach5.jpg"
                     alt="Consultation Services"
                     class="rounded-xl shadow-lg w-full h-72 object-cover group-hover:scale-105 transition duration-300">
                <p class="mt-4 font-medium">
                    Outreach Consultation Services
                </p>
            </div>

            <div class="group">
                <img src="/images/gallery/outreach6.jpg"
                     alt="Community Engagement"
                     class="rounded-xl shadow-lg w-full h-72 object-cover group-hover:scale-105 transition duration-300">
                <p class="mt-4 font-medium">
                    Community Engagement
                </p>
            </div>

        </div>

    </div>

</section>

{{-- IMPACT --}}
<x-website.stats-section />

{{-- CTA --}}
<x-website.cta-section
    title="Join The Movement"
    description="Become part of the stories that transform lives. Volunteer, partner with us, support our programs or help us expand our impact across communities."
    primaryText="Become A Volunteer"
    primaryUrl="{{ route('volunteer.index') }}"
    secondaryText="Partner With Us"
    secondaryUrl="{{ route('partnerships') }}" />

@endsection