@if(isset($engagementBreakdown) && isset($lowVolumeWarnings))
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
    @foreach(['engaged', 'not_engaged', 'actively_disengaged', 'unknown'] as $key)
        @php $data = $engagementBreakdown[$key]; @endphp
        @if($key !== 'unknown' || $data['count'] > 0)
            <div class="text-center p-4 rounded-lg" style="background-color: {{ $data['color'] }}15; border: 1px solid {{ $data['color'] }}30;">
                <div class="flex items-center justify-center space-x-1 mb-2">
                    @for($i = 0; $i < min(5, max(1, ceil($data['percentage'] / 20))); $i++)
                        <i class="fas fa-user" style="color: {{ $data['color'] }}"></i>
                    @endfor
                </div>
                @if($lowVolumeWarnings['show_percentages'])
                    <span class="text-3xl font-bold" style="color: {{ $data['color'] }}">{{ round($data['percentage']) }}%</span>
                @else
                    <span class="text-3xl font-bold" style="color: {{ $data['color'] }}">{{ $data['count'] }}</span>
                @endif
                <p class="text-sm font-medium mt-1" style="color: {{ $data['color'] }}">{{ $data['label'] }}</p>
                <p class="text-xs mt-2" style="color: {{ $data['color'] }}80">{{ $data['description'] }}</p>
                @if($lowVolumeWarnings['show_percentages'])
                    <p class="text-xs text-gray-500 mt-1">({{ $data['count'] }} employees)</p>
                @endif
            </div>
        @endif
    @endforeach
</div>
@endif