@props([
    'service',
    'slug',
    'heroCards' => [],
    'contactHref',
    'isLocationPage' => false,
    'locationDisplayName' => null,
    'locationData' => null,
    'theme' => 'light',
])

@php
    use Illuminate\Support\Str;

    $isDark = $theme === 'dark';
    $sliderId = 'service-hero-cards-' . preg_replace('/[^a-z0-9-]/', '', (string) $slug);
    $cards = array_values($heroCards);
    $heroTitle = $isLocationPage && $locationDisplayName
        ? rtrim($service['heroTitle'] ?? $service['name'], '. ') . ' ' . __('messages.service_location.in') . ' ' . $locationDisplayName
        : ($service['heroTitle'] ?? $service['name']);
    $heroLead = $service['heroSubtitle']
        ?? (! empty($service['heroDescription']) ? Str::limit($service['heroDescription'], 160) : '');
@endphp

<section
    id="overview"
    @class([
        'relative overflow-hidden scroll-mt-24 flex flex-col justify-center min-h-[min(88svh,90vh)] md:min-h-screen pt-2 pb-10 md:pt-6 md:pb-20',
        'hero-gradient' => ! $isDark,
        'dn-page-hero dn-page-hero--dark dn-page-hero--service' => $isDark,
    ])
    @if($isDark && ! empty($service['listingImage']))
    data-dn-hero-theme="dark"
    style="--dn-hero-image: url('{{ asset($service['listingImage']) }}')"
    @endif
    aria-labelledby="service-hero-heading"
>
    @if($isDark)
    <div class="dn-page-hero--dark__overlay" aria-hidden="true"></div>
    <div class="dn-page-hero--dark__glow" aria-hidden="true"></div>
    @endif

    <div @class(['site-container relative z-10', 'pb-0' => $isDark])>
        <div class="grid grid-cols-1 lg:grid-cols-[minmax(0,820px)_minmax(320px,440px)] gap-y-10 lg:gap-x-32 xl:gap-x-40 2xl:gap-x-48 mb-12 lg:mb-16 items-start lg:items-stretch md:pt-2">
            <div class="animate-slide-up min-w-0 max-w-[820px] lg:pr-4 xl:pr-8">
                <h1 id="service-hero-heading"
                    @class([
                        'svc-hero-title',
                        'svc-hero-title--light' => ! $isDark,
                        'svc-hero-title--dark' => $isDark,
                    ])
                    itemprop="name">{{ $heroTitle }}</h1>
                @if($heroLead)
                <p @class([
                    'hero-subcopy svc-hero-subcopy--light' => ! $isDark,
                    'hero-subcopy svc-hero-subcopy--dark' => $isDark,
                ]) itemprop="description">{{ $heroLead }}</p>
                @endif
            </div>

            <div class="animate-slide-up animation-delay-200 min-w-0 lg:w-full lg:max-w-[440px] lg:justify-self-end flex flex-col justify-start lg:justify-end lg:pb-6 xl:pb-8">
                <div class="svc-hero-actions">
                    <a href="{{ $contactHref }}" class="svc-hero-btn svc-hero-btn--primary">
                        {{ __('messages.service_detail.start_your_project', ['location_suffix' => '']) }}
                        <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.5" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                    @if(! empty($service['faqs']))
                    <a href="#faq" class="svc-hero-btn svc-hero-btn--ghost">
                        {{ __('messages.service_detail.questions_answered', ['service' => '', 'location_suffix' => '']) }}
                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                    </a>
                    @endif
                </div>
            </div>
        </div>

        @if(count($cards) > 0)
        <div class="animate-slide-up animation-delay-400">
            <div id="{{ $sliderId }}"
                 class="hero-cards-slider hide-scrollbar pb-4 md:pb-0 h-[320px] sm:h-[380px] md:h-[480px] lg:h-[540px] overflow-x-auto md:overflow-visible snap-x snap-mandatory md:snap-none"
                 data-hero-cards-slider
                 data-rotate-ms="5000"
                 role="region"
                 aria-label="{{ __('messages.service_detail.overview') }}">
                @foreach($cards as $index => $card)
                <article class="hero-card group bg-slate-200 snap-center {{ $index === 0 ? 'is-expanded is-revealed' : '' }}"
                     data-index="{{ $index }}"
                     aria-labelledby="{{ $sliderId }}-title-{{ $index }}">
                    <img src="{{ $card['image'] }}"
                         alt="{{ $card['title'] }}"
                         loading="{{ $index === 0 ? 'eager' : 'lazy' }}"
                         decoding="{{ $index === 0 ? 'sync' : 'async' }}"
                         @if($index === 0) fetchpriority="high" @endif
                         width="800"
                         height="550">

                    <div class="hero-card__shade" aria-hidden="true"></div>

                    <div class="card-content-collapsed" aria-hidden="true">
                        <h3>{{ $card['title'] }}</h3>
                    </div>

                    <div class="card-content-expanded">
                        <div class="hero-card__layer hero-card__layer--1">
                            <h2 id="{{ $sliderId }}-title-{{ $index }}" class="hero-card__title">
                                {{ $card['title'] }}
                            </h2>
                            @if(! empty($card['subtitle']))
                            <p class="hero-card__subtitle">{{ $card['subtitle'] }}</p>
                            @endif
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
        </div>
        @endif
    </div>
</section>

@once
@push('styles')
<link rel="stylesheet" href="{{ asset('css/service-page-hero.css') }}?v=6">
<link rel="stylesheet" href="{{ asset('css/hero-cards-slider.css') }}?v=11">
@endpush
@endonce

@if(count($cards) > 0)
@push('scripts')
<script src="{{ asset('js/hero-cards-slider.js') }}?v=2"></script>
@endpush
@endif