@extends('front.layout.app')
@section('title', 'Off-Road Vehicle Rescue Service | Mobile Tire Repair Service Yuma')
@section('meta')
    <meta name="title" content="Off-Road Vehicle Rescue Service | Mobile Tire Repair Service Yuma">
    <meta name="description" content="Stranded? Get Fast Off-Road Vehicle Rescue Service and Mobile Tire Repair Service Yuma. Big Bear Recovery Is Here To Keep You Moving—On Or Off The Beaten Path.">
@endsection

@section('content')

    <section class="inner-banner">
        <img src="{{ $service->cmsImages('banner_image') ?? '' }}" alt="jump start car service" class="img-fluid w-100 h-100">
        <div class="container">
            <div class="inner-banner__content">
                <div class="row">
                    <div class="col-lg-7">
                        <h1 class="font-bold">{{ $service->content['banner_heading'] ?? '' }} </h1>
                        <p>
                            {{ $service->content['banner_description'] ?? '' }}
                        </p>
                        <div class="btn-group">
                            <a href="{{ route('front.about') }}"
                                class="themeBtn">{{ $service->content['banner_btn1'] ?? '' }}</a>
                            <a href="{{ route('front.contact') }}"
                                class="themeBtn">{{ $service->content['banner_btn2'] ?? '' }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div> 
        <div class="inner-banner__bottom">
            <div class="container">
                <ul class="bottom__links d-flex align-items-center justify-content-start">
                    <li><a href="{{ route('front.index') }}"><span><i class="fas fa-home"></i></span> Home</a></li>
                    <li><a href=""><span><i class="fas fa-angle-right"></i></span> Services</a></li>
                </ul>
            </div>
        </div>
    </section>

    <section class="service-inner padd-y">
        <div class="container">
            @forelse ($services as $index => $itemData)
                <div class="row no-gutters {{ $index % 2 == 1 ? 'flex-row-reverse' : '' }}">
                    <div class="col-lg-6">
                        <figure class="service-inner__img">
                            <img src="{{ $itemData->serviceImage('service_image') }}" alt="{{ $itemData->img_alt ?? '' }}"
                                class="img-fluid w-100">
                        </figure>
                    </div>
                    <div class="col-lg-6">
                        <div class="service-inner__content">
                            <h3 class="secHeading">{{ $itemData->heading }}</h3>
                            <p>
                                {!!  $itemData->description  !!}
                            </p>
                            <div>
                                <a href="{{ route('front.contact') }}" class="themeBtn themeBtn--primary">Emergency support 24/7</a>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
            @endforelse
        </div>
    </section>

    @include('front.include.stories')

@endsection