@extends('site.layouts.app')

@php
    use Illuminate\Support\Facades\Storage;
    $rp = app()->getLocale() === 'ar' ? 'site.ar.' : 'site.';
    $serviceSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'Service',
        'name' => $service->localized('title'),
        'description' => strip_tags((string) $service->localized('excerpt')),
        'provider' => ['@type' => 'Organization', 'name' => \App\Support\Identite::marque()],
        'areaServed' => 'MA',
        'url' => url()->current(),
    ];
@endphp

@section('title', $service->localized('meta_title') ?: $service->localized('title').' — '.\App\Support\Identite::marque())
@section('description', $service->localized('meta_description') ?: $service->localized('excerpt'))
@if ($service->image_path)
    @section('og_image', url(Storage::disk('public')->url($service->image_path)))
@endif

@section('content')
    @include('site._hero', [
        'eyebrow' => __('site.nav.services'),
        'title' => $service->localized('title'),
        'subtitle' => $service->localized('excerpt'),
    ])

    <section class="section-light">
        <article class="container article-wrap reveal">
            @if ($service->image_path)
                <img class="article-cover" src="{{ Storage::disk('public')->url($service->image_path) }}" alt="{{ $service->localized('title') }}" loading="lazy">
            @endif
            <div class="prose-site">{{ $service->localizedHtml('body') }}</div>
            <p style="margin-top:36px"><a href="{{ route($rp.'services.index') }}" class="text-link">
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5M11 19l-7-7 7-7"/></svg>
                {{ __('site.cta.back_to_services') }}</a></p>
        </article>
    </section>

    @if ($others->isNotEmpty())
        <section class="section-soft">
            <div class="container">
                <div class="section-title reveal">
                    <span class="eyebrow">{{ __('site.nav.services') }}</span>
                    <h2>{{ __('site.home.services_title') }}</h2>
                </div>
                <div class="services-grid" data-stagger>
                    @foreach ($others->take(3) as $other)
                        <article class="service-card reveal" data-tilt>
                            <div class="service-icon" aria-hidden="true">@include('site.partials.service-icon', ['icon' => $other->icon])</div>
                            <h3>{{ $other->localized('title') }}</h3>
                            <p>{{ $other->localized('excerpt') }}</p>
                            <a href="{{ route($rp.'services.show', $other->slug) }}" class="service-link">{{ __('site.cta.read_more') }}
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                            </a>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @include('site._cta', ['rp' => $rp])
@endsection

@push('jsonld')
    <script type="application/ld+json">@json($serviceSchema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE)</script>
@endpush