@extends('layouts.app')

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

@section('meta_description', 'Learn how to use a MIKEY defibrillator step by step. Clear instructions and guidance for using our life-saving devices during cardiac emergencies.')

@section('content')
<div class="banner-container position-relative text-center text-white">
    <!-- Banner Image -->
    <img src="{{ asset('images/how-to-use-banner.jpg') }}" class="img-fluid w-100" alt="How 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">How 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>Step-by-Step Guide</h2>
                <p class="lead">MIKEY defibrillators are designed to be user-friendly and guide you through the entire process. Follow these steps to help save a life.</p>
            </div>

            <div class="usage-steps">
                <div class="row">
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">1</div>
                            <h4>Power On</h4>
                            <p>Press the power button to activate MIKEY</p>
                            <ul class="small">
                                <li>Remove from cabinet</li>
                                <li>Press green power button</li>
                                <li>Wait for voice prompts</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">2</div>
                            <h4>Prepare Patient</h4>
                            <p>Expose chest and prepare for pad placement</p>
                            <ul class="small">
                                <li>Remove clothing</li>
                                <li>Dry chest if wet</li>
                                <li>Shave if necessary</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">3</div>
                            <h4>Apply Pads</h4>
                            <p>Place electrode pads as directed</p>
                            <ul class="small">
                                <li>Follow pad placement diagram</li>
                                <li>Press firmly</li>
                                <li>Connect to device</li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="step-card">
                            <div class="step-number">4</div>
                            <h4>Follow Prompts</h4>
                            <p>Listen and follow voice instructions</p>
                            <ul class="small">
                                <li>Stand clear during analysis</li>
                                <li>Press shock button if directed</li>
                                <li>Continue CPR as prompted</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="safety-features mt-5">
                <h2>Safety Features</h2>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Built-in Safety</h3>
                                <ul>
                                    <li>Automatic heart rhythm analysis</li>
                                    <li>Shock delivery only when needed</li>
                                    <li>Clear voice instructions</li>
                                    <li>Visual prompts and diagrams</li>
                                    <li>CPR guidance</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>User Protection</h3>
                                <ul>
                                    <li>No risk to user</li>
                                    <li>Automatic safety checks</li>
                                    <li>Clear warning signals</li>
                                    <li>Battery status monitoring</li>
                                    <li>Pad connection verification</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="training-section mt-5">
                <h2>Get Trained</h2>
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <p>While MIKEY is designed to be used by anyone, proper training can help you respond more effectively during an emergency. Our training programs cover:</p>
                        <ul>
                            <li>Hands-on practice with MIKEY</li>
                            <li>CPR techniques</li>
                            <li>Emergency response procedures</li>
                            <li>Scenario-based training</li>
                        </ul>
                    </div>
                    <div class="col-md-6 text-center">
                        <img src="{{ asset('images/training-preview.jpg') }}" alt="MIKEY Training" class="img-fluid rounded">
                    </div>
                </div>
            </div>

            <div class="get-involved-section mt-5 text-center">
                <h2>Ready to Learn More?</h2>
                <p>Join our training programs and become confident in using MIKEY during emergencies.</p>
                <div class="mt-4">
                    <a href="/education-cpr-training" class="btn btn-primary btn-lg me-3">Get Trained</a>
                    <a href="/contact" class="btn btn-outline-primary btn-lg">Contact Us</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection