@extends('index')

@section('main')
    <main id="main" class="subpage bgWhite">
        <article>
            <div class="text-img text-img--overflow text-img--grey">
                <div class="container">
                    <div class="row-flex">
                        <div class="col-lg-6">
                            <div class="text-img__inner text-img__inner--big">
                                <div class="text-img__subtitle">{!! nl2br($page->extra_i18n->top->header_small ?? '') !!}</div>
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->top->header ?? '') !!}</div>
                                <figure class="text-img__img text-img__img--right text-img__img--center text-img__img--fill text-img__img--1199">
                                    @php($file = new FileModel(['path' => $page->extra_i18n->top->image[0]->path ?? '', 'data' => $page->extra_i18n->top->image[0]->data ?? '']))
                                    <img src="{{ !empty($file->path) ? $file->adaptive(1030, 820) : 'assets/img/product-jumper-jpd-100e-1.jpg' }}" alt="">
                                </figure>
                                @if(!empty($page->extra_i18n->top->icons))
                                    <div class="text-img__body">
                                        @foreach($page->extra_i18n->top->icons as $icon)
                                            <p class="ico-box ico-box--svg-img ico-box--svg-img-{{ $icon->icon ?? '' }}">
                                                <span class="ico-box__svg-img"><img src="assets/img/svgs/{{ $icon->icon ?? '' }}.svg" alt=""></span>
                                                <strong>{!! $icon->strong ?? '' !!}</strong> - {!! $icon->text ?? '' !!}
                                            </p>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="text-img">
                <div class="container">
                    <div class="row-flex middle-lg gutter-10">
                        <div class="col-lg-5">
                            <div class="text-img__inner text-img__inner--jpd-100e">
                                <div class="text-img__title">{!! nl2br($page->extra_i18n->device->header ?? '') !!}</div>
                                <div class="text-img__body">
                                    <p>{!! nl2br($page->extra_i18n->device->text ?? '') !!}</p>
                                    <p><figure><img src="assets/img/product-jumpert-logos.jpg" alt=""></figure></p>
                                    @if(!empty($page->extra_i18n->device->button) && !empty($page->extra_i18n->device->url))
                                        <p><a href="{{ $page->extra_i18n->device->url }}" class="btn btn-primary btn-primary--uppercase">{{ $page->extra_i18n->device->button }}</a></p>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7">
                            @if(!empty($page->extra_i18n->device->features))
                                <div class="product-app-presentation product-app-presentation--jpd-100e">
                                    <div class="phone-slider phone-slider--jpd-100e">
                                        <div class="phone-slider__inner owl-carousel">
                                            @foreach($page->extra_i18n->device->features as $feature)
                                                @continue(empty($feature->image))
                                                @php($file = new FileModel(['path' => $feature->image[0]->path ?? '', 'data' => $feature->image[0]->data ?? '']))
                                                <div class="phone-slider__item" data-hash="jpd-100e-slide-{{ $loop->iteration }}">
                                                    <img src="{{ $file->adaptive(102, 137) }}" alt="">
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    <ul class="phone-slider-dots phone-slider-dots--v2">
                                        @foreach($page->extra_i18n->device->features as $feature)
                                            <li>
                                                <a{!! $loop->first ? ' class="active"' : '' !!}>
                                                <span class="phone-slider-dots__svg-img phone-slider-dots__svg-img--{{ $feature->icon ?? '' }}"><img src="assets/img/svgs/4.svg" alt=""></span>
                                                <span class="phone-slider-dots__title">{!! $feature->name ?? '' !!}</span>
                                                <span class="phone-slider-dots__desc">{!! nl2br($feature->text ?? '') !!}</span>
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @if(!empty($page->extra_i18n->text_center->text))
                <div class="overflow-h">
                    <div class="text-img-fullwidth">
                        <div class="text-img-fullwidth__img text-img-fullwidth__img--jpd-100e">
                            <img src="assets/img/product-jumper-jpd-100e-2.jpg" alt="AngelSounds">
                            <img src="assets/img/product-jumper-jpd-100e-2-mobile.jpg" alt="AngelSounds">
                        </div>
                        <div class="text-img-fullwidth__inner">
                            <div class="text-img-fullwidth__body">
                                <div class="text-img-fullwidth__title">{!! nl2br($page->extra_i18n->text_center->text ?? '') !!}</div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="overflow-h">
                <div class="text-img text-img--grey-2 text-img--overflow txt-center-750">
                    <div class="container">
                        <div class="row-flex">
                            <div class="col-lg-5 col-lg-offset-7">
                                <div class="text-img__inner text-img__inner--big">
                                    <div class="text-img__title">{!! nl2br($page->extra_i18n->section_button->header ?? '') !!}</div>
                                    <figure class="text-img__img text-img__img--left text-img__img--center text-img__img--fill text-img__img--1199 text-img__img--jpd-100e">
                                        @php($file = new FileModel(['path' => $page->extra_i18n->section_button->image[0]->path ?? '', 'data' => $page->extra_i18n->section_button->image[0]->data ?? '']))
                                        <img src="{{ !empty($file->path) ? $file->adaptive(811, 850) : 'assets/img/product-jumper-jpd-100e-3.jpg' }}" alt="">
                                        @php($file = new FileModel(['path' => $page->extra_i18n->section_button->image_mobile[0]->path ?? '', 'data' => $page->extra_i18n->section_button->image_mobile[0]->data ?? '']))
                                        <img src="{{ !empty($file->path) ? $file->adaptive(811, 380) : 'assets/img/product-jumper-jpd-100e-3-mobile.jpg' }}" alt="">
                                    </figure>
                                    <div class="text-img__body">
                                        <p>{!! nl2br($page->extra_i18n->section_button->text ?? '') !!}<br>
                                            <strong class="c-pink">{!! nl2br($page->extra_i18n->section_button->pink ?? '') !!}</strong>.</p>
                                        @if(!empty($page->extra_i18n->section_button->button) && !empty($page->extra_i18n->section_button->url))
                                            <p><a href="{{ $page->extra_i18n->section_button->url }}" class="btn btn-primary btn-primary--uppercase">{{ $page->extra_i18n->section_button->button }}</a></p>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        @if(!empty($page->extra_i18n->mobile->name))
            <div class="fixed-mobile-title"><span>{{ $page->extra_i18n->mobile->name ?? '' }}</span><em>{!! $page->extra_i18n->mobile->price ?? '' !!}</em></div>
        @endif
        @if(!empty($page->extra_i18n->mobile->button) && !empty($page->extra_i18n->mobile->url))
            <div class="fixed-mobile-action">
                <a href="{{ $page->extra_i18n->mobile->url }}" class="btn btn-primary">{{ $page->extra_i18n->mobile->button }}</a>
            </div>
        @endif
    </main>
@endsection