{{/* Track Card Component */}}
{{- $hasVideo := .Resources.GetMatch "preview.*" -}}
<article
  class="track-card rounded-lg overflow-hidden group transition-all duration-300"
  :class="hovering ? '' : 'grayscale'"
  x-data="{ hovering: false }"
  @mouseenter="hovering = true; $refs.video?.play().catch(() => {})"
  @mouseleave="hovering = false; if ($refs.video) { $refs.video.pause(); $refs.video.currentTime = 0; }"
>
  {{/* Cover Image/Video */}}
  <a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
    {{- with .Resources.GetMatch "cover.*" }}
      {{- $img := .Resize "600x webp q85" }}
      <img
        src="{{ $img.RelPermalink }}"
        alt="{{ $.Title }}"
        class="track-card__cover w-full h-full object-cover"
        :class="{ 'opacity-0': hovering && $refs.video }"
        loading="lazy"
        decoding="async"
      >
    {{- else }}
      <div class="w-full h-full bg-surface-2 flex items-center justify-center">
        <svg class="w-12 h-12 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
        </svg>
      </div>
    {{- end }}

    {{/* Video preview on hover */}}
    {{- with .Resources.GetMatch "preview.*" }}
    <video
      x-ref="video"
      src="{{ .RelPermalink }}"
      class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
      :class="hovering ? 'opacity-100' : 'opacity-0'"
      muted
      loop
      playsinline
      preload="metadata"
    ></video>
    {{- end }}

    {{/* Play overlay - only show if NO video exists */}}
    {{- if not $hasVideo }}
    <div class="absolute inset-0 bg-surface-0/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
      <div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform">
        <svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"/>
        </svg>
      </div>
    </div>
    {{- end }}
  </a>

  {{/* Info */}}
  <div class="p-4">
    <a href="{{ .Permalink }}" class="block">
      <h3 class="font-medium truncate group-hover:text-accent transition-colors">
        {{ .Title }}
      </h3>
    </a>

    <div class="flex items-center justify-between mt-2 text-sm text-text-muted">
      <time datetime="{{ .Date.Format "2006-01-02" }}">
        {{ .Date.Format "2006.01.02" }}
      </time>
      {{- with .Params.duration }}
      <span class="tabular-nums">{{ . }}</span>
      {{- end }}
    </div>

    {{- with .Params.genre }}
    <span class="inline-block mt-3 px-2 py-1 text-xs bg-surface-2 text-text-secondary rounded">
      {{ . }}
    </span>
    {{- end }}
  </div>
</article>