<?php $__env->startSection('title', "Bicycle Repairs & Servicing - MJ's Bikes"); ?>

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

<!-- HEADER -->
<div class="bg-dark text-white py-4 mb-5">
    <div class="container text-center text-md-start d-flex flex-column flex-md-row justify-content-between align-items-center">
        <div>
            <h1 class="brand-font text-uppercase mb-1 text-white">Repair & <span class="text-danger">Servicing</span> Workshop</h1>
            <p class="text-secondary mb-0">Professional adjustments, component installations, and full safety service checks.</p>
        </div>
        <nav aria-label="breadcrumb" class="mt-3 mt-md-0">
            <ol class="breadcrumb mb-0 justify-content-center">
                <li class="breadcrumb-item"><a href="<?php echo e(route('home')); ?>" class="text-danger text-decoration-none">Home</a></li>
                <li class="breadcrumb-item active text-white" aria-current="page">Services</li>
            </ol>
        </nav>
    </div>
</div>

<div class="container mb-5">
    
    <!-- INTRO CARDS -->
    <div class="row g-4 mb-5 justify-content-center">
        <div class="col-md-4 text-center">
            <div class="card border-0 shadow-sm rounded-4 p-4 h-100 bg-white">
                <div class="text-danger fs-1 mb-2"><i class="bi bi-clock-history"></i></div>
                <h5 class="fw-bold text-secondary">Same-Day Tuning</h5>
                <p class="text-muted small mb-0">Bring your bicycle in by 9:00 AM, and we will have basic gear calibrations or brake adjustments completed by evening.</p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="card border-0 shadow-sm rounded-4 p-4 h-100 bg-white">
                <div class="text-danger fs-1 mb-2"><i class="bi bi-truck"></i></div>
                <h5 class="fw-bold text-secondary">Home Pickup & Return</h5>
                <p class="text-muted small mb-0">Too busy? Check the "Pickup required" box during booking, and our crew will collect your bike and deliver it back once serviced.</p>
            </div>
        </div>
        <div class="col-md-4 text-center">
            <div class="card border-0 shadow-sm rounded-4 p-4 h-100 bg-white">
                <div class="text-danger fs-1 mb-2"><i class="bi bi-shield-check"></i></div>
                <h5 class="fw-bold text-secondary">Service Warranty</h5>
                <p class="text-muted small mb-0">We stand behind our work. Enjoy a 30-day service warranty on all derailleur adjustments, brake refilling, and wheel spoke calibrations.</p>
            </div>
        </div>
    </div>

    <!-- SERVICES LISTING GRID -->
    <h3 class="brand-font text-uppercase text-secondary mb-4 text-center">Workshop <span class="text-danger">Menu</span></h3>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <?php
                $imageSrc = mjs_image($service->image_path, $service->id);
            ?>
            <div class="col">
                <div class="card product-card h-100">
                    <div class="card-img-wrap" style="padding-top: 56.25%;"> <!-- 16:9 aspect ratio -->
                        <img src="<?php echo e($imageSrc); ?>" alt="<?php echo e($service->name); ?>">
                    </div>
                    <div class="card-body p-4 d-flex flex-column">
                        <h5 class="fw-bold mb-2 text-secondary"><?php echo e($service->name); ?></h5>
                        <p class="card-text text-muted small flex-grow-1"><?php echo e($service->description); ?></p>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3 pt-3 border-top">
                            <div>
                                <small class="text-muted d-block" style="font-size: 10px;">EST. COST</small>
                                <span class="fw-extrabold text-danger fs-5">KSh <?php echo e(number_format($service->estimated_cost)); ?></span>
                            </div>
                            <div>
                                <small class="text-muted d-block text-end" style="font-size: 10px;">DURATION</small>
                                <span class="fw-semibold text-secondary small"><i class="bi bi-clock me-1"></i><?php echo e($service->duration ?? '1 Hour'); ?></span>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer bg-white border-0 pb-4 px-4 pt-0">
                        <a href="<?php echo e(route('services.book', ['service' => $service->slug])); ?>" class="btn btn-primary-mj w-100 rounded-pill py-2">
                            Book Repair Booking <i class="bi bi-calendar-check ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
    </div>

</div>

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

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\xampp\htdocs\mjs-bikes-marketplace\resources\views/services/index.blade.php ENDPATH**/ ?>