@extends('loja.default', ['title' => 'Home'])

@section('content')
<div class="container mx-auto px-4">
    
    <!-- Hero Banner -->
    <div class="bg-gradient-to-r from-indigo-600 to-purple-600 rounded-3xl p-12 mb-12 text-white">
        <div class="max-w-2xl">
            <h1 class="text-5xl font-black mb-4">Bem-vindo à {{ $config->nome }}</h1>
            <p class="text-xl text-indigo-100 mb-6">Encontre os melhores produtos com os melhores preços!</p>
            <a href="#produtos" class="inline-flex items-center gap-2 px-8 py-4 bg-white text-indigo-600 font-bold rounded-full hover:bg-indigo-50 transition shadow-xl">
                <i class="fas fa-shopping-bag"></i>
                <span>Ver Produtos</span>
            </a>
        </div>
    </div>
    
    <!-- Products Section -->
    <div id="produtos" class="mb-12">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-4xl font-black text-gray-900 mb-2">Produtos em Destaque</h2>
                <p class="text-gray-600">Confira nossa seleção especial</p>
            </div>
        </div>
        
        <!-- Products Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            @foreach($produtosEmDestaque as $p)
            <div class="product-card bg-white rounded-2xl shadow-lg border-2 border-gray-100 overflow-hidden group">
                <!-- Product Image -->
                <div class="relative overflow-hidden bg-gray-50 aspect-square">
                    <img src="{{ $p->img }}" alt="{{ $p->nome }}" class="w-full h-full object-cover group-hover:scale-110 transition duration-500">
                    
                    <!-- Badges -->
                    <div class="absolute top-4 left-4 flex flex-col gap-2">
                        @if($p->percentual_desconto > 0)
                        <span class="px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full shadow-lg">
                            -{{ $p->percentual_desconto }}%
                        </span>
                        @endif
                        <span class="px-3 py-1 bg-gradient-to-r from-indigo-600 to-purple-600 text-white text-xs font-bold rounded-full shadow-lg">
                            Destaque
                        </span>
                    </div>
                </div>
                
                <!-- Product Info -->
                <div class="p-5">
                    <!-- Category -->
                    <p class="text-xs font-semibold text-indigo-600 uppercase tracking-wide mb-2">
                        {{ $p->categoria ? $p->categoria->nome : 'Geral' }}
                    </p>
                    
                    <!-- Product Name -->
                    <h3 class="text-lg font-bold text-gray-900 mb-3 line-clamp-2 min-h-[3.5rem]">
                        {{ $p->nome }}
                    </h3>
                    
                    <!-- Price -->
                    <div class="mb-4">
                        @if(sizeof($p->variacoes) > 0)
                        <div class="text-2xl font-black text-indigo-600">
                            {!! $p->valorPrimeiraVariacao() !!}
                        </div>
                        @else
                        @if($p->valor_ecommerce > 0)
                        <div class="flex items-center gap-2">
                            <span class="text-2xl font-black text-indigo-600">
                                R$ {{ number_format($p->valor_ecommerce, 2, ',', '.') }}
                            </span>
                            @if($p->percentual_desconto > 0)
                            <span class="text-sm text-gray-400 line-through">
                                R$ {{ number_format($p->valor_ecommerce + ($p->valor_ecommerce*$p->percentual_desconto/100), 2, ',', '.') }}
                            </span>
                            @endif
                        </div>
                        @endif
                        @endif
                    </div>
                    
                    <!-- Add to Cart Button -->
                    <a href="{{ route('loja.produto-detalhe', ['hash' => $p->hash_ecommerce, 'link' => $config->loja_id]) }}" class="block">
                        <button class="w-full px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-bold rounded-xl transition shadow-lg hover:shadow-xl flex items-center justify-center gap-2">
                            <i class="fas fa-shopping-cart"></i>
                            <span>Adicionar ao Carrinho</span>
                        </button>
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- Empty State -->
        @if(count($produtosEmDestaque) == 0)
        <div class="text-center py-20">
            <div class="inline-flex items-center justify-center w-24 h-24 bg-gray-100 rounded-full mb-6">
                <i class="fas fa-box-open text-4xl text-gray-400"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-900 mb-2">Nenhum produto em destaque</h3>
            <p class="text-gray-600">Volte mais tarde para conferir nossas novidades!</p>
        </div>
        @endif
    </div>
    
    <!-- Categories Section -->
    @if(count($categorias) > 0)
    <div class="mb-12">
        <div class="flex items-center justify-between mb-8">
            <div>
                <h2 class="text-4xl font-black text-gray-900 mb-2">Categorias</h2>
                <p class="text-gray-600">Explore por categoria</p>
            </div>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
            @foreach($categorias as $c)
            @if($c->hash_ecommerce)
            <a href="{{ route('loja.produtos-categoria', ['hash' => $c->hash_ecommerce, 'link' => $config->loja_id]) }}" class="group">
                <div class="bg-white rounded-2xl p-6 shadow-lg border-2 border-gray-100 hover:border-indigo-500 transition text-center">
                    <div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-indigo-100 to-purple-100 rounded-full flex items-center justify-center group-hover:scale-110 transition">
                        <i class="fas fa-tag text-2xl text-indigo-600"></i>
                    </div>
                    <h3 class="font-bold text-gray-900 group-hover:text-indigo-600 transition">{{ $c->nome }}</h3>
                </div>
            </a>
            @endif
            @endforeach
        </div>
    </div>
    @endif
    
</div>
@endsection