@if(isset($planes) && $planes->count() > 0)
  <div class="row justify-content-center mb-5">
    @foreach($planes as $plan)
      <div class="col-lg-4 col-md-6 mb-4">
        <div class="card h-100 border-0 shadow-sm pricing-card @if($plan->nombre === 'Popular') shadow-lg position-relative @endif">
          @if($plan->nombre === 'Popular')
            <div class="position-absolute top-0 start-50 translate-middle">
              <span class="badge bg-primary fs-6 px-3 py-2">Más Popular</span>
            </div>
          @endif
          <div class="card-body p-4">
            <div class="text-center mb-4">
              <h4 class="card-title @if($plan->nombre === 'Popular') text-primary @endif">{{ $plan->nombre }}</h4>
              <div class="pricing-header">
                @if($plan->precio_mensual > 0)
                  <span class="display-4 fw-bold text-primary">S/ {{ number_format($plan->precio_mensual, 0) }}</span>
                  <span class="text-muted">/año</span>
                @else
                  <span class="display-4 fw-bold text-success">Gratis</span>
                @endif
              </div>
              <p class="text-muted">{{ $plan->descripcion }}</p>
            </div>
            
            <ul class="list-unstyled mb-4">
              @if($plan->caracteristicas && count($plan->caracteristicas) > 0)
                @foreach($plan->caracteristicas as $caracteristica)
                  <li class="mb-2">
                    <i class="fas fa-check text-success me-2"></i>
                    {{ $caracteristica }}
                  </li>
                @endforeach
              @else
                <li class="mb-2 text-muted">
                  <i class="fas fa-info-circle me-2"></i>
                  No hay características definidas
                </li>
              @endif
            </ul>
            
            <div class="text-center">
              <a href="{{ route('register') }}?plan={{ $plan->public_id }}" 
                 class="btn @if($plan->nombre === 'Popular') btn-primary @else btn-outline-primary @endif w-100">
                Comenzar Prueba Gratuita
              </a>
            </div>
          </div>
        </div>
      </div>
    @endforeach
  </div>
@else
  <!-- Fallback si no hay planes disponibles -->
  <div class="row justify-content-center mb-5">
    <div class="col-12">
      <div class="alert alert-info text-center">
        <i class="fas fa-info-circle me-2"></i>
        Los planes de precios no están disponibles en este momento. Por favor, contacta con nuestro equipo de ventas.
      </div>
    </div>
  </div>
@endif