@extends('layouts.site')

@section('meta_title')
    {{ __('site.nav_services') }} — {{ brand_name() }}
@endsection

@section('title', __('site.nav_services'))

@section('content')
    @if ($categoryId && $filterCategory)
        <x-site.lead-context
            :category-id="$categoryId"
            :subject="locale_category_name($filterCategory)"
            source-type="category"
            :source-id="$categoryId"
        />
    @endif

    <div class="site-services" data-reveal="page">
        <div class="site-container site-services__inner space-y-8 pb-10 pt-6">
            <header class="site-services__header" data-reveal="soft">
                <div class="site-services__header-copy">
                    <h1 class="site-services__title">{{ __('site.nav_services') }}</h1>
                    <p class="site-services__subtitle">{{ __('site.services_subtitle') }}</p>
                </div>
                <div class="site-services__header-actions">
                    <button
                        type="button"
                        class="site-btn-primary"
                        data-assistant-open
                        @if ($categoryId)
                            data-source-type="category"
                            data-source-id="{{ $categoryId }}"
                        @endif
                    >
                        {{ __('site.industry_request_cta') }}
                    </button>
                </div>
            </header>

            @if ($categoryGrid->isNotEmpty())
                <section class="site-services-categories" data-reveal="soft">
                    <div class="eca-section-heading">
                        <h2>{{ __('site.services_categories_title') }}</h2>
                        @if ($categoryId)
                            <a href="{{ route('site.services.index', ['locale' => $locale]) }}">{{ __('site.services_view_all_categories') }}</a>
                        @endif
                    </div>
                    <ul class="site-services-categories__grid">
                        @foreach ($categoryGrid as $item)
                            <li>
                                <a
                                    href="{{ $item['url'] }}"
                                    @class([
                                        'site-services-categories__card',
                                        'site-services-categories__card--active' => $categoryId === $item['id'],
                                    ])
                                >
                                    @if ($item['image'])
                                        <img
                                            src="{{ $item['image'] }}"
                                            alt=""
                                            class="site-services-categories__image"
                                            loading="lazy"
                                            decoding="async"
                                        />
                                    @else
                                        <span class="site-services-categories__placeholder" aria-hidden="true">
                                            <x-site.svg-icon name="specialty_plc" class="h-6 w-6" />
                                        </span>
                                    @endif
                                    <span class="site-services-categories__content">
                                        <span class="site-services-categories__name">{{ $item['title'] }}</span>
                                        @if ($item['description'])
                                            <span class="site-services-categories__desc">{{ $item['description'] }}</span>
                                        @endif
                                    </span>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                </section>
            @endif

            @if ($completedRepairs->isNotEmpty())
                <section class="site-services-completed" data-reveal="soft">
                    <div class="eca-section-heading">
                        <h2>{{ __('site.services_completed_cases') }}</h2>
                        @feature('repairs_public_page')
                            <a href="{{ route('site.repairs.index', array_filter(['locale' => $locale, 'category_id' => $categoryId])) }}">{{ __('site.view_all') }}</a>
                        @endfeature
                    </div>
                    <ul class="site-industry-repairs site-industry-repairs--services">
                        @foreach ($completedRepairs as $order)
                            <li class="site-industry-repairs__item">
                                <p class="site-industry-repairs__code">{{ $order->tracking_code }}</p>
                                <p class="site-industry-repairs__device">{{ $order->device_name }}</p>
                                @if ($order->category)
                                    <p class="site-industry-repairs__meta">{{ locale_category_name($order->category) }}</p>
                                @endif
                            </li>
                        @endforeach
                    </ul>
                </section>
            @endif

            <section class="site-services-list space-y-6" data-reveal="soft">
                @if ($categories->isNotEmpty())
                    <x-site.category-tabs
                        :categories="$categories"
                        route-name="site.services.index"
                        :current-category-id="$categoryId ?? 0"
                    />
                @endif

                @if ($services->total() === 0)
                    <p class="rounded-lg border border-dashed border-brand-border px-6 py-12 text-center text-brand-muted">{{ __('site.empty_services') }}</p>
                @else
                    <ul class="eca-card-grid eca-card-grid--services eca-card-grid--home" data-reveal-group>
                        @foreach ($services as $service)
                            <x-site.cards.service :service="$service" />
                        @endforeach
                    </ul>

                    <div data-reveal="soft" style="--reveal-delay: 120ms;">
                        <x-site.simple-pagination :paginator="$services" />
                    </div>
                @endif
            </section>

            @if ($categoryId)
                @include('partials.site.related-discovery', [
                    'categoryId' => $categoryId ?? request()->integer('category_id'),
                    'relatedProducts' => $relatedProducts ?? collect(),
                    'relatedServices' => $relatedServices ?? collect(),
                    'relatedArticles' => $relatedArticles ?? collect(),
                ])
            @endif
        </div>
    </div>
@endsection