{{ $articleType := .Params.type | default "life" }}
{{ $typeConfig := .Site.Params.articleTypes }}
{{ $typeData := index $typeConfig $articleType }}
{{ $excerpt := .Params.excerpt | default .Description | default .Summary }}

{{ $imageURL := "" }}
{{ $useDefaultThumbnail := false }}
{{ if .Params.image }}
  {{ $resource := .Resources.GetMatch .Params.image }}
  {{ if $resource }}
    {{ $imageURL = $resource.RelPermalink }}
  {{ else }}
    {{ $imageURL = .Params.image }}
  {{ end }}
{{ else }}
  {{ $useDefaultThumbnail = true }}
{{ end }}

<article class="card group bg-bg">
  <!-- Thumbnail -->
  {{ if or $imageURL $useDefaultThumbnail }}
  <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1">
    {{ if $useDefaultThumbnail }}
    <picture>
      <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" />
      <img
        src="/images/default_thumbnail_dark.png"
        alt="{{ .Title }}"
        class="card-image group-hover:scale-105 transition-transform duration-200"
        loading="lazy"
      />
    </picture>
    {{ else }}
    <img
      src="{{ $imageURL }}"
      alt="{{ .Title }}"
      class="card-image group-hover:scale-105 transition-transform duration-200"
      loading="lazy"
    />
    {{ end }}
    <!-- Type badge pill overlay -->
    {{ if $typeData }}
    <div
      class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity"
      style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"
    >
      {{ i18n $articleType }}
    </div>
    {{ end }}
  </a>
  {{ end }}

  <!-- Content -->
  <div class="card-body">
    <!-- Pinned badge -->
    {{ if .Params.pinned }}
    <div class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};">
      📌 PINNED
    </div>
    {{ end }}

    <!-- Title -->
    <h3 class="text-xl font-semibold">
      <a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors">
        {{ .Title }}
      </a>
    </h3>

    <!-- Metadata -->
    <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim">
      <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}">
        {{ .PublishDate.Format "Jan 2, 2006" }}
      </time>
    </div>

    <!-- Excerpt -->
    {{ if $excerpt }}
    <p class="text-text-dim text-sm line-clamp-3 leading-relaxed">
      {{ $excerpt | plainify }}
    </p>
    {{ end }}

    <!-- CTA Button -->
    <a
      href="{{ .RelPermalink }}"
      class="btn btn-sm mt-2"
    >
      {{ i18n "readMore" }}
      <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i>
    </a>
  </div>
</article>