<div class="o-contact-intro  @if(!empty($component->reversed)) o-contact-intro--reversed @endif">

    <div class="l-contain  o-contact-intro__flex">

        @if(isset($contactIntroImage))
            <div class="o-contact-intro__image">
                @include('site.components.image', ['images' => $contactIntroImage])
            </div>
        @endif

        <div class="o-contact-intro__main">
            <div class="o-contact-intro__text">
                {!! $contactIntroText ?? '' !!}
            </div>

            @if(!empty($contactIntroButtonLink) && !empty($contactIntroButtonLabel))
                <div class="o-contact-intro__button">
                    @include('site.components.button', [
                       'buttonLink' => $contactIntroButtonLink,
                       'buttonText' => $contactIntroButtonLabel,
                       'modifiers' => ['icon']
                       ])
                </div>
            @endif

            <div class="o-contact-intro__info">

                <div class="o-contact-intro__info-col  o-contact-intro__info-col--small">
                    <a class="o-contact-intro__info-row  o-contact-intro__info-link  o-contact-intro__info-link--phone" href="tel:{{ config('site.company.phone.call') }}">
                        <span class="o-contact-intro__info-icon  o-contact-intro__info-icon--phone">@include('site.components.icons.phone')</span>{{ config('site.company.phone.display') }}
                    </a>
                    <a class="o-contact-intro__info-row  o-contact-intro__info-link" href="mailto:{{ config('site.company.mail') }}">
                        <span class="o-contact-intro__info-icon  o-contact-intro__info-icon--mail">@include('site.components.icons.mail')</span>{{ config('site.company.mail') }}
                    </a>
                </div>

                <div class="o-contact-intro__info-col  o-contact-intro__info-col--small">
                    <div class="o-contact-intro__info-row">
                        <span class="o-contact-intro__info-icon  o-contact-intro__info-icon--home">@include('site.components.icons.home')</span>{{ config('site.company.address') }}
                    </div>
                    <div class="o-contact-intro__info-row">
                        <span class="o-contact-intro__info-icon">&nbsp;</span>{{ config('site.company.zip') }} {{ config('site.company.city') }}
                    </div>
                </div>

            </div>

            <div class="o-contact-intro__route-button">
                @include('site.components.button', [
                    'modifiers' => ['icon'],
                    'buttonLink' => "https://www.google.com/maps/dir//" . urlencode(config('site.company.address') . ' ' . config('site.company.city') ),
                    'buttonText' => __('site/global.cta.plan_route')
                ])
            </div>

        </div>

    </div>

</div>