@props(['marca', 'canonical', 'main_setor'])
@php
    use \Mcamara\LaravelLocalization\Facades\LaravelLocalization;
    $alternates = [];
    foreach (LaravelLocalization::getSupportedLocales() as $locale => $properties) {
        $lang = str_replace('_', '-', $locale);
        $marcasUrl = \App\Helpers\TranslationHelper::getPageUrl('nossas-marcas', $locale);
        $alternates[] = [
            'locale' => $locale,
            'lang' => $lang,
            'href' => LaravelLocalization::getLocalizedURL($locale, $marcasUrl . '/' . $marca['slug'], [], true),
        ];
    }
    $add_main_setor = !empty($main_setor?->slug) ? '&setor=' . $main_setor->slug : '';
@endphp
<x-layout
    :title="$marca->nome"
    :description="$marca->descricao"
    :canonical="$canonical"
    :alternates="$alternates">
    <div
        class="bg-midnightblue-100 flex flex-col xl:flex-row gap-0 sm:gap-12 sm:items-center justify-center pb-28 sm:pb-32 pt-[calc(var(--header-height)_+_2.5rem)] sticky top-0">
        <div class="max-w-[85.375rem] mx-auto grid gap-4 xl:grid-cols-[1fr_1fr] place-items-center">
            <div
                class="order-1 mb-16 mt-12 mx-auto sm:mt-0 sm:mx-0 xl:mb-0 xl:order-none w-auto">
                <img alt="Banner {{ $marca->nome }}" class=" object-contain h-[280px] w-auto" src="{{ asset('storage/' . $marca->banner) }}"/>
            </div>
            <div class="max-w-lg relative text-center mx-auto xl:text-start xl:mx-0">
                <h1
                    class="text-white text-3xs sm:text-xs tracking-36 uppercase">{{ __('messages._pagina_marca.marcas') }}
                    ✦ {{ $marca->nome }}</h1>
                <div class="font-bricolage font-bold mx-0 sm:mx-auto text-70 sm:text-8xl text-white mt-3 relative inline-flex">
                    @if(!empty($marca->imagem_branca))
                        <img class="h-32 max-w-64 object-contain" src="{{ asset('storage/' . $marca->imagem_branca) }}" alt="{{ $marca->nome }}" />
                    @else
                        <img class="h-32 max-w-64 object-contain" src="{{ asset('storage/' . $marca->imagem) }}" alt="{{ $marca->nome }}" />
                    @endif
                </div>
                <div
                    class="font-bricolage font-bold mt-2 mx-0 sm:mx-auto text-ellipsis text-base sm:text-xl text-white">
                    {{ $marca->descricao_pequena }}
                </div>
                <img class="absolute -bottom-20 -right-20 scale-50" src="{{ asset('images/star1.svg') }}"
                     alt="Estrela dourada."/>
            </div>
        </div>
    </div>
    <x-corpo>
        <div x-data="{ selecionado: 0 }">
            <div
                class="font-bricolage font-bold max-w-4xl mx-4 sm:mx-auto text-center text-midnightblue-100 text-13xl">
                {{ $marca->titulo }}
            </div>
            <div class="max-w-4xl mt-6 mx-4 sm:mx-auto text-base text-center text-darkslateblue-300">
                {!! str($marca->descricao)->sanitizeHtml() !!}
            </div>
            <div
                x-data="{showLeft: true, showRight: true, update() {
                this.showLeft = this.$refs.region.scrollLeft > 0;
                this.showRight = this.$refs.region.scrollLeft + this.$refs.region.offsetWidth < this.$refs.region.scrollWidth; } }"
                class="flex items-center justify-between gap-2 px-4 mt-14">

                <button @click="$refs.region.scrollBy({ left: -100, behavior: 'smooth' });"
                        class="w-9 h-9 flex items-center justify-center rounded-full shrink-0 border-2 border-solid border-darkslateblue-100 transition-opacity disabled:opacity-0"
                        :disabled="!showLeft">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828" viewBox="0 0 18.414 14.828">
                        <path d="M17.414 7.414h-16m0 0 6-6m-6 6 6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </button>
                <div x-ref="region" class="flex gap-2 sm:gap-4 overflow-x-auto no-scrollbar" @scroll="update()"
                     x-resize="update()">
                    @foreach ($destaques as $destaque)
                        <button
                            @class([
                                'rounded-full font-bold shrink-0 text-sm border px-5 py-3',
                                'bg-midnightblue-100 text-white border-transparent' => $loop->first,
                                'bg-white border-midnightblue-100 text-midnightblue-100' => !$loop->first,
                            ])
                            @click="selecionado = @js($loop->index)"
                            :class="{
                            'bg-midnightblue-100 text-white border-transparent': selecionado === @js($loop->index),
                            'bg-white border-midnightblue-100 text-midnightblue-100': selecionado !== @js($loop->index)
                        }">
                            {{ $destaque['categoria']->nome }}
                        </button>
                    @endforeach
                </div>
                <button @click="$refs.region.scrollBy({ left: 100, behavior: 'smooth' });"
                        class="w-9 h-9 flex items-center justify-center rounded-full shrink-0 border-2 border-solid border-darkslateblue-100 transition-opacity disabled:opacity-0"
                        :disabled="!showRight">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18.414" height="14.828" viewBox="0 0 18.414 14.828">
                        <path d="M1 7.414h16m0 0-6-6m6 6-6 6" fill="none" stroke="#003ca5" stroke-linecap="round"
                              stroke-linejoin="round" stroke-width="2"/>
                    </svg>
                </button>
            </div>
            @foreach($destaques as $destaque)
                <div {{ $loop->first ? '' : 'x-cloak' }}
                     x-show="selecionado === {{ $loop->index }}">
                    <div
                        class="flex flex-wrap sm:flex-nowrap font-bricolage gap-x-3 sm:gap-x-14 gap-y-10 sm:gap-y-14 justify-center w-full mt-12 px-1 sm:px-10">
                        @foreach ($destaque['produtos'] as $produto)
                            <a href="{{ \App\Helpers\TranslationHelper::getProdutoUrl($produto->slug, $produto->familia?->slug) }}"
                               class="flex flex-col gap-5 items-center w-[170px] sm:w-[260px]">
                                <div class="border border-midnightblue-100/50 grow-0 relative rounded-full w-fit">
                                    <div
                                        class="overflow-hidden h-[160px] sm:h-[260px] w-[160px] sm:w-[260px] rounded-full">
                                        @php
                                            $img = $produto->imagem_md ?? $produto->imagem;
                                        @endphp
                                        @if(!empty($img))
                                            <img class="object-contain h-full w-full p-6"
                                                 src="{{ asset('storage/' . $img) }}"
                                                 alt="{{ $produto->nome_do_produto }}"/>
                                        @endif
                                    </div>
                                </div>
                                <div
                                    class="font-bricolage font-bold px-3 text-center text-midnightblue-100 text-sm sm:text-base">
                                    {{$produto->nome_do_produto}}
                                </div>
                            </a>
                        @endforeach
                    </div>
                    @php
                        $inner_add_setor = !empty($destaque['setor']) ? '&setor=' . $destaque['setor'] : $add_main_setor;
                    @endphp
                    @php
                        $produtosUrl = \App\Helpers\TranslationHelper::getPageUrl('produtos');
                    @endphp
                    <div class="text-center">
                        <x-botao-principal
                            class="inline-block rounded-full mt-14 mb-24 px-10 py-4 font-bold mx-auto text-sm"
                            href="{{ $produtosUrl . '?marca=' . ($marca->marca_pai_id ?? $marca->id) . $inner_add_setor }}">
                            {{ __('messages._pagina_marca.ver_produtos') }}
                        </x-botao-principal>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Video --}}
        <x-highlights :botoes="$marca->highlights" :video="$marca->video" :video_poster="$marca->video_poster ?? null"/>

        {{-- Detalhe produto --}}
        <div class="bg-white py-16 sm:pt-24 px-10 sm:px-16">
            @foreach($marca->linhas as $linha)
                <div class="grid gap-8 md:gap-4 md:grid-cols-2 mt-12 first:mt-0">
                    <div
                        class="border border-gainsboro self-center justify-self-center {{ $loop->index % 2 !== 0 ? 'md:justify-self-start md:order-none' : 'md:justify-self-end md:order-1' }} relative rounded-full">
                        <img alt="{{ $linha['titulo'] }}" class="block object-cover h-[300px] lg:h-[480px] w-[300px] lg:w-[480px] rounded-full"
                             src="{{ asset('storage/' . $linha->imagem) }}"/>
                        <img class="absolute -top-4 -right-2 scale-50 sm:scale-100"
                             src="{{ asset('images/star1.svg') }}"
                             alt="Estrela dourada."/>
                        <img class="absolute -bottom-2 right-[42px] scale-75 sm:scale-100"
                             src="{{ asset('images/star2.svg') }}"
                             alt="Estrela azulada."/>
                    </div>
                    <div class="max-w-xl self-center">
                        <h2 class="font-bricolage font-bold text-midnightblue-100 text-13xl max-w-lg leading-tight text-balance sm:text-33xl">
                            {{ $linha['titulo'] }}
                        </h2>
                        @if(!empty($linha['descricao']))
                            <div class="leading-6 mt-5 text-darkslateblue-300 text-base rich-editor">
                                {!! str($linha['descricao'])->sanitizeHtml() !!}
                            </div>
                        @endif
                        @if(!empty($linha->blocos))
                            <div class="flex flex-col gap-4 mt-4">
                                @foreach($linha->blocos as $b)
                                    <div>
                                        <h3 class="font-bold mt-4 text-midnightblue-100">
                                            {{ $b['titulo'] }}
                                        </h3>
                                        <p class="leading-6 mt-2 text-darkslateblue-300 text-base">
                                            {{ $b['descricao'] }}
                                        </p>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                        @php
                            $produtosUrl = \App\Helpers\TranslationHelper::getPageUrl('produtos');
                        @endphp
                        <x-botao-principal
                            href="{{ $produtosUrl . '?marca=' . ($marca->marca_pai_id ?? $marca->id) . $add_main_setor }}"
                            class="inline-flex bg-midnightblue-100 rounded-full mt-6 sm:mt-8 mb-6 px-10 py-4 font-bold text-sm text-white">
                            {{ __('messages._pagina_marca.conheca_os_produtos') }}
                        </x-botao-principal>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Dicas --}}
        @if(!$marca->novidades->isEmpty())
            <div class="bg-white mt-16">
                <div class="px-0 sm:px-16">
                    <h1 class="font-bricolage font-bold mb-0 sm:mb-6 mt-3 sm:mt-0 text-midnightblue-100 text-center text-13xl sm:text-33xl">
                        Dicas com {{ $marca->nome }}
                    </h1>
                    @php
                        $novidadesUrl = \App\Helpers\TranslationHelper::getPageUrl('novidades');
                    @endphp
                    <x-galeria-grande :cartoes="$marca->novidades->map(fn($el) => [
                        'titulo' => $el->titulo,
                        'imagem' => $el->thumbnail,
                        'url' => $novidadesUrl . '/' . $el->slug,
                        'sobrancelha' => $el->categoria->nome,
                    ])"/>
                </div>
            </div>
        @endif

        {{-- Bloco onde encontrar --}}
        <div class="bg-white pt-16 sm:pt-24">
            <div class="flex flex-col items-center">
                <h2 class="font-bricolage font-bold mb-0 sm:mb-3 mt-3 sm:mt-0 text-midnightblue-100 text-13xl sm:text-33xl">
                    {{ __('messages._pagina_marca.onde_encontrar') }}
                </h2>
                <div class="leading-6 mt-1 text-darkslateblue-300 text-sm sm:text-lg">
                    {{ __('messages._pagina_marca.encontre') }}
                </div>
                <a href="{{ \App\Helpers\TranslationHelper::getPageUrl('onde-encontrar') }}"
                   class="bg-midnightblue-100 block rounded-full mt-6 sm:mt-6 mb-6 sm:mb-24 px-10 py-3 sm:py-4 font-bold text-sm text-white">
                    {{ __('messages._pagina_marca.confira_todas') }}
                </a>
            </div>
        </div>

        {{-- Banner --}}
        <div class="bg-white mx-auto px-4 sm:px-16">
            @if ($marca->banner_2)
                <a href="{{ $marca->banner_2_url ?? $marca->url ?? '#' }}">
                    <img alt="Banner {{ $marca->nome }}" class="{{ !empty($marca->banner_2_mobile) ? 'hidden sm:block' : '' }} mx-auto sm:rounded-3xl"
                         src="{{ asset('storage/' . $marca->banner_2) }}"/>
                </a>
            @endif
            @if (!empty($marca->banner_2_mobile))
                <a href="{{ $marca->banner_2_url ?? $marca->url ?? '#' }}">
                    <img alt="Banner {{ $marca->nome }}" class="block sm:hidden object-cover mt-16 mx-auto sm:rounded-3xl h-auto w-full"
                         src="{{ asset('storage/' . $marca->banner_2_mobile) }}"/>
                </a>
            @endif
        </div>

        <div class="my-16 flex justify-center">
            @php
                $formatted_social_links = [];
                if (!empty($marca->social_links)) {
                    foreach ($marca->social_links as $link) {
                        $formatted_social_links[$link['plataforma']] = $link['url'];
                    }
                }
            @endphp
            <x-compartilhe :links="$formatted_social_links" :external="!empty($formatted_social_links)"/>
        </div>

        @if($marca->email || $marca->tel)
            <div class="font-bricolage mt-5 mx-2 sm:mx-0 text-center text-darkslateblue-200 text-sm sm:text-xl">
                @if( $marca->tel && $marca->email)
                    {{ $marca->email }} ✦ {{ $marca->tel }}
                @else
                    {{ $marca->email ?? $marca->tel }}
                @endif
            </div>
        @endif
    </x-corpo>
</x-layout>