@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/aed-banner.png" 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">MIKEY AED</span>
                    <span class="text-grey">Training</span>
                </h2>
            </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 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">
                    This page contains step-by-step demonstration videos that show you how to use the different models of MIKEY AEDs (Automatic External Defibrillators) placed by The Mikey Network. If you’re looking for information on how to check your MIKEY (including battery status or pad expiry dates),
                </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>

            <!-- Center Button -->
            <a href="#"
               class="d-inline-flex align-items-center justify-content-center text-white"
               style="background-color: #d43d2f; padding: 0.6rem 1.7rem; text-decoration: none; font-weight: 700; letter-spacing: 2px; font-size: 14px; font-family: 'Roboto', sans-serif; margin: 0 0;">
                LEARN MORE
                <img src="/images/union.png" alt="Heart Icon" style="height: 14px; width: auto; margin-left: 0.4rem;" />
            </a>

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

<section class="py-5">
<h2 class="ubuntu-sans-800 font-32 text-center mb-4">
                WHEN SECONDS MATTER, YOU CAN MAKE A DIFFERENCE
            </h2>
    <div class="container">
        <div class="mx-auto" style="max-width: 720px;">
            <!-- Section Title -->
            

            <!-- Intro Paragraph -->
            <p class="font-18 font-roboto-light text-grey line-1-5 mb-3">
                If someone experiences sudden cardiac arrest (SCA), the most important things you can do are:
            </p>

            <!-- Red Action Steps -->
            <div class="font-18 font-roboto-semibold text-red line-1-5 mb-3">
                <p>a. Call 9-1-1 Immediately</p>
                <p>b. Begin CPR To Keep Blood Flowing To The Brain And Heart</p>
                <p>c. Use A MIKEY AED IF One Is Available Nearby</p>
            </div>

            <!-- Grey Bullet Paragraph -->
            <ul class="font-18 font-roboto-light text-grey line-1-5 ps-3 mb-4">
                <li>
                    MIKEY AEDs are designed to be used by anyone—no medical training required.
                    They walk you through the entire process with clear audio prompts and visual instructions.
                </li>
            </ul>

            <!-- Centered Button (Exact Match) -->
            <div class="text-center mt-4">
                <a href="#"
                   class="d-inline-flex align-items-center justify-content-center text-white"
                   style="background-color: #d43d2f; padding: 0.6rem 1.7rem; text-decoration: none; font-weight: 700; letter-spacing: 2px; font-size: 14px; font-family: 'Roboto', sans-serif; text-transform: uppercase; gap: 0.4rem;">
                    VISIT OUR FREE&nbsp;&nbsp;WEB APP
                    <img src="/images/union.png" alt="Heart Icon" style="height: 14px; width: auto;" />
                </a>
            </div>
        </div>
    </div>
</section>

<section style="background-color: #f6f4f0;" class="py-5">
    <div class="container">
        <div class="row align-items-center">
            <!-- Left Column: Text Content -->
            <div class="col-md-6">
                <!-- 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>


                <!-- Bullet List -->
                <ul class="font-18 font-roboto-light text-grey line-1-5 ps-3 mb-4">
                    <li>Open the MIKEY case to activate voice prompts</li>
                    <li>Remove the person's clothing from the chest area</li>
                    <li>Attach the adhesive pads as instructed</li>
                    <li>The device will analyze the heart rhythm</li>
                    <li>If needed, the MIKEY will tell you when to press the button to deliver a shock</li>
                    <li>Follow any additional prompts—sometimes CPR is required after the shock</li>
                </ul>

                <!-- Supporting Paragraph -->
                <p class="font-18 font-roboto-light text-grey line-1-5">
                    These easy-to-follow videos will help you become familiar with how to operate different types of MIKEY AEDs, so you can feel more prepared in an emergency.
                </p>
            </div>

            <!-- Right Column: Video Thumbnail -->
            <div class="col-md-6 text-center">
                <div style="position: relative; display: inline-block;">
                    <img src="/images/eat-v1.png" alt="CPR Training" class="img-fluid" style="border-radius: 4px;" />
                         
                </div>
            </div>
        </div>
    </div>
</section>


@endsection