@extends('frontend.layouts.app')
@section('title', $service->title)

@section('content')

{{-- ================= PAGE HEADER ================= --}}
<section class="py-5 bg-dark text-white">
    <div class="container">
        <h1 class="fw-bold mb-1">{{ $service->title }}</h1>
        <p class="mb-0 text-white-50">
            Professional construction & engineering services
        </p>
    </div>
</section>

{{-- ================= SERVICE CONTENT ================= --}}
<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">

            <div class="col-lg-9">

                <div class="bg-white p-4 p-md-5 shadow-sm rounded">

                    {{-- IMAGE --}}
                    @if($service->image)
                    <img
                        src="{{ asset('storage/services/' . $service->image) }}"
                        alt="{{ $service->title }}"
                        class="img-fluid rounded mb-4 float-md-start me-md-4"
                        style="max-width:260px;"
                    >
                    @endif

                    {{-- DESCRIPTION --}}
                    @if($service->description)
                    <div class="service-description">
                        {!! nl2br(e($service->description)) !!}
                    </div>
                    @endif

                    <div class="clearfix"></div>

                    {{-- CTA --}}
                    <div class="mt-4 d-flex flex-wrap gap-3">
                        <a href="{{ route('frontend.services') }}" class="btn btn-outline-secondary">
                            ← Back to Services
                        </a>

                        <a href="{{ route('frontend.contact') }}" class="btn btn-warning">
                            Request This Service
                        </a>
                    </div>

                </div>

            </div>

        </div>
    </div>
</section>

@endsection

@push('styles')
<style>
.service-description {
    color: #555;
    line-height: 1.8;
    text-align: justify;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Mobile image fix */
@media (max-width: 767px) {
    img.float-md-start {
        float: none !important;
        margin-right: 0 !important;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
</style>
@endpush
