@if (tenant()?.hero_config || tenant()?.event_config) {
  <app-hero-banner 
    [heroConfig]="tenant()?.hero_config"
    [eventConfig]="tenant()?.event_config"
  ></app-hero-banner>
}

<app-store-section title="Productos">
  <div class="d-grid gap-4">
    @if (error()) {
      <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
    } @else if (loading() && !productCards().length) {
      <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
    } @else if (!productCards().length) {
      <p class="alert alert-light border text-center mb-0">
        No hay productos disponibles en este momento.
      </p>
    } @else {
      <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-4">
        @for (product of productCards(); track product.id; let index = $index) {
          <div class="col">
            <app-product-column-with-image
              [title]="product.title"
              [originalPrice]="product.originalPrice"
              [discount]="product.discount"
              [transferPrice]="product.transferPrice"
              [imageUrl]="product.imageUrl"
              [imagePriority]="index < priorityImageCount"
              (buy)="onBuyProduct(product.id)"
            />
          </div>
        }
      </div>
    }

    @if (loading() && productCards().length) {
      <p class="alert alert-light border text-center mb-0 py-2">Actualizando productos...</p>
    }

    @if (totalPages() > 1) {
      <div class="d-flex justify-content-center">
        <app-paginator
          [page]="currentPage()"
          [totalPages]="totalPages()"
          [disabled]="loading()"
          (pageChange)="onPageChange($event)"
        />
      </div>
    }
  </div>
</app-store-section>