<x-app-layout>
    <div class="min-h-screen" style="background-color: {{ $siteInfo['theme_color'] }}08;">
        <!-- Hero Section -->
        <div class="bg-white border-b border-gray-200">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 pt-24 md:pt-32 lg:pt-36">
                <!-- Welcome Message -->
                <div class="text-center mb-8">
                    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-3" style="color: {{ $siteInfo['theme_color'] }};">
                        {{ $siteInfo['name'] }}
                    </h1>
                    <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                        {{ $siteInfo['description'] }}
                    </p>
                    @auth
                        <div class="mt-4">
                            <p class="text-gray-700">Welcome back, {{ auth()->user()->name }}!</p>
                        </div>
                    @endauth
                </div>

                <!-- Quick Stats -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
                    <div class="bg-white border border-gray-200 rounded-lg p-6 text-center">
                        <div class="text-2xl font-bold" style="color: {{ $siteInfo['theme_color'] }};">{{ number_format($stats['total_items']) }}</div>
                        <div class="text-sm text-gray-600">Total Items</div>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-6 text-center">
                        <div class="text-2xl font-bold" style="color: {{ $siteInfo['theme_color'] }};">{{ number_format($stats['active_users']) }}</div>
                        <div class="text-sm text-gray-600">Active Sellers</div>
                    </div>
                    <div class="bg-white border border-gray-200 rounded-lg p-6 text-center">
                        <div class="text-2xl font-bold" style="color: {{ $siteInfo['theme_color'] }};">{{ number_format($stats['categories_count']) }}</div>
                        <div class="text-sm text-gray-600">Categories</div>
                    </div>
                </div>

                <!-- Call to Action -->
                <div class="text-center">
                    <a href="{{ route('sites.' . $siteGroup . '.items') }}" 
                       class="inline-flex items-center px-6 py-3 text-white font-medium rounded-lg transition-colors hover:opacity-90"
                       style="background-color: {{ $siteInfo['theme_color'] }};">
                        Browse All Items
                        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>

        <!-- Categories Section -->
        <div class="bg-white py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-900 text-center mb-8">Browse by Category</h2>
                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
                    @foreach($categories as $category)
                        <a href="{{ route('sites.' . $siteGroup . '.items', ['category' => $category->id]) }}" 
                           class="bg-gray-50 hover:bg-gray-100 border border-gray-200 rounded-lg p-6 text-center transition-colors group">
                            <div class="text-3xl mb-3">{{ $category->icon }}</div>
                            <h3 class="font-medium text-gray-900 group-hover:text-gray-700">{{ $category->name }}</h3>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Featured Items -->
        @if($featuredItems->count() > 0)
        <div class="py-12" style="background-color: {{ $siteInfo['theme_color'] }}08;">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <h2 class="text-2xl font-bold text-gray-900 text-center mb-8">Recent Listings</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
                    @foreach($featuredItems as $item)
                        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-lg transition-shadow">
                            <div class="aspect-square bg-gray-100 flex items-center justify-center">
                                @if($item->photos->count() > 0)
                                    <img src="{{ $item->photos->first()->url }}" alt="{{ $item->title }}" 
                                         class="w-full h-full object-cover">
                                @else
                                    <div class="text-gray-400 text-4xl">{{ $item->category->icon ?? '📦' }}</div>
                                @endif
                            </div>
                            <div class="p-4">
                                <h3 class="font-medium text-gray-900 mb-1 line-clamp-1">{{ $item->title }}</h3>
                                <p class="text-gray-600 text-sm mb-2">{{ $item->category->name }}</p>
                                @if($item->price)
                                    <p class="font-bold" style="color: {{ $siteInfo['theme_color'] }};">${{ number_format($item->price, 2) }}</p>
                                @else
                                    <p class="text-gray-500 text-sm">Make Offer</p>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="text-center mt-8">
                    <a href="{{ route('sites.' . $siteGroup . '.items') }}" 
                       class="text-gray-700 hover:text-gray-900 font-medium">
                        View All Items →
                    </a>
                </div>
            </div>
        </div>
        @endif

        <!-- Quick Actions -->
        @auth
        <div class="bg-white border-t border-gray-200 py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-2xl font-bold text-gray-900 mb-8">Ready to sell?</h2>
                <a href="{{ route('my-items.create') }}" 
                   class="inline-flex items-center px-6 py-3 text-white font-medium rounded-lg transition-colors hover:opacity-90"
                   style="background-color: {{ $siteInfo['theme_color'] }};">
                    List Your Item
                    <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
                    </svg>
                </a>
            </div>
        </div>
        @endauth
    </div>
</x-app-layout>