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

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

@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>
  }
}

@if (additionalInfo(); as content) {
  <app-store-section class="store-home__additional-info" title="Información adicional">
    <div class="store-home__additional-info-content" [innerHTML]="content"></div>
  </app-store-section>
}