@extends('site.layouts.app')
@section('title', 'الأقسام | ' . config('site.name'))

@section('content')
<section class="page-hero"><div class="container"><h1>أقسام المنتجات</h1></div></section>
<section class="section-padding"><div class="container"><div class="row g-4">
    @foreach($categories as $category)
        <div class="col-md-6 col-lg-4 fade-up">
            <a href="{{ route('site.categories.show', $category) }}" class="text-decoration-none">
                <div class="card product-card h-100">
                    <div class="card-img-wrap"><img src="{{ $category->image_url }}" class="card-img-top" alt="{{ $category->name }}" loading="lazy"></div>
                    <div class="card-body">
                        <h5 class="card-title">{{ $category->name }}</h5>
                        <p class="card-text text-muted">{{ Str::limit($category->description, 100) }}</p>
                        <span class="card-link">تصفح القسم <i class="bi bi-arrow-left"></i></span>
                    </div>
                </div>
            </a>
        </div>
    @endforeach
</div></div></section>
@endsection