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

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

@section('content')

    <div class="o-intro">
        <div class="o-intro__header">
            @include('site.components.pageTitle')
        </div>
        <div class="o-intro__body">
            <div class="o-intro__main">

                <div class="o-contact">
                    <div class="o-contact__info">
                        <h2 class="o-contact__header">{{config('site.company_name')}}</h2>

                        @if(!empty($page->hero->description))
                            <p>{!! $page->hero->description !!}</p>
                        @endif


                        <div class="o-contact__address">
                            <h5>@lang('address.address')</h5>
                            <p>{{config('site.company_address')}}</p>
                            <p>{{config('site.company_zip')}} {{config('site.company_city')}}</p>
                            <p>{{config('site.company_country')}}</p>
                            <p>&nbsp;</p>
                            <p><a href="tel:{{ config('site.company_phone_call') }}">{{ config('site.company_phone_display') }}</a></p>
                            <p><a href="mailto:{{ config('site.company_email') }}">{{ config('site.company_email') }}</a></p>
                        </div>

                        <div class="o-contact__address">
                            <h5>Openingstijden</h5>
                            <p>Maandag tot vrijdag van 08.00 tot 18.00 uur.</p>
                            <p>Zaterdag van 09.00 tot 13.00 uur.</p><br>
                            <p><b>Liever een ander moment?</b> <br>Neem contact op voor een snelle afspraak.</p>
                        </div>

                    </div>
                    <div class="o-contact__form">

                        @if(isset($send))
                            <h2 class="o-contact__header">@lang('site/contact.send.title')</h2>
                            <p>@lang('site/contact.send.description')</p>
                        @else
                            <h2 class="o-contact__header">@lang('site/contact.form_title')</h2>
                            @include('site.organisms.forms.contact')
                        @endif
                    </div>
                </div>

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

    @include('site.organisms.components')

    <div class="o-block">
        <div class="l-contain">
            <h3 class="c-heading  c-heading--indent">@lang('site/contact.map_heading')</h3>
            <div class="o-map  js-google-map" id="map" style="height: 576px; max-height: 50vh"
                 data-google-lat="51.219899"
                 data-google-lng="5.283881"
            ></div>
        </div>
    </div>

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

@endsection