---
/**
 * ProductTile.astro
 * ---------------------------------------------------------------------------
 * Compact storefront tile for a product line: the first example image (from the
 * product's `images` array), the title, the summary, and a "View details" hint.
 * Wraps the whole tile in a link to the product page.
 *
 * The full image carousel lives on the product page; this is just the storefront
 * teaser. ProductCard.astro (specs-only) is used on the detail pages.
 */
import Icon from '@components/Icon.astro';
import type { Product } from '@data/store-products';

interface Props {
  product: Product;
  href: string;
}

const { product, href } = Astro.props;
const cover = product.images[0];
---

<a
  href={href}
  class="group card-interactive flex flex-col gap-4 rounded-2xl border p-4"
  style="border-color: var(--color-border); background: var(--color-surface-raised);"
>
  {cover && (
    <figure class="relative w-full overflow-hidden rounded-xl" style="border: 1px solid var(--color-border);">
      <img
        src={cover.src}
        alt={cover.alt}
        loading="lazy"
        decoding="async"
        class="aspect-[4/3] w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
      />
      {product.images.length > 1 && (
        <span
          class="pointer-events-none absolute right-2 top-2 inline-flex items-center gap-1 rounded-full px-2 py-1 font-mono text-xs"
          style="color: var(--color-cream); background: rgba(7,10,28,0.6);"
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
            <rect x="3" y="5" width="18" height="14" rx="2" />
            <circle cx="9" cy="12" r="1.6" fill="currentColor" stroke="none" />
            <circle cx="15" cy="12" r="1.6" fill="currentColor" stroke="none" />
          </svg>
          {product.images.length}
        </span>
      )}
    </figure>
  )}

  <div class="flex flex-col gap-2">
    <span class="inline-flex items-center gap-2 font-sans text-lg font-bold" style="color: var(--color-text);">
      <Icon name={product.icon} class="h-5 w-5" style="color: var(--color-accent);" />
      {product.title}
    </span>
    <p class="text-sm leading-relaxed" style="color: var(--color-text-muted);">{product.summary}</p>
    <span class="inline-flex items-center gap-1 text-sm font-medium transition-colors" style="color: var(--color-accent);">
      View details
      <Icon name="arrow-right" class="h-4 w-4 transition-transform group-hover:translate-x-0.5" />
    </span>
  </div>
</a>