@extends('site.master')

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

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

        {{-- Hero with servicepoint --}}
        <div class="o-hero">
            <div class="u-bg-triangle-primary"></div>
            <div class="o-hero__main" data-type="contact-person">
                <div class="o-hero__content">
                    <p class="o-hero__title">{{$page->translation->name}}</p>
                    <h1 class="o-hero__header">{{$page->translation->hero_title}}</h1>
                    <p class="o-hero__text">{{$page->translation->hero_description}}</p>
                </div>
                <div class="o-hero__contact-person">
                    @if(!empty($servicepoint))
                        @include('site.components.servicepoint', [
                            'alternate' => true,
                            'modifiers' => ['small', 'on-dark'],
                            'servicepoint' => $servicepoint,
                            'servicepointText' => __('site/global.servicepoint.text'),
                            'servicepointButtonText' => __('site/global.servicepoint.buttonText'),
                            'servicepointButtonLink' => $links->quotation->route,
                        ])
                    @endif
                </div>
            </div>
        </div>


        <div class="u-bg-wrapper">
            <div class="u-ornament-triangle"></div>
            <div class="u-bg-triangle-neutral"></div>

            <div class="o-card-grid">
                <div class="o-card-grid__main">
                    <div class="o-card-grid__header">
                        <h3 class="o-card-grid__title  u-color-text--800  u-text-align-center">@lang('site/services.header')</h3>
                    </div>
                    <div class="o-card-grid__list  o-card-grid__list--deluxe">
                        @foreach($services as $model)
                            <div class="o-card-grid__item">
                                <a class="c-card" href="{{$links->services->route . '/' . $model->translation->slug}}">
                                    <div class="c-card__image">
                                        @if($model->images->count() > 0)
                                            <img src="{{$model->documents->first()->medium_image_url}}" alt="{{$model->documents->first()->name}}">
                                        @endif
                                    </div>
                                    <div class="c-card__content">
{{--                                        <p class="c-card__label">@lang('site/services.service')</p>--}}
                                        <h4 class="c-card__title">{{$model->translation->name}}</h4>
                                        <div class="c-card__action">
                                            @include('site.components.button', [
                                                'buttonText' => __('site/services.buttonLabel'),
                                                'type' => 'text',
                                                'modifiers' => ['icon'],
                                                'tagName' => 'div'
                                            ])
                                        </div>
                                    </div>
                                </a>
                            </div>
                        @endforeach

                        {{-- Extra card with cta --}}
                        <div class="o-card-grid__item  o-card-grid__item--cta">

                            <div class="c-cta-card" href="{{$links->contact->route}}">
                                <div class="c-cta-card__content">
                                    <p class="c-cta-card__lead">@lang('site/services.extraCard.leadText')</p>
                                    <div class="c-cta-card__action">
                                        @include('site.components.button', [
                                            'buttonText' => __('site/services.extraCard.buttonLabel'),
                                            'buttonLink' => $links->contact->route,
                                            'type' => 'text',
                                            'modifiers' => ['icon', 'on-dark'],
                                        ])
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>

        @include('site.organisms.calloutBar', ['showCalloutBarOrnament' => true])

    </div>
@endsection