{{--
    Vista TIERS — espejo del catálogo según docs/bewpro2.0/product-readiness.

    4 columnas alineadas con los 4 tiers canónicos:
      1. Production Ready (deluxe)
      2. Casi Listo (polish)
      3. Infraestructura OK (critical leve)
      4. Solicitado / Futuro

    + sidebar derecho: stats globales + demanda detectada + accesos rápidos.
--}}

<div class="row g-3 mb-3">
    <div class="col-md-2 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-primary">{{ $data['totals']['cores'] }}</div>
            <div class="fs-8 text-muted">Cores empaquetados</div>
        </div></div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-info">{{ $data['totals']['variants'] }}</div>
            <div class="fs-8 text-muted">Variantes shop</div>
        </div></div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-success">{{ count($data['tiers']['tier1']['items']) }}</div>
            <div class="fs-8 text-muted">TIER 1 ready</div>
        </div></div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-warning">{{ count($data['tiers']['tier2']['items']) }}</div>
            <div class="fs-8 text-muted">TIER 2 polish</div>
        </div></div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-danger">{{ count($data['tiers']['tier3']['items']) }}</div>
            <div class="fs-8 text-muted">TIER 3 infra-only</div>
        </div></div>
    </div>
    <div class="col-md-2 col-6">
        <div class="card border-0 bg-light"><div class="card-body p-3 text-center">
            <div class="fs-2 fw-bold text-info">{{ $data['totals']['demand_count'] }}</div>
            <div class="fs-8 text-muted">Demand signals</div>
        </div></div>
    </div>
</div>

<div class="row g-3">
    {{-- Tier columns (4) --}}
    @foreach($data['tiers'] as $tier)
        <div class="col-xl-3 col-lg-6">
            <div class="factory-tier border">
                <div class="factory-tier-head tone-{{ $tier['tone'] }}">
                    <div class="d-flex justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <h6>{{ $tier['label'] }}</h6>
                            <div class="desc">{{ $tier['desc'] }}</div>
                        </div>
                        <div class="count">{{ count($tier['items']) }}</div>
                    </div>
                </div>
                <div class="factory-tier-body">
                    @forelse($tier['items'] as $item)
                        @php
                            $url = $item['is_core']
                                ? route('reseller.factory.product.show', $item['slug'])
                                : route('reseller.factory.product.show', $item['slug']);
                            $barColor = match($tier['key']) {
                                'tier1' => '#198754',
                                'tier2' => '#ffc107',
                                'tier3' => '#dc3545',
                                'tier4' => '#0dcaf0',
                            };
                        @endphp
                        <a href="{{ $url }}" class="factory-item-card">
                            <div class="factory-item-slug">
                                <i class="fas fa-cube text-muted me-1 fs-9"></i>
                                <code>{{ $item['slug'] }}</code>
                                @if($item['variants'] > 0)
                                    <span class="badge bg-light text-gray-700 ms-1 fs-9">+{{ $item['variants'] }} var</span>
                                @endif
                            </div>
                            <div class="factory-item-meta">
                                @if($item['industry'])🏷 <strong>{{ $item['industry'] }}</strong>@endif
                                @if($item['demo']) · 🎨 <code>{{ $item['demo'] }}</code>@endif
                            </div>
                            <div class="factory-mini-bar">
                                <div style="width:{{ $item['health_pct'] }}%; background:{{ $barColor }};"></div>
                            </div>
                            <div class="factory-item-chips">
                                <span class="chip">{{ $item['health_pct'] }}%</span>
                                @if($item['missing'] > 0)<span class="chip warn">{{ $item['missing'] }} TODO</span>@endif
                                @if($item['stats']['total'] > 0)<span class="chip">🚀 {{ $item['stats']['total'] }} misiles</span>@endif
                                @if($item['stats']['launched'] > 0)<span class="chip ok">✓ {{ $item['stats']['launched'] }} live</span>@endif
                            </div>
                        </a>
                    @empty
                        <div class="text-center text-muted fs-8 py-3">
                            <i class="fas fa-circle-dashed"></i> Sin items
                        </div>
                    @endforelse
                </div>
            </div>
        </div>
    @endforeach
</div>

{{-- ════════ Sub-row: agrupaciones útiles + demanda ════════ --}}
<div class="row g-3 mt-1">

    {{-- Por industria --}}
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header border-0 pt-3 pb-2">
                <h6 class="fw-bold mb-0"><i class="fas fa-tag text-primary me-1"></i>Cobertura por industria</h6>
                <p class="text-muted fs-8 mb-0">Cores empaquetados por sector</p>
            </div>
            <div class="card-body py-2">
                @foreach($data['totals']['by_industry'] as $industry => $n)
                    <a href="{{ route('reseller.factory.index', ['view' => 'matrix']) }}#{{ $industry }}"
                       class="d-flex justify-content-between py-1 border-bottom text-decoration-none text-gray-900">
                        <span class="fs-7">🏷 {{ $industry }}</span>
                        <span class="badge bg-light text-gray-700">{{ $n }}</span>
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Por demo --}}
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-header border-0 pt-3 pb-2">
                <h6 class="fw-bold mb-0"><i class="fas fa-palette text-info me-1"></i>Cores por demo</h6>
                <p class="text-muted fs-8 mb-0">Cuántos productos comparten cada template visual</p>
            </div>
            <div class="card-body py-2" style="max-height: 240px; overflow-y: auto;">
                @foreach($data['totals']['by_demo'] as $demo => $n)
                    <div class="d-flex justify-content-between py-1 border-bottom">
                        <code class="fs-8">{{ $demo }}</code>
                        <span class="badge bg-light text-gray-700">{{ $n }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Demand signals --}}
    <div class="col-md-4">
        <div class="card h-100 border-warning">
            <div class="card-header border-0 pt-3 pb-2">
                <h6 class="fw-bold mb-0"><i class="fas fa-bullhorn text-warning me-1"></i>Demanda detectada</h6>
                <p class="text-muted fs-8 mb-0">Productos pedidos por misiles que aún NO existen</p>
            </div>
            <div class="card-body py-2">
                @forelse($data['demand'] as $d)
                    <a href="{{ route('reseller.factory.concept.create', ['suggested_slug' => $d['product_slug'], 'demand' => $d['total']]) }}"
                       class="d-flex justify-content-between align-items-center py-2 border-bottom text-decoration-none text-gray-900">
                        <div>
                            <div class="fw-semibold fs-7"><code>{{ $d['product_slug'] }}</code></div>
                            <div class="text-muted fs-9">{{ $d['total'] }} misil(es) lo piden</div>
                        </div>
                        <span class="btn btn-sm btn-light-warning fs-8">+ Capturar</span>
                    </a>
                @empty
                    <div class="text-center text-muted fs-7 py-3">
                        Sin demanda no-cubierta detectada.<br>
                        <span class="fs-8">Cargá misiles con product_slug para detectar gaps.</span>
                    </div>
                @endforelse
            </div>
        </div>
    </div>

</div>