@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop
@section('container')
    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{breadcrumbs('menu',$page)}}
            </div>
        </div>

        <section class="section about-head pt-0">
            <div class="container">
                <div class="catalog-top">
                    <div class="brands-end-logo">
                        <img src="{{$page->image}}" alt="{{$page->name}}">
                    </div>
                    <div class="catalog-top-desc">
                        {!! $page->body !!}
                    </div>
                </div>
                @if($gallery->isNotEmpty())
                    <div class="about-gallery">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($gallery as $galleryItem)
                                    <div class="swiper-slide">
                                        <a href="{{$galleryItem->image}}" data-fancybox="about-gallery">
                                            <img src="{{$galleryItem->imageM}}" alt="gallery about {{$loop->iteration}}">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </section>

        @if($staticSectionOne || $staticSectionTwo)
            <section class="section about-block">
                @if($staticSectionOne)
                    <div class="about-block-text-wrapper">
                        <div class="container">
                            <div class="about-block-text common-text">
                                <h2>{{$staticSectionOne->name}}</h2>
                                {!! $staticSectionOne->body !!}
                            </div>
                        </div>
                    </div>
                @endif
                @if($staticSectionTwo)

                    @if($staticSectionTwo->hasImage)
                        <div class="about-block-img">
                            <img src="{{$staticSectionTwo->image}}" alt="{{$staticSectionTwo->name}}">
                        </div>
                    @endif
                    <div class="about-block-content-wrapper">
                        <div class="container">
                            <div class="about-block-content common-text @if(!$staticSectionTwo->hasImage)mt-0 @endif">
                                <h2>{{$staticSectionTwo->name}}</h2>
                                {!! $staticSectionTwo->body ?? $staticSectionTwo->shortDescription !!}

                                @if($staticSectionTwo->link)
                                    <div class="about-block-links">
                                        <a href="{{$staticSectionTwo->link}}" class="button">
                                            <span>{{ShowLabelById(13)}}</span>
                                            <img src="{{image('icons/arrow-long.svg')}}" alt="to catalog">
                                        </a>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </section>
        @endif

        @if($cascade->isNotEmpty())
            <section class="section image-text">
                <div class="container">
                    @foreach($cascade as $cascadeItem)
                        <div class="image-text-item">
                            <div class="image-text-img">
                                @if($cascadeItem->hasImage)
                                    <img src="{{$cascadeItem->image}}" alt="{{$cascadeItem->name}}">
                                @endif
                            </div>
                            <div class="image-text-content common-text">
                                <h2>{{$cascadeItem->name}}</h2>
                                {!! $cascadeItem->body !!}
                            </div>
                        </div>
                    @endforeach
                </div>
            </section>
        @endif

        @if($staticSectionThree || $staticSectionFour)
            <section class="section about-block @if($links->isNotEmpty())pb-0 @endif">
                @if($staticSectionThree)
                    <div class="about-block-text-wrapper">
                        <div class="container">
                            <div class="about-block-text common-text">
                                <h2>{{$staticSectionThree->name}}</h2>
                                {!! $staticSectionThree->body !!}
                            </div>
                        </div>
                    </div>
                @endif
                @if($staticSectionFour)
                    @if($staticSectionFour->hasImage)
                        <div class="about-block-img">
                            <img src="{{$staticSectionFour->image}}" alt="{{$staticSectionFour->name}}">
                        </div>
                    @endif
                    <div class="about-block-content-wrapper">
                        <div class="container">
                            <div class="about-block-content common-text @if(!$staticSectionFour->hasImage)mt-0 @endif">
                                <h2>{{$staticSectionFour->name}}</h2>
                                {!! $staticSectionFour->body !!}
                            </div>

                        </div>
                    </div>
                @endif
            </section>
        @endif

        @if($links->isNotEmpty())
            <div class="container">
                <div class="about-block-links">
                    @foreach($links as $link)
                        <a href="{{$link->customUrl}}" class="button">
                            <span>{{$link->name ?? $link->customName}}</span>
                            <img src="{{image('icons/arrow-long.svg')}}" alt="{{$link->name ?? $link->customName}}">
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

    </div>
@endsection