@php
    // Literal class strings per step state (kept whole so Tailwind detects them).
    $circle = [
        'done'     => 'bg-emerald-500 text-white',
        'current'  => 'bg-indigo-600 text-white',
        'hold'     => 'bg-amber-500 text-white',
        'upcoming' => 'border border-slate-200 bg-white text-slate-300',
    ];
    $statusText = [
        'done'     => ['t' => __('Completed'), 'c' => 'text-emerald-600'],
        'current'  => ['t' => __('In progress'), 'c' => 'text-indigo-600'],
        'hold'     => ['t' => __('On hold'), 'c' => 'text-amber-600'],
        'upcoming' => ['t' => __('Pending'), 'c' => 'text-slate-400'],
    ];
@endphp

<x-card class="p-4 sm:p-6">
    <h2 class="text-base font-semibold text-slate-900">{{ __('Production Progress') }}</h2>

    {{-- Seven stages. A phone reads them as a vertical timeline, which is the
         only shape that fits without either crushing the labels or hiding half
         of them behind a sideways scroll nobody notices. From lg the same seven
         stages lay out as the horizontal rail. --}}
    <ol class="mt-4 lg:hidden">
        @foreach ($steps as $step)
            @php
                $key = $step['on_hold'] ? 'hold' : $step['state'];
                $st = $statusText[$key];
            @endphp
            <li class="relative flex gap-3 pb-4 last:pb-0">
                @unless ($loop->last)
                    <span class="absolute left-[15px] top-9 h-[calc(100%-1.5rem)] w-0.5 {{ $step['state'] === 'done' ? 'bg-emerald-500' : 'bg-slate-200' }}"></span>
                @endunless

                <span class="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full {{ $circle[$key] }}">
                    <x-icon :name="$step['icon']" class="h-4 w-4" />
                </span>

                <div class="min-w-0 pt-0.5">
                    <p class="text-sm font-medium text-slate-700">{{ $step['label'] }}</p>
                    <p class="text-xs {{ $st['c'] }}">
                        {{ $st['t'] }}
                        @if ($step['date'])
                            <span class="text-slate-400">· {{ $step['date']->format('d M Y') }}</span>
                        @endif
                    </p>
                    {{-- The quality stage carries its check tally instead of a date:
                         this is the existing gate made visible, not a new one. --}}
                    @if (! empty($step['note']))
                        <p class="text-xs text-slate-400">{{ $step['note'] }}</p>
                    @endif
                </div>
            </li>
        @endforeach
    </ol>

    <div class="-mx-2 mt-6 hidden overflow-x-auto px-2 lg:block">
        <div class="flex min-w-[42rem] items-start">
            @foreach ($steps as $step)
                @php
                    $key = $step['on_hold'] ? 'hold' : $step['state'];
                    $st = $statusText[$key];
                @endphp
                <div class="relative flex flex-1 flex-col items-center px-1 text-center">
                    @unless ($loop->last)
                        <span class="absolute left-1/2 top-5 h-0.5 w-full {{ $step['state'] === 'done' ? 'bg-emerald-500' : 'bg-slate-200' }}"></span>
                    @endunless

                    <span class="relative z-10 flex h-10 w-10 items-center justify-center rounded-full {{ $circle[$key] }}">
                        <x-icon :name="$step['icon']" class="h-5 w-5" />
                    </span>
                    <p class="mt-2 text-sm font-medium text-slate-700">{{ $step['label'] }}</p>
                    <p class="text-xs {{ $st['c'] }}">{{ $st['t'] }}</p>
                    @if ($step['date'])
                        <p class="text-xs text-slate-400">{{ $step['date']->format('Y-m-d') }}</p>
                    @endif
                    @if (! empty($step['note']))
                        <p class="text-xs text-slate-400">{{ $step['note'] }}</p>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</x-card>