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

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

@section('content')

    <div class="c-body o-contact">

        <div class="l-contain  o-block">
            <div class="c-text-image l-bisection l-bisection--gradient">
                <div class="l-bisection__item s-image">
                    @include('site.components.image', ['images' => $page->images, 'imageId' => 'componentable-area-0-slider' ])
                </div>
                <div class="l-bisection__item  s-text">

                    <h1>{{$page->translation->header_title}}</h1>{!! $page->translation->header_description !!}

                    <div class="contact-options">
                        <div class="left">
                            <a href="tel:{{\Config::get('site.company.phone.call')}}">@include('site.components.icons.phone') {{\Config::get('site.company.phone.display')}}</a>
                            <a href="mailto:{{\Config::get('site.company.email')}}">@include('site.components.icons.socials.mail') {{\Config::get('site.company.email')}}</a>
                        </div>
                        <div class="right">
                            @include('site.components.icons.home')
                            <div class="company-details">
                                <p>{{\Config::get('site.company.address')}}</p>
                                <p>{{\Config::get('site.company.zip')}} {{\Config::get('site.company.city')}}</p>
                            </div>
                        </div>

                        <a class="c-button c-button--ghost c-button--no-corner"
                           href="tel:{{\Config::get('site.company.phone.call')}}">
                            @include('site.components.icons.phone') 24/7 service
                        </a>
                    </div>

                </div>
            </div>
        </div>

        <div class="l-contain o-block o-block-bg o-block-grey o-contact-content">
            <div class="c-contact-content l-bisection">
                <div class="l-bisection__item o-contact__map" id="map"
                     data-google-lat="{{ config('site.company.googleMaps.lat') }}"
                     data-google-lng="{{ config('site.company.googleMaps.lng')  }}">
                </div>

                <div class="l-bisection__item o-contact__form">
                    @include('site.organisms.forms.contact')
                </div>
            </div>

        </div>

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

    </div>

@endsection