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


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

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

        <section class="max-w-screen-lg mx-auto py-16 px-4">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 justify-center items-center">
                {{-- Diagnostics and Screening --}}
                <div class="bg-[#F0F7FF] p-6 rounded-2xl shadow-md space-y-4 h-fit hover:scale-105 transition-all duration-300 ease-in-out">
                    <h2 class="text-2xl font-bold text-gray-800 text-center border-b-2 pb-6 border-gray-200 ">{{ $service->card1_header }}</h2>
                    <ul class="mt-4 space-y-6  divide-gray-600 text-start divide-y-2  ">
                    {!! $service->card1_description !!}
                    </ul>
                </div>
                <div class="bg-[#F0F7FF] p-6 rounded-2xl shadow-md space-y-4 h-fit hover:scale-105 transition-all duration-300 ease-in-out">
                    <h2 class="text-2xl font-bold text-gray-800 text-center border-b-2 pb-6 border-gray-200 ">{{ $service->card2_header }}</h2>
                    <ul class="mt-4 space-y-6  divide-gray-600 text-start divide-y-2  ">
                    {!! $service->card2_description !!}
                    </ul>
                </div>
                <div class="bg-[#F0F7FF] p-6 rounded-2xl shadow-md space-y-4 h-fit hover:scale-105 transition-all duration-300 ease-in-out">
                    <h2 class="text-2xl font-bold text-gray-800 text-center border-b-2 pb-6 border-gray-200 ">{{ $service->card3_header }}</h2>
                    <ul class="mt-4 space-y-6  divide-gray-600 text-start divide-y-2  ">
                    {!! $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 mx-auto p-4 md:p-6">
        <h2 class="text-xl md:text-2xl font-bold text-gray-800 mb-4">How Our Emergency Department Works</h2>
        
        <div class="space-y-4">
            <p class="text-sm md:text-base"><span class="text-blue-600 font-semibold">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="text-blue-600 font-semibold">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="text-blue-600 font-semibold">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="text-blue-600 font-semibold">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="text-xl md:text-2xl font-bold text-gray-800 mt-6">Ambulance Service</h2>
        <p class="mt-2 text-gray-700 text-sm md:text-base font-bold">24/7 Ambulance Hotline:</p>
        <p class="text-blue-600 font-semibold text-sm md:text-base">📞 0987-654-3210</p>
        <p class="text-blue-600 font-semibold text-sm md:text-base">📞 0987-654-3210</p>
        
        <h2 class="text-xl md:text-2xl font-bold text-gray-800 mt-6">For Immediate Assistance, Contact Us:</h2>
        
        <div class="mt-2">
            <p class="text-gray-700 font-semibold text-sm md:text-base">Emergency Hotline:</p>
            <p class="text-blue-600 font-semibold text-sm md:text-base">📞 0987-654-3210</p>
            <p class="text-blue-600 font-semibold text-sm md:text-base">📞 0987-654-3210</p>
        </div>
        
        <div class="mt-2">
            <p class="text-gray-700 font-semibold text-sm md:text-base">General Inquiries or Directions:</p>
            <p class="text-blue-600 font-semibold text-sm md:text-base">📞 0987-654-3210</p>
        </div>
    </div>
</section>
@endif

     

@endsection