@extends('layouts.master')

@section('title', "Nos services pour ".  $service['title'] .  " en architecture")

@section('title', "Notre service " . $service['title'] . " pour votre projet d'architecture. Contactez-nous pour en savoir plus.")

@section('content')

<!-- page header start -->
<section class="masthead -type-work-1 -full-screen bg-black sm:text-center js-masthead-type-work-1 js-bg">
    <div data-parallax="0.7" class="masthead__bg overlay-black-md js-image">
        <div data-parallax-target class="bg-image js-lazy js-bg-item" data-bg="{{ asset('img/' . $service['image']) }}"></div>
    </div>

    <div class="masthead__content">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-xl-10 col-sm-10 z-3">
                    <div data-split="lines">
                        <p class="masthead__subtitle text-lg sm:text-base text-white mb-32 sm:mb-24 js-subtitle">
                            Service
                        </p>
                    </div>

                    <div data-split="lines">
                        <h1 class="masthead__title text-white fw-700 js-title">
                            {{ $service['title'] }}
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- page header end -->

<section class="layout-pt-lg layout-pb-lg bg-dark-1">
    <div>

        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row justify-content-between text-light">

                <div class="col-lg-6 col-md-10">
                    <div class="sectionHeading -sm">
                        <h1 class="sectionHeading__title text-white">
                            {!! $service['subTitle'] !!}
                        </h1>
                    </div>
                </div>

                <div class="col-lg-5 col-md-10 md:mt-32 sm:mt-20">
                    <div>
                        <p class="text-lg text-light sm:text-base">
                            {{ $service->text1 }}
                        </p>
                        <p class="text-lg sm:text-base mt-32 md:mt-20">
                            {{ $service->text2 }}
                        </p>
                        <p class="text-lg sm:text-base mt-32 md:mt-20">
                            {{ $service->text3 }}
                        </p>
                    </div>
                </div>

            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </div>
</section>
<!-- section end -->


<!-- section start -->
<section class="layout-pt-lg layout-pb-lg bg-light-1">

    <!-- container start -->
    <div class="container z-5">
        <!-- row start -->
        <div class="row justify-content-center text-center">
            <div class="col-12">
                <p class="text-sm uppercase tracking-lg text-dark mb-20">
                    Construisons votre projet
                </p>

                <h2 class="text-5xl sm:text-5xl xs:text-4xl leading-sm fw-700 text-dark">
                    Des questions ?
                </h2>

                <p class="text-xl md:text-lg text-dark mt-16">
                    Il suffit de demander.
                </p>

                <a href="{{ route('contact') }}" class="button -md -black text-white mt-32">
                    Prendre contact
                </a>
            </div>
        </div>
        <!-- row end -->
    </div>
    <!-- container end -->
</section>
<!-- section end -->

<!-- section start -->
<section class="projects-nav">
    <!-- row start -->
    <div class="row no-gutters">

        <div class="col-lg-6">
            <a data-barba href="{{ route('service-single', ['single' => $previousService['slug_services']]) }}" class="projects-nav__item -prev bg-dark-1">
                <div class="projects-nav__img">
                    <div class="bg-image js-lazy"></div>
                </div>

                <div class="projects-nav__content">
                    <div class="projects-nav__icon">
                        <i class="size-xl str-width-xs text-white" data-feather="arrow-left-circle"></i>
                    </div>

                    <h3 class="text-4xl fw-400 tracking-none text-white">
                        {{ $previousService['title'] }}
                    </h3>

                    <p class="projects-nav__text -prev text-sm fw-500 text-white tracking-md uppercase">
                        PRÉCÉDENT
                    </p>
                </div>
            </a>
        </div>


        <div class="col-lg-6">
            <a data-barba href="{{ route('service-single', ['single' => $nextService['slug_services']]) }}" class="projects-nav__item -next bg-dark-1">
                <div class="projects-nav__img">
                    <div class="bg-image js-lazy"></div>
                </div>

                <div class="projects-nav__content">
                    <h3 class="text-4xl fw-400 tracking-none text-white">
                        {{ $nextService['title'] }}
                    </h3>

                    <div class="projects-nav__icon">
                        <i class="size-xl str-width-xs text-white" data-feather="arrow-right-circle"></i>
                    </div>

                    <p class="projects-nav__text -next text-sm fw-500 text-white tracking-md uppercase">
                        SUIVANT
                    </p>
                </div>
            </a>
        </div>

    </div>
    <!-- row end -->
</section>
<!-- section end -->

@endsection