@extends('site.master')

@section('content')

    <section class="section-sorter">

        {{-- Intro --}}
        <section id="intro" class="home-intro-section intro-section">
            {{-- Content --}}
            <div class="contained-layout">

                @include('site.partials.scrollHinter',['target'=>'intro'])

                <div class="intro col-8 centered">

                    <div class="c-notification  c-notification--inline-bottom">
                        <div class="c-notification__main">
                            <p class="c-notification__text">Nieuw adres per 1 april: Clement van Maasdijkstraat 3 in Budel (geen grap!)</p>
                        </div>
                    </div>

                    {!!__('site/home.intro.description')!!}

                </div>
            </div>

            <div id="left-side-drip" class="header-drip left"></div>
            <div id="right-side-drip" class="header-drip right"></div>
        </section>

        {{-- Video: order on desktop by SectionSorter --}}
        <section class="video">

            {{--
                This is the container in 16:9 ratio
                it will be vertically centered in the header
            --}}
            <div class="video-container">
                {{-- Initialized in youtubeHandler.js --}}
                <div id="ytplayer"></div>
            </div>

            <div class="overlay">
                <div class="contained-layout">
                    <div class="logo-holder col-5 offset-3">
                        @include('site.svg.kommaLogoWba')
                    </div>
                </div>
            </div>

        </section>

    </section>

    {{--Featured cases --}}
    @include('site.partials.cases.featured')

    <div class="contained-layout  on-light" style="padding: 80px 40px 0; max-width: 1040px;">

        <h2 style="white-space: normal;">Ter versterking van ons team,<br/>zoeken wij enthousiaste en gedreven collega’s met honger!</h2>

        @include('site.partials.jobLimitedList')
    </div>

    {{-- About our company and services --}}
    <section class="about-our-company contained-layout">

        <div class="column-container col-12 centered">

            {{-- Summary --}}
            <section class="text-block col-6">
                <h2>{!!__('site/home.summary.title')!!}</h2>

                {!!__('site/home.summary.description')!!}

                <a href="{!!__('site/partials/buttons.conversation.href')!!}" class="button stroked blue arrow">
                    {!!__('site/partials/buttons.conversation.label')!!}
                </a>

            </section>

            {{-- Services--}}
            <section class="text-block col-6">
                @include('site.partials.servicesList')
            </section>

        </div>

    </section>


    {{-- Testimonials --}}
    <section class="featured-testimonials contained-layout">
        @include('site.partials.testimonials.testimonial',[
            'testimonial' => [
                'codeName' => 'promic',
                'slug' => 'promic',
                'image' => 'promic_rick.png',
            ]
        ])
        @include('site.partials.testimonials.testimonial',[
            'testimonial' => [
                'codeName' => 'topsLuchtfilters',
                'slug' => 'tops-luchtfilters',
                'image' => 'tops_nico.png',
            ]
        ])
    </section>

    {{-- About the team --}}
    <section class="about-our-team contained-layout">

        <div class="flexable-layout">

            <img class="preload stretch" src="/img/komma/static/lunch.jpg" alt="office"/>

            <div class="flex-col">
                <div class="text-block">

                    <h2>{!!__('site/home.ambiance.title')!!}</h2>
                    {!!__('site/home.ambiance.description')!!}

                    <a href="{!!__('site/partials/buttons.about.href')!!}" class="button stroked blue arrow">
                        {!!__('site/partials/buttons.about.label')!!}
                    </a>
                </div>
            </div>
        </div>

    </section>

    {{-- Call to action bar --}}
    @include('site.partials.callToActionBar',['key' => 'stef'])

    {{-- Award --}}
    <section class="award contained-layout">
        <div class="award-container col-8 centered">

            {{-- Logo --}}
            <div class="award-logo">
                <a href="/ondernemer-van-het-jaar-2017-cranendonck">
                    <img class="stretch" src="/img/komma/static/ovhj.jpg" alt="Komma ondernemer van het jaar 2017"/>
                </a>
            </div>

            {{-- Award text--}}
            <section class="award-text">
                <h2>{!!__('site/home.award.title')!!}</h2>
                {!!__('site/home.award.description')!!}

                <p>Ter versterking van ons team, <strong>zoeken wij enthousiaste en gedreven collega’s</strong> met
                    honger!</p>
                <a href="/vacatures" class="button stroked blue arrow">
                    Bekijk onze vacatures
                </a>
            </section>

        </div>
    </section>


@endsection