<?php $__env->startSection('title', 'Nos Produits — Artisanal'); ?>
<?php $__env->startSection('description', 'Découvrez toute notre gamme de produits artisanaux faits à la main.'); ?>

<?php $__env->startSection('content'); ?>


<section class="relative text-white overflow-hidden" style="min-height: 380px;">
    
    <div class="absolute inset-0">
        <img src="<?php echo e(asset('images/apropos2.jpeg')); ?>"
             alt="Marché artisanal marocain"
             class="w-full h-full object-cover object-center">
        <div class="absolute inset-0" style="background: linear-gradient(135deg, rgba(107,66,38,0.85) 0%, rgba(139,94,60,0.70) 50%, rgba(0,0,0,0.45) 100%);"></div>
    </div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28 text-center">
        <!--<span class="inline-block bg-white/15 border border-white/30 text-white text-sm font-medium px-4 py-1.5 rounded-full mb-5 backdrop-blur-sm">-->
        <!--    <i class="fas fa-shopping-bag mr-1 text-yellow-300"></i> Notre catalogue-->
        <!--</span>-->
        <h1 class="font-serif text-4xl md:text-5xl font-bold mb-4 drop-shadow-lg">Nos Produits</h1>
        <p class="text-white/90 text-lg max-w-xl mx-auto drop-shadow">
            Chaque pièce est unique, façonnée à la main avec des matériaux nobles.
        </p>
    </div>
    
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 50" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 50L1440 50L1440 15C1200 50 960 0 720 15C480 30 240 0 0 15L0 50Z" fill="#ffffff"/>
        </svg>
    </div>
</section>


<section class="bg-white shadow-sm sticky top-16 z-30 border-b border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3 overflow-x-auto">
        <div class="flex items-center gap-2 min-w-max">
            <a href="<?php echo e(route('products')); ?>"
               class="px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap <?php echo e(!$categoryFilter ? 'bg-primary text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-cream hover:text-primary'); ?>">
                <i class="fas fa-th-large mr-1"></i> Tous
            </a>
            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $cat): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="<?php echo e(route('products', ['category' => $cat->slug])); ?>"
               class="px-4 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap <?php echo e($categoryFilter === $cat->slug ? 'bg-primary text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-cream hover:text-primary'); ?>">
                <i class="<?php echo e($cat->icon ?? 'fas fa-tag'); ?> mr-1"></i> <?php echo e($cat->name); ?>

            </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>


<section class="py-12 bg-cream min-h-96">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

        <?php if($products->count()): ?>

        
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 mb-8">
            <p class="text-gray-600 text-sm">
                Affichage de
                <span class="font-semibold text-gray-800"><?php echo e($products->firstItem()); ?>–<?php echo e($products->lastItem()); ?></span>
                sur
                <span class="font-semibold text-gray-800"><?php echo e($products->total()); ?></span>
                produit(s)
                <?php if($categoryFilter): ?>
                dans <span class="text-primary font-semibold"><?php echo e($categories->firstWhere('slug', $categoryFilter)?->name ?? ''); ?></span>
                <?php endif; ?>
            </p>
            <p class="text-gray-400 text-xs">
                Page <?php echo e($products->currentPage()); ?> / <?php echo e($products->lastPage()); ?>

            </p>
        </div>

        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
            <?php $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php echo $__env->make('partials.product-card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>

        
        <?php if($products->hasPages()): ?>
        <div class="mt-12 flex justify-center">
            <nav class="flex items-center gap-1" aria-label="Pagination">

                
                <?php if($products->onFirstPage()): ?>
                <span class="px-4 py-2 rounded-xl text-sm text-gray-300 bg-white border border-gray-100 cursor-not-allowed">
                    <i class="fas fa-chevron-left mr-1"></i> Précédent
                </span>
                <?php else: ?>
                <a href="<?php echo e($products->previousPageUrl()); ?>"
                   class="px-4 py-2 rounded-xl text-sm text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                    <i class="fas fa-chevron-left mr-1"></i> Précédent
                </a>
                <?php endif; ?>

                
                <?php $__currentLoopData = $products->getUrlRange(1, $products->lastPage()); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $page => $url): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <?php if($page == $products->currentPage()): ?>
                    <span class="w-10 h-10 flex items-center justify-center rounded-xl text-sm font-bold bg-primary text-white shadow-md">
                        <?php echo e($page); ?>

                    </span>
                    <?php elseif(abs($page - $products->currentPage()) <= 2): ?>
                    <a href="<?php echo e($url); ?>"
                       class="w-10 h-10 flex items-center justify-center rounded-xl text-sm font-medium text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                        <?php echo e($page); ?>

                    </a>
                    <?php elseif($page == 1 || $page == $products->lastPage()): ?>
                    <a href="<?php echo e($url); ?>"
                       class="w-10 h-10 flex items-center justify-center rounded-xl text-sm font-medium text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                        <?php echo e($page); ?>

                    </a>
                    <?php elseif(abs($page - $products->currentPage()) == 3): ?>
                    <span class="w-10 h-10 flex items-center justify-center text-gray-400 text-sm">…</span>
                    <?php endif; ?>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                
                <?php if($products->hasMorePages()): ?>
                <a href="<?php echo e($products->nextPageUrl()); ?>"
                   class="px-4 py-2 rounded-xl text-sm text-gray-600 bg-white border border-gray-200 hover:bg-primary hover:text-white hover:border-primary transition-all shadow-sm">
                    Suivant <i class="fas fa-chevron-right ml-1"></i>
                </a>
                <?php else: ?>
                <span class="px-4 py-2 rounded-xl text-sm text-gray-300 bg-white border border-gray-100 cursor-not-allowed">
                    Suivant <i class="fas fa-chevron-right ml-1"></i>
                </span>
                <?php endif; ?>

            </nav>
        </div>
        <?php endif; ?>

        <?php else: ?>
        
        <div class="text-center py-20">
            <div class="w-20 h-20 bg-white rounded-full flex items-center justify-center mx-auto mb-4 shadow-sm">
                <i class="fas fa-box-open text-gray-300 text-3xl"></i>
            </div>
            <h3 class="font-serif text-xl font-bold text-gray-700 mb-2">Aucun produit disponible</h3>
            <p class="text-gray-400 mb-6">Revenez bientôt, de nouvelles créations arrivent !</p>
            <?php if($categoryFilter): ?>
            <a href="<?php echo e(route('products')); ?>"
               class="inline-flex items-center gap-2 bg-primary text-white px-6 py-2.5 rounded-full hover:bg-primary-dark transition-colors">
                <i class="fas fa-arrow-left"></i> Voir tous les produits
            </a>
            <?php endif; ?>
        </div>
        <?php endif; ?>

    </div>
</section>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/astechc1/public_html/artisanal/resources/views/products.blade.php ENDPATH**/ ?>