{{-- Denison Sub-Index Breakdown --}}
@if(!empty($subIndexScores))
<div class="card">
    <div class="card-header">
        <h3 class="font-semibold text-secondary-900">Denison Sub-Index Breakdown</h3>
        <p class="text-sm text-gray-500 mt-1">Detailed scores across all 12 indices within the four cultural traits</p>
    </div>
    <div class="card-body">
        <div class="space-y-8">
            @foreach($subIndexScores as $trait)
                @php
                    $traitInterp = \App\Models\Category::getScoreInterpretation($trait['trait_score']);
                @endphp
                <div>
                    {{-- Trait header --}}
                    <div class="flex items-center justify-between mb-3 pb-2 border-b border-gray-200">
                        <div class="flex items-center">
                            <span class="text-xl mr-2">{{ $trait['category_icon'] }}</span>
                            <div>
                                <h4 class="font-semibold text-gray-900">{{ $trait['category_name'] }}</h4>
                                <span class="text-xs px-2 py-0.5 rounded-full" style="background-color: {{ $traitInterp['color'] }}15; color: {{ $traitInterp['color'] }}">
                                    {{ $traitInterp['label'] }}
                                </span>
                            </div>
                        </div>
                        <div class="text-right">
                            <span class="text-2xl font-bold" style="color: {{ $traitInterp['color'] }}">{{ round($trait['trait_score']) }}%</span>
                            <div class="text-xs text-gray-500">Trait Average</div>
                        </div>
                    </div>

                    {{-- Sub-indices --}}
                    <div class="space-y-3 pl-8">
                        @foreach($trait['indices'] as $idx)
                            @php
                                $idxInterp = \App\Models\Category::getScoreInterpretation($idx['favorability']);
                                $diffFromTrait = round($idx['favorability'] - $trait['trait_score'], 1);
                                $diffColor = $diffFromTrait >= 3 ? '#16a34a' : ($diffFromTrait <= -3 ? '#dc2626' : '#6b7280');
                            @endphp
                            <div class="flex items-center">
                                <div class="w-56">
                                    <span class="text-sm text-gray-700">{{ $idx['name'] }}</span>
                                </div>
                                <div class="flex-1 mx-4">
                                    <div class="relative">
                                        <div class="h-5 bg-gray-100 rounded-full overflow-hidden">
                                            <div class="h-full rounded-full transition-all duration-500" style="width: {{ $idx['favorability'] }}%; background-color: {{ $idxInterp['color'] }}">
                                            </div>
                                        </div>
                                        {{-- Trait average marker --}}
                                        <div class="absolute top-0 h-5" style="left: {{ $trait['trait_score'] }}%;">
                                            <div class="w-0.5 h-5 bg-gray-800 opacity-40"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="w-14 text-right">
                                    <span class="text-sm font-bold" style="color: {{ $idxInterp['color'] }}">{{ round($idx['favorability']) }}%</span>
                                </div>
                                <div class="w-14 text-right">
                                    <span class="text-xs" style="color: {{ $diffColor }}">
                                        {{ $diffFromTrait >= 0 ? '+' : '' }}{{ $diffFromTrait }}
                                    </span>
                                </div>
                                <div class="w-16 text-right">
                                    <span class="text-xs text-gray-400">x={{ $idx['mean'] }}</span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Legend --}}
        <div class="mt-6 pt-4 border-t border-gray-100 flex items-center space-x-6 text-xs text-gray-500">
            <span>Favorability = % rating 4-5 on 5-point scale</span>
            <span>|</span>
            <span>Vertical line = trait average</span>
            <span>|</span>
            <span>+/- = difference from trait average</span>
            <span>|</span>
            <span>x = mean score (out of 5)</span>
        </div>
    </div>
</div>
@endif