@extends('index')

@section('main')
    <main id="main" class="bgWhite">
        <section class="section1">
            <div class="women">
                <div class="container">
                    <article class="text">
                        <p class="animate" data-animate="fadeInDown" data-timeout="600">{!! nl2br($page->extra_i18n->top->header ?? '') !!}</p>
                        <h1 class="animate" data-animate="fadeInUp" data-timeout="800">{!! nl2br($page->extra_i18n->top->strong ?? '') !!} <span>{!! nl2br($page->extra_i18n->top->text ?? '') !!}</span></h1>
                        <span class="btn outline showVideo animate" data-animate="fadeInUp" data-timeout="1400"><span>{!! $page->extra_i18n->top->jumper ?? '' !!}</span></span>
                        @if(!empty($page->extra_i18n->top->button) && !empty($page->extra_i18n->top->url))
                            <a href="{{ $page->extra_i18n->top->url }}" class="btn buy animate" data-animate="fadeInUp" data-timeout="1400"><span>{{ $page->extra_i18n->top->button }}</span></a>
                        @endif
                    </article>
                    <span class="scrollDownContainer">
                        <span class="scrollDown animated infinite slideOpacity"><i class="ico icoChevronThinDown"></i></span>
                    </span>
                </div>
                <div class="women__mobile-img">
                    @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(1000, 750) : 'assets/img/placeholder-pro-1000x750.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                </div>
            </div>
        </section>
        @if(!empty($page->extra_i18n->icons_section->icons))
            <section class="section2">
                <div class="container">
                    <article class="text">
                        <h2>{!! nl2br($page->extra_i18n->icons_section->header ?? '') !!} <strong>{!! nl2br($page->extra_i18n->icons_section->header_strong ?? '') !!}</strong></h2>
                        <div class="pinkCirclesList row">
                            @foreach($page->extra_i18n->icons_section->icons as $icon)
                                <div class="item col3">
                                    <i class="ico {{ $icon->icon ?? '' }}"></i>
                                    <strong>{!! nl2br($icon->text ?? '') !!}</strong>
                                </div>
                            @endforeach
                        </div>
                    </article>
                </div>
            </section>
        @endif
        <section class="section3">
            <div class="child animate" data-animate="fadeIn" data-timeout="300" data-duration="3000"></div>
            <div class="container">
                <article class="text">
                    <div class="row">
                        <div class="col6 colOffset6">
                            <h2 class="animate" data-animate="fadeInUp" data-timeout="300">{!! nl2br($page->extra_i18n->image_left->header ?? '') !!}</h2>
                            <p class="animate" data-animate="fadeInRight" data-timeout="800">{!! nl2br($page->extra_i18n->image_left->text ?? '') !!}</p>
                        </div>
                    </div>
                </article>
            </div>
        </section>

        <section class="section19">
            <div class="container">
                <article class="text">
                    <h2>{!! nl2br($page->extra_i18n->text_center->header ?? '') !!}</h2>
                    <p>{!! nl2br($page->extra_i18n->text_center->text ?? '') !!}</p>
                </article>
            </div>
        </section>
        <section class="section4">
            <div class="container">
                <article class="text">
                    <div class="row">
                        <div class="col6">
                            <div class="indent">
                                <h2>{!! nl2br($page->extra_i18n->icons_section2->header ?? '') !!}</h2>
                                @if(!empty($page->extra_i18n->icons_section2->icons))
                                    <ul>
                                        @foreach($page->extra_i18n->icons_section2->icons as $icon)
                                            <li class="ico{{ $icon->icon ?? '' }}">
                                                <strong>{!! $icon->strong ?? '' !!}</strong> {!! nl2br($icon->text ?? '') !!}
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                        </div>
                        <div class="col6">
                            <figure class="imgInText">
                                @php($file = new FileModel(['path' => $page->extra_i18n->icons_section2->image[0]->path ?? '', 'data' => $page->extra_i18n->icons_section2->image[0]->data ?? '']))
                                <img src="{{ !empty($file->path) ? $file->adaptive(420, 500) : 'assets/img/section4-angelsounds.jpg' }}" alt="{{ $file->data->name ?? '' }}">
                            </figure>
                        </div>
                    </div>
                </article>
            </div>
        </section>
        @if(!empty($page->extra_i18n->opinions->items))
            <section class="section5">
                <div class="opinions animate" data-animate="fadeInLeft" data-timeout="300">
                    <div class="opinionsSlider">
                        @foreach($page->extra_i18n->opinions->items as $item)
                            <blockquote>
                                <p>{!! nl2br($item->text ?? '') !!}</p>
                                <cite>{!! $item->name ?? '' !!}</cite>
                            </blockquote>
                        @endforeach
                    </div>
                    <span class="opinionsSliderNext"><i class="ico icoChevronThinRight"></i></span>
                    <span class="opinionsSliderPrev"><i class="ico icoChevronThinLeft"></i></span>
                </div>
                <div class="child animate" data-animate="fadeIn" data-timeout="300" data-duration="3000"></div>
            </section>
        @endif
        <section class="section6 sound">
            <div class="woman-sound"></div>
            <div class="container">
                <article class="text">
                    <div class="row">
                        <div class="col6 colOffset6">
                            {!! $page->extra_i18n->sound->text ?? '' !!}
                            <div id="angel-sound" class="cp-jplayer"></div>
                            <div class="prototype-wrapper">
                                <div id="cp_container_1" class="cp-container">
                                    <div class="cp-buffer-holder"> <!-- .cp-gt50 only needed when buffer is > than 50% -->
                                        <div class="cp-buffer-1"></div>
                                        <div class="cp-buffer-2"></div>
                                    </div>
                                    <div class="cp-progress-holder"> <!-- .cp-gt50 only needed when progress is > than 50% -->
                                        <div class="cp-progress-1"></div>
                                        <div class="cp-progress-2"></div>
                                    </div>
                                    <div class="cp-circle-control"></div>
                                    <ul class="cp-controls cc">
                                        <li><a class="cp-play" tabindex="1">play</a></li>
                                        <li><a class="cp-pause" style="display:none;" tabindex="1">pause</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </section>
        <section class="section7">
            <div class="container">
                <article class="text">
                    <h2 class="animate" data-animate="fadeInDown" data-timeout="300">{!! nl2br($page->extra_i18n->text_center2->header ?? '') !!}</h2>
                    <p class="animate" data-animate="fadeInUp" data-timeout="500"><strong>{!! nl2br($page->extra_i18n->text_center2->strong ?? '') !!}</strong> {!! nl2br($page->extra_i18n->text_center2->text ?? '') !!}</p>
                </article>
            </div>
        </section>
        @if(!empty($page->extra_i18n->icons_section3->icons))
            <section class="section8">
                <div class="container">
                    <article class="text">
                        <h2>{!! nl2br($page->extra_i18n->icons_section3->header ?? '') !!}</h2>
                        <ul class="cf">

                            @foreach($page->extra_i18n->icons_section3->icons as $icon)
                                <li class="ico{{ $icon->icon ?? '' }}">
                                    <strong>{{ $icon->strong ?? '' }}</strong> {!! nl2br($icon->text ?? '') !!}
                                </li>
                            @endforeach
                        </ul>
                    </article>
                </div>
            </section>
        @endif
        <section class="section6">
            <div class="woman"></div>
            <div class="container">
                <article class="text">
                    <div class="row">
                        <div class="col6 colOffset6">
                            {!! $page->extra_i18n->image_left2->text ?? '' !!}
                        </div>
                    </div>
                </article>
            </div>
        </section>
        <section class="section9">
            <div class="container">
                <article class="text">
                    <div class="row">
                        <div class="col6">
                            <figure class="imgInText">
                                @php($file = new FileModel(['path' => $page->extra_i18n->image_left3->image[0]->path ?? '', 'data' => $page->extra_i18n->image_left3->image[0]->data ?? '']))
                                <img alt="{{ $file->data->name ?? '' }}" src="{{ !empty($file->path) ? $file->adaptive(470, 320) : 'assets/img/section9-angelsounds.jpg' }}" class="animate" data-animate="fadeInUp" data-timeout="300">
                            </figure>
                        </div>
                        <div class="col6">
                            <div class="indent">
                                <h2 class="animate" data-animate="fadeInUp" data-timeout="300">{!! nl2br($page->extra_i18n->image_left3->header ?? '') !!}</h2>
                                <p class="animate" data-animate="fadeInRight" data-timeout="800">{!! nl2br($page->extra_i18n->image_left3->text ?? '') !!}</p>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </section>
        <section class="section10">
            <div class="container">
                <article class="text">
                    <p class="animate" data-animate="fadeInUp" data-timeout="300"><strong>{!! nl2br($page->extra_i18n->text_center3->header ?? '') !!}</strong> {!! nl2br($page->extra_i18n->text_center3->text ?? '') !!}</p>
                </article>
            </div>
            <figure class="imgInText">
                @php($file = new FileModel(['path' => $page->extra_i18n->text_center3->image[0]->path ?? '', 'data' => $page->extra_i18n->text_center3->image[0]->data ?? '']))
                <img src="{{ !empty($file->path) ? $file->adaptive(2000, 702) : 'assets/img/section10-women.jpg' }}" alt="{{ $file->data->name ?? '' }}" class="animate" data-animate="fadeIn" data-timeout="300" data-duration="3000">
            </figure>
        </section>
        @if(!empty($page->extra_i18n->faq->items))
            <section class="section11">
                <div class="angelsounds"></div>
                <div class="container">
                    <article class="text">
                        <div class="row">
                            <div class="col6">
                                <div class="showHideBox indent">
                                    <h2>{!! nl2br($page->extra_i18n->faq->header ?? '') !!}</h2>
                                    @foreach($page->extra_i18n->faq->items as $item)
                                        <h3>{!! $item->question ?? '' !!}</h3>
                                        <div class="showHide">
                                            <p>{!! nl2br($item->answer ?? '') !!}</p>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </article>
                </div>
            </section>
        @endif
        <section class="section12">
            <div class="container">
                <article class="text">
                    <i class="ico icoBadgeOk animate" data-animate="fadeIn" data-timeout="300"></i>
                    <h2 class="animate" data-animate="fadeInUp" data-timeout="300">{!! nl2br($page->extra_i18n->guarantee->header ?? '') !!}</h2>
                    <p class="animate" data-animate="fadeInUp" data-timeout="800">{!! nl2br($page->extra_i18n->guarantee->text ?? '') !!}</p>
                </article>
            </div>
        </section>
        <section class="section13">
            @if(!empty($page->extra_i18n->bundle->products))
                <div class="section13-1">
                    <div class="container">
                        <article class="text">
                            <h2>{!! nl2br($page->extra_i18n->bundle->header ?? '') !!}</h2>
                            <div class="row set">
                                @foreach($page->extra_i18n->bundle->products as $product)
                                    @php($file = new FileModel(['path' => $product->path ?? '', 'data' => $product->data ?? '']))
                                    <div class="col2">
                                        <figure>
                                            <img src="{{ $file->adaptive(142, 190) }}" alt="{{ $file->data->name ?? '' }}">
                                            <figcaption>{{ $file->data->name ?? '' }}</figcaption>
                                        </figure>
                                    </div>
                                @endforeach
                            </div>
                        </article>
                    </div>
                </div>
            @endif
            @if(!empty($page->extra_i18n->addons->items))
                <div class="section13-2">
                    <div class="container">
                        <article class="text">
                            <div class="row">
                                @foreach($page->extra_i18n->addons->items as $item)
                                    <div class="col6 animate" data-animate="{{ $loop->even ? 'fadeInLeft' : 'fadeInRight' }}" data-timeout="300">
                                        @if(!empty($item->image))
                                            @php($file = new FileModel(['path' => $item->image[0]->path ?? '', 'data' => $item->image[0]->data ?? '']))
                                            <figure>
                                                <img src="{{ $file->adaptive(167, 153) }}" alt="{{ $file->data->name ?? '' }}">
                                            </figure>
                                        @endif
                                        <span class="labelPink">{!! $item->label ?? '' !!}</span>
                                        <h3>{!! $item->name ?? '' !!}</h3>
                                        <p>{!! nl2br($item->text ?? '') !!}</p>
                                    </div>
                                @endforeach
                            </div>
                        </article>
                    </div>
                </div>
            @endif
            <div class="section13-3">
                <div class="container">
                    <article class="text">
                        <div class="row">
                            <div class="col6">
                                <p><strong>{!! nl2br($page->extra_i18n->certification->header ?? '') !!} </strong>{!! nl2br($page->extra_i18n->certification->text ?? '') !!}</p>
                            </div>
                            <div class="col6">
                                <figure class="imgInText">
                                    <img src="assets/img/section13-medcert.jpg" alt="">
                                </figure>
                            </div>
                        </div>
                        <hr>
                        <p>{!! nl2br($page->extra_i18n->certification->under ?? '') !!}</p>
                    </article>
                </div>
            </div>
        </section>
        <section class="section14">
            <div class="woman animate" data-animate="fadeIn" data-timeout="300" data-duration="3000"></div>
            <article class="text">
                <i class="ico icoShield animate" data-animate="fadeIn" data-timeout="300"></i>
                <p class="big animate" data-animate="fadeInUp" data-timeout="300">{!! nl2br($page->extra_i18n->image_left4->header ?? '') !!}</p>
                <p class="small animate" data-animate="fadeInUp" data-timeout="800">{!! nl2br($page->extra_i18n->image_left4->text ?? '') !!}</p>
            </article>
        </section>
        @if(!empty($page->extra_i18n->opinions2->items))
            <section class="section15">
                <div class="container">
                    <article class="text">
                        <h2>{!! nl2br($page->extra_i18n->opinions2->header ?? '') !!}</h2>
                        <h3>{!! nl2br($page->extra_i18n->opinions2->text ?? '') !!}</h3>
                        <div class="row opinions">
                            @foreach($page->extra_i18n->opinions2->items as $item)
                                <div class="col6">
                                    <blockquote>
                                        <h4>“{!! $item->title ?? '' !!}”</h4>
                                        <p>{!! nl2br($item->text ?? '') !!}</p>
                                        <cite>{!! $item->name ?? '' !!}</cite>
                                    </blockquote>
                                </div>
                            @endforeach
                        </div>
                    </article>
                </div>
            </section>
        @endif
        <section class="section16">
            <div class="container">
                <article class="text">
                    @if(!empty($page->extra_i18n->button_section->button) && !empty($page->extra_i18n->button_section->url))
                        <a href="{{ $page->extra_i18n->button_section->url }}" class="btn animate" data-animate="fadeInUp" data-timeout="300"><span>{{ $page->extra_i18n->button_section->button }}</span></a>
                    @endif
                    <p class="animate" data-animate="fadeInUp" data-timeout="800">{!! nl2br($page->extra_i18n->button_section->text ?? '') !!}</p>
                </article>
            </div>
        </section>
        @if(!empty($page->extra_i18n->icons_section4->icons))
            <section class="section17">
                <div class="container">
                    <article class="text">
                        <div class="iconsList row">
                            @foreach($page->extra_i18n->icons_section4->icons as $icon)
                                <div class="item col3">
                                    <i class="ico {{ $icon->icon ?? '' }}"></i>
                                    <strong>{!! $icon->text ?? '' !!}</strong>
                                </div>
                            @endforeach
                        </div>
                    </article>
                </div>
            </section>
        @endif
        <div class="fixed-mobile-title"><span>{!! $page->extra_i18n->mobile->name ?? '' !!}</span><em>{!! $page->extra_i18n->mobile->price ?? '' !!}</em></div>
        @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