@if (isset($verifiedSightings) && $verifiedSightings->isNotEmpty())
    <section class="theme-card p-5 sm:p-6">
        <div class="mb-4">
            <h2 class="text-lg font-semibold text-[var(--theme-text)]">{{ __('messages.verified_sightings_title') }}</h2>
            <p class="text-sm theme-inline-muted">{{ __('messages.verified_sightings_subtitle') }}</p>
        </div>

        <div class="space-y-3">
            @foreach ($verifiedSightings as $sighting)
                <article class="theme-surface-panel p-4 space-y-2">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <span class="theme-chip">{{ __('messages.sighting_status_verified') }}</span>
                        <span class="text-xs theme-inline-muted">
                            {{ $sighting->sighted_at?->format('Y-m-d H:i') ?: ($sighting->created_at?->format('Y-m-d H:i') ?? '-') }}
                        </span>
                    </div>
                    <p class="text-xs theme-inline-muted">{{ __('messages.sighting_location') }}</p>
                    <p class="text-sm text-[var(--theme-text)]">{{ $sighting->sighting_location ?: '-' }}</p>
                    <p class="text-xs theme-inline-muted">{{ __('messages.report_note') }}</p>
                    <p class="text-sm text-[var(--theme-text)]">{{ $sighting->report_note }}</p>
                </article>
            @endforeach
        </div>
    </section>
@endif