
<section class="categories-section" style="background: white;">
    <div class="container">
        <?php if($section->title || $section->subtitle): ?>
            <div style="text-align: center; margin-bottom: 4rem;">
                <?php if($section->subtitle): ?>
                    <p style="color: var(--accent); font-weight: 600; font-size: 1rem; margin-bottom: 0.5rem;">
                        <?php echo e($section->subtitle); ?>

                    </p>
                <?php endif; ?>

                <?php if($section->title): ?>
                    <h2 style="font-size: 2.75rem; font-weight: 800; color: #111827;">
                        <?php echo e($section->title); ?>

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

        <?php
            $categories = \App\Models\Product\ProductCategory::where('agency_id', $agency->id)
                ->active()
                ->public()
                ->whereNull('parent_id')
                ->withCount('products')
                ->orderBy('sort_order')
                ->limit($section->getConfig('category_limit', 8))
                ->get();
        ?>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem;">
            <?php $__currentLoopData = $categories; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $category): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                <a href=""
                   style="text-decoration: none; display: block; position: relative; border-radius: 20px; overflow: hidden; height: 320px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transition: all 0.3s;">

                    <?php if($category->image): ?>
                        <img src="<?php echo e(asset('storage/' . $category->image)); ?>"
                             alt="<?php echo e($category->name); ?>"
                             style="width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s;">
                    <?php else: ?>
                        <div style="width: 100%; height: 100%; background: linear-gradient(135deg, <?php echo e('#' . str_pad(dechex(mt_rand(0, 16777215)), 6, '0', STR_PAD_LEFT)); ?>, <?php echo e('#' . str_pad(dechex(mt_rand(0, 16777215)), 6, '0', STR_PAD_LEFT)); ?>);"></div>
                    <?php endif; ?>

                    <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem;">
                        <?php if($category->icon): ?>
                            <i class="<?php echo e($category->icon); ?>" style="font-size: 2.5rem; color: white; margin-bottom: 1rem;"></i>
                        <?php endif; ?>

                        <h3 style="color: white; font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem;">
                            <?php echo e($category->name); ?>

                        </h3>

                        <p style="color: rgba(255,255,255,0.9); font-size: 0.938rem; margin-bottom: 1rem;">
                            <?php echo e($category->short_description ?? Str::limit($category->description, 60)); ?>

                        </p>

                        <div style="display: flex; justify-content: space-between; align-items: center;">
                            <span style="color: white; font-size: 0.875rem; opacity: 0.9;">
                                <i class="fas fa-map-marked-alt"></i> <?php echo e($category->products_count); ?> Ürün
                            </span>
                            <span style="background: white; color: var(--primary); padding: 0.5rem 1.25rem; border-radius: 50px; font-weight: 600; font-size: 0.875rem;">
                                Keşfet <i class="fas fa-arrow-right"></i>
                            </span>
                        </div>
                    </div>
                </a>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
        </div>
    </div>
</section>

<style>
    .categories-section a:hover img {
        transform: scale(1.15);
    }

    .categories-section a:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    }
</style>
<?php /**PATH /home/mehmetguruz/public_html/test/resources/views/page/agency/themes/default/sections/categories.blade.php ENDPATH**/ ?>