@extends('layouts.site')

@section('meta_title')
    {{ locale_field($service, 'name') }} — {{ __('site.nav_services') }}
@endsection

@section('title')
    {{ locale_field($service, 'name') }}
@endsection

@push('meta')
    @if (filled($service->meta_keywords))
        <meta name="keywords" content="{{ $service->meta_keywords }}">
    @endif
@endpush

@section('content')
    <x-site.lead-context
        :category-id="$service->category_id"
        :subject="collect([locale_field($service, 'name'), locale_category_name($service->category)])->filter()->implode(' — ')"
        source-type="service"
        :source-id="$service->id"
    />
    @php
        $locale = app()->getLocale();
        $card = \App\Support\Cards\ServiceCardPresenter::from($service);
        $hasOverview = filled(locale_field($service, 'description'));
        $deliverables = collect($service->deliverables ?? [])->filter(fn ($i) => $i !== null && $i !== '');
        $hasDeliverables = $deliverables->isNotEmpty();
        $brands = collect($supportedBrands ?? [])->filter()->values();
        $hasBrands = $brands->isNotEmpty();
        $detailTabs = collect([
            $hasOverview ? ['key' => 'overview', 'label' => __('site.detail_tab_overview')] : null,
            $hasDeliverables ? ['key' => 'deliverables', 'label' => __('site.deliverables')] : null,
            $hasBrands ? ['key' => 'brands', 'label' => __('site.detail_tab_brands')] : null,
        ])->filter()->values()->all();
        $initialTab = $detailTabs[0]['key'] ?? null;
    @endphp

    <x-site.engage-shell :engage-type="$engageType" :engage-id="$engageId" :engagement="$engagement" class="site-container pb-24">
        <article class="site-detail site-detail--service" data-reveal="page">
            <nav class="site-detail__breadcrumb eca-breadcrumb py-4 eca-theme-text-muted" aria-label="Breadcrumb" data-reveal="soft">
                <a href="{{ route('site.home', ['locale' => $locale]) }}" class="hover:text-brand-accent">{{ __('site.nav_home') }}</a>
                <span class="eca-breadcrumb__sep">›</span>
                <a href="{{ route('site.services.index', ['locale' => $locale]) }}">{{ __('site.nav_services') }}</a>
                @if ($service->category)
                    <span class="eca-breadcrumb__sep">›</span>
                    <a href="{{ route('site.services.index', ['locale' => $locale, 'category_id' => $service->category_id]) }}">{{ locale_category_name($service->category) }}</a>
                @endif
                <span class="eca-breadcrumb__sep">›</span>
                <span class="eca-theme-text">{{ locale_field($service, 'name') }}</span>
            </nav>

            <div class="site-detail-hero eca-detail-glass" data-reveal="section">
                <div class="site-detail-hero__media site-detail-hero__media--sticky">
                    <x-site.image-gallery
                        :gallery="$gallery"
                        :alt="locale_field($service, 'name')"
                        mode="service"
                    />
                </div>

                <div class="site-detail-hero__info">
                    <div class="site-detail-chips">
                        @if ($service->featured)
                            <span class="site-detail-chip site-detail-chip--accent">{{ __('site.featured') }}</span>
                        @endif
                        @if ($service->category)
                            <span class="site-detail-chip">{{ locale_category_name($service->category) }}</span>
                        @endif
                    </div>

                    <h1 class="site-detail-hero__title">{{ locale_field($service, 'name') }}</h1>

                    <x-site.engagement.stats-bar :engagement="$engagement" variant="service" />

                    @if (locale_field($service, 'summary'))
                        <p class="site-detail-hero__summary">{{ locale_field($service, 'summary') }}</p>
                    @endif

                    <div class="site-detail-cta">
                        @feature('repair_services')
                        <button type="button" class="site-btn-primary site-engage-glow" data-assistant-open data-intent="repair">
                            {{ __('site.cta_request') }}
                        </button>
                        @endfeature
                        <a href="{{ site_whatsapp_url() }}" target="_blank" rel="noopener" class="site-btn-outline site-engage-glow">{{ __('site.cta_whatsapp') }}</a>
                    </div>

                    <dl class="site-detail-meta">
                        @if ($service->lead_time_days !== null)
                            <div class="site-detail-meta__row">
                                <dt>{{ __('site.delivery_days') }}</dt>
                                <dd>{{ $service->lead_time_days }}</dd>
                            </div>
                        @endif
                        @if ($service->warranty_days !== null)
                            <div class="site-detail-meta__row">
                                <dt>{{ __('site.warranty_days') }}</dt>
                                <dd>{{ $service->warranty_days }}</dd>
                            </div>
                        @endif
                        @if ($formatted = site_format_money($service->currency, $service->price_estimate_from))
                            <div class="site-detail-meta__row">
                                <dt>{{ __('site.price_from') }}</dt>
                                <dd class="text-brand-accent">{{ $formatted }}</dd>
                            </div>
                        @endif
                    </dl>
                </div>
            </div>

            @if ($detailTabs !== [])
                <x-site.detail-tabs class="mt-8" :tabs="$detailTabs" :initial="$initialTab">
                    @if ($hasOverview)
                        <div class="site-detail-tabs__panel" x-show="tab === 'overview'" role="tabpanel">
                            <div class="eca-detail-prose prose prose-sm" data-article-body>
                                {!! nl2br(e(locale_field($service, 'description'))) !!}
                            </div>
                        </div>
                    @endif

                    @if ($hasDeliverables)
                        <div class="site-detail-tabs__panel" x-show="tab === 'deliverables'" x-cloak role="tabpanel">
                            <ul class="site-detail-list">
                                @foreach ($deliverables as $item)
                                    <li>{{ is_array($item) ? ($item['text'] ?? $item['title'] ?? '') : $item }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if ($hasBrands)
                        <div class="site-detail-tabs__panel" x-show="tab === 'brands'" x-cloak role="tabpanel">
                            <ul class="site-detail-brands">
                                @foreach ($brands as $brand)
                                    <li class="site-detail-brands__item">{{ $brand }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </x-site.detail-tabs>
            @endif

            <div class="site-detail-process mt-10 desktop:mt-12">
                <x-site.home-repair-process lazy />
            </div>

            <div class="site-detail-showcase mt-8 desktop:mt-10" data-reveal="section">
                <x-site.service-showcase :card="$card" variant="detail" :show-footer="true" />
            </div>

            @include('partials.site.related-rail', ['rail' => $relatedRail ?? null])
        </article>
    </x-site.engage-shell>
@endsection