@extends('layouts.master')
@section('title' , __('messages.SERVICES'))
@push('css')
<style>
    .service-card-img {
        width:150px;
        height:150px;
        margin:auto;
    }
</style>
@endpush
@section('content')
    <!-- Services Section -->
    <section class="container services-section">
        <div class="row align-items-center">
            <div class="col-lg-8 col-sm-12 service-title" data-aos="fade-up" data-aos-duration="1000">
                <!-- Title and Description -->
                <div class="service-description">
                    <h2 class="section-title">{{ __('messages.SERVICES') }}</h2>
                    <p class="section-description">{!! $servicedesc->servicedesc !!}</p>
                </div>
            </div>
            
            <div class="col-lg-4 col-sm-12" data-aos="fade-left" data-aos-duration="1000">
                <!-- Star Icon -->
                <div class="img">
                    <img src="{{ asset('storage/' . $servicedesc->img) }}" alt="Star Icon">
                </div>
            </div>

            <!-- services Section -->
            <div class="team-section py-5">
                <div class="container">
                    <div class="row justify-content-start">
                        <!-- Team Members -->
                        @forelse (\App\Models\Service::all() as $service)
                            <div class="col-md-3 col-sm-12" data-aos="zoom-in" data-aos-duration="1000" style="margin-top:38px;">
                                <a href="{{ route('service.show', $service->slug) }}" class="text-decoration-none">
                                    <div class="team-member position-relative">
                                        <img src="{{ asset('storage/' . $service->service_image_main) }}"
                                            alt="{{ $service->service_name }}" class="service-card-img">
                                        <h3 class="service-title-card">{{ $service->contetn }}</h3>
                                    </div>
                                </a>
                            </div>
                        @empty
                            <p>{{ __('messages.no_data') }}</p>
                        @endforelse
                    </div>
                </div>
            </div>


        </div>
    </section>



    <!-- Clients Section -->
    @include('layouts.clients')

    <!-- Call to Action Section -->
    @include('layouts.cta')
@endsection