@props(['service'])

@php
    use App\Helpers\ServiceCapabilityPanels;
    use Illuminate\Support\Str;

    $items = ServiceCapabilityPanels::buildItems($service);
@endphp

@if(count($items) > 0)
@once
@push('styles')
<link rel="stylesheet" href="{{ asset('css/service-capabilities-scroll.css') }}?v=20">
@endpush
@endonce

@php
    $capabilitiesDesc = trim((string) ($service['capabilitiesDesc'] ?? ''));
    if ($capabilitiesDesc === '') {
        $capabilitiesDesc = __('messages.service_detail.capabilities_desc', ['service' => strtolower($service['name'] ?? '')]);
    }
@endphp

<section class="service-cap-scroll svc-section svc-section--white scroll-mt-24 {{ $attributes->get('class') }}" id="capabilities" aria-labelledby="service-cap-heading">
    <div class="site-container">
        <x-service-detail.section-intro
            class="service-cap-scroll__header"
            :eyebrow="__('messages.service_detail.capabilities_section_label')"
            :title="__('messages.service_detail.capabilities_heading', ['service' => $service['name'] ?? ''])"
            :description="$capabilitiesDesc"
            heading-id="service-cap-heading"
        />

        {{-- Desktop: pinned scroll narrative --}}
        <div class="service-cap-scroll__desktop hidden lg:block" data-service-cap-scroll>
            <div class="service-cap-scroll__stage" data-cap-stage>
                <div class="service-cap-scroll__grid grid grid-cols-[minmax(0,380px)_minmax(0,1fr)] items-stretch">
                    <aside class="relative flex flex-col justify-center py-4" aria-label="Capabilities">
                        <div class="service-cap-scroll__nav-stack">
                            <div class="service-cap-scroll__rail" data-cap-rail aria-hidden="true">
                                <div class="service-cap-scroll__progress" data-cap-progress></div>
                            </div>

                            <div class="service-cap-scroll__nav-items">
                                @foreach($items as $i => $item)
                                <div class="service-cap-scroll__nav-item {{ $i === 0 ? 'is-active' : '' }}"
                                     data-cap-nav
                                     data-index="{{ $i }}"
                                     role="button"
                                     tabindex="0"
                                     aria-current="{{ $i === 0 ? 'true' : 'false' }}"
                                     aria-controls="service-cap-panel-{{ $i }}">
                                    <h3 class="service-cap-scroll__nav-title" id="service-cap-nav-{{ $i }}">{{ $item['title'] }}</h3>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </aside>

                    <div class="service-cap-scroll__visual" aria-live="polite">
                        @foreach($items as $i => $item)
                        <article class="service-cap-scroll__panel {{ $i === 0 ? 'is-active' : '' }}"
                                 id="service-cap-panel-{{ $i }}"
                                 data-cap-panel
                                 data-index="{{ $i }}"
                                 aria-labelledby="service-cap-nav-{{ $i }}"
                                 aria-hidden="{{ $i === 0 ? 'false' : 'true' }}">
                            <div class="service-cap-scroll__panel-inner" data-cap-stagger>
                                <p class="service-cap-scroll__panel-lead" data-cap-stagger-lead>{{ $item['lead'] }}</p>

                                @if(! empty($item['points']))
                                <div class="service-cap-scroll__panel-details">
                                    @foreach($item['points'] as $point)
                                    <div class="service-cap-scroll__panel-detail" data-cap-stagger-item>
                                        @if(! empty($point['label']))
                                        <p class="service-cap-scroll__panel-detail-title">{{ $point['label'] }}</p>
                                        @endif
                                        <p class="service-cap-scroll__panel-detail-body">{{ $point['text'] }}</p>
                                    </div>
                                    @endforeach
                                </div>
                                @endif
                            </div>
                        </article>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        {{-- Mobile: stacked cards --}}
        <div class="service-cap-scroll__mobile-list lg:hidden">
            @foreach($items as $i => $item)
            <article class="service-cap-scroll__mobile-card" data-cap-mobile-item>
                <h3 class="service-cap-scroll__mobile-title">{{ $item['title'] }}</h3>
                <p class="service-cap-scroll__panel-lead mb-4">{{ $item['lead'] }}</p>
                @if(! empty($item['points']))
                <div class="service-cap-scroll__panel-details">
                    @foreach($item['points'] as $point)
                    <div class="service-cap-scroll__panel-detail">
                        @if(! empty($point['label']))
                        <p class="service-cap-scroll__panel-detail-title">{{ $point['label'] }}</p>
                        @endif
                        <p class="service-cap-scroll__panel-detail-body">{{ $point['text'] }}</p>
                    </div>
                    @endforeach
                </div>
                @endif
            </article>
            @endforeach
        </div>
    </div>
</section>
@endif

@once
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollToPlugin.min.js" defer></script>
<script src="{{ asset('js/service-capabilities-scroll.js') }}?v=10" defer></script>
@endpush
@endonce