<?php if (!defined('ABSPATH')) exit; ?>
<div class="categories-icons-section py-6">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3">
            <?php foreach ($categories as $cat): 
                $cat_data = Dima_Product::get_category_data($cat->term_id);
            ?>
            <a href="<?php echo esc_url(get_term_link($cat)); ?>" class="flex flex-col items-center gap-2 p-3 rounded-lg hover:bg-gray-50 transition group">
                <?php if ($cat_data['image_url']): ?>
                    <div class="w-16 h-16 md:w-20 md:h-20 rounded-full overflow-hidden border-2 border-gray-200 group-hover:border-blue-500 transition">
                        <img src="<?php echo esc_url($cat_data['image_url']); ?>" alt="<?php echo esc_attr($cat->name); ?>" class="w-full h-full object-cover">
                    </div>
                <?php elseif ($cat_data['icon']): ?>
                    <div class="w-16 h-16 md:w-20 md:h-20 rounded-full flex items-center justify-center text-3xl" style="background: <?php echo esc_attr($cat_data['color']); ?>20; color: <?php echo esc_attr($cat_data['color']); ?>">
                        <span class="dashicons <?php echo esc_attr($cat_data['icon']); ?>"></span>
                    </div>
                <?php endif; ?>
                <span class="text-xs text-center text-gray-700 font-medium"><?php echo esc_html($cat->name); ?></span>
            </a>
            <?php endforeach; ?>
        </div>
    </div>
</div>