@if (tenant()?.main_carousel_images; as mainCarouselImages) {
  @if (mainCarouselImages.length) {
    <app-main-carousel
      class="store-home__main-carousel"
      [images]="mainCarouselImages"
      ariaLabel="Imágenes destacadas de la tienda"
      (firstImageReady)="mainCarouselReady.set(true)"
    />
  }
}

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

@if (error()) {
  <p class="alert text-center mb-0 store-home__alert-error">{{ error() }}</p>
} @else if (loading()) {
  <p class="alert alert-light border text-center mb-0">Cargando productos...</p>
} @else if (!catalog().length) {
  <p class="alert alert-light border text-center mb-0">
    No hay productos disponibles en este momento.
  </p>
} @else {
  @for (group of catalog(); track group.id) {
    <app-store-section [title]="group.title">
      <app-product-list
        [layout]="group.layout"
        [groupLayout]="group.group_layout"
        [items]="group.items"
        [loading]="isGroupLoading(group.id)"
        [loadImages]="!hasMainCarouselImages() || mainCarouselReady()"
        (buy)="onBuyProduct($event)"
        (addToCart)="onAddToCart($event)"
        (pageChange)="onPageChange(group.id, $event)"
      />
    </app-store-section>
  }
}