@props([
    'service',
    'slug',
    'contactSlug' => null,
    'advantage',
    'localizedRoute',
])

@php
    use App\Helpers\ServiceCompareIcons;

    $comparisons = $advantage['comparisons'] ?? [];
@endphp

@if($advantage)
@once
@push('styles')
<link rel="stylesheet" href="{{ asset('css/service-compare-living.css') }}?v=19">
@endpush
@push('scripts')
<script src="{{ asset('js/service-compare-living.js') }}?v=9" defer></script>
@endpush
@endonce

<section id="compare" class="svc-section svc-section--compare scroll-mt-24" aria-labelledby="svc-compare-living-heading">
    <div class="site-container svc-compare-living">
        <x-service-detail.section-intro
            :eyebrow="__('messages.service_detail.compare_services_section_label')"
            :title="$advantage['title']"
            :description="$advantage['description'] ?? __('messages.service_detail.compare_spot_desc')"
            heading-id="svc-compare-living-heading"
        />

        <div class="svc-compare-living__spot svc-reveal" data-compare-living>
            <div class="svc-compare-living__blob svc-compare-living__blob--teal" aria-hidden="true"></div>
            <div class="svc-compare-living__blob svc-compare-living__blob--coral" aria-hidden="true"></div>

            <div class="svc-compare-living__shell">
                <div class="svc-compare-living__columns" aria-hidden="true">
                    <p class="svc-compare-living__column-label svc-compare-living__column-label--them">
                        {{ __('messages.service_detail.compare_old_way_label') }}
                    </p>
                    <p class="svc-compare-living__column-label svc-compare-living__column-label--us">
                        {{ __('messages.service_detail.compare_new_way_label') }}
                    </p>
                </div>

                <div class="svc-compare-living__legend" role="presentation">
                    <p class="svc-compare-living__legend-label svc-compare-living__legend-label--them">
                        {{ __('messages.service_detail.compare_old_way_label') }}
                    </p>
                    <p class="svc-compare-living__legend-label svc-compare-living__legend-label--us">
                        {{ __('messages.service_detail.compare_new_way_label') }}
                    </p>
                </div>

                <div class="svc-compare-living__rows">
                    @foreach($comparisons as $i => $comparison)
                    @php $compareIcon = ServiceCompareIcons::keyForFeature($comparison['feature'] ?? null); @endphp
                    <div class="svc-compare-living__row {{ ! empty($comparison['highlight']) ? 'is-highlight' : '' }}"
                         data-compare-row
                         style="--row-i: {{ $i }};">
                        @if(! empty($comparison['feature']))
                        <p class="svc-compare-living__row-feature">{{ $comparison['feature'] }}</p>
                        @endif
                        <div class="svc-compare-living__row-cells">
                            <div class="svc-compare-living__cell svc-compare-living__cell--them" data-compare-cell="them">
                                <span class="sr-only">{{ __('messages.service_detail.compare_old_way_label') }}:</span>
                                <x-service-detail.compare-icon :icon="$compareIcon" side="them" />
                                <p class="svc-compare-living__line">
                                    @if(! empty($comparison['feature']))
                                    <span class="svc-compare-living__feature" aria-hidden="true">{{ $comparison['feature'] }}:</span>
                                    @endif
                                    <span class="svc-compare-living__emph svc-compare-living__emph--them">{{ $comparison['others'] }}</span>
                                </p>
                            </div>

                            <div class="svc-compare-living__cell svc-compare-living__cell--us" data-compare-cell="us">
                                <span class="sr-only">{{ __('messages.service_detail.compare_new_way_label') }}:</span>
                                <x-service-detail.compare-icon :icon="$compareIcon" side="us" />
                                <p class="svc-compare-living__line">
                                    @if(! empty($comparison['feature']))
                                    <span class="svc-compare-living__feature" aria-hidden="true">{{ $comparison['feature'] }}:</span>
                                    @endif
                                    <span class="svc-compare-living__emph svc-compare-living__emph--us">{{ $comparison['us'] }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>

        <p class="svc-compare-living__action svc-reveal svc-reveal--delay-2">
            <a href="{{ $localizedRoute('contact.index') }}?service={{ $contactSlug ?? $slug }}" class="svc-link !mt-0">
                {{ __('messages.service_detail.get_started_with') }}
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
            </a>
        </p>
    </div>
</section>
@endif