<?php $__env->startSection('title', 'Accueil — Artisanal'); ?>
<?php $__env->startSection('description', 'Découvrez nos créations artisanales faites à la main avec passion.'); ?>

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


<section class="relative text-white overflow-hidden" style="min-height: 580px;">
    
    <div class="absolute inset-0">
        <img src="https://images.unsplash.com/photo-1606722590583-6951b5ea92ad?w=1600&q=80&fit=crop"
             alt="Artisanat 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.88) 0%, rgba(139,94,60,0.72) 50%, rgba(0,0,0,0.40) 100%);"></div>
    </div>

    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-28 md:py-40">
        <div class="max-w-2xl">
            <span class="inline-block bg-white/20 text-white text-sm font-medium px-4 py-1.5 rounded-full mb-6 backdrop-blur-sm border border-white/30">
                <i class="fas fa-star mr-1 text-yellow-300"></i> 100% Fait main
            </span>
            <h1 class="font-serif text-4xl md:text-6xl font-bold leading-tight mb-6 drop-shadow-lg">
                L'Art de <span class="text-yellow-300">l'Artisanat</span><br>à portée de main
            </h1>
            <p class="text-lg md:text-xl text-white/90 leading-relaxed mb-8 drop-shadow">
                Des créations uniques, façonnées avec passion et savoir-faire traditionnel. Chaque pièce raconte une histoire, la vôtre.
            </p>
            <div class="flex flex-col sm:flex-row gap-4">
                <a href="<?php echo e(route('products')); ?>"
                   class="inline-flex items-center justify-center gap-2 bg-white text-primary font-semibold px-8 py-3.5 rounded-full hover:bg-yellow-100 transition-all shadow-xl hover:shadow-2xl">
                    <i class="fas fa-shopping-bag"></i> Découvrir nos produits
                </a>
                <a href="<?php echo e(route('about')); ?>"
                   class="inline-flex items-center justify-center gap-2 border-2 border-white/60 text-white font-semibold px-8 py-3.5 rounded-full hover:border-white hover:bg-white/15 backdrop-blur-sm transition-all">
                    <i class="fas fa-play-circle"></i> Notre histoire
                </a>
            </div>
        </div>
    </div>

    
    <div class="absolute bottom-0 left-0 right-0">
        <svg viewBox="0 0 1440 60" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
            <path d="M0 60L1440 60L1440 20C1200 60 960 0 720 20C480 40 240 0 0 20L0 60Z" fill="#FDF6EC"/>
        </svg>
    </div>
</section>


<section class="bg-cream py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <?php $__currentLoopData = [['fas fa-box-open','100+','Produits artisanaux'],['fas fa-smile','500+','Clients satisfaits'],['fas fa-award','10+','Années d\'expérience'],['fas fa-map-marker-alt','15+','Wilayas livrées']]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as [$icon, $number, $label]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="bg-white rounded-2xl p-6 text-center shadow-sm border border-orange-100">
                <div class="w-12 h-12 bg-cream rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="<?php echo e($icon); ?> text-primary text-xl"></i>
                </div>
                <div class="font-serif text-3xl font-bold text-primary"><?php echo e($number); ?></div>
                <div class="text-gray-500 text-sm mt-1"><?php echo e($label); ?></div>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>


<?php if($categories->count()): ?>
<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="text-secondary font-medium text-sm uppercase tracking-wider">Collections</span>
            <h2 class="font-serif text-3xl md:text-4xl font-bold text-gray-800 mt-2">Nos Catégories</h2>
            <p class="text-gray-500 mt-3 max-w-xl mx-auto">Explorez notre gamme de créations artisanales organisées par univers.</p>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-<?php echo e(min($categories->count(), 4)); ?> gap-5">
            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="<?php echo e(route('products', ['category' => $category->slug])); ?>"
               class="group bg-cream-dark rounded-2xl p-6 text-center hover:bg-primary hover:text-white transition-all duration-300 card-hover border border-orange-100">
                <div class="w-14 h-14 bg-white rounded-full flex items-center justify-center mx-auto mb-3 group-hover:bg-white/20 transition-colors">
                    <i class="<?php echo e($category->icon ?? 'fas fa-star'); ?> text-primary text-2xl group-hover:text-white transition-colors"></i>
                </div>
                <h3 class="font-semibold text-gray-800 group-hover:text-white transition-colors"><?php echo e($category->name); ?></h3>
                <p class="text-sm text-gray-500 group-hover:text-white/70 transition-colors mt-1"><?php echo e($category->active_products_count); ?> produit(s)</p>
            </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>
<?php endif; ?>


<?php if($recentProducts->count()): ?>
<section class="py-16 bg-cream">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row md:items-end md:justify-between mb-12">
            <div>
                <span class="text-secondary font-medium text-sm uppercase tracking-wider">Nouveautés</span>
                <h2 class="font-serif text-3xl md:text-4xl font-bold text-gray-800 mt-2">Produits Récents</h2>
                <p class="text-gray-500 mt-2 text-sm">Les <?php echo e($recentProducts->count()); ?> dernières créations ajoutées à notre catalogue.</p>
            </div>
            <a href="<?php echo e(route('products')); ?>"
               class="mt-4 md:mt-0 inline-flex items-center gap-2 bg-primary text-white px-5 py-2.5 rounded-full text-sm font-medium hover:bg-primary-dark transition-all shadow-sm hover:shadow-md">
                Voir tous les produits <i class="fas fa-arrow-right"></i>
            </a>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <?php $__currentLoopData = $recentProducts; $__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>
    </div>
</section>
<?php endif; ?>


<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <span class="text-secondary font-medium text-sm uppercase tracking-wider">Nos valeurs</span>
            <h2 class="font-serif text-3xl md:text-4xl font-bold text-gray-800 mt-2">Pourquoi Nous Choisir ?</h2>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <?php $__currentLoopData = [
                ['fas fa-hand-holding-heart','Fait avec Amour','Chaque produit est confectionné à la main avec soin et passion, garantissant une qualité exceptionnelle.'],
                ['fas fa-leaf','Matériaux Naturels','Nous utilisons uniquement des matériaux naturels et durables, respectueux de l\'environnement.'],
                ['fas fa-truck','Livraison Rapide','Livraison soignée dans tout le Maroc, votre commande arrive dans les meilleures conditions.']
            ]; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as [$icon, $title, $desc]): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="text-center group">
                <div class="w-20 h-20 bg-cream rounded-full flex items-center justify-center mx-auto mb-5 group-hover:bg-primary transition-all duration-300">
                    <i class="<?php echo e($icon); ?> text-primary text-3xl group-hover:text-white transition-colors"></i>
                </div>
                <h3 class="font-serif text-xl font-bold text-gray-800 mb-3"><?php echo e($title); ?></h3>
                <p class="text-gray-500 leading-relaxed"><?php echo e($desc); ?></p>
            </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>


<section class="hero-gradient text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="font-serif text-3xl md:text-4xl font-bold mb-4">Prêt à commander ?</h2>
        <p class="text-white/80 text-lg mb-8 max-w-xl mx-auto">
            Parcourez notre catalogue et trouvez le produit artisanal qui vous correspond.
        </p>
        <a href="<?php echo e(route('products')); ?>"
           class="inline-flex items-center gap-2 bg-white text-primary font-semibold px-10 py-4 rounded-full hover:bg-secondary-light transition-all shadow-lg hover:shadow-xl text-lg">
            <i class="fas fa-shopping-bag"></i> Voir tous nos produits
        </a>
    </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/home.blade.php ENDPATH**/ ?>