@extends('layouts.app')

@section('title', 'When to Use a Mikey - Mikey Network')

@section('meta_description', 'Learn when and how to use a MIKEY defibrillator during cardiac emergencies. Understand the signs of cardiac arrest and proper response procedures.')

@section('content')
<div class="banner-container position-relative text-center text-white">
    <!-- Banner Image -->
    <img src="{{ asset('images/when-to-use-banner.jpg') }}" class="img-fluid w-100" alt="When to Use a Mikey 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">When to Use a Mikey</h1>
    </div>
</div>

<div class="container my-5">
    <div class="row">
        <div class="col-md-12">
            <div class="intro-section mb-5">
                <h2>Recognizing Cardiac Emergencies</h2>
                <p class="lead">Knowing when to use a MIKEY defibrillator can mean the difference between life and death. Learn to recognize the signs and act quickly.</p>
            </div>

            <div class="emergency-signs">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Signs of Cardiac Arrest</h3>
                                <ul>
                                    <li>Sudden collapse</li>
                                    <li>No response to touch or voice</li>
                                    <li>No normal breathing</li>
                                    <li>No pulse</li>
                                    <li>Loss of consciousness</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>When to Use MIKEY</h3>
                                <ul>
                                    <li>When someone is unresponsive</li>
                                    <li>When breathing is abnormal or absent</li>
                                    <li>When no pulse is detected</li>
                                    <li>During sudden cardiac arrest</li>
                                    <li>When directed by emergency services</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="response-steps mt-5">
                <h2>Emergency Response Steps</h2>
                <div class="row">
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">1</div>
                            <h4>Check Response</h4>
                            <p>Verify if person is responsive and breathing</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">2</div>
                            <h4>Call 911</h4>
                            <p>Alert emergency services immediately</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">3</div>
                            <h4>Get MIKEY</h4>
                            <p>Retrieve nearest defibrillator</p>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">4</div>
                            <h4>Follow Instructions</h4>
                            <p>Use MIKEY as directed</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="important-notes mt-5">
                <h2>Important Notes</h2>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Do's</h3>
                                <ul>
                                    <li>Call 911 first</li>
                                    <li>Start CPR immediately</li>
                                    <li>Use MIKEY as soon as available</li>
                                    <li>Follow voice prompts</li>
                                    <li>Continue until help arrives</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Don'ts</h3>
                                <ul>
                                    <li>Don't delay calling 911</li>
                                    <li>Don't wait for symptoms to worsen</li>
                                    <li>Don't remove pads once applied</li>
                                    <li>Don't touch patient during analysis</li>
                                    <li>Don't stop CPR unless directed</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="training-section mt-5 text-center">
                <h2>Get Trained</h2>
                <p>Learn how to recognize cardiac emergencies and use MIKEY effectively through our training programs.</p>
                <div class="mt-4">
                    <a href="/education-cpr-training" class="btn btn-primary btn-lg me-3">CPR Training</a>
                    <a href="/contact" class="btn btn-outline-primary btn-lg">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection