<div>
    <section class="breadcumb-section pt-10">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcumb-style1">
                        <div class="breadcumb-list">
                            <a href="<?php echo e(route('welcome')); ?>">Home</a>
                            <a href="<?php echo e(route('shops.page')); ?>">Shops</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcumb Sections -->
    <section class="breadcumb-section pt-4">
        <div class="cta-service-v2 cta-banner mx-auto maxw1700 pt120 pb120 bdrs16 position-relative overflow-hidden d-flex align-items-center mx20-lg px30-lg">
            <img class="left-top-img wow zoomIn" src="<?php echo e(asset('images/vector-img/left-top.png')); ?>" alt="">
            <img class="right-bottom-img wow zoomIn" src="<?php echo e(asset('images/vector-img/right-bottom.png')); ?>" alt="">
            <img class="service-v1-vector bounce-y d-none d-lg-block" src="<?php echo e(asset('images/vector-img/vector-service-v1.png')); ?>" alt="">
            <div class="container pt-8 pb-8">
                <div class="row wow fadeInUp">
                    <div class="col-xl-5">
                        <div class="position-relative">
                            <h2>Available Expert Shops</h2>
                            <p class="text mb30">Connect with skilled professionals across various fields, ready to meet your needs and bring your ideas to life.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="row px-4 py-2" id="nearby-shops">
        <!--[if BLOCK]><![endif]--><?php $__empty_1 = true; $__currentLoopData = $shops; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $shop): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
        <div class="col-sm-6 col-md-4 col-lg-4 col-xl-2 text-center">
            <a href="<?php echo e(route('show.shop.services', $shop['slug'])); ?>">
                <div class="shop-card p-3 mb-4 border" style="border-radius: 22px; height:275px;">
                    <span class="position-relative mr10">
                        <img style="border: 2px solid #4CAF50; width: 118px; height: 118px; border-radius: 50%; object-fit: cover;" src="<?php echo e($shop['profile_photo_url']); ?>" alt="<?php echo e($shop['name']); ?>">
                    </span>
                    <div class="details pt-1">
                        <h4 class="title mb-1 fw-bold pt-1"><?php echo e($shop['name'] ?? ''); ?></h4>
                        <span class="text-thm mb-0 pt-0"><?php echo e($shop['category']['name'] ?? ''); ?></span>
                    </div>
                </div>
            </a>
        </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
        <div class="text-center text-lg-center mb-4">
            <a class="ud-btn btn-light-thm bdrs90" href="<?php echo e(route('category.page')); ?>">No services found. Please check back</a>
        </div>
        <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
    </div>


    <style>
        @media (max-width: 575.98px) {
            #nearby-shops .col-sm-6 {
                width: 50%;
            }
        }

        .circle-container {
            width: 90px;
            /* Adjust as needed */
            height: 90px;
            /* Same as width for a perfect circle */
            border-radius: 50%;
            /* Makes it a circle */
            overflow: hidden;
            /* Ensures contents are clipped to the circle */
            background-color: #f1f1f1;
            /* Optional background color */
        }
    </style>
</div><?php /**PATH /var/www/html/resources/views/livewire/pages/shops.blade.php ENDPATH**/ ?>