@extends('templates.layout')

@section('title', 'Quem Somos')

@section('description', 'Conheça um pouco mais sobre a história e a como é feita a atuação da ABIPAG no setor.')

@section('content')

    <main id="quem-somos" class="c-main-content">

        {{-- Banner --}}
        @include('partials.common-banner', [
            'image' => asset('../img/banner-top.jpg'),
            'title' => 'QUEM SOMOS'
        ])
        {{-- End: Banner --}}

        @if(isset($about))
            {{-- Block --}}
            <div class="c-bg js-animated">
                <div class="o-content-block o-content-block--1066">
                    <div class="o-content-block--left">
                        <div class="c-presentation">
                            <div class="c-presentation__text appear-in appear-in-top">
                                <h2 class="o-ttl-title">{{ $about->title }}</h2>

                                <img src="{{ $about->getMobile() }}" class="c-presentation__image--mobile" alt="{{ $about->title }}">

                                <p class="o-ttl--justify">
                                {{ $about->description }}
                                </p>

                                @if($about->link & $about->button)
                                    <a href="{{ $about->link }}" target="{{ $about->target }}" class="o-btn o-btn--primary">{{ $about->button }}</a>
                                @endif
                            </div>

                            <div class="c-presentation__content-img">
                                <img src="{{ $about->getDesktop() }}" class="c-presentation__image appear-in appear-in-top appear-in-time-2" alt="{{ $about->title }}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End: Block --}}
        @endif

        @if(isset($mission))
        {{-- Block --}}
            <div id="missao" class="c-bg c-bg--ice c-bg--secondary js-animated">
                <div class="o-content-block o-content-block--1066">
                    <div class="o-content-block--left">
                        <div class="c-presentation">
                            <div class="c-presentation__text appear-in appear-in-top">
                                <h2 class="o-ttl-title">{!! $mission->title !!}</h2>

                                <img src="{!! $mission->getMobile() !!}" class="c-presentation__image--mobile" alt="{!! $mission->title !!}">

                                <p class="o-ttl--justify">
                                    {!! $mission->description !!}
                                </p>
                            </div>
                            <div class="c-presentation__content-img">
                                <img src="{!! $mission->getDesktop() !!}" class="c-presentation__image appear-in appear-in-top appear-in-time-2" alt="{!! $mission->title !!}">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End: Block --}}
        @endif

        @if(isset($values))
            <div id="valores">

                @include('partials/cards-values-desktop')

                @include('partials/cards-values-mobile')

            </div>
        @endif

        @if(isset($marketplace))
            {{-- Block --}}
            <div id="mercado" class="c-bg js-animated">
                <div class="o-content-block o-content-block--1066">
                    <div class="o-content-block--left">
                        <div class="c-presentation c-presentation--secondary">
                            <div class="c-presentation__text appear-in appear-in-top">
                                <h2 class="o-ttl-title">{!! $marketplace->title !!}</h2>

                                <img src="{!! $marketplace->getMobile() !!}" class="c-presentation__image--mobile" alt="Indústria">

                                <p class="o-ttl--justify">
                                    {!! $marketplace->description !!}
                                </p>

                                <img src="{!! $marketplace->getMobile2() !!}" class="c-presentation__image--mobile" alt="Indústria">

                                <p class="o-ttl--justify">
                                    {!! $marketplace->description2 !!}
                                </p>
                            </div>
                            <div class="c-presentation__content-img appear-in appear-in-top appear-in-time-2">
                                <img src="{!! $marketplace->getDesktop() !!}" class="c-presentation__image" alt="Indústria">
                                <img src="{!! $marketplace->getDesktop2() !!}" class="c-presentation__image" alt="Indústria">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- End: Block --}}
        @endif

        <div id="governanca">

            @include('partials/cards-structure-desktop', ['data' => $data, 'board_of_directory' => $board_of_directory, 'board_of_council' => $board_of_council])

            @include('partials/cards-structure-mobile', ['data' => $data, 'board_of_directory' => $board_of_directory, 'board_of_council' => $board_of_council])

        </div>

        {{-- @include('partials/cards-committees-desktop')

        @include('partials/cards-committees-mobile') --}}

        {{-- Block --}}
        <div id="associados" class="c-bg c-bg--ice js-animated">
            <div class="o-content-block o-content-block--1066 appear-in appear-in-top">
                <div class="o-content-block--left o-content-block--right">
                    <h2 class="o-ttl-title">Associados</h2>
                    <p class="o-ttl--mb-60">
                        Nossos associados tem participação ativa em nossas assembleias, propõe análises e estudos e apresenta sugestões e propostas de temas relacionados às normas e legislação do mercado de meios de pagamento.
                    </p>

                    @if($associates)
                    <div class="c-slider c-slider--arrows js-slick-associates">
                        @foreach($associates as $i => $associate)
                            <div class="c-slider__item">
                                <div class="c-logo">
                                    <a href="{{ $associate->link }}" target="_blank">
                                        <img src="{{ $associate->getImage() }}" alt="{{ $associate->title }}">
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @endif

                    <a href="{{ url(route('pages.contact')) }}" class="o-btn o-btn--primary o-btn--center o-btn--mt-40">Seja associado!</a>
                </div>
            </div>
        </div>
        {{-- End: Block --}}

        {{-- Block --}}
        <div id="parceiros" class="c-bg js-animated">
            <div class="o-content-block o-content-block--1066 appear-in appear-in-top">
                <div class="o-content-block--left o-content-block--right">
                    <h2 class="o-ttl-title">Parceiros</h2>

                    @if($partners)
                    <div class="c-slider c-slider--arrows js-slick-associates">
                        @foreach($partners as $i => $partner)
                            <div class="c-slider__item">
                                <div class="c-logo">
                                    <a href="{{ $partner->link }}" target="_blank">
                                        <img src="{{ $partner->getImage() }}" alt="{{ $partner->title }}">
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    @endif

                </div>
            </div>
        </div>
        {{-- End: Block --}}


    </main>

@stop