@extends('layouts.app')

@section('content')
{{-- 1. Banner + category selection --}}
<section class="max-w-7xl mx-auto px-4 pt-6">
    @if($banners->count())
    <div x-data="{ i: 0 }" x-init="setInterval(() => i = (i + 1) % {{ $banners->count() }}, 4000)" class="relative rounded-2xl overflow-hidden h-56 md:h-96 bg-gray-100">
        @foreach($banners as $idx => $banner)
            <a href="{{ $banner->link ?: '#' }}" x-show="i === {{ $idx }}" x-cloak x-transition class="absolute inset-0">
                <img src="{{ asset('storage/'.$banner->image) }}" class="w-full h-full object-cover">
            </a>
        @endforeach
    </div>
    @endif

    @if($categories->count())
    <div class="flex gap-3 overflow-x-auto py-5 no-scrollbar">
        @foreach($categories as $cat)
        <a href="{{ route('product.category', $cat->slug) }}" class="flex-shrink-0 text-center w-20">
            <div class="w-16 h-16 mx-auto rounded-full bg-gray-100 overflow-hidden flex items-center justify-center">
                @if($cat->image)<img src="{{ asset('storage/'.$cat->image) }}" class="w-full h-full object-cover">@else 🛍️ @endif
            </div>
            <div class="text-xs mt-1 truncate">{{ $cat->name }}</div>
        </a>
        @endforeach
    </div>
    @endif
</section>

{{-- 2. Offer section --}}
@if($offers->count())
<section class="max-w-7xl mx-auto px-4 py-6 grid gap-4 md:grid-cols-{{ min($offers->count(), 3) }}">
    @foreach($offers as $offer)
        <a href="{{ route('product.show', $offer->product->slug) }}"
           class="rounded-2xl p-6 flex items-center justify-between"
           style="background:{{ $offer->bg_color }}; color:{{ $offer->text_color }};">
            <div>
                <div class="font-bold text-lg">{{ $offer->headline }}</div>
                <div class="text-sm opacity-80">{{ $offer->product->title }}</div>
            </div>
            <span class="text-2xl">→</span>
        </a>
    @endforeach
</section>
@endif

{{-- 3. Featured products, slideable by touch/mouse --}}
@if($featuredProducts->count())
<section class="max-w-7xl mx-auto px-4 py-6">
    <h2 class="font-bold text-xl mb-4">Featured</h2>
    <div class="flex gap-4 overflow-x-auto pb-2 snap-x cursor-grab active:cursor-grabbing" style="scroll-behavior:smooth;"
         x-data="{ down:false, startX:0, scrollLeft:0 }"
         @mousedown="down=true; startX=$event.pageX - $el.offsetLeft; scrollLeft=$el.scrollLeft"
         @mouseleave="down=false" @mouseup="down=false"
         @mousemove="if(down){ $event.preventDefault(); $el.scrollLeft = scrollLeft - ($event.pageX - $el.offsetLeft - startX); }">
        @foreach($featuredProducts as $product)
            @include('front.partials.product-card', ['product' => $product, 'wide' => true])
        @endforeach
    </div>
</section>
@endif

{{-- 4. All products together --}}
<section class="max-w-7xl mx-auto px-4 py-6">
    <h2 class="font-bold text-xl mb-4">All Products</h2>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        @foreach($products as $product)
            @include('front.partials.product-card', ['product' => $product])
        @endforeach
    </div>
    <div class="mt-6">{{ $products->links() }}</div>
</section>

{{-- 5. Feature icons --}}
@if($features->count())
<section class="max-w-7xl mx-auto px-4 py-10 grid grid-cols-2 md:grid-cols-4 gap-6">
    @foreach($features as $feature)
        <div class="text-center">
            <div class="text-3xl mb-2">{{ $feature->icon }}</div>
            <div class="font-semibold text-sm">{{ $feature->title }}</div>
            <div class="text-xs text-gray-500">{{ $feature->description }}</div>
        </div>
    @endforeach
</section>
@endif
@endsection