{{-- Experience snapshot (PRD §9.6): latest roles or a summary, then "View Full Experience". --}}
<x-section :vm="$vm" tone="surface">
    <div class="container-site">
        <x-section-heading :title="$vm->get('heading')" class="mb-8" />
        @if ($vm->get('mode') === 'summary')
            <p class="max-w-[var(--container-prose)] text-lead">{{ $vm->get('summary') }}</p>
        @else
            <ul class="grid gap-4 md:grid-cols-2">
                @foreach ($vm->resolved('experiences', []) as $experience)
                    <li>
                        <x-card class="h-full">
                            <p class="text-sm text-muted">{{ $experience->start_date->format('M Y') }} – {{ $experience->is_current ? __('portfolio.ui.present') : $experience->end_date?->format('M Y') }}</p>
                            <h3 class="mt-1 text-h4">{{ $experience->job_title }}</h3>
                            <p class="text-muted">{{ $experience->organisation }}</p>
                            @if ($experience->achievements)
                                <p class="mt-3 flex gap-2 font-medium"><x-icon name="heroicon-o-check-badge" class="mt-0.5 size-5 shrink-0 text-link" />{{ $experience->achievements[0] }}</p>
                            @endif
                        </x-card>
                    </li>
                @endforeach
            </ul>
        @endif
        @if ($vm->get('cta_label'))
            <div class="mt-8"><x-button :href="route('experience')" variant="tertiary" track="cta_click" :track-props="['cta' => 'view_experience', 'location' => $location]">{{ $vm->get('cta_label') }}</x-button></div>
        @endif
    </div>
</x-section>