{{--
  <x-deluxe-funnel :stages="$funnel" title="Funnel de Conversión" icon="bi-funnel-fill" />

  Props:
    - stages: array<array{label:string, count:int, color:string, icon:string}>
    - title:  ?string — título del card (si null, no muestra header)
    - icon:   string — icono del título
    - height: int — altura de las bars (px) default 12

  Pattern: command.blade.php líneas 230-254
--}}
@props([
    'stages' => [],
    'title' => null,
    'icon' => 'bi-funnel-fill',
    'height' => 12,
])

@php
    $counts = array_column($stages, 'count');
    $maxCount = !empty($counts) ? max(1, max($counts)) : 1;
@endphp

<div class="card border-0 shadow-sm h-100" style="border-radius: 14px;">
    @if($title)
        <div class="card-header border-0 pt-5 pb-3">
            <h3 class="card-title fw-bolder fs-3 m-0">
                <i class="{{ str_starts_with($icon, 'bi-') ? 'bi' : 'fa-solid' }} {{ $icon }} text-primary me-2"></i>{{ $title }}
            </h3>
        </div>
    @endif
    <div class="card-body {{ $title ? 'pt-2' : '' }}">
        @if(empty($stages))
            <div class="text-center py-5 text-gray-500 fs-7">Sin datos</div>
        @else
            @foreach($stages as $stage)
                @php
                    $pct = ($stage['count'] / $maxCount) * 100;
                    $stageIcon = $stage['icon'] ?? 'bi-circle';
                    $stageColor = $stage['color'] ?? 'secondary';
                @endphp
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <span class="text-gray-700 fs-7 fw-bold">
                            <i class="{{ str_starts_with($stageIcon, 'bi-') ? 'bi' : 'fa-solid' }} {{ $stageIcon }} text-{{ $stageColor }} me-1"></i>{{ $stage['label'] }}
                        </span>
                        <span class="fw-bolder text-dark">{{ $stage['count'] }}</span>
                    </div>
                    <div class="progress" style="height: {{ $height }}px; border-radius: 10px;">
                        <div class="progress-bar bg-{{ $stageColor }}"
                             style="width: {{ $pct }}%; border-radius: 10px; transition: width 0.6s ease;"></div>
                    </div>
                </div>
            @endforeach
        @endif
    </div>
</div>