@props([
    'statement',       // WitnessStatement (client + claim loaded)
    'progress',        // WitnessProgress
    'backUrl' => null,
])

@php
    $client = $statement->client;
    $claim = $statement->claim;
    $pct = $progress?->overallPercent() ?? 0;
    $status = $claim?->status?->display_name;
@endphp

<header class="witness-context-header border-bottom bg-body mb-3">
    <div class="d-flex flex-wrap align-items-center gap-3 py-2">
        @if($backUrl)
            <a href="{{ $backUrl }}" class="btn btn-sm btn-outline-secondary" wire:navigate aria-label="Back to client">
                <span class="mdi mdi-arrow-left" aria-hidden="true"></span>
            </a>
        @endif

        <div class="me-auto min-w-0">
            <div class="d-flex align-items-center gap-2 flex-wrap">
                <h1 class="h5 mb-0 text-truncate">{{ $client->fullName }}</h1>
                @if($status)
                    <span class="badge rounded-pill bg-secondary-subtle text-secondary-emphasis">{{ $status }}</span>
                @endif
            </div>
            <div class="text-muted small d-flex flex-wrap gap-3">
                <span><span class="mdi mdi-pound" aria-hidden="true"></span> {{ $client->displayId }}</span>
                @if($claim?->case_number)
                    <span><span class="mdi mdi-file-document-outline" aria-hidden="true"></span> Ref {{ $claim->case_number }}</span>
                @endif
                <span class="fw-semibold text-body">Witness Statement</span>
            </div>
        </div>

        <div class="text-end" style="min-width: 9rem;">
            <div class="d-flex justify-content-between small mb-1">
                <span class="text-muted">Completion</span>
                <span class="fw-bold" aria-label="{{ $pct }} percent complete">{{ $pct }}%</span>
            </div>
            <div class="progress" style="height: .4rem;" role="progressbar"
                 aria-label="Overall questionnaire completion" aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar {{ $progress?->isReadyToGenerate() ? 'bg-success' : 'bg-primary' }}" style="width: {{ $pct }}%"></div>
            </div>
        </div>
    </div>
</header>