@extends('master')

@section('title', $service->translation->meta_title != '' ? $service->translation->meta_title : $service->translation->name .' | '. config('site.company_name'))
@section('meta_description', $service->translation->meta_description)

@section('content')


    <section class="o-hero">

        <div class="o-hero__top-shape">
            <img alt="shape element" src="/img/hero_shape-2.svg" />
        </div>

        <div class="o-hero__main">
            <div class="l-contain">
                <div class="o-hero__grid  @if(isset($service->heroImages) && $service->heroImages->isEmpty()) no-image @endif ">
                    <div class="o-hero__text  @if(isset($service->heroImages) && $service->heroImages->isEmpty()) additional-padding @endif ">
                        <div class="u-spacing-mb6">
                            @include('components.breadcrumb')
                        </div>
                        <div class="s-text s-text--on-dark">
                            <h1 class="c-service-heading">
                                @if(!empty($service->icon_name))
                                    <span class="c-service-heading__icon">
                                        <img src="/img/services/{{$service->icon_name}}.svg"/>
                                    </span>
                                @endif

                                @if(!empty($service->translation->visual_name))
                                    {!! $service->translation->visual_name !!}
                                @else
                                    {{ $service->translation->name }}
                                @endif
                            </h1>

                            @if(!empty($service->translation->hero_description))
                                {!! $service->translation->hero_description !!}
                            @endif

                            @if(!empty($service->translation->button_text) && !empty($service->translation->button_link))
                                <div class="o-hero__button">
                                    @include('components.button', [
                                        'modifiers' => ['on-dark', 'icon'],
                                        'buttonLink' => $service->translation->button_link,
                                        'buttonText' => $service->translation->button_text,
                                    ])
                                </div>
                            @endif
                        </div>
                    </div>

                    <div class="o-hero__image">
                        @if(isset($service->heroImages) && $service->heroImages->isNotEmpty())
                            @include('components.clippedImage', ['image' => $service->heroImages->first(), 'pathId' => $service->hero_image_shape])
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="o-hero__bottom-shape">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 114.954"><path d="M0,82.135l1,.047c536.287,25.689,719.319,44.831,1320.093,23.75Q1671.387,93.64,1920,18.6V0H0Z" fill="currentColor"/></svg>
        </div>
    </section>

    @include('organisms.components')

@endsection