@php
    $concepts = [
        [
            'n' => 1, 'name' => 'Three-column workspace', 'route' => 'clients.witness.concept.workspace',
            'explanation' => 'Evidence & exhibits on the left, the questionnaire in the centre, and the conversion/actions rail on the right — everything visible at once, closely mirroring the reference screenshot.',
            'workflow' => 'Pick a section from the centre tab strip, answer questions with suggestions inline, glance left to add exhibits, and generate from the right rail without ever changing page.',
            'strengths' => ['Nothing is hidden — evidence, answers and actions co-exist', 'Fast for experienced handlers', 'Matches the existing platform mental model', 'Minimal navigation cost between answer and source'],
            'weaknesses' => ['Dense on first exposure', 'Three columns collapse to a long scroll on mobile', 'Less guidance for occasional users'],
            'best' => 'Day-to-day drafting by experienced case handlers on a desktop.',
            'risks' => 'Low. Highest surface area, so the most cross-component interaction to test. Sticky columns need care on mid-width screens.',
            'recommended' => true,
        ],
        [
            'n' => 2, 'name' => 'Guided step-by-step builder', 'route' => 'clients.witness.concept.builder',
            'explanation' => 'A linear wizard: one questionnaire group per step, a progress stepper, and a dedicated review-and-generate final step.',
            'workflow' => 'Move Next/Back through the nine groups; each step surfaces its suggestions; the final step summarises outstanding issues before allowing generation.',
            'strengths' => ['Very low cognitive load', 'Excellent on mobile / during a live client interview', 'Hard to miss a section', 'Natural fit for reading questions aloud'],
            'weaknesses' => ['Slow for power users who want to jump around', 'Comparing an answer with distant evidence needs scrolling within a step', 'Linear model fights non-linear real interviews'],
            'best' => 'Telephone/in-person statement-taking and mobile use.',
            'risks' => 'Low. Step state must survive validation; skipping ahead must not lose data (handled — answers persist per field).',
            'recommended' => false,
        ],
        [
            'n' => 3, 'name' => 'Document-first split view', 'route' => 'clients.witness.concept.split',
            'explanation' => 'A source-document viewer sits beside the editable statement. Clicking an evidence item focuses its page in the viewer.',
            'workflow' => 'Read the source on the left, draft on the right, exhibit a page in one click, and trace every answer back to the document it came from.',
            'strengths' => ['Best traceability from answer to source', 'Ideal when accuracy against records matters most', 'Reduces context-switching to the Evidence Review page'],
            'weaknesses' => ['Two panes are cramped below ~1200px', 'Inline PDF preview depends on the browser', 'Questionnaire overview is secondary'],
            'best' => 'High-scrutiny drafting where wording must match records exactly.',
            'risks' => 'Medium. Relies on inline document rendering (route documents.raw) and per-item focus; the iframe/PDF path needs cross-browser checking.',
            'recommended' => false,
        ],
        [
            'n' => 4, 'name' => 'Review dashboard', 'route' => 'clients.witness.concept.dashboard',
            'explanation' => 'Organised around outstanding work rather than questionnaire order: KPI tiles for required-outstanding, awaiting-review, conflicts, missing evidence and completion, each opening a triage list.',
            'workflow' => 'Start from the biggest problem tile, work the triage list, drill into the exact question or suggestion, then generate when every tile is green.',
            'strengths' => ['Surfaces exactly what is blocking generation', 'Great for QA and sign-off', 'Confidence/severity visible up front', 'Answers “is this ready?” instantly'],
            'weaknesses' => ['Not a natural first-draft surface', 'Assumes answers already exist to triage', 'Less linear for a cold start'],
            'best' => 'Supervisor QA and the final readiness check before generating.',
            'risks' => 'Low–medium. Depends on the accuracy of the progress/validation computation, which every concept shares.',
            'recommended' => false,
        ],
    ];
@endphp

<div class="witness-design-compare">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
        <div>
            <h3 class="mb-1">Concept comparison &amp; recommendation</h3>
            <p class="text-muted mb-0">How the four Witness Statement concepts compare, and which to take to production.</p>
        </div>
        <a href="{{ route('clients.witness.design', $client) }}" class="btn btn-outline-secondary" wire:navigate>
            <span class="mdi mdi-arrow-left" aria-hidden="true"></span> Back to concepts
        </a>
    </div>

    {{-- Recommendation up top --}}
    <div class="card border-success shadow-sm mb-4">
        <div class="card-body">
            <h5 class="card-title text-success-emphasis">
                <span class="mdi mdi-trophy-outline" aria-hidden="true"></span>
                Recommended: Concept 1 — Three-column workspace
            </h5>
            <p class="mb-2">
                It matches the reference screenshot and the platform's existing three-column client pages, so it needs
                the least re-learning. Crucially it keeps <strong>evidence, the answer being written, and the source
                reference in view together</strong>, which is the core value of this feature — traceability from a
                statement answer back to its evidence — without paging between screens.
            </p>
            <p class="mb-0">
                Recommendation: ship Concept 1 as the default tab and <strong>fold Concept 4's readiness triage into its
                action rail</strong> (the "outstanding issues" summary) for a pre-generation check. Keep Concept 2
                available as a focused/mobile interview mode and Concept 3 for document-heavy claims. All four already
                share one backend, so offering more than one is cheap.
            </p>
        </div>
    </div>

    <div class="row g-3">
        @foreach($concepts as $c)
            <div class="col-12 col-xl-6">
                <div class="card border-0 shadow-sm h-100 {{ $c['recommended'] ? 'border-start border-4 border-success' : '' }}">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <h5 class="mb-0">Concept {{ $c['n'] }} — {{ $c['name'] }}</h5>
                            @if($c['recommended'])<span class="badge bg-success">Recommended</span>@endif
                        </div>

                        <p class="small text-muted">{{ $c['explanation'] }}</p>

                        <h6 class="fw-semibold small text-uppercase text-muted mt-3 mb-1">Main workflow</h6>
                        <p class="small mb-2">{{ $c['workflow'] }}</p>

                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="fw-semibold small text-uppercase text-success-emphasis mt-2 mb-1">Strengths</h6>
                                <ul class="small ps-3 mb-2">
                                    @foreach($c['strengths'] as $s)<li>{{ $s }}</li>@endforeach
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <h6 class="fw-semibold small text-uppercase text-danger-emphasis mt-2 mb-1">Weaknesses</h6>
                                <ul class="small ps-3 mb-2">
                                    @foreach($c['weaknesses'] as $w)<li>{{ $w }}</li>@endforeach
                                </ul>
                            </div>
                        </div>

                        <p class="small mb-1"><strong>Best use case:</strong> {{ $c['best'] }}</p>
                        <p class="small mb-3"><strong>Risks / complexity:</strong> {{ $c['risks'] }}</p>

                        <a href="{{ route($c['route'], $client) }}" class="btn btn-sm btn-outline-primary" wire:navigate>
                            <span class="mdi mdi-open-in-app" aria-hidden="true"></span> Open Concept {{ $c['n'] }}
                        </a>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>