@php
    // If a Collection or array was passed accidentally, pick the first item.
    if (isset($art) && (is_array($art) || $art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection)) {
        $first = null;
        if (is_array($art)) {
            $first = reset($art);
        } elseif ($art instanceof Illuminate\Support\Collection || $art instanceof Illuminate\Database\Eloquent\Collection) {
            $first = $art->first();
        }
        if ($first) {
            $art = $first;
        }
    }

    $title = trim((string) ($art->name ?? $art->title ?? 'Untitled artwork'));
    $author = trim((string) ($art->uname ?? $art->author_name ?? $art->author ?? 'Skinbase'));
    $category = trim((string) ($art->category_name ?? $art->category ?? 'General'));
    $license = trim((string) ($art->license ?? 'Standard'));
    $resolution = trim((string) ($art->resolution ?? ((isset($art->width, $art->height) && $art->width && $art->height) ? ($art->width . '×' . $art->height) : '')));
    // Safe integer extractor: handle numeric, arrays, Collections, or relations
    $safeInt = function ($v, $fallback = 0) {
        if (is_numeric($v)) return (int) $v;
        if (is_array($v)) return count($v);
        if (is_object($v)) {
            // Eloquent Collections implement Countable and have count()
            if (method_exists($v, 'count')) return (int) $v->count();
            if ($v instanceof Countable) return (int) count($v);
        }
        return (int) $fallback;
    };

    $likes = $safeInt($art->likes ?? $art->favourites ?? 0);
    $downloads = $safeInt($art->downloads ?? $art->downloaded ?? 0);

    $img_src = (string) ($art->thumb ?? $art->thumbnail_url ?? '/images/placeholder.jpg');
    $img_srcset = (string) ($art->thumb_srcset ?? $art->thumbnail_srcset ?? $img_src);
    $img_avif_srcset = (string) ($art->thumb_avif_srcset ?? $img_srcset);
    $img_webp_srcset = (string) ($art->thumb_webp_srcset ?? $img_srcset);

    // Width/height may be stored directly or as a related object; handle safely
    $resolveDimension = function ($val, $fallback) {
        if (is_numeric($val)) return (int) $val;
        if (is_array($val)) {
            $v = reset($val);
            return is_numeric($v) ? (int) $v : (int) $fallback;
        }
        if (is_object($val)) {
            if (method_exists($val, 'first')) {
                $f = $val->first();
                if (is_object($f) && isset($f->width)) return (int) ($f->width ?: $fallback);
                if (is_object($f) && isset($f->height)) return (int) ($f->height ?: $fallback);
            }
            // Try numeric cast otherwise
            if (isset($val->width)) return (int) $val->width;
            if (isset($val->height)) return (int) $val->height;
        }
        return (int) $fallback;
    };

    $img_width = max(1, $resolveDimension($art->width ?? null, 800));
    $img_height = max(1, $resolveDimension($art->height ?? null, 600));

    $contentUrl = $img_src;
    $cardUrl = (string) ($art->url ?? '#');
@endphp

<article class="nova-card artwork" itemscope itemtype="https://schema.org/ImageObject">
    <meta itemprop="name" content="{{ $title }}">
    <meta itemprop="contentUrl" content="{{ $contentUrl }}">
    <meta itemprop="creator" content="{{ $author }}">
    <meta itemprop="license" content="{{ $license }}">

    <a href="{{ $cardUrl }}" itemprop="url" class="group relative block overflow-hidden rounded-2xl ring-1 ring-white/5 bg-black/20 shadow-lg shadow-black/40 transition-all duration-200 ease-out hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70">

        @if(!empty($category))
            <div class="absolute left-3 top-3 z-30 rounded-md bg-black/55 px-2 py-1 text-xs text-white backdrop-blur-sm">{{ $category }}</div>
        @endif

            <div class="nova-card-media relative aspect-[16/10] overflow-hidden bg-neutral-900">
                <picture>
                    <source srcset="{{ $img_avif_srcset }}" type="image/avif">
                    <source srcset="{{ $img_webp_srcset }}" type="image/webp">
                <img
                    src="{{ $img_src }}"
                    srcset="{{ $img_srcset }}"
                    sizes="(max-width: 768px) 50vw, (max-width: 1280px) 33vw, 25vw"
                    loading="lazy"
                    decoding="async"
                    alt="{{ e($title) }}"
                    width="{{ $img_width }}"
                    height="{{ $img_height }}"
                    class="h-full w-full object-cover transition-transform duration-200 ease-out group-hover:scale-[1.04]"
                    itemprop="thumbnailUrl"
                />
                </picture>

                <div class="pointer-events-none absolute inset-x-0 bottom-0 z-20 bg-gradient-to-t from-black/80 via-black/40 to-transparent p-3 backdrop-blur-[2px] opacity-100 transition-opacity duration-200 md:opacity-0 md:group-hover:opacity-100 md:group-focus-visible:opacity-100">
                    <div class="truncate text-sm font-semibold text-white">{{ $title }}</div>
                    <div class="mt-1 flex items-center justify-between gap-3 text-xs text-white/80">
                        <span class="truncate">by {{ $author }}</span>
                        <span class="shrink-0">❤ {{ $likes }} · ⬇ {{ $downloads }}</span>
                    </div>
                    <div class="mt-1 text-[11px] text-white/70">
                        @if($resolution !== '')
                            {{ $resolution }} •
                        @endif
                        {{ $category }} • {{ $license }}
                    </div>
                </div>

            </div>

            <span class="sr-only">{{ $title }} by {{ $author }}</span>
    </a>
</article>