@extends('layout.master')


@section('content')
    <section class="service-section">
      <div class="w-full h-[25vh] lg:h-[50vh] relative">
        <div class="absolute z-[1] top-0 w-full left-0 h-full flex items-center justify-center">
          <div class="text-white   text-center w-1/2">
            <h2 class="lg:text-6xl md:text-4xl text-2xl font-extrabold wow animate__animated animate__lightSpeedInLeft">Our Services</h2>
          </div>
        </div>
        <div class="w-full h-full">
          <img class="w-full h-full object-cover object-top brightness-50" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg" />
        </div>
      </div>


        {{-- content div --}}
        <div class="lg:px-20 px-5  py-20 bg-blue-50 ">
          <div class="wow animate__animated animate__zoomIn flex flex-wrap justify-center gap-5 ">
              @if (count($services)>0)
                @foreach ($services as $service )
                  <div class="relative card flex flex-col text-gray-700 bg-white hover:-translate-y-2 hover:shadow-xl transition-all duration-500 shadow-md bg-clip-border rounded-xl max-w-80">
                      <div class="p-6">
                          <div class="flex justify-center">
                              <div class="w-[100px]">
                                <img class="w-full" src="{{$service->getFirstMediaUrl('service')}}" alt="">
                              </div>
                          </div>
                        <h5 class="block text-center mb-2 font-sans text-xl antialiased font-semibold leading-snug tracking-normal text-blue-gray-900">
                          {{$service->title}}
                        </h5>
                        <div class="block text-center paragraph line-clamp-5 font-sans text-base antialiased font-light leading-relaxed text-inherit">
                          @php
                            $description = Str::limit($service->description, 200, $end='...');
                          @endphp
                          {!!$description!!}
                        </div>
                      </div>
                      <div class="p-6 pt-0">
                        <a href="{{route('service.single',$service->slug)}}" class="inline-block">
                          <button
                            class="w-full relative flex items-center gap-5  bg-transparent  text-primary hover:text-white transition-all duration-500 px-3 py-1 font-xl rounded-md sm:mb-0 before:content-[''] before:absolute before:left-0 before:w-0 hover:before:w-full before:top-0 before:h-full before:bg-primary before:transition-all before:duration-500 overflow-hidden"
                            type="button">
                            <span class="relative">Learn More</span>
                            <div class="relative">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                                  stroke="currentColor" class="w-4 h-4">
                                  <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"></path>
                                </svg>
                            </div>
                          </button>
                        </a>
                      </div>
                  </div> 
                @endforeach
              @else
                <div>
                  <h2 class="text-center text-xl text-red-500">No Services found !</h2>
                </div>
              @endif
          </div>
        </div>
        {{-- end of content div --}}
    </section>
@endsection