@extends('layouts.app')
@section('title', setting('site_name','U Super Shop') . ' - সেরা অনলাইন শপ')
@section('content')

{{-- Hero Slider --}}
@if($sliders->count())
<div id="heroSlider" class="carousel slide" data-ride="carousel" data-interval="4000">
    <div class="carousel-inner">
        @foreach($sliders as $i => $slider)
        <div class="carousel-item {{ $i==0?'active':'' }}">
            <img src="{{ $slider->image_url }}" class="d-block w-100" alt="{{ $slider->title }}" style="max-height:400px;object-fit:cover;">
            @if($slider->link)<a href="{{ $slider->link }}" class="stretched-link"></a>@endif
        </div>
        @endforeach
    </div>
    <a class="carousel-control-prev" href="#heroSlider" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
    <a class="carousel-control-next" href="#heroSlider" data-slide="next"><span class="carousel-control-next-icon"></span></a>
</div>
@endif

<div class="container-fluid px-2 py-3">

{{-- Categories --}}
@if($categories->count())
<div class="mb-4">
    <h6 class="fw-bold mb-2 px-1">ক্যাটাগরি</h6>
    <div class="d-flex gap-2 overflow-auto pb-2" style="scrollbar-width:none;">
        @foreach($categories as $cat)
        <a href="{{ route('category.products',$cat->slug) }}" class="text-center text-decoration-none flex-shrink-0" style="width:72px;">
            <div style="width:60px;height:60px;border-radius:50%;background:#f8f8f8;border:2px solid #f0f0f0;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;overflow:hidden;">
                @if($cat->icon)<img src="{{ asset('storage/'.$cat->icon) }}" width="36" height="36" style="object-fit:cover;">@else<i class="fas fa-tag text-muted"></i>@endif
            </div>
            <small style="font-size:11px;color:#333;line-height:1.2;">{{ Str::limit($cat->name_bn ?? $cat->name, 10) }}</small>
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- New Arrivals --}}
@if($newProducts->count())
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
        <h6 class="fw-bold mb-0">নতুন পণ্য</h6>
        <a href="{{ route('products.index',['type'=>'new']) }}" class="text-danger small">সব দেখুন →</a>
    </div>
    <div class="row row-cols-2 row-cols-md-4 g-2">
        @foreach($newProducts->take(8) as $product)
            @include('components.product-card', ['product'=>$product])
        @endforeach
    </div>
</div>
@endif

{{-- Special Offers --}}
@if($specialOffers->count())
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
        <h6 class="fw-bold mb-0">স্পেশাল অফার</h6>
        <a href="{{ route('special.offers') }}" class="text-danger small">সব দেখুন →</a>
    </div>
    <div class="row row-cols-2 row-cols-md-4 g-2">
        @foreach($specialOffers->take(8) as $product)
            @include('components.product-card', ['product'=>$product])
        @endforeach
    </div>
</div>
@endif

{{-- Best Sellers --}}
@if($bestSellers->count())
<div class="mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2 px-1">
        <h6 class="fw-bold mb-0">বেস্ট সেলার</h6>
        <a href="{{ route('products.index',['type'=>'bestseller']) }}" class="text-danger small">সব দেখুন →</a>
    </div>
    <div class="row row-cols-2 row-cols-md-4 g-2">
        @foreach($bestSellers->take(8) as $product)
            @include('components.product-card', ['product'=>$product])
        @endforeach
    </div>
</div>
@endif

</div>
@endsection