@extends('layouts.shell')
@section('title', 'Toko — '.($brand['name'] ?? 'Quran Review'))
@section('main-pad', 'px-5 pt-6')

@section('content')
{{-- Hero toko --}}
<div class="cinema relative -mx-5 -mt-6 mb-7 overflow-hidden rounded-b-3xl">
    <div class="relative aspect-[16/10] sm:aspect-[16/7] w-full bg-gradient-to-br from-primary-dark via-primary to-amber">
        <div class="absolute inset-0 surface-pattern opacity-100"></div>
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent"></div>
    </div>
    <div class="absolute inset-x-0 bottom-0 px-5 pb-4">
        <span class="chip !bg-white/15 !text-white mb-2"><x-icon name="store" class="w-3.5 h-3.5"/> Toko Quran Review</span>
        <h1 class="text-h1 text-white">Buku & Merchandise Islami</h1>
        <p class="mt-1 text-body text-white/80">{{ $total }} produk pilihan, checkout aman via marketplace resmi.</p>
    </div>
</div>

@if($featured->isNotEmpty())
{{-- Rail unggulan --}}
<x-rail title="Produk Unggulan">
    @foreach($featured as $product)
    <a href="{{ route('products.show', $product->slug) }}" class="poster poster-2x3 group">
        @if($product->image)<img src="{{ $product->imageUrl() }}" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" alt="">
        @else<div class="grid h-full w-full place-items-center bg-surface-2"><x-icon name="shopping" class="w-10 h-10 text-muted"/></div>@endif
        <div class="absolute inset-0 bg-gradient-to-t from-black/85 via-black/15 to-transparent"></div>
        <div class="absolute inset-x-0 bottom-0 p-2.5">
            <p class="text-[13px] font-semibold leading-tight text-white line-clamp-2">{{ $product->title }}</p>
            <p class="text-[12px] font-bold text-amber">Rp{{ number_format($product->price,0,',','.') }}</p>
        </div>
    </a>
    @endforeach
</x-rail>
@endif

{{-- Rail per kategori --}}
@forelse($byCategory as $catName => $items)
<section class="mb-8">
    <h2 class="text-h3 mb-3">{{ $catName }}</h2>
    <div class="grid grid-cols-2 gap-4">
        @foreach($items as $product)
        <a href="{{ route('products.show', $product->slug) }}" class="card overflow-hidden group">
            <div class="aspect-square overflow-hidden bg-surface-2">
                @if($product->image)<img src="{{ $product->imageUrl() }}" class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" alt="">
                @else<div class="grid h-full w-full place-items-center"><x-icon name="shopping" class="w-10 h-10 text-muted"/></div>@endif
            </div>
            <div class="p-3">
                <h3 class="text-body font-semibold leading-tight line-clamp-2">{{ $product->title }}</h3>
                <p class="mt-1 text-h4 text-primary">Rp{{ number_format($product->price,0,',','.') }}</p>
            </div>
        </a>
        @endforeach
    </div>
</section>
@empty
<div class="card p-10 text-center">
    <x-icon name="store" class="mx-auto mb-2 w-10 h-10 text-muted"/>
    <p class="text-body text-muted">Belum ada produk.</p>
</div>
@endforelse
@endsection