@extends('templates.layout')

@section('title', '')

@section('description', 'A ABIPAG é uma associação formada por instituições de pagamento e instituições financeiras entrantes no mercado. Clique e saiba mais!')

@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 --}}

        @if(isset($about) && $about->is_active)
            {{-- 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">{{ $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($pillars) && count($pillars))
            {{-- 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">
                        @foreach($pillars as $pillar)
                            {{-- Item --}}
                            <div class="c-slider__item">
                                <div class="c-card">
                                    <picture class="c-card__svg">
                                        <img src="{{ $pillar->getIcon() }}" alt="{{ $pillar->title }}" height="60">
                                    </picture>

                                    <h3 class="o-ttl--18 o-ttl--brand-secondary o-ttl--center o-ttl--upper">{!! $pillar->title !!}</h3>
                                    <p class="o-ttl--center">{!! $pillar->description !!}</p>
                                </div>
                            </div>
                            {{-- End: Item --}}
                        @endforeach
                    </div>
                </div>
            </div>
            {{-- End: Block --}}
        @endif

        @if(isset($events) && count($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