@extends('site.layouts.app', ['seoModel' => $home])
@section('content')
<div class="page-wrapper content-wrapper page-home">
    <section class="banner">
        <div class="swiper banner__slider">
            <div class="swiper-wrapper">
                @foreach ( $home->banner_home as $banner )
                    <div class="swiper-slide">
                        <div class="banner__block">
                            <div class="container">
                                <h3 data-text="{{ $banner['caption_banner'] ?? ' ' }}">
                                    {{ $banner['text'] }}
                                </h3>

                                @if (!empty($banner['link']))
                                    <a href="{{ $banner['link'] }}">
                                        <p>{{ $banner['button_text'] }}</p>
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M16.869 5.68958L15.8084 6.75022L20.3083 11.2501H0.75V12.7501H20.3081L15.8084 17.2498L16.869 18.3105L23.1796 12L16.869 5.68958Z" fill="white"/>
                                        </svg>
                                    </a>
                                @endif
                            </div>
                        </div>

                        <a
                            @if (!empty($banner['link']))
                                href="{{ $banner['link'] }}"
                            @endif
                            class="banner-desktop"
                            data-link="{{ asset("storage/{$banner['image']}") }}"
                        >
                            <img src="{{ asset("storage/{$banner['image']}") }}" alt="">
                        </a>
                    </div>
                @endforeach
            </div>

            <div class="swiper-pagination banner-pagination"></div>

            <div class="swiper-button-prev banner-button-prev">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                    <rect x="-1" y="1" width="46" height="46" rx="23" transform="matrix(-1 0 0 1 46 0)"
                        fill="#B19B7D" />
                    <rect x="-1" y="1" width="46" height="46" rx="23" transform="matrix(-1 0 0 1 46 0)" stroke="#B19B7D"
                        stroke-width="2" />
                    <path d="M29 17.9646L22.9746 23.99L29 30.0154L27.0154 32L19.0054 23.99L27.0154 15.98L29 17.9646Z"
                        fill="white" />
                </svg>
            </div>
            <div class="swiper-button-next banner-button-next">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
                    <rect x="-1" y="1" width="46" height="46" rx="23" transform="matrix(-1 0 0 1 46 0)"
                        fill="#B19B7D" />
                    <rect x="-1" y="1" width="46" height="46" rx="23" transform="matrix(-1 0 0 1 46 0)" stroke="#B19B7D"
                        stroke-width="2" />
                    <path d="M19 30.0354L25.0254 24.01L19 17.9846L20.9846 16L28.9946 24.01L20.9846 32.02L19 30.0354Z"
                        fill="white" />
                </svg>
            </div>

            <div class="swiper-pagination banner-pagination-mobile"></div>
        </div>
    </section>

    <section class="about">
        <div class="container">
            <div class="about__content">
                <h4>{{ $home->tag_about }}</h4>
                <h3>{{ $home->title_about }}</h3>
                {!! $home->text_about !!}

                @if (!empty($home->link_about))
                    <a href="{{ $home->link_about}}">
                        <p>{{ $home->text_button_about}}</p>
                        <svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.869 0.689453L15.8084 1.75009L20.3083 6.24995H0.75V7.75H20.3081L15.8084 12.2497L16.869 13.3104L23.1796 6.99991L16.869 0.689453Z" fill="#B39D7D"/>
                        </svg>
                    </a>
                @endif
            </div>
            <img src="{{ asset("storage/{$home->image_side_about}") }}">
        </div>
    </section>
    @if( !$home->hide_move_about)
         @include('site._includes.act')
    @endif
    <div class="services">
        <div class="container">
            <h4>{{ $home->tag_our_service}}</h4>
            <div class="tab-container">
                <div class="tab-header">
                @foreach ($home->list_our_service as $key=> $item)
                    <div data-tab-open-id="{{$key+1}}" data-tab-group-id="b" class="tab-header-item">{{$item['title']}}</div>
                @endforeach
            </div>
                <div class="tab-content">
                    @foreach ($home->list_our_service as $key=> $item)
                        <div data-tab-id="{{$key+1}}" data-tab-group-id="b" class="tab-content-item">
                            {!!$item['text'] !!}
                            <a href="{{ $item['link'] }}">
                                <p>{{ $item['text_button'] }}</p>
                                <svg width="24" height="14" viewBox="0 0 24 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M16.869 0.689453L15.8084 1.75009L20.3083 6.24995H0.75V7.75H20.3081L15.8084 12.2497L16.869 13.3104L23.1796 6.99991L16.869 0.689453Z" fill="#B39D7D"/>
                                </svg>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    @if(!$home->hide_pharse)
        @include('site._includes.phrases-slider')
    @endif

    <section class="question">
        <div class="container">
            <div class="question__block">
                {!! $home->title_form !!}
                <p>Envie sua mensagem.</p>
            </div>
            <livewire:form-page-home/>

        </div>
    </section>
</div>

@endsection