<article class="group bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 overflow-hidden hover:shadow-soft-hover transition-all duration-300 flex flex-col h-full">
    <div class="relative aspect-[4/3] overflow-hidden bg-gray-100 dark:bg-gray-800">
        <!-- Image placeholder or actual image -->
        <a href="{{ route('ch_product_single', $product['slug']) }}" class="block w-full h-full">
            <img
                src="{{ $product->getImageUrl() }}"
                alt="{{ $product->name }}"
                class="object-cover w-full h-full group-hover:scale-105 transition-transform duration-500"
            >
        </a>

        <!-- New Badge (Conditional) -->
        @if($product->created_at->diffInDays(now()) < 30)
            <div class="absolute top-3 left-3 bg-white/90 dark:bg-black/80 backdrop-blur-sm px-2.5 py-1 rounded text-xs font-bold text-text-main dark:text-white uppercase tracking-wider border border-white/20">
                @lang('shop.New')
            </div>
        @endif

        <!-- Bundle Badge -->
        @if($product->isBundle())
            <div class="absolute top-3 right-3 inline-flex items-center gap-1 bg-violet-600/90 backdrop-blur-sm px-2.5 py-1 rounded text-xs font-bold text-white uppercase tracking-wider">
                <span class="material-symbols-outlined text-[13px]">layers</span>
                @lang('shop.Bundle')
            </div>
        @endif
    </div>

    <!-- Content Area -->
    <div class="p-5 flex flex-col flex-grow">
        <!-- Subheader: Category + Rating -->
        <div class="flex items-center justify-between mb-2">
            @if($product->category)
                <span class="text-xs font-medium text-text-muted bg-gray-50 dark:bg-gray-800 px-2 py-0.5 rounded truncate max-w-[120px]" title="{{ $product->category->name }}">
                    {{ $product->category->name }}
                </span>
            @else
                <span></span>
            @endif

            @if($product->average_rating > 0)
            <div class="flex items-center gap-1 text-amber-400">
                <span class="material-symbols-outlined text-[14px] fill-current">star</span>
                <span class="text-xs font-medium text-text-muted dark:text-gray-400">{{ number_format($product->average_rating, 1) }}</span>
            </div>
            @endif
        </div>

        <a href="{{ route('ch_product_single', $product['slug']) }}">
            <h3 class="text-lg font-medium text-text-main dark:text-white mb-1 group-hover:text-primary transition-colors line-clamp-1" title="{{ $product->name }}">
                {{ $product->name }}
            </h3>
        </a>

        <p class="text-sm text-text-muted dark:text-gray-400 line-clamp-2 mb-4 flex-grow">
            {{ Str::limit(strip_tags($product->description), 80) }}
        </p>

        <!-- Footer: Price + Button -->
        <div class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-800 mt-auto">
            <div class="flex items-center gap-2">
                <span class="text-lg font-bold text-text-main dark:text-white">{{ number_format($product->starting_price, 2) }}$</span>
            </div>
            <a href="{{ route('ch_product_single', $product['slug']) }}" class="text-sm font-semibold text-primary hover:text-primary-dark dark:text-blue-400 dark:hover:text-blue-300 flex items-center gap-1 group/btn">
                @lang('shop.View Details')
                <span class="material-symbols-outlined text-[16px] group-hover/btn:translate-x-0.5 transition-transform">arrow_forward</span>
            </a>
        </div>
    </div>
</article>
