@extends('user.layout')
@section('title', 'Page Title')
@section('content')
    <div class="container-fluid p-0">
        <div class="card border-0 rounded-0 overflow-hidden">
            <img class="card-img img-fluid rounded-0 w-100" src="{{ optimizedImageUrl('banner', @$banner->image, 1600) }}" srcset="{{ optimizedImageSrcset('banner', @$banner->image, 1600) }}" sizes="100vw" fetchpriority="high" decoding="async" alt="{{ @$banner->title }}" title="{{ @$banner->title }}" style="max-height: 100vh;" />

            <div class="card-img-overlay text-white d-flex flex-column justify-content-center px-lg-5" style="background: rgba(0, 0, 0, 0.5);">
                <p class="card-text">#{{ str_replace(' ', '', config('app.name')) }}</p>
                <h2 class="card-title mb-3">{{ @$banner->title }}</h2>
                <p class="card-text">{{ @$banner->sub_title }}</p>
            </div>
        </div>
    </div>

    <div class="container-fluid container-lg my-5">
        <p class="mb-0 fw-semibold secondary">POWERED BY ENGINEERS</p>
        <h3 class="mb-4 fw-bolder">How can {{ config('app.name') }} help you?</h3>

        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 justify-content-center g-4">
            @foreach ($services as $key => $service)
                <div class="col scroll-reveal">
                    <div class="card border-0 h-100 overflow-hidden">
                        <div class="overflow-hidden">
                            <img class="card-img-top img-fluid" src="{{ optimizedImageUrl('service', $service->image, 960) }}" srcset="{{ optimizedImageSrcset('service', $service->image, 960) }}" sizes="(min-width: 992px) 33vw, (min-width: 768px) 50vw, 100vw" loading="lazy" decoding="async" alt="{{ $service->name }}" title="{{ $service->name }}" style="height: 230px;" />
                        </div>

                        <div class="card-body pb-2 d-flex flex-column justify-content-between">
                            <div>
                                <h5 class="card-title text-justify secondary">{{ $service->name }}</h5>
                                <p class="text-justify">{{ excerpt($service->short_description, 190) }}</p>
                            </div>
                            <a class="btn button-effect stretched-link" href="{{ route('service-details', $service->slug) }}" role="button"><span>View Service</span></a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
@endsection

@push('scripts')
    @foreach ($services ?? [] as $service)
        <script type="application/ld+json">
            {
                "@context": "https://schema.org",
                "@type": "Service",
                "name": {!! json_encode($service->name) !!},
                "description": {!! json_encode(strip_tags($service->short_description)) !!},
                "provider": {
                    "@type": "Organization",
                    "name": "{{ config('app.name') }}"
                },
                "areaServed": {
                    "@type": "Place",
                    "name": "Worldwide"
                },
                "serviceType": "Mechanical Engineering Services",
                "url": "{{ route('service-details', $service->slug) }}",
                "image": "{{ asset('storage/service/' . $service->image) }}"
            }
        </script>
        
        <script type="application/ld+json">
            {
              "@context": "https://schema.org",
              "@type": "Article",
              "headline": {!! json_encode($service->name) !!},
              "description": {!! json_encode(strip_tags($service->short_description)) !!},
              "author": {
                "@type": "Organization",
                "name": "{{ config('app.name') }}",
                "url": "{{ route('about') }}"
              },
              "publisher": {
                "@type": "Organization",
                "name": "{{ config('app.name') }}",
                "logo": {
                  "@type": "ImageObject",
                  "url": "{{ asset('images/Triangle-BD-Favicon.png') }}"
                }
              },
              "datePublished": "{{ $service->created_at->toIso8601String() }}",
              "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "{{ route('service-details', $service->slug) }}"
              },
              "image": "{{ asset('storage/service/' . $service->image) }}"
            }
        </script>
    @endforeach
@endpush