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

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

<div class="w-full  relative h-full mb-24">
        <img src="{{asset('assets/about/aboutbanner.png')}}" alt="Healthcare" class="w-full h-full object-cover absolute top-0 left-0 z-0">
            <div class="flex flex-col md:flex-row gap-2 justify-center items-center relative py-32">
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">Home > </span>
                <span class="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold text-white inter-font">Services Offered </span>
                
            </div>
    </div>

<section class="relative">
    <img src="{{ asset('assets/services/serv.png') }}" alt="" class="size-[900px] absolute top-0 right-0 z-0 hidden lg:block">
    
    <div class="py-2 px-3">
        <div class="max-w-screen-lg mx-auto flex flex-col items-center md:items-start py-10 relative">
            <h1 class="text-black text-3xl sm:text-4xl font-bold sofia-font text-center md:text-left">
                Clinical and Surgical Departments
            </h1>

            <div class="grid grid-cols-1 md:grid-cols-1  gap-6 w-full max-w-screen-lg mx-auto py-10">
                @php
                    $services = [
                        ['name' => 'Internal Medicine', 'link' => url('/services/servicesoffered/item1')],
                        ['name' => 'Pediatrics', 'link' => url('/services/servicesoffered/item2')],
                        ['name' => 'Psychiatry', 'link' => url('/services/servicesoffered/item3')],
                        ['name' => 'Ophthalmology', 'link' => url('/services/servicesoffered/item4')],
                        ['name' => 'Obstetrics and Gynecology Surgery', 'link' => url('/services/servicesoffered/item5')],
                        ['name' => 'Ears, Nose, Throat (ENT) and Head and Neck Surgery', 'link' => '/services/servicesoffered/item6'],
                        

                    ];
                @endphp

                @foreach ($services as $service)
                <a href="{{ $service['link'] }}" class="flex items-center justify-between w-full max-w-2xl bg-white shadow-md rounded-full border border-gray-300 overflow-hidden hover:scale-105 transition-all duration-300">
                    <h4 class="text-black text-base lg:text-sm font-bold px-6 py-4 whitespace-normal">
                        {{ $service['name'] }}
                    </h4>
                    <div class="bg-blue-600 text-white text-base lg:text-md font-bold px-10 lg:px-14 py-4 flex items-center rounded-r-full relative before:absolute before:-left-6 before:top-0 before:h-full before:w-10 before:bg-white before:transform before:-skew-x-[20deg] ">
                        Learn More <span class="ml-2">➜</span>
                    </div>
                </a>
                @endforeach
            </div>
        </div>
    </div>
</section>

@include('frontend.components.healthcareservice.healthcareservice')
@include('frontend.components.providing')

@endsection