@extends('layouts.app')

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

@section('content')

    <div class="position-relative text-center">
        <!-- Red Banner (base image) -->
        <div class="banner-container text-white">
            <img src="/images/page-banners/cpr-banner.jpg" class="img-fluid w-100" alt="Mikey Young At Heart Banner">
        </div>

    </div>

    <section class="py-3">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12">
                    <h2 class="ubuntu-sans-400 text-center font-64 lh-100">
                        <span class="text-mikey-red fw-bold">CPR</span>
                        <span class="text-grey">Training</span>
                    </h2>
                </div>
            </div>
        </div>
    </section>

    <section class="py-3">
        <div class="container">
            <div class="row align-items-start g-0">
                <!-- Left Heading -->
                <div class="col-md-6 pe-md-4">
                    <h2 class="ubuntu-sans-800 font-48 mb-0">
                        Learn the Basics.<br>
                        Be Ready to <br>Respond.
                    </h2>
                </div>

                <!-- Right Paragraph -->
                <div class="col-md-6 ps-md-4">
                    <p class="font-18 font-roboto-light line-1-5 letter-space-0-5 text-grey mb-0">
                        When someone experiences sudden cardiac arrest, early CPR and access to a MIKEY (AED) can make the
                        difference between life and death.
                        While The Mikey Network does not provide CPR certification or formal training, we do offer
                        easy-to-understand educational resources - so anyone can learn the basics and feel more prepared to
                        respond in an emergency.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <section class="py-5-">
        <div class="container">
            <div class="d-flex align-items-center justify-content-center">
                <!-- Left Line -->
                <div style="height: 1px; background-color: #999; width: 500px;"></div>



                <!-- Right Line -->
                <div style="height: 1px; background-color: #999; width: 500px;"></div>
            </div>
        </div>
    </section>

    <section class="py-5">
        <div class="container">
            <div class="row align-items-start g-0">
                <!-- Left Heading -->
                <div class="col-md-6 pe-md-4">
                    <h2 class="ubuntu-sans-800 mb-0-">
                        Why CPR Matters
                    </h2>
                    <ul class="font-18 font-roboto-light line-1-5 letter-space-0-5 text-grey mb-0">
                        <li>CPR keeps blood flowing to the brain and heart when the heart stops beating</li>
                        <li>When used with a MIKEY (AED), CPR can dramatically increase survival rates</li>
                        <li>Bystanders equipped with basic CPR knowledge can act faster and with more confidence</li>

                    </ul>
                </div>

                <!-- Right Paragraph -->
                <div class="col-md-6 ps-md-4">
                    <h2 class="ubuntu-sans-800 mb-0-">
                        Giving CPR
                    </h2>
                    <ul class="font-18 font-roboto-light line-1-5 letter-space-0-5 text-grey mb-0">
                        <li>Hand position: Two hands centered on the chest.</li>
                        <li>Body position: Shoulders directly over hands; elbows locked.</li>
                        <li>Compression depth: At least 2 inches.</li>
                        <li>Rate of compressions: 100 to 120 per minute.</li>
                        <li>Allow chest to return to normal position after each compression.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>




    <!-- Emergency Signs Section -->
    <section class="">
        <div class="container red-dark- " style="background-color: #434343;">

            <div class="row align-items-center">
                <!-- Left Column: Text Content -->
                <div class="col-md-6 text-white p-md-5 p-3  order-sm-2 order-md-1 order-2">
                    <!-- Title -->
                    <h2 class="ubuntu-sans-800 font-32 text-start mb-4 d-flex align-items-center gap-2">
                        HOW A MIKEY WORKS
                        <img src="/images/union_red.png" alt="Heart Icon" style="height: 20px; width: auto;" />
                    </h2>

                    <p>Our Mikey Web app offers free video tutorials that walk you through:</p>

                    <!-- Bullet List -->
                    <ul class="font-18 font-roboto-light text-white line-1-5 ps-3 mb-4">
                        <li class="mb-1">How to recognize a cardiac emergency</li>
                        <li class="mb-1">How to perform hands-only CPR</li>
                        <li class="mb-1">How to operate a MIKEY AED with step-by-step guidance</li>
                        <li class="mb-1">It’s a quick, practical resource for students, parents, and professionals who
                            want to become more confident in a crisis.</li>
                    </ul>
                </div>

                <div class="col-sm-12 col-md-3 col-lg-3 text-center order-sm-1 order-md-1 order-1">
                    <img src="/images/mobile.png" alt="CPR Training" class="img-fluid" />
                </div>

                <div class="col-md-3 col-lg-3 text-start d-flex flex-column justify-content-end order-sm-3 order-2">
                   <p class="font-32 font-ubuntu-sans-600 text-white  text-uppercase line-1-5 letter-space-0-5 text-grey mb-0">
                        Click here to access our web app
                    </p>

                    <div class="d-flex  my-2">
                        <img src="/images/logos/myah-logo.png" alt="CPR Training" class="img-fluid me-2 mh-30"  />
                        <img src="/images/logos/aed-cpr-logo.png" alt="CPR Training" class="img-fluid mh-30"  />
                    </div>
                 
                </div>
            </div>







    </section>

    <section class="pb-4">
        <div class="container red-dark- p-md-5 p-3 text-white" style="background-color: #333;">


            <div class="row">
                <div class="col-lg-2 align-self-center pt-md-0 pt-5 text-center">
                    <img src="./images/cpr_4.png" alt="Emergency Signs" class="w-100- img-fluid-">
                </div>
                <div class="col-lg-10">
                    <h2 class="section-title">Learn CPR and How to Use an AED</h2>
                    <p class="font-roboto-light font-18 letter-space-01 line-1-5">Watch step-by-step videos and take
                        follow-up quizzes designed to help you absorb the information and build confidence.
                        The Mikey Web App makes it easy to learn life-saving skills—anytime, anywhere.</p>
                </div>

            </div>
        </div>
    </section>

@endsection