@extends('frontend.layouts.app')
@section('title', 'Our Services')

@section('content')

{{-- ================= PAGE HEADER ================= --}}
<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>

{{-- ================= SERVICES LIST ================= --}}
<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">

                    @foreach($services as $index => $service)
                    <li class="list-group-item bg-white shadow-sm mb-3 rounded service-item">

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

                            {{-- Number --}}
                            <div class="service-number">
                                {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
                            </div>

                            {{-- Content --}}
                            <div class="flex-grow-1">
                                <a
                                    href="{{ route('frontend.services.show', $service->slug) }}"
                                    class="service-title"
                                >
                                    {{ $service->title }}
                                </a>

                                @if($service->description)
                                <p class="text-muted mt-1 mb-0">
                                    {{ Str::limit($service->description, 120) }}
                                </p>
                                @endif
                            </div>

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

                        </div>

                    </li>
                    @endforeach

                </ul>

            </div>
        </div>

    </div>
</section>

@endsection

@push('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>
@endpush
