---
import type { Sneaker } from '../data/mock';

function getDiscountPercent(sneaker: { originalPrice: number; lowestPrice: number }): number {
  return Math.round(((sneaker.originalPrice - sneaker.lowestPrice) / sneaker.originalPrice) * 100);
}

interface Props {
  sneaker: Sneaker;
  index?: number;
}

const { sneaker, index = 0 } = Astro.props;
const discount = getDiscountPercent(sneaker);
---

<a
  href={`/sneakers/${sneaker.slug}`}
  class:list={[
    'group relative flex flex-col overflow-hidden rounded-2xl border border-border/50 bg-bg-card transition-all duration-300 hover:-translate-y-1 hover:border-accent/30 hover:shadow-lg hover:shadow-accent/5',
    'animate-fade-up',
    `stagger-${Math.min(index + 1, 8)}`
  ]}
  data-analytics-item-id={sneaker.id}
  data-analytics-item-name={`${sneaker.brand} ${sneaker.name}`}
  data-analytics-item-brand={sneaker.brand}
  data-analytics-price={sneaker.lowestPrice}
  onclick="(function(el){window.dataLayer=window.dataLayer||[];window.dataLayer.push({ecommerce:null});window.dataLayer.push({event:'select_item',ecommerce:{items:[{item_id:el.dataset.analyticsItemId,item_name:el.dataset.analyticsItemName,item_brand:el.dataset.analyticsItemBrand,price:parseFloat(el.dataset.analyticsPrice)}]}})})(this)"
>
  <!-- Discount badge -->
  {discount > 0 && (
    <div class="absolute left-3 top-3 z-10 rounded-full bg-deal px-2.5 py-1 text-xs font-bold text-white">
      -{discount}%
    </div>
  )}

  <!-- Image -->
  <div class="relative aspect-square w-full shrink-0 overflow-hidden bg-bg-elevated">
    <img
      src={sneaker.image}
      alt={`${sneaker.brand} ${sneaker.name}`}
      class="h-full w-full object-contain transition-transform duration-500 group-hover:scale-110"
      loading="lazy"
    />
    <!-- Hover glow -->
    <div class="absolute inset-0 bg-gradient-to-t from-accent/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
  </div>

  <!-- Info -->
  <div class="flex flex-1 flex-col gap-2 p-4">
    <span class="text-[11px] font-bold uppercase tracking-widest text-text-muted">{sneaker.brand}</span>
    <h3 class="font-semibold leading-tight text-text transition-colors group-hover:text-accent">{sneaker.name}</h3>
    <p class="text-xs text-text-muted">{sneaker.colorway}</p>

    <div class="mt-auto flex items-baseline gap-2 pt-2">
      <span class="text-lg font-black text-accent">vanaf €{sneaker.lowestPrice.toFixed(2).replace('.', ',')}</span>
      {sneaker.originalPrice > sneaker.lowestPrice && (
        <span class="text-sm text-text-muted line-through">€{sneaker.originalPrice.toFixed(2).replace('.', ',')}</span>
      )}
    </div>
    <div class="text-[11px] text-text-muted">{sneaker.offers.filter(o => o.inStock).length} shops</div>
  </div>
</a>