{{-- Benchmark Comparison Section --}}
@if(!empty($benchmarkComparison))
<div class="card">
    <div class="card-header">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="font-semibold text-secondary-900">Benchmark Comparison</h3>
                <p class="text-sm text-gray-500 mt-1">How your scores compare to industry benchmarks</p>
            </div>
            @if(!empty($benchmarkSets) && count($benchmarkSets) > 1)
            <div class="flex items-center space-x-2">
                <span class="text-xs text-gray-500">Benchmark:</span>
                @foreach($benchmarkSets as $setKey => $setLabel)
                    <a href="{{ request()->fullUrlWithQuery(['benchmark' => $setKey]) }}"
                       class="text-xs px-3 py-1 rounded-full {{ (request()->get('benchmark', 'global') === $setKey) ? 'bg-blue-100 text-blue-800 font-semibold' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                        {{ $setLabel }}
                    </a>
                @endforeach
            </div>
            @endif
        </div>
    </div>
    <div class="card-body">
        <div class="space-y-5">
            @foreach($benchmarkComparison as $slug => $data)
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <div class="flex items-center">
                            <span class="text-xl mr-2">{{ $data['category_icon'] }}</span>
                            <span class="text-sm font-medium text-gray-800">{{ $data['category_name'] }}</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <span class="text-sm font-bold" style="color: {{ $data['color'] }}">
                                {{ $data['icon'] }} {{ $data['diff_text'] }}
                            </span>
                            <span class="text-xs px-2 py-1 rounded-full" style="background-color: {{ $data['color'] }}15; color: {{ $data['color'] }}">
                                {{ $data['label'] }}
                            </span>
                        </div>
                    </div>
                    {{-- Visual bar with benchmark marker --}}
                    <div class="relative">
                        <div class="h-6 bg-gray-100 rounded-full overflow-hidden">
                            @php
                                $scoreColor = \App\Models\Category::getScoreInterpretation($data['score'])['color'];
                            @endphp
                            <div class="h-full rounded-full transition-all duration-500" style="width: {{ $data['score'] }}%; background-color: {{ $scoreColor }}">
                            </div>
                        </div>
                        {{-- Benchmark marker line --}}
                        <div class="absolute top-0 h-6 flex flex-col items-center" style="left: {{ $data['benchmark_value'] }}%;">
                            <div class="w-0.5 h-6 bg-gray-800"></div>
                        </div>
                        {{-- Top quartile marker --}}
                        @if($data['top_quartile'])
                        <div class="absolute top-0 h-6 flex flex-col items-center" style="left: {{ $data['top_quartile'] }}%;">
                            <div class="w-0.5 h-6 bg-green-400 opacity-50" style="border-left: 1px dashed #22c55e;"></div>
                        </div>
                        @endif
                    </div>
                    {{-- Labels --}}
                    <div class="flex items-center justify-between mt-1">
                        <div class="flex items-center space-x-4 text-xs text-gray-500">
                            <span><strong class="text-gray-800">{{ round($data['score']) }}%</strong> Your Score</span>
                            <span>|</span>
                            <span><strong class="text-gray-600">{{ $data['benchmark_value'] }}%</strong> {{ $benchmarkComparison[$slug]['benchmark_label'] ?? 'Benchmark' }}</span>
                            @if($data['top_quartile'])
                                <span>|</span>
                                <span class="text-green-600">{{ $data['top_quartile'] }}% Top Quartile</span>
                            @endif
                        </div>
                        @if($data['quartile'] === 'top')
                            <span class="text-xs font-semibold text-green-600">Top 25%</span>
                        @elseif($data['quartile'] === 'bottom')
                            <span class="text-xs font-semibold text-red-600">Bottom 25%</span>
                        @endif
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Source --}}
        @php $firstSource = collect($benchmarkComparison)->pluck('source')->filter()->first(); @endphp
        @if($firstSource)
            <div class="mt-4 pt-3 border-t border-gray-100">
                <p class="text-xs text-gray-400">Source: {{ $firstSource }}</p>
            </div>
        @endif
    </div>
</div>
@endif