{{--
    Recommendations preview (PRD §9.8). Never reached with zero items (the block hides itself, PRD §17.4).
    One recommendation renders as a single card; several as cards or an accessible, manually controlled carousel.
--}}
@php
    $items = $vm->resolved('recommendations', []);
    $carousel = $vm->get('layout') === 'carousel' && count($items) > 1;
@endphp
<x-section :vm="$vm" tone="surface">
    <div class="container-site">
        <x-section-heading :title="$vm->get('heading')" class="mb-10" />
        @if ($carousel)
            <div data-module="carousel" class="relative" role="region" aria-roledescription="carousel" aria-label="{{ $vm->get('heading') ?? __('portfolio.ui.recommendations') }}">
                <ul class="grid gap-6 md:grid-cols-2" data-carousel-track>
                    @foreach ($items as $recommendation)
                        <li data-carousel-slide aria-roledescription="slide" aria-label="{{ __('portfolio.ui.slide_status', ['current' => $loop->iteration, 'total' => count($items)]) }}">
                            <x-recommendation-card :recommendation="$recommendation" :excerpt-only="true" />
                        </li>
                    @endforeach
                </ul>
                <div class="mt-6 flex items-center gap-3" data-carousel-controls hidden>
                    <button type="button" data-carousel-prev class="inline-flex size-11 items-center justify-center rounded-full border border-ink" aria-label="{{ __('portfolio.ui.previous') }}"><x-icon name="heroicon-o-arrow-left" class="size-5" /></button>
                    <button type="button" data-carousel-next class="inline-flex size-11 items-center justify-center rounded-full border border-ink" aria-label="{{ __('portfolio.ui.next') }}"><x-icon name="heroicon-o-arrow-right" class="size-5" /></button>
                    <p class="text-sm text-muted" aria-live="polite" data-carousel-status></p>
                </div>
            </div>
        @else
            <ul @class(['grid gap-6', 'md:grid-cols-2 lg:grid-cols-3' => count($items) > 1, 'max-w-3xl' => count($items) === 1])>
                @foreach ($items as $recommendation)<li><x-recommendation-card :recommendation="$recommendation" :excerpt-only="true" /></li>@endforeach
            </ul>
        @endif
        @if ($vm->get('cta_label') && Route::has('pages.show'))
            <div class="mt-8"><x-button href="/recommendations" variant="tertiary">{{ $vm->get('cta_label') }}</x-button></div>
        @endif
    </div>
</x-section>