@extends('layouts.app')

@section('title', 'Team Mikey - Mikey Network')

@section('meta_description', 'Meet the dedicated team behind The Mikey Network, working to save lives through defibrillator placement and education.')

@section('content')
    <div class="banner-container position-relative text-center text-white">
        <!-- Banner Image -->
        <img src="{{ asset('images/page-banners/donate-to-a-fund.jpg') }}" class="img-fluid w-100" alt="Our Funds Banner">

        <!-- Title at Bottom of Banner -->
        {{-- <div class="position-absolute bottom-0 start-50 translate-middle-x mb-4">
        <h1 class="display-5 fw-bold text-uppercase">Start Your Fund Campaign</h1>
    </div> --}}
    </div>

    <section class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="ubuntu-sans-400 font-64 text-grey text-center"><span class="ubuntu-sans-800 text-mikey-red">Donate</span>  to a fund</p>
                </div>
            </div>
        </div>
    </section>

 

     <!--Section Starting -->
    <section class="pb-5">
        <div class="container">
            <div class="row align-items-center">

                <!-- Left: Heading Text -->
                <div class="col-md-12">
                    


                    <p class="font-roboto-light font-16 letter-space-0-75 line-1-5">
                        Below are the funds you can support—each one created in loving memory of someone special, and each one helping make a difference where it matters most. 

                        Thank you for being part of this meaningful journey. Your donation brings people together, honours a legacy, and turns compassion into action.</br>
                    </p>
                    <p class="font-roboto-semibold text-uppercase font-20 letter-space-0-75 line-1-5">
                        Your support can help:
                    </p>
                    <ul>
                        <li>Place more MIKEYs in high-risk or high-traffic areas</li>
                        <li>Support families whose children need a MIKEY nearby 24/7</li>
                        <li>Fund public education on CPR, AED use, and heart health</li>
                        <li>Empower communities with the tools and knowledge to respond in an emergency</li>
                    </ul>
                </div>
            </div>


        @foreach($fundraisers as  $fundraiser)

            <div class="row align-items-center my-4">
                <div class="col-md-3 col-lg-2 text-center text-md-start">
                    <img src="/storage/{{ $fundraiser->image_path }}" class="img-fluid avatar"></img>
                </div>

                <div class="col-md-9 col-lg-10">
                    <div class="text-center text-md-start pt-2 pt-md-0"><h2 class="font-24" >{{ $fundraiser->title }}</h2></div>
                    <p>
                        {{ $fundraiser->blurb }}
                    </p>
                    <div class="text-center text-md-start"><a class="btn btn-learn-more text-uppercase rounded-0" href="{{ $fundraiser->link }}" target="_blank">Learn More</a></div>

                </div>
            </div>

        @endforeach  

            <div class="row">
                <div class="col-12 text-center py-5 pagination-wrapper">
                    {{ $fundraisers->links('pagination::bootstrap-5') }}
                </div>
            </div>
        </div>
    </section>

@endsection