@extends('layouts.app')

@section('title', 'Where Your Donations Go? - Mikey Network')

@section('content')
<div class="banner-container position-relative text-center text-white">
    <!-- Banner Image -->
    <img src="{{ asset('images/donations-banner.jpg') }}" class="img-fluid w-100" alt="Donations 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">Where Your Donations Go?</h1>
    </div>
</div>

<div class="container my-5">
  <!-- Introduction -->
  <div class="text-left mb-5">
    <h4 class="fw-bold text-uppercase">Your Support Saves Lives</h4><br>
    <p>For every dollar donated to The Mikey Network, we can continue our goal to provide education resources to help save lives.</p><br>
    <p>How your donation makes an impact.</p>
  </div>

  <!-- Section Blocks -->
  @php
    $sections = [
      [
        'img_src' => asset('images/donation_1.jpg'),
        'img_alt' => 'Placing Mikeys',
        'heading' => 'Placing Mikeys in High-Risk Areas',
        'text' => 'Your donations help fund the placement of MIKEY defibrillators in schools, community centers, and public spaces where they can make the most impact in cardiac emergencies.'
      ],
      [
        'img_src' => asset('images/donation_2.png'),
        'img_alt' => 'Education & Training',
        'heading' => 'Education & Training',
        'text' => 'A MIKEY is most effective when people know how to use it. Your support helps us provide training programs, public awareness campaigns, and online resources to educate individuals on CPR and AED use.'
      ],
      [
        'img_src' => asset('images/donation_3.png'),
        'img_alt' => 'Maintaining Mikeys',
        'heading' => 'Maintaining and Replacing Mikeys',
        'text' => 'Defibrillators require ongoing maintenance to ensure they\'re always ready to save a life. Donations go toward battery replacements, electrode pad updates, and routine device checks to keep every MIKEY in working condition.'
      ],
      [
        'img_src' => asset('images/donation_4.png'),
        'img_alt' => 'Expanding Programs',
        'heading' => 'Expanding Our Programs',
        'text' => 'From Mikey Young at Heart (placing AEDs in schools) to Mikey on Board (equipping fleet vehicles with AEDs), your donations help us grow our life-saving programs and bring more MIKEYs to more places.'
      ],
      [
        'img_src' => asset('images/donation_5.png'),
        'img_alt' => 'Save More Lives',
        'heading' => 'Help Us Save More Lives',
        'text' => 'Every donation—big or small—makes a difference. Your generosity could mean the difference between life and death for someone experiencing sudden cardiac arrest.'
      ]
    ];
  @endphp

  @foreach ($sections as $section)
    <div class="row align-items-center mb-5">
      <div class="col-md-6 mb-3 mb-md-0">
        <img src="{{ $section['img_src'] }}" class="img-fluid rounded" alt="{{ $section['img_alt'] }}">
      </div>
      <div class="col-md-6">
        <h5 class="fw-bold text-uppercase">{{ $section['heading'] }}</h5>
        <p>{{ $section['text'] }}</p>
      </div>
    </div>
  @endforeach

  <div class="bg-danger text-white py-4 rounded-0">
    <div class="container">
      <div class="row align-items-center justify-content-between">
        <!-- Heading Text -->
        <div class="col-md-auto mb-3 mb-md-0">
          <h5 class="mb-0 text-uppercase fw-bold">
            Donate today and be part of the mission to save lives.
          </h5>
        </div>
        <!-- Button -->
        <div class="col-md-auto">
          <a href="#" class="btn btn-dark btn-lg fw-bold text-uppercase d-flex align-items-center rounded-0">
            <span>Donate</span>
            <img src="{{ asset('images/heart_badge.png') }}" alt="Heart Icon" class="ms-2" style="width: 20px; height: 20px; object-fit: contain;">
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection