@extends('layouts.app')

@section('title', 'Where to Find a Mikey - Mikey Network')

@section('meta_description', 'Find MIKEY defibrillators in your community. Learn about our network of public access defibrillators and how to locate the nearest one in an emergency.')

@section('content')
<div class="banner-container position-relative text-center text-white">
    <!-- Banner Image -->
    <img src="{{ asset('images/where-to-find-banner.jpg') }}" class="img-fluid w-100" alt="Where to Find 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">Where to Find 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>Locating MIKEY Defibrillators</h2>
                <p class="lead">MIKEY defibrillators are strategically placed throughout the community for quick access during emergencies. Learn where to find them and how to identify them.</p>
            </div>

            <div class="common-locations">
                <h2>Common Locations</h2>
                <div class="row">
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Public Spaces</h3>
                                <ul>
                                    <li>Community centers</li>
                                    <li>Parks and recreation areas</li>
                                    <li>Public libraries</li>
                                    <li>Government buildings</li>
                                    <li>Transit stations</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Businesses</h3>
                                <ul>
                                    <li>Shopping malls</li>
                                    <li>Restaurants</li>
                                    <li>Office buildings</li>
                                    <li>Retail stores</li>
                                    <li>Fitness centers</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Educational Facilities</h3>
                                <ul>
                                    <li>Schools</li>
                                    <li>Universities</li>
                                    <li>Daycare centers</li>
                                    <li>Sports facilities</li>
                                    <li>Training centers</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="identifying-mikey mt-5">
                <h2>How to Identify a MIKEY</h2>
                <div class="row">
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Look For</h3>
                                <ul>
                                    <li>MIKEY Network logo</li>
                                    <li>Universal AED symbol</li>
                                    <li>Bright red cabinet</li>
                                    <li>Clear signage</li>
                                    <li>Emergency instructions</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card mb-4">
                            <div class="card-body">
                                <h3>Location Indicators</h3>
                                <ul>
                                    <li>Wall-mounted cabinets</li>
                                    <li>Prominent placement</li>
                                    <li>Well-lit areas</li>
                                    <li>Easy access points</li>
                                    <li>Visible from main areas</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mobile-app-section mt-5">
                <h2>Find MIKEY on the Go</h2>
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <p>Download our mobile app to locate the nearest MIKEY defibrillator in an emergency. The app provides:</p>
                        <ul>
                            <li>Real-time location tracking</li>
                            <li>Directions to nearest MIKEY</li>
                            <li>Emergency contact information</li>
                            <li>Quick access to instructions</li>
                        </ul>
                    </div>
                    <div class="col-md-6 text-center">
                        <img src="{{ asset('images/mobile-app-preview.jpg') }}" alt="MIKEY Mobile App" class="img-fluid rounded">
                    </div>
                </div>
            </div>

            <div class="get-involved-section mt-5 text-center">
                <h2>Help Expand Our Network</h2>
                <p>Support our mission to place more MIKEYs in your community.</p>
                <div class="mt-4">
                    <a href="/get-involved" class="btn btn-primary btn-lg me-3">Get Involved</a>
                    <a href="/contact" class="btn btn-outline-primary btn-lg">Request a MIKEY</a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection