@php
    // Same sticky palette as the notes drawer. Literal classes so Tailwind keeps them.
    $palette = [
        'yellow' => ['note' => 'bg-amber-50 ring-amber-200/80',    'chip' => 'bg-amber-100 text-amber-800'],
        'pink'   => ['note' => 'bg-rose-50 ring-rose-200/80',      'chip' => 'bg-rose-100 text-rose-800'],
        'blue'   => ['note' => 'bg-sky-50 ring-sky-200/80',        'chip' => 'bg-sky-100 text-sky-800'],
        'green'  => ['note' => 'bg-emerald-50 ring-emerald-200/80','chip' => 'bg-emerald-100 text-emerald-800'],
        'slate'  => ['note' => 'bg-slate-50 ring-slate-200',       'chip' => 'bg-slate-200 text-slate-700'],
    ];
    $swatch = fn (string $key): array => $palette[$key] ?? $palette['yellow'];
@endphp

<x-card class="p-6">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-base font-semibold text-slate-900">{{ __('Notes') }}</h2>
            <p class="text-xs text-slate-400">{{ __('Internal notes about this job, anyone on the team can add one') }}</p>
        </div>
        <x-notes-button variant="button" :for="$job" :label="__('Add / manage notes')" />
    </div>

    <div class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
        @forelse ($job->notes as $jobNote)
            @php $s = $swatch($jobNote->color); @endphp
            <div wire:key="note-{{ $jobNote->id }}"
                 class="flex flex-col rounded-xl p-4 shadow-sm ring-1 {{ $s['note'] }} {{ $jobNote->is_pinned ? 'sm:col-span-2' : '' }}">
                <div class="flex items-center justify-between gap-2">
                    <div class="flex min-w-0 items-center gap-2">
                        <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-[10px] font-semibold {{ $s['chip'] }}">{{ $jobNote->authorInitials() }}</span>
                        <span class="truncate text-xs font-medium text-slate-700">{{ $jobNote->user?->name ?: __('Someone') }}</span>
                    </div>
                    @if ($jobNote->is_pinned)
                        <x-icon name="map-pin" class="h-3.5 w-3.5 shrink-0 text-slate-500" />
                    @endif
                </div>
                <p class="mt-2 whitespace-pre-line break-words text-sm leading-relaxed text-slate-700">{{ $jobNote->body }}</p>
                <span class="mt-3 text-[11px] text-slate-400" title="{{ $jobNote->created_at?->format('Y-m-d H:i') }}">{{ $jobNote->created_at?->diffForHumans() }}</span>
            </div>
        @empty
            <div class="sm:col-span-2 lg:col-span-3">
                <x-empty-state icon="sticky-note" :title="__('No notes yet')"
                    :message="__('Stick a note here for whoever picks this job up next.')"
                    class="border-0 bg-transparent" />
            </div>
        @endforelse
    </div>
</x-card>