@extends('templates.layout')

@section('title', '')

@section('description', '')

@section('mod_class', 'mod-header')

@section('content')

    <main class="c-main-content">

        {{-- Banner --}}
        <div class="js-animated-start">
            <div class="c-slider c-slider--banner js-slick-banner appear-in appear-in-fade">
                @foreach($banners as $i => $banner)
                    <div>
                        <div class="c-banner c-banner--home" style="background-image: url('{{ $banner->getDesktop() }}');">
                            <div class="o-content-block o-content-block--1066">
                                <div class="c-banner__space"></div>
                                <div class="c-banner__description">
                                    @if($banner->description)
                                    <h2 class="o-ttl--40 o-ttl--white">{{ $banner->description }}</h2>
                                    @endif

                                    <a href="{{ $banner->link }}" target="_blank" class="o-btn o-btn--primary">{{ $banner->button }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
        {{-- End: Banner --}}

        {{-- Block --}}
        <div class="c-bg 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">Quem somos?</h2>

                            <img src="{{ asset('../img/quem-somos.jpg') }}" class="c-presentation__image--mobile" alt="Quem somos?">

                            <p class="o-ttl--justify">
                                A Associação Brasileira de Instituições de Pagamentos (ABIPAG) é formada por instituições de pagamento e instituições financeiras entrantes no mercado. Constituída após a abertura da indústria de meios eletrônicos de pagamento decorrente da atuação conjunta do Banco Central do Brasil (Banco Central) e do Conselho Administrativo de Defesa Econômica (CADE), a ABIPAG tem como objetivo promover a isonomia, a eficiência, a transparência e a concorrência no setor, viabilizando o desenvolvimento de modelos de negócios inovadores e a inclusão financeira.
                            </p>

                            <a href="{{ url(route('pages.about')) }}" class="o-btn o-btn--primary">Saiba mais</a>
                        </div>

                        <div class="c-presentation__content-img">
                            <img src="{{ asset('../img/quem-somos.jpg') }}" class="c-presentation__image appear-in appear-in-top appear-in-time-2" alt="Quem somos?">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- End: Block --}}

        {{-- Block --}}
        <div class="c-bg js-animated">
            <div class="o-content-block o-content-block--1066 appear-in appear-in-top">
                <h2 class="o-ttl-title o-ttl-title--center">Pilares de atuação</h2>

                <div class="c-slider c-slider--space-40 js-slick-cards">

                    {{-- Item --}}
                    <div class="c-slider__item">
                        <div class="c-card">
                            <picture class="c-card__svg">
                                <svg width="57" height="60">
                                    <use xlink:href="#institution-residence"/>
                                </svg>
                            </picture>
                            <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center o-ttl--upper">Regulação de <br> Novas Tecnologias</h3>
                            <p class="o-ttl--center">Open Finance <br> Real Digital</p>
                        </div>
                    </div>
                    {{-- End: Item --}}

                    {{-- Item --}}
                    <div class="c-slider__item">
                        <div class="c-card">
                            <picture class="c-card__svg">
                                <svg width="74" height="60">
                                    <use xlink:href="#payment-services"/>
                                </svg>
                            </picture>
                            <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center o-ttl--upper">Inovação no Mercado <br> de Pagamentos</h3>
                            <p class="o-ttl--center">Evolução do setor de cartões Pix</p>
                        </div>
                    </div>
                    {{-- End: Item --}}

                    {{-- Item --}}
                    <div class="c-slider__item">
                        <div class="c-card">
                            <picture class="c-card__svg">
                                <svg width="61" height="60">
                                    <use xlink:href="#payment-committee-international"/>
                                </svg>
                            </picture>
                            <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center o-ttl--upper">Fomento ao <br>Crédito Digital</h3>
                            <p class="o-ttl--center">Registro de Recebíveis</p>
                        </div>
                    </div>
                    {{-- End: Item --}}

                    {{-- Item --}}
                    <div class="c-slider__item">
                        <div class="c-card">
                            <picture class="c-card__svg">
                                <svg width="78" height="62">
                                    <use xlink:href="#ethic"/>
                                </svg>
                            </picture>
                            <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center o-ttl--upper">Gerenciamento <br>de Riscos</h3>
                            <p class="o-ttl--center">Regulação Prudencial para Instituições de Pagamento</p>
                        </div>
                    </div>
                    {{-- End: Item --}}

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

        @if($events)
        {{-- Block --}}
        <div 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 o-ttl-title--center">Próximos eventos</h2>

                    <div class="c-slider c-slider--space-40 js-events-cards">
                        @foreach($events as $i => $event)
                            <div class="c-slider__item">
                                @include('partials.common-card', [
                                    'class'     => 'c-common-card--primary',
                                    'data'      => [
                                        'day'   => $event->event_at->format("d"),
                                        'month' => substr($event->event_at->locale("pt-BR")->translatedFormat("F"), 0, 3),
                                    ],
                                    'exclusive' => $event->is_exclusive ? true : false,
                                    'img'       => $event->getImage(),
                                    'title'     => $event->title,
                                    'location'  => [
                                        'title' => $event->is_presencial ? 'Presencial' : 'Online',
                                        'link'  => $event->link,
                                    ],
                                    'time'      => $event->event_at->format("H:i")
                                ])
                            </div>
                        @endforeach
                    </div>

                    <a href="{{ url(route('pages.events')) }}" class="o-btn o-btn--primary o-btn--center o-btn--mt-40">Ver mais eventos</a>
                </div>
            </div>
        </div>
        {{-- End: Block --}}
        @endif

        @if($publications)
        {{-- Block --}}
        {{-- <div 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">Publicações</h2>

                    <div class="c-slider js-slick-cards">
                        @foreach($publications as $i => $publication)
                            <div class="c-slider__item">
                                @include('partials.common-card', [
                                    'class'     => 'c-common-card--primary',
                                    'img'       => $publication->getImage(),
                                    'title'     => $publication->title,
                                    'download'  => [
                                        'title' => 'Baixar Cartilha',
                                        'file-id' => $publication->id
                                    ],
                                ])
                            </div>
                        @endforeach
                    </div>

                    <a href="{{ url(route('pages.publications')) }}" class="o-btn o-btn--primary o-btn--center o-btn--mt-40">Ver mais publicações</a>
                </div>
            </div>
        </div> --}}
        {{-- End: Block --}}
        @endif

        {{-- Banner bottom --}}
        <div class="js-animated">
            <div class="c-bg c-bg--banner appear-in appear-in-top">
                <div class="o-content-block o-content-block--1066">
                    <div class="o-content-block--left">
                        <div class="c-bg__txt">
                            <h2 class="o-ttl-title o-ttl-title--white">Fale conosco</h2>

                            <p class="o-ttl--white o-ttl--mb-40">
                                Quer ser Parceiro ou Associado da ABIPAG? <br>
                                Entre em contato com a gente!
                            </p>

                            <a href="{{ url(route('pages.contact')) }}" class="o-btn o-btn--primary">Entre em contato</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- End: Banner bottom --}}

    </main>

@stop