<div
  class="product-card border rounded shadow-sm bg-white overflow-hidden d-flex flex-column h-100"
>
  <!-- Image section -->
  <div class="product-card__image-container position-relative bg-light">
    @if (imageUrl(); as imageSrc) {
      <img
        [ngSrc]="imageSrc"
        [alt]="title()"
        [priority]="imagePriority()"
        fill
        sizes="(min-width: 1200px) 25vw, (min-width: 768px) 50vw, 100vw"
        class="product-card__image w-100 h-100 object-fit-cover"
      />
    } @else {
      <div
        class="product-card__image-placeholder w-100 h-100 d-flex align-items-center justify-content-center bg-light text-muted"
      >
        <i class="fa-solid fa-image fa-2x"></i>
      </div>
    }

    <!-- Discount badge in top right -->
    @if (discount() && discount()! > 0) {
      <span
        class="product-card__discount-badge position-absolute top-0 end-0 bg-primary text-white px-2 py-1"
      >
        -{{ discount() }}%
      </span>
    }
  </div>

  <!-- Content section -->
  <div class="product-card__body p-3 d-flex flex-column align-items-center text-center flex-grow-1">
    <!-- Product Title -->
    <h3 class="product-card__title text-uppercase text-black mb-4">{{ title() }}</h3>

    <!-- Prices Area -->
    <div class="product-card__prices d-flex align-items-center justify-content-center gap-2">
      <!-- Discounted (computado) Price -->
      <span class="product-card__price-discounted text-primary">{{
        formattedDiscountedPrice()
      }}</span>

      <!-- Original strikethrough Price (only if discount exists) -->
      @if (discount() && discount()! > 0) {
        <span class="product-card__price-original text-decoration-line-through">{{
          formattedOriginalPrice()
        }}</span>
      }
    </div>

    <!-- Transfer Price Info -->
    <div class="product-card__price-transfer mb-4">
      <span class="product-card__price-transfer-value">{{ formattedTransferPrice() }}</span>
      <span class="product-card__price-transfer-label"> con transferencia</span>
    </div>

    <!-- Purchase Action Button -->
    <div class="product-card__action mt-auto w-100">
      <app-button variant="primary" class="w-100" (click)="buy.emit()">
        {{ buttonText() }}
      </app-button>
    </div>
  </div>
</div>
