@extends('site.layouts.master')
@section('title', 'RESOURCES | Overcare Health Service')
@section('style')
    <style>
        .contact-card {
            border-radius: 10px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            background-color: #f8f9fa;
        }

        .contact-card h5 {
            color: #788fc8;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .contact-card a {
            color: #788fc8;
            font-weight: 600;
        }

        .contact-card p:last-child {
            font-size: 16px;
            line-height: 25px;
        }

        .resources-links {
            background-color: #788fc8;
            color: white;
            text-align: center;
            padding: 15px 0;
            margin-top: 30px;
        }
        .resources-links p:first-child {
            font-size: 18px;
            padding-bottom: 10px;
        }
        .resources-links p a {
            font-size: 16px;
            font-weight: bold;
        }

        a {
            color: #283b6a;
            text-decoration: none;
        }
        .hover-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
            background-color: #eaf2f8;
            cursor: pointer;
        }

        .hover-card a {
            text-decoration: none;
            color: #2980b9;
            font-weight: bold;
        }

        .hover-card a:hover {
            color: #1abc9c;
        }
        .card-body {
            padding: 20px;
        }
    </style>
@endsection
@section('content')

    <!--Start Page Header-->
    <section class="page-header">
        <div class="page-header__bg"
            style="background-image: url({{ asset('assets/images/backgrounds/page-header-bg.jpg') }})">
        </div>

        <div class="container">
            <div class="page-header__inner text-center">
                <h2>Crisis Response Contacts</h2>
                <ul class="thm-breadcrumb">
                    <li><a href="{{ route('site.home') }}">Home</a></li>
                    <li>Resources</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Header-->

    <!--Start Contact Page-->
    <section class="contact-page">
        <div class="container">
            <div class="contact-page__top">
                <div class="title text-center">
                    <h2>Crisis Response Contacts</h2>
                    <p class="text-center">In case of a <strong>mental health emergency</strong>, please contact a crisis
                        response number or <strong>dial 911.</strong></p>
                </div>

                <div class="row">
                    <!-- Baltimore City Crisis Response -->
                    <div class="col-md-6 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">Baltimore City Crisis Response</h5>
                                <p><strong>Phone:</strong> 410-433-5175</p>
                            </div>
                        </div>
                    </div>

                    <!-- Baltimore County Crisis Response -->
                    <div class="col-md-6 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">Baltimore County Crisis Response</h5>
                                <p><strong>Phone:</strong> 410-931-2214</p>
                            </div>
                        </div>
                    </div>

                    <!-- Anne Arundel County Crisis Response -->
                    <div class="col-md-6 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">Anne Arundel County Crisis Response</h5>
                                <p><strong>Phone:</strong> 410-768-5522</p>
                            </div>
                        </div>
                    </div>

                    <!-- Harford County Crisis Response -->
                    <div class="col-md-6 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">Harford County Crisis Response</h5>
                                <p><strong>Phone:</strong> 1-800-639-8783</p>
                            </div>
                        </div>
                    </div>

                    <!-- Howard County Crisis Response -->
                    <div class="col-md-6 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">Howard County Crisis Response</h5>
                                <p><strong>Phone:</strong> 410-531-6677</p>
                            </div>
                        </div>
                    </div>

                    <!-- Montgomery County Crisis Response -->
                    <div class="col-md-6 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">Montgomery County Crisis Response</h5>
                                <p><strong>Phone:</strong> 240-777-4000</p>
                            </div>
                        </div>
                    </div>

                    <!-- Prince Georges County Crisis Response -->
                    <div class="col-md-6 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">Prince Georges County Crisis Response</h5>
                                <p><strong>Phone:</strong> 301-429-2185</p>
                            </div>
                        </div>
                    </div>

                    <!-- National Suicide Prevention Lifeline -->
                    <div class="col-md-12 mb-4">
                        <div class="card contact-card shadow hover-card">
                            <div class="card-body">
                                <h5 class="card-title">National Suicide Prevention Lifeline</h5>
                                <p><strong>Phone:</strong> 1-800-273-8255</p>
                                <p><a href="http://www.suicidepreventionlifeline.org" target="_blank">Visit Website</a></p>
                                <p>Also contact National Suicide Prevention Lifeline is a national network of local crisis
                                    centers that provides free and confidential emotional support to people in suicidal
                                    crisis or emotional distress 24 hours a day, 7 days a week.</p>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Footer Section -->
                <div class="resources-links">
                    <p>For more information, visit these resources:</p>
                    <p>
                        <a href="https://www.nimh.nih.gov" target="_blank">National Institute of Mental Health</a> <span class="mx-2">|</span>
                        <a href="https://www.apa.org" target="_blank">American Psychological Association</a> <span class="mx-2">|</span>
                        <a href="https://www.verywellmind.com" target="_blank">Verywell Mind</a> <span class="mx-2">|</span>
                        <a href="https://www.psychcentral.com" target="_blank">Psych Central</a> <span class="mx-2">|</span>
                        <a href="https://www.psychologytoday.com" target="_blank">Psychology Today</a>
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!--End Contact Page-->

@endsection

@section('script')
@endsection