@extends('site.master', [ 'headerIsLight' => true ])

@section('title', $page->translation->meta_title)
@section('meta_description', $page->translation->meta_description)

@section('content')
    <div class="c-body">

        @include('site.organisms.componentables.textImage', [
        'component' => (object)[
            'reversed' => true,
            'gradient' => true,
            'corners' => false,
            'text' => '<h1>'.$page->translation->header_title.'</h1>'.$page->translation->header_description,
            'image' => $page->images,
            'button_link' => '#more',
            'button_label' => $page->translation->header_button_label,
        ],
        'loop' => (object)[
            'iteration' => 0,
        ]])

        <div class="o-block o-block-bg o-block-grey">
            <div class="o-services_grid">
                <h2 class="on-light" id="more">{{$page->translation->header_title}}</h2>
                @if(count($services) > 0)
                    <div class="c-services_grid">
                        @foreach($services as $service)

                            <article>
                                <a href="{{$links->services->route}}/{{$service->translation->slug}}">
                                    <span class="icon {{$service->iconArray[$service->id]}}">@include('site.components.icons.'.$service->iconArray[$service->id])</span>
                                    <div class="text">
                                        <h4>{{ $service->translation->name }}</h4>
                                        {!! $service->translation->description !!}
                                    </div>
                                    <div class="arrow">
                                        @include('site.components.icons.arrowhead_large')
                                    </div>
                                </a>
                            </article>

                        @endforeach
                    </div>
                @else

                    <div class="u-text-align-center">
                        <h3 class="u-color-secondary">@lang('site/services.no_services')</h3>
                    </div>

                @endif
            </div>
        </div>

        <div class="o-block o-block-bg o-block-white">
            @include('site.components.ctaPerson')
        </div>
@endsection