<section class="section food-menu" id="food-menu">
  <div class="container">

    <p class="section-subtitle">.</p>

    <h2 class="h2 section-title">
      Todo en {{ categoria }}  AJ<span class="cybersec">System</span>
    </h2>

    <p class="section-text">
      Ven y conoce todo el mundo en tecnología de {{ categoria }}.
    </p>


    <ul class="food-menu-list">
        <li *ngFor="let producto of paginatedProducts">
        <!-- Card SVG como la que ya hicimos -->
            <div class="food-menu-card">

          <!-- Imagen con clipPath SVG -->
            <div class="card-banner">
                <svg class="w-100" width="300" viewBox="0 0 300 400"
                 xmlns="http://www.w3.org/2000/svg"
                 xmlns:xlink="http://www.w3.org/1999/xlink">
              <title>{{ producto.nombre }} - {{ producto.descripcion }}</title>
              <defs>
                <clipPath id="rounded-rect">
                  <rect x="0" y="0" width="300" height="400" rx="20" ry="20" />
                </clipPath>
              </defs>
              <image 
                width="300" 
                height="400" 
                [attr.xlink:href]="producto.imagen"
                clip-path="url(#rounded-rect)"
                preserveAspectRatio="xMidYMid slice" />
            </svg>

            <button class="btn food-menu-btn">Comprar</button>
          </div>

          <!-- Categoría y estrellas -->
          <div class="wrapper">
            <p class="category">Celulares</p>
            <div class="rating-wrapper">
              <ion-icon name="cloud" *ngFor="let star of [1,2,3,4,5]"></ion-icon>
            </div>
          </div>

          <!-- Título -->
          <h3 class="h3 card-title">{{ producto.nombre }} - {{ producto.descripcion }}</h3>

          <!-- Precio -->
          <div class="price-wrapper">
            <p class="price-text">Valor:</p>
            <data class="price">{{ producto.precio | currency:'COP' }}</data>
            <del class="del">{{ (producto.precio * 1.25) | currency:'COP' }}</del>
          </div>

        </div>
  </li>
</ul>

<!-- Paginación -->
    <div class="pagination">
      <button 
        *ngFor="let page of [].constructor(totalPages); let i = index"
        [ngClass]="{'active': currentPage === (i + 1)}"
        (click)="setPage(i + 1)">
        {{ i + 1 }}
      </button>
    </div>

  </div>
</section>