{{--
    One role in the hybrid timeline (PRD §12.3): chronology at a glance, expanding into a structured card.
    A native <details> keeps it keyboard accessible without JS. Achievements come first and are emphasised (PRD §12.2).
--}}
@props(['experience', 'open' => false])
<li class="relative pl-8 md:pl-10">
    <span aria-hidden="true" class="absolute left-0 top-2 size-3.5 rounded-full border-2 border-accent bg-page md:size-4"></span>
    <details @if ($open) open @endif class="group rounded-[var(--radius-card)] border border-transparent bg-card shadow-[var(--shadow-card)]">
        <summary class="flex cursor-pointer list-none flex-col gap-1 p-5 md:flex-row md:items-baseline md:justify-between md:gap-6 md:p-6 [&::-webkit-details-marker]:hidden">
            <span>
                <span class="block font-heading text-h4 font-semibold text-heading">{{ $experience->job_title }}</span>
                <span class="block text-muted">{{ collect([$experience->organisation, $experience->location])->filter()->implode(' · ') }}</span>
            </span>
            <span class="flex shrink-0 items-center gap-2 text-sm text-muted">
                <time datetime="{{ $experience->start_date->format('Y-m') }}">{{ $experience->start_date->format('M Y') }}</time> –
                @if ($experience->is_current)
                    <span>{{ __('portfolio.ui.present') }}</span>
                @else
                    <time datetime="{{ $experience->end_date?->format('Y-m') }}">{{ $experience->end_date?->format('M Y') }}</time>
                @endif
                <x-icon name="heroicon-o-chevron-down" class="size-5 transition-transform group-open:rotate-180" />
            </span>
        </summary>
        <div class="space-y-5 border-t border-line p-5 md:p-6">
            <x-rich-text :html="$experience->overview" />
            @if ($experience->achievements)
                <div>
                    <h3 class="font-body text-eyebrow font-semibold uppercase text-muted">{{ __('portfolio.ui.achievements') }}</h3>
                    <ul class="mt-2 space-y-2">
                        @foreach ($experience->achievements as $achievement)
                            <li class="flex gap-3 font-medium text-ink"><x-icon name="heroicon-o-check-badge" class="mt-0.5 size-5 shrink-0 text-link" />{{ $achievement }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if ($experience->responsibilities)
                <div>
                    <h3 class="font-body text-eyebrow font-semibold uppercase text-muted">{{ __('portfolio.ui.responsibilities') }}</h3>
                    <ul class="mt-2 list-disc space-y-1 pl-5 text-muted">
                        @foreach ($experience->responsibilities as $responsibility)<li>{{ $responsibility }}</li>@endforeach
                    </ul>
                </div>
            @endif
            @if ($experience->projects->isNotEmpty())
                <div>
                    <h3 class="font-body text-eyebrow font-semibold uppercase text-muted">{{ __('portfolio.ui.projects') }}</h3>
                    <ul class="mt-2 flex flex-wrap gap-x-4 gap-y-1">
                        @foreach ($experience->projects as $project)
                            <li><a href="{{ route('projects.show', $project->slug) }}" class="inline-flex min-h-11 items-center"
                                   data-track="project_card_click" data-track-props='{"project":"{{ $project->slug }}","source":"experience"}'>{{ $project->title }}</a></li>
                        @endforeach
                    </ul>
                </div>
            @endif
            @if ($experience->tools->isNotEmpty())
                <ul class="flex flex-wrap gap-2" aria-label="{{ __('portfolio.ui.tools') }}">
                    @foreach ($experience->tools as $tool)<li><x-tag>{{ $tool->name }}</x-tag></li>@endforeach
                </ul>
            @endif
        </div>
    </details>
</li>