<?php $__env->startSection('title', 'Our Services'); ?>

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


<section class="py-5 bg-dark text-white">
    <div class="container text-center">
        <h1 class="fw-bold mb-2">Our Services</h1>
        <p class="text-white-50 mb-0">
            Reliable construction, engineering & infrastructure solutions
        </p>
    </div>
</section>


<section class="py-5 bg-light">
    <div class="container">

        <div class="row justify-content-center">
            <div class="col-lg-9">

                <ul class="list-group list-group-flush">

                    <?php $__currentLoopData = $services; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $service): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <li class="list-group-item bg-white shadow-sm mb-3 rounded service-item">

                        <div class="d-flex align-items-start gap-3">

                            
                            <div class="service-number">
                                <?php echo e(str_pad($index + 1, 2, '0', STR_PAD_LEFT)); ?>

                            </div>

                            
                            <div class="flex-grow-1">
                                <a
                                    href="<?php echo e(route('frontend.services.show', $service->slug)); ?>"
                                    class="service-title"
                                >
                                    <?php echo e($service->title); ?>

                                </a>

                                <?php if($service->description): ?>
                                <p class="text-muted mt-1 mb-0">
                                    <?php echo e(Str::limit($service->description, 120)); ?>

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

                            
                            <div class="service-arrow">
                                <i class="fas fa-arrow-right"></i>
                            </div>

                        </div>

                    </li>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                </ul>

            </div>
        </div>

    </div>
</section>

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

<?php $__env->startPush('styles'); ?>
<style>
/* SERVICE ITEM */
.service-item {
    border: none;
    transition: all 0.3s ease;
}

.service-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

/* NUMBER */
.service-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #f0ad4e;
    min-width: 45px;
}

/* TITLE */
.service-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #222;
    text-decoration: none;
}

.service-title:hover {
    color: #198754;
    text-decoration: underline;
}

/* ARROW */
.service-arrow {
    color: #198754;
    font-size: 1rem;
    opacity: 0.6;
}

/* MOBILE FIX */
@media (max-width: 767px) {
    .service-arrow {
        display: none;
    }
}
</style>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('frontend.layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /usr/local/var/www/hasa/resources/views/frontend/services.blade.php ENDPATH**/ ?>