@extends('site.layouts.app', ['seoModel' => $about])

@section('content')

<div class="page-wrapper content-wrapper page-about">
    @include('site._includes.mini-banner', [
        'banner_desktop'    => $about->banner_desktop,
        'banner_mobile'     => $about->banner_mobile,
        'title'             => $about->banner_title,
    ])

    @if ($about->tag || $about->title || $about->description)
        <section class="description">
            <div class="container">
                <div class="description__block">
                    <div class="description__title">
                        @if (!empty($about->tag))
                            <div class="title__tag">
                                <div class="tag-blue">/</div>
                                <div class="tag-green">/</div>
                                <div class="tag-yellow">/</div>
                                <div class="tag-text">{{ $about->tag }}</div>
                            </div>
                        @endif

                        <h4>{{ $about->title }}</h4>
                    </div>

                    {!! $about->description !!}

                    <img class="image-detail" src="{{ asset('images/detail-waves.png') }}" alt="{{ $siteTitle }}">
                </div>
            </div>
        </section>
    @endif

    @if (!$about->hide_gallery && !empty($about->gallery))
        <section class="gallery">
            <div class="container">
                <div class="swiper-container gallery__slider">
                    <div class="swiper-wrapper">
                        @foreach ($about->gallery as $image)
                            <div class="swiper-slide">
                                <a data-fancybox="gallery-image" href="{{ asset("storage/{$image}") ?? "" }}">
                                    <img src="{{ asset("storage/{$image}") ?? "" }}">
                                </a>
                            </div>
                        @endforeach
                    </div>

                    <div class="swiper-pagination gallery-pagination"></div>
                    
                    <div class="header__controls">
                        <div class="header__arrows">
                            <div class="swiper-button-prev gallery-button-prev">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3.33203 8H12.6654M3.33203 8L7.33203 12M3.33203 8L7.33203 4" stroke="white" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="swiper-button-next gallery-button-next">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.668 8H3.33464M12.668 8L8.66797 12M12.668 8L8.66797 4" stroke="white" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif;

    @if (!$about->hide_values && !empty($about->values))
        <section class="worth">
            <div class="container">
                <div class="worth__title">
                    @if (!empty($about->tag_values))
                        <div class="title__tag">
                            <div class="tag-blue">/</div>
                            <div class="tag-green">/</div>
                            <div class="tag-yellow">/</div>
                            <div class="tag-text">{{ $about->tag_values }}</div>
                        </div>
                    @endif

                    <h4>{{ $about->title_values }}</h4>
                </div>

                <div class="worth__content">
                    @foreach ($about->values as $value)
                        <div class="content__block">
                            @if(!empty($value['icon']))
                                <img src="{{ asset("storage/{$value['icon']}") }}" alt="{{ $value['title'] }}">
                            @endif

                            <h4>{{ $value['title'] }}</h4>
                            {!! $value['description'] !!}
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @if($about->video_media_type !== 'none' && ($about->youtube_link || $about->video_file))
        @php
            $video_media = ($about->video_media_type == "youtube") ? $about->youtube_link : $about->video_file;
        @endphp
        <section class="video">
            <a href="{{ asset("storage/{$video_media}") }}" data-fancybox="video-about">
                <img src="{{ asset("storage/{$about->video_thumbnail}") }}" alt="thumbnail do vídeo">

                <div class="play">
                    <svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15 9L-8.15666e-07 17.6603L-5.85621e-08 0.339745L15 9Z" fill="white"/>
                    </svg>
                </div>
            </a>
        </section>
    @endif

    @if (!$about->hide_brands && !empty($about->brands))
        <section class="partners">
            <div class="container">
                <div class="partners__header">
                    <div class="partners__title">
                        @if (!empty($about->tag_brands))
                            <div class="title__tag">
                                <div class="tag-blue">/</div>
                                <div class="tag-green">/</div>
                                <div class="tag-yellow">/</div>
                                <div class="tag-text">{{ $about->tag_brands }}</div>
                            </div>
                        @endif

                        <h4>{{ $about->title_brands }}</h4>
                    </div>

                    <div class="header__controls">
                        <div class="header__arrows">
                            <div class="swiper-button-prev partners-button-prev">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M3.33203 8H12.6654M3.33203 8L7.33203 12M3.33203 8L7.33203 4" stroke="white" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div class="swiper-button-next partners-button-next">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M12.668 8H3.33464M12.668 8L8.66797 12M12.668 8L8.66797 4" stroke="white" stroke-width="1.16667" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="swiper-container swiper__partners">
                    <div class="swiper-wrapper">
                        @foreach ($about->brands as $brand)
                            <div class="swiper-slide">
                                <a
                                    @if (!empty($brand['link']))
                                        href="{{ $brand['link'] }}"
                                        target="{{ $brand['target'] }}"
                                        rel="noopener noreferrer"
                                    @endif
                                    >
                                    @if(!empty($brand['image']))
                                        <img src="{{ asset("storage/{$brand['image']}") }}">
                                    @endif
                                </a>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </section>
    @endif
</div>

@endsection