@extends('layouts.main-app')
@section('title', 'Homepage')
@section('content')


    @include('layouts.navbar', [
        'headerTitle' => 'Services',
        'headerDescription' => '',
    ])

    <section class="max-w-screen-lg px-4 py-16 mx-auto">
        <div class="grid items-start justify-start grid-cols-1 md:grid-cols-2">
            <img src="{{ asset($service->image) }}" alt="" class="object-cover w-full">
            <div class="flex flex-col flex-1 p-4 space-y-2">
                <h2 class="text-2xl font-bold text-gray-900 md:text-3xl ">{{ $service->name }} </h2>
                <p class="mb-6 text-base leading-relaxed text-gray-700 md:text-lg">{!! $service->description !!}</p>
            </div>
        </div>
    </section>

    <section class="max-w-screen-lg px-4 py-16 mx-auto">
        <div class="grid items-stretch justify-center grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
            {{-- Diagnostics and Screening --}}
            <div
                class="bg-[#F0F7FF] p-6 rounded-2xl shadow-md space-y-4 h-full hover:scale-105 transition-all duration-300 ease-in-out ">
                <h2 class="pb-6 text-2xl font-bold text-center text-gray-800 border-b-2 border-gray-200 ">
                    {{ $service->card1_header }}</h2>
                <ul class="mt-4 space-y-6 divide-y-2 divide-gray-600 text-start ">
                    {!! $service->card1_description !!}
                </ul>
            </div>
            <div
                class="bg-[#F0F7FF] p-6 rounded-2xl shadow-md space-y-4 h-full hover:scale-105 transition-all duration-300 ease-in-out">
                <h2 class="pb-6 text-2xl font-bold text-center text-gray-800 border-b-2 border-gray-200 ">
                    {{ $service->card2_header }}</h2>
                <ul class="mt-4 space-y-6 divide-y-2 divide-gray-600 text-start ">
                    {!! $service->card2_description !!}
                </ul>
            </div>
            <div
                class="bg-[#F0F7FF] p-6 rounded-2xl shadow-md space-y-4 h-full hover:scale-105 transition-all duration-300 ease-in-out">
                <h2 class="pb-6 text-2xl font-bold text-center text-gray-800 border-b-2 border-gray-200 ">
                    {{ $service->card3_header }}</h2>
                <ul class="mt-4 space-y-6 divide-y-2 divide-gray-600 text-start ">
                    {!! $service->card3_description !!}
                </ul>
            </div>
        </div>
    </section>

    @if (request()->is('services/service_detail/1'))
        <section class="relative">
            <img src="{{ asset('assets/services/ambulance.png') }}" alt=""
                class="absolute right-0 bottom-0 w-[300px] md:w-[500px] lg:w-[600px] hidden md:block">
            <div class="container max-w-screen-lg p-4 mx-auto md:p-6">
                <h2 class="mb-4 text-xl font-bold text-gray-800 md:text-2xl">How Our Emergency Department Works</h2>

                <div class="space-y-4">
                    <p class="text-sm md:text-base"><span class="font-semibold text-blue-600">Step 1: Arrival and
                            Triage</span><br>
                        Upon arrival at the ED, you will be assessed based on the severity of your condition.</p>

                    <p class="text-sm md:text-base"><span class="font-semibold text-blue-600">Step 2: Immediate
                            Care</span><br>
                        Depending on your condition, we will quickly administer initial treatment, conduct diagnostic tests,
                        and begin the necessary interventions.</p>

                    <p class="text-sm md:text-base"><span class="font-semibold text-blue-600">Step 3: Specialized
                            Care</span><br>
                        If required, our trauma team or other specialists will be immediately notified and brought in to
                        assist with further care.</p>

                    <p class="text-sm md:text-base"><span class="font-semibold text-blue-600">Step 4: Follow-up</span><br>
                        If you are admitted to the hospital for further treatment, you will be closely monitored by our
                        dedicated nursing staff. If your case requires discharge, our team will provide a clear discharge
                        plan and follow-up instructions.</p>
                </div>

                <h2 class="mt-6 text-xl font-bold text-gray-800 md:text-2xl">Ambulance Service</h2>
                <p class="mt-2 text-sm font-bold text-gray-700 md:text-base">24/7 Ambulance Hotline:</p>
                <p class="text-sm font-semibold text-blue-600 md:text-base">📞 +6394-5728-3878</p>
                <p class="text-sm font-semibold text-blue-600 md:text-base">📞 +6394-5728-3878</p>

                <h2 class="mt-6 text-xl font-bold text-gray-800 md:text-2xl">For Immediate Assistance, Contact Us:</h2>

                <div class="mt-2">
                    <p class="text-sm font-semibold text-gray-700 md:text-base">Emergency Hotline:</p>
                    <p class="text-sm font-semibold text-blue-600 md:text-base">📞 +6394-5728-3878</p>
                    <p class="text-sm font-semibold text-blue-600 md:text-base">📞 +6394-5728-3878</p>
                </div>

                <div class="mt-2">
                    <p class="text-sm font-semibold text-gray-700 md:text-base">General Inquiries or Directions:</p>
                    <p class="text-sm font-semibold text-blue-600 md:text-base">📞 +6394-5728-3878</p>
                </div>
            </div>
        </section>
    @endif



@endsection