@extends('frontend.layouts.partials.app')
@section('title', 'Service')
@section('meta', 'Welcome to Goodwill Finance Pvt. Ltd.')
@section('content')
    <section>
        <div class="flex top-0">
            <img src="{{ asset('assets/img/year.png') }}"  class="w-full max-h-screen lg:h-[400px] object-cover" alt="" />
        </div>
    </section>

    <section>
        <div class="pt-8 px-12 flex justify-center">
            <div class="flex flex-col space-y-5 items-center">
                <p class="uppercase text-xl text-[#004d6e] font-semibold">
                    what we do
                </p>
                <p class="text-xl md:text-2xl lg:text-4xl font-extrabold text-[#004d6e]">
                    Our Expertize & Services
                </p>
                {{-- <p class="text-xl text-[#000]">
                    Override the digital divide with additional clickthroughs from
                    DevOps.
                </p> --}}
            </div>
        </div>
        <div class="px-3 lg:px-12 pt-24 mb-12">
            <div class="grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
                @forelse ($services as $service)
                    <div class="w-full flex flex-col space-y-3 items-center">
                        <a href="{{ route('service.detail', $service->slug) }}">
                            <div class="m-8 bg-white shadow-lg hover:shadow-2xl hover:scale-105 transition-transform ease-in-out rounded-xl p-6 space-y-3 relative overflow-hidden hover:bg-[#FFFDF7] flex flex-col items-center"
                                style="max-height: 312px;">
                                <div class="w-24 h-24 bg-brandBlue rounded-full absolute -right-5 -top-7">
                                    <div class="absolute bottom-6 left-7 text-white text-2xl"><img
                                            src="{{ asset('assets/img/small-logo.png') }}" class="w-10" alt="">
                                    </div>
                                </div>
                                <div class="fill-violet-500 w-12">
                                    <img src="{{ asset('storage/' . $service->photo) }}" class="w-16 h-16" alt="Services" />
                                </div>
                                <a href="{{ route('service.detail', $service->slug) }}">
                                    <h1 class=" h-[4rem] font-bold text-xl text-ellipsis overflow-hidden line-clamp-2 m-2">
                                        {{ $service->name }}</h1>
                                </a>
                                <div class="text-sm text-zinc-500 line-clamp-5 overflow-hidden text-ellipsis text-justify"
                                    style="margin: 4px; overflow: hidden;">
                                    {!! $service->description !!}
                                </div>
                            </div>
                    </div>
                    </a>
                @empty
                    <h3 class="text-center items-center justify-center">No details available</h3>
                @endforelse
            </div>
        </div>
    </section>
@endsection