<x-app-layout>
    

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <!-- Hero Section -->            

            <!-- Items Grid -->
            @if($featuredItems->count() > 0 || $recentItems->count() > 0)
                <div class="mb-32">
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-16 lg:gap-24">
                        @foreach($featuredItems->concat($recentItems) as $item)
                            <div class="group">
                                <a href="{{ route('items.show', $item) }}" class="block">
                                    <div class="aspect-square bg-gray-50 dark:bg-gray-800 mb-8 overflow-hidden transition-colors duration-300">
                                        @if($item->primaryPhoto)
                                            <img src="{{ asset($item->primaryPhoto->url) }}" alt="{{ $item->title }}" class="w-full h-full object-cover group-hover:opacity-80 transition-opacity duration-500">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center">
                                                <div class="w-8 h-8 border border-gray-300 dark:border-gray-500"></div>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="space-y-6">
                                        <h3 class="text-sm tracking-widest group-hover:opacity-60 transition-opacity leading-relaxed text-black dark:text-gray-100">{{ strtolower($item->title) }}</h3>
                                        @if($item->price)
                                            <p class="text-xs tracking-widest text-gray-500 dark:text-gray-400">${{ number_format($item->price, 0) }}</p>
                                        @else
                                            <p class="text-xs tracking-widest text-gray-500 dark:text-gray-400">trade</p>
                                        @endif
                                    </div>
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <!-- Empty State -->
            @if($recentItems->count() === 0)
                <div class="text-center py-48">
                    <p class="text-xs tracking-widest text-gray-500 dark:text-gray-400 mb-16">empty</p>
                    @auth
                        <a href="{{ route('my-items.create') }}" class="text-xs tracking-widest hover:opacity-60 transition-opacity text-black dark:text-gray-100">
                            list something
                        </a>
                    @else
                        <a href="{{ route('register') }}" class="text-xs tracking-widest hover:opacity-60 transition-opacity text-black dark:text-gray-100">
                            join
                        </a>
                    @endauth
                </div>
            @endif
        </div>
    </div>
</x-app-layout>