@extends('layouts.shop')
@section('title', \App\Models\Setting::get('shop_name', 'Shop'))
@section('content')

{{-- USP-Leiste --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8 text-center">
    <div class="bg-white rounded-lg p-4 border">
        <div class="text-2xl mb-1">🚚</div>
        <p class="text-sm font-semibold">Schnelle Lieferung</p>
        <p class="text-xs text-gray-400">1-3 Werktage</p>
    </div>
    <div class="bg-white rounded-lg p-4 border">
        <div class="text-2xl mb-1">🔒</div>
        <p class="text-sm font-semibold">Sicher bezahlen</p>
        <p class="text-xs text-gray-400">Vorkasse & Rechnung</p>
    </div>
    <div class="bg-white rounded-lg p-4 border">
        <div class="text-2xl mb-1">↩️</div>
        <p class="text-sm font-semibold">14 Tage Rückgabe</p>
        <p class="text-xs text-gray-400">Widerrufsrecht</p>
    </div>
    <div class="bg-white rounded-lg p-4 border">
        <div class="text-2xl mb-1">📞</div>
        <p class="text-sm font-semibold">Persönlicher Service</p>
        <p class="text-xs text-gray-400">{{ \App\Models\Setting::get('shop_phone', '') }}</p>
    </div>
</div>

{{-- Banner --}}
@if($banners->count())
<div class="relative mb-10 -mx-4" x-data="{ current: 0 }">
    @foreach($banners as $i => $banner)
    <div x-show="current === {{ $i }}" class="relative">
        <img src="{{ asset('storage/'.$banner->image) }}" alt="{{ $banner->headline }}" class="w-full h-72 object-cover rounded-lg">
        @if($banner->headline)
        <div class="absolute inset-0 bg-black/40 flex items-center justify-center rounded-lg">
            <div class="text-center text-white">
                <h2 class="text-3xl font-bold mb-2">{{ $banner->headline }}</h2>
                @if($banner->subtext)<p class="text-lg mb-4">{{ $banner->subtext }}</p>@endif
                @if($banner->button_link && $banner->button_label)
                <a href="{{ $banner->button_link }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold">{{ $banner->button_label }}</a>
                @endif
            </div>
        </div>
        @endif
    </div>
    @endforeach
    @if($banners->count() > 1)
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
        @foreach($banners as $i => $b)
        <button @click="current = {{ $i }}" :class="current === {{ $i }} ? 'bg-white' : 'bg-white/50'" class="w-3 h-3 rounded-full"></button>
        @endforeach
    </div>
    @endif
</div>
@endif

{{-- Kategorien --}}
@if($categories->count())
<h2 class="text-2xl font-bold mb-6">Kategorien</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12">
    @foreach($categories as $cat)
    <a href="{{ route('shop.category', $cat->slug) }}" class="group block bg-gray-50 rounded-lg overflow-hidden hover:shadow-md transition">
        @if($cat->image)
        <img src="{{ asset('storage/'.$cat->image) }}" alt="{{ $cat->name }}" class="w-full h-32 object-cover group-hover:scale-105 transition">
        @else
        <div class="w-full h-32 bg-blue-100 flex items-center justify-center text-4xl">🛍️</div>
        @endif
        <div class="p-3 font-semibold">{{ $cat->name }}</div>
    </a>
    @endforeach
</div>
@endif

{{-- Top Produkte --}}
@if($topProducts->count())
<div class="mb-12">
    <div class="flex items-center gap-3 mb-6">
        <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
        </svg>
        <h2 class="text-2xl font-bold">Top Produkte</h2>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        @foreach($topProducts as $product)
        @include('shop.products._card', ['product' => $product, 'badge' => 'Top'])
        @endforeach
    </div>
</div>
@endif

{{-- Sonderangebote --}}
@if($saleProducts->count())
<div class="mb-12">
    <div class="flex items-center gap-3 mb-6">
        <span class="text-2xl">🏷️</span>
        <h2 class="text-2xl font-bold">Sonderangebote</h2>
        <span class="bg-red-100 text-red-700 text-xs font-bold px-2 py-0.5 rounded-full">SALE</span>
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        @foreach($saleProducts as $product)
        @include('shop.products._card', ['product' => $product])
        @endforeach
    </div>
</div>
@endif

{{-- Neue Produkte --}}
@if($newProducts->count())
<div class="mb-12">
    <h2 class="text-2xl font-bold mb-6">Neu im Sortiment</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
        @foreach($newProducts as $product)
        @include('shop.products._card', ['product' => $product])
        @endforeach
    </div>
</div>
@endif

{{-- Blog --}}
@if($blogPosts->count())
<h2 class="text-2xl font-bold mb-6">Aktuelles</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    @foreach($blogPosts as $post)
    <a href="{{ route('blog.post', $post->slug) }}" class="block bg-white border rounded-lg overflow-hidden hover:shadow-md transition">
        @if($post->image)<img src="{{ asset('storage/'.$post->image) }}" class="w-full h-40 object-cover">@endif
        <div class="p-4">
            <p class="text-xs text-gray-400 mb-1">{{ $post->published_at?->format('d.m.Y') }}</p>
            <h3 class="font-semibold">{{ $post->title }}</h3>
        </div>
    </a>
    @endforeach
</div>
@endif
@endsection