@php
    $heroArtwork = $artwork ?? null;
    $fallbackImage = 'https://files.skinbase.org/default/missing_lg.webp';
    $heroFeaturedImage = $heroArtwork['featured_image'] ?? null;
@endphp

@if (!$heroArtwork)
    <section class="relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
        <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/60 to-transparent"></div>
        <div class="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
            <p class="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
                Skinbase
            </p>
            <h1 class="text-2xl font-bold tracking-tight text-white sm:text-4xl">
                Skinbase
            </h1>
            <p class="mt-2 max-w-2xl text-sm text-soft sm:text-base">
                Discover digital art, wallpapers, skins, and photography from a global creator community. Explore trending work, fresh uploads, and long-time classics in one place.
            </p>
            <div class="mt-4 flex flex-wrap gap-3">
                <a href="/discover/trending" class="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold">Explore Trending</a>
            </div>
        </div>
    </section>
@else
    <section class="group relative flex min-h-[62vh] max-h-[420px] w-full items-end overflow-hidden bg-nova-900 md:min-h-[38vh] md:max-h-[460px]">
        <x-artwork.featured-picture
            :image="$heroFeaturedImage ?? [
                'alt' => $heroArtwork['title'] ?? 'Featured artwork',
                'img_src' => $heroArtwork['thumb_lg'] ?? $heroArtwork['thumb'] ?? $fallbackImage,
                'img_srcset' => $heroArtwork['thumb_srcset'] ?? null,
                'img_sizes' => '100vw',
                'sources' => [],
            ]"
            class="absolute inset-0 h-full w-full object-cover transition-transform duration-700 group-hover:scale-[1.02]"
            fetchpriority="high"
            loading="eager"
            decoding="async"
        />

        <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-nova-900 via-nova-900/55 to-transparent"></div>

        <div class="relative z-10 w-full px-6 pb-7 sm:px-10 lg:px-16">
            <p class="mb-1.5 text-xs font-semibold uppercase tracking-widest text-accent">
                Skinbase
            </p>
            <h1 class="text-2xl font-bold tracking-tight text-white drop-shadow sm:text-4xl lg:text-5xl">
                Digital Art & Wallpapers
            </h1>
            <p class="mt-2 max-w-2xl text-sm text-soft sm:text-base">
                Discover digital art, wallpapers, skins, and photography from a global creator community. Browse trending work, fresh uploads, and timeless favorites.
            </p>
            <p class="mt-3 text-sm text-soft">
                Featured artwork:
                <a href="{{ $heroArtwork['url'] ?? '#' }}" class="text-nova-200 transition hover:text-white">
                    {{ $heroArtwork['title'] ?? 'Untitled' }} by {{ $heroArtwork['author'] ?? 'Artist' }}
                </a>
            </p>
            <div class="mt-4 flex flex-wrap gap-3">
                <a
                    href="/discover/trending"
                    class="btn-accent-solid rounded-xl px-5 py-2 text-sm font-semibold"
                >
                    Explore Trending
                </a>
                <a
                    href="{{ $heroArtwork['url'] ?? '#' }}"
                    class="rounded-xl border border-nova-600 px-5 py-2 text-sm font-semibold text-nova-200 shadow transition hover:border-nova-400 hover:text-white"
                >
                    View Artwork
                </a>
            </div>
        </div>
    </section>
@endif