@props(['produto', 'relacionados', 'embalagens', 'fragrancias', 'canonical'])
@php
    use \Mcamara\LaravelLocalization\Facades\LaravelLocalization;
    $alternates = [];
    foreach (LaravelLocalization::getSupportedLocales() as $locale => $properties) {
        $lang = str_replace('_', '-', $locale);
        $alternates[] = [
            'locale' => $locale,
            'lang' => $lang,
            'href' => \App\Helpers\TranslationHelper::getProdutoUrl($produto->slug, $produto->familia?->slug, $locale),
        ];
    }
@endphp
<x-layout
    :title="$produto->nome_do_produto"
    :description="$produto->descricao_comercial"
    :canonical="$canonical"
    :alternates="$alternates">
    <div
        class="pt-[calc(var(--header-height)_+_2.5rem)] pb-40 bg-midnightblue-100 text-white flex justify-center items-center">
        <div class="max-w-[85.375rem] mx-auto flex flex-col md:flex-row items-center md:space-x-10">
            <div class="w-full md:w-1/2 flex justify-center mb-8 md:mb-0 relative">
                <div class="absolute inset-1 flex justify-center items-center">
                    <div
                        class="w-[250px] h-[250px] md:w-[450px] md:h-[450px] opacity-80 rounded-full bg-[radial-gradient(50%_50%,cyan,transparent)] blur-[60px]"
                    ></div>
                </div>

                @if ($produto->imagem_md)
                    <img
                        src="{{ asset('storage/' . $produto->imagem_md) }}"
                        alt="{{  __('messages._produtos.imagem_do_produto', ['nome' => $produto->nome_do_produto]) }}"
                        class="h-[227px] md:h-[429px] mx-auto relative transform transition-transform"
                    />
                @endif
            </div>

            <div class="w-full md:w-1/2 text-center md:text-left md:pr-28">
                <div
                    class="uppercase tracking-widest opacity-80 mb-2 text-[10px] mx-[34px] md:mx-0 md:text-xs text-white leading-5">
                    @foreach (collect($produto->palavras_chave)->take(3) as $palavra)
                        {{ trim($palavra) }}
                        @if (!$loop->last)
                            <span class="mx-1 ">&#x2726;</span>
                        @endif
                    @endforeach
                </div>

                <h1 class="text-2xl md:text-4xl font-bold mb-4 mt-4 font-bricolage px-4 sm:px-0">
                    {{ $produto->nome_do_produto }}
                </h1>

                <p class="text-base mb-6 opacity-80 px-8 text-white md:px-0 md:mx-0 md:text-lg">
                    {{ ucfirst($produto->descricao_comercial) }}
                </p>

                <a href="{{ \App\Helpers\TranslationHelper::getPageUrl('onde-encontrar') }}"
                   class="inline-block bg-white shadow-xl text-blue-800 font-bold py-4 px-8 rounded-full font-bricolage md:hidden">
                    {{ __('messages._produtos.botao_onde_encontrar') }}
                </a>

                @if(!empty($embalagens) || !empty($fragrancias))
                    <hr class="border-white/20 my-5 mx-[20px] md:mx-0"/>
                    <div class="ml-[20px] md:ml-0">
                        <h5 class="text-lg font-semibold mb-2 text-left"> {{ __('messages._produtos.embalagens') }}</h5>
                        <div class="flex justify-start">
                            <div
                                class="max-md:max-w-[calc(100vw_-_40px)] flex overflow-x-auto start-scrollbar md:overflow-visible bg-blue-950 rounded-full whitespace-nowrap">
                                @foreach ($embalagens as $key => $available)
                                    @php
                                        $is_available =  isset($available[$produto->fragrancias]);
                                        $lastSlug = ($is_available  ? $available[$produto->fragrancias] : $available[array_key_first($available)] );
                                        $href = \App\Helpers\TranslationHelper::getPageUrl('produtos') . '/' . $produto->familia->slug . '/' . $lastSlug;
                                    @endphp
                                    <a href="{{ $href }}"
                                        @class([
                                            'py-3 px-4 m-[4px] cursor-pointer transition-colors font-semibold rounded-full',
                                            'bg-white text-blue-800' => $key === $produto->embalagem,
                                            'text-white' => $key !== $produto->embalagem,
                                            'opacity-50' => !$is_available
                                        ])>
                                        {{ $key }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @if(!$fragrancias->isEmpty())
                        <hr class="border-white/20 my-5 mx-[20px] md:mx-0"/>
                        <div class=" ml-[20px] md:ml-0">
                            <h5 class="text-lg font-semibold mb-2 text-white text-left"> {{ __('messages._produtos.fragrancias') }}</h5>
                            <div
                                class="flex gap-2 no-scrollbar overflow-x-auto md:overflow-visible whitespace-nowrap sm:flex-wrap">
                                @foreach ($fragrancias as $key => $available)
                                    @php
                                        $is_available =  isset($available[$produto->embalagem]);
                                        $lastSlug = ($is_available  ? $available[$produto->embalagem] : $available[array_key_first($available)] );
                                        $href = \App\Helpers\TranslationHelper::getPageUrl('produtos') . '/' . $produto->familia->slug . '/' . $lastSlug;
                                    @endphp
                                    <a href="{{ $href }}"
                                        @class([
                                                'py-3 px-4 border-solid border-[4px] border-blue-950 cursor-pointer transition-colors font-semibold bg-blue-950 rounded-full',
                                                'bg-white text-blue-800' => $key === $produto->fragrancias,
                                                'text-white' => $key !== $produto->fragrancias,
                                                'opacity-50' => !$is_available
                                        ])>
                                        {{ $key }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
                <a href="{{ \App\Helpers\TranslationHelper::getPageUrl('onde-encontrar') }}"
                   class="hidden mt-20 bg-white text-blue-800 font-bold py-4 px-8 rounded-full font-bricolage sm:inline-block">
                    {{ __('messages._produtos.botao_onde_encontrar') }}
                </a>
            </div>
        </div>
    </div>

    <x-corpo>
        <div class="absolute -top-5 left-0 w-full">
            <div
                class="w-10 h-10 border border-amber-400 rounded-full mx-auto shadow bg-white flex justify-center items-center">
                <img src="{{ asset('images/alt-arrow-down2.svg') }}" class="w-4 h-2"/>
            </div>
        </div>

        <div>
            <h2 class="text-3xl font-bold mb-6 text-center text-blue-800 font-bricolage">
                {{ __('messages._produtos.para_que_serve') }}
            </h2>

            <p class="max-w-3xl mx-auto mb-8 text-center px-8 text-blue-950 text-base">
                {{ $produto->finalidade_indicacao }}
            </p>

            <h2 class="text-3xl font-bold mb-8 mt-14 text-center text-blue-800 font-bricolage">
                {{ __('messages._produtos.onde_aplicar') }}
            </h2>
            @if (is_array($produto->superficies) && count($produto->superficies) > 0)
                <x-galeria-grande
                    :cartoes="array_map(fn($el) => ['titulo' => $el['nome'], 'imagem' => $el['imagem'] ?? null], array_filter($produto->superficies, fn($el) => !empty($el['nome'])))"
                />
            @endif
        </div>

        @if (!empty($produto->modo_de_uso))
            <div class="flex flex-col md:flex-row bg-white py-10">
                <div x-data="{ ativo: '{{ head($produto->modo_de_uso)['nome'] }}' }"
                     class="flex flex-col w-full md:w-[60%] px-4 sm:px-6 md:px-12 justify-center order-1 md:order-2 pb-10 md:text-left">
                    <h2 class="text-3xl font-bold text-blue-800 mb-4 font-bricolage">
                        {{ __('messages._produtos.modo_de_uso') }}
                    </h2>
                    @if(count($produto->modo_de_uso) > 1)
                        <x-alternador class="mb-4">
                            @foreach($produto->modo_de_uso as $uso)
                                <x-alternador-botao :nome="$uso['nome']">
                                    {{ $uso['nome'] }}
                                </x-alternador-botao>
                            @endforeach
                        </x-alternador>
                    @endif
                    <div
                        class="text-sm sm:text-base text-midnightblue-100 max-w-full sm:max-w-lg bg-white rounded-lg">
                        @foreach($produto->modo_de_uso as $uso)
                            <p x-show="ativo === '{{ $uso['nome'] }}'" x-cloak>
                                {{  $uso['descricao'] }}
                            </p>
                        @endforeach
                    </div>
                </div>
                <div
                    class="relative w-full md:w-[50%] flex justify-start items-center order-2 md:order-1">
                    <div
                        class="absolute inset-0 flex items-center pl-6 md:pl-12 text-white text-3xl md:text-5xl font-bold z-10 font-bricolage">
                        <p class="text-balance pr-[80px]">
                            {{ __('messages._produtos.modo_de_uso_frase') }}
                        </p>
                    </div>
                    <div
                        class="produtos-blue transform hidden xl:block h-full absolute w-[8000px] right-[50%] pointer-events-none contain-strict"
                        aria-hidden="true"></div>
                    <svg class="transform object-contain w-[90%] sm:w-[50%] md:w-full" width="556" height="450"
                         viewBox="0 0 556 450" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#bb)">
                            <path
                                d="M0 16.37H339C396.552 16.37 451.747 39.2324 492.442 79.9278C533.138 120.623 556 175.818 556 233.37C556 290.922 533.138 346.117 492.442 386.812C451.747 427.508 396.552 450.37 339 450.37H0V16.37Z"
                                fill="#003CA5"/>
                            <path
                                d="M-10.8096 26.87H339C366.118 26.87 392.97 32.2113 418.024 42.5889C443.078 52.9665 465.842 68.1771 485.018 87.3524C504.193 106.528 519.404 129.292 529.781 154.346C540.159 179.4 545.5 206.252 545.5 233.37C545.5 260.488 540.159 287.34 529.781 312.394C519.404 337.448 504.193 360.212 485.018 379.388C465.842 398.563 443.078 413.774 418.024 424.151C392.97 434.529 366.118 439.87 339 439.87H-19"
                                stroke="white" stroke-opacity="0.3"/>
                            <path opacity="0.18"
                                  d="M421.158 96.953L408.558 99.134C406.968 99.4094 405.506 100.183 404.384 101.343C403.263 102.504 402.539 103.99 402.317 105.589L400.527 118.481L398.346 105.881C398.071 104.291 397.297 102.829 396.137 101.707C394.977 100.585 393.49 99.8615 391.891 99.64L379 97.85L391.6 95.669C393.19 95.3938 394.652 94.6201 395.774 93.4598C396.896 92.2995 397.62 90.8127 397.841 89.214L399.63 76.323L401.811 88.923C402.086 90.5133 402.86 91.9749 404.02 93.0967C405.18 94.2186 406.667 94.9425 408.266 95.164L421.158 96.953Z"
                                  stroke="white"/>
                            <path
                                d="M500.4 47.665L471.283 52.7C467.608 53.3364 464.231 55.1246 461.639 57.8061C459.047 60.4877 457.375 63.9238 456.864 67.618L452.737 97.4L447.7 68.283C447.064 64.6083 445.276 61.231 442.595 58.6391C439.913 56.0472 436.477 54.375 432.783 53.864L403 49.737L432.118 44.7C435.793 44.0639 439.17 42.276 441.762 39.5946C444.354 36.9132 446.026 33.4772 446.537 29.783L450.665 0L455.7 29.118C456.336 32.7928 458.124 36.1702 460.806 38.7621C463.487 41.354 466.924 43.0262 470.618 43.537L500.4 47.665Z"
                                fill="#F5C800"/>
                            <path
                                d="M549.315 69.331L536.715 71.5121C535.125 71.7874 533.663 72.5611 532.541 73.7214C531.42 74.8817 530.696 76.3684 530.474 77.9671L528.684 90.8591L526.503 78.2591C526.228 76.6688 525.454 75.2071 524.294 74.0853C523.134 72.9635 521.647 72.2395 520.048 72.018L507.157 70.2281L519.757 68.0471C521.347 67.7718 522.809 66.9982 523.931 65.8379C525.053 64.6776 525.777 63.1907 525.998 61.592L527.787 48.701L529.968 61.3011C530.243 62.8913 531.017 64.353 532.177 65.4748C533.338 66.5966 534.824 67.3206 536.423 67.542L549.315 69.331Z"
                                fill="#003CA5"/>
                        </g>
                        <defs>
                            <clipPath id="bb">
                                <rect width="556" height="450" fill="white"/>
                            </clipPath>
                        </defs>
                    </svg>
                </div>
            </div>
        @endif

        <div class="bg-white py-11">
            <div class="container mx-auto text-center">
                <h2 class="px-8 text-3xl sm:text-5xl font-bold text-blue-800 mb-8 font-bricolage text-balance"> {{ __('messages._produtos.conheca_mais_produtos', ['nome' => $produto->marca->nome]) }}</h2>
                <div x-ref="mobileProdutos"
                     class="flex overflow-x-auto no-scrollbar md:overflow-hidden md:grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6">
                    @foreach ($relacionados as $relacionado)
                        <a href="{{ \App\Helpers\TranslationHelper::getProdutoUrl($relacionado->slug, $relacionado->familia?->slug) }}"
                           class="flex flex-col items-center first-of-type:pl-8 last-of-type:pr-8">
                            <div
                                class="w-48 h-48 rounded-full border border-blue-800/50 flex items-center justify-center overflow-hidden">
                                @if($relacionado['imagem_md'])
                                    <img loading="lazy" src="{{ asset('storage/' . $relacionado['imagem_md'])  }}"
                                         alt="{{  __('messages._produtos.imagem_do_produto', ['nome' => $relacionado['nome_do_produto']]) }}"
                                         class="object-contain h-3/4">
                                @endif
                            </div>
                            <p class="mt-4 text-blue-800 font-bold text-center font-bricolage">
                                {{ $relacionado['nome_do_produto'] }}
                            </p>
                        </a>
                    @endforeach
                </div>
                <div class="flex justify-center space-x-4 mt-6 md:hidden">
                    <button
                        @click="$refs.mobileProdutos.scrollBy({ left: -320, behavior: 'smooth' })"
                        class="bg-white border-2 border-blue-800 rounded-full w-10 h-10 flex items-center justify-center">
                        <img src="{{ asset('images/arrow-left1.svg') }}" class="w-4 h-4">
                    </button>
                    <button
                        @click="$refs.mobileProdutos.scrollBy({ left: 320, behavior: 'smooth' })"
                        class="bg-white border-2 border-blue-800 rounded-full w-10 h-10 flex items-center justify-center">
                        <img src="{{ asset('images/arrow-right1.svg') }}" class="w-4 h-4">
                    </button>
                </div>
            </div>
        </div>

        <div class="bg-white pt-10">
            <div class="px-8">
                @if($produto->marca->banner_3)
                    <a href="{{ $produto->marca->url ?? '#' }}" class="hidden md:block">
                        <img src="{{ asset('storage/' . $produto->marca->banner_3) }}"
                             alt="Banner {{ $produto->marca->nome }}"
                             class="block">
                    </a>
                @endif
                @if($produto->marca->banner_3_mobile)
                    <a href="{{ $produto->banner_3_url ?? $produto->marca->url ?? '#' }}" class="block md:hidden">
                        <img src="{{ asset('storage/' . $produto->marca->banner_3_mobile) }}"
                             alt="Banner {{ $produto->marca->nome }}" class="block">
                    </a>
                @endif
            </div>
            @php
                $novidades = $produto->marca->novidades()
                    ->where('publicado', true)
                    ->latest('data_publicacao')
                    ->take(6)
                    ->get()
                    ->map(function ($novidade) {
                        return [
                            'titulo' => $novidade->titulo,
                            'imagem' => $novidade->thumbnail,
                            'url' => \App\Helpers\TranslationHelper::getPageUrl('novidades') . '/' . $novidade->slug,
                        ];
                    });
            @endphp
            @if(!$novidades->isEmpty())
                <div class="mx-auto pt-10 sm:pt-20">
                    <h2 class="text-3xl md:text-5xl font-bold mb-10 text-center text-blue-800 font-bricolage">
                        {{ __('messages._produtos.novidades_titulo', ['nome' => $produto->marca->nome]) }}
                    </h2>

                    <x-galeria-grande :cartoes="$novidades"/>
                </div>
            @endif

            <div class="container mx-auto text-center py-2 sm:py-16">
                <h2 class="text-3xl sm:text-5xl font-bold text-blue-800 mb-2 font-bricolage">{{ __('messages._produtos.onde_encontrar') }}</h2>
                <p class="text-blue-900 mb-6 text-sm">{{ __('messages._produtos.onde_encontrar_descricao') }}</p>
                <a href="{{ \App\Helpers\TranslationHelper::getPageUrl('onde-encontrar') }}"
                   class="inline-block bg-blue-800 text-white font-semibold py-3 px-8 rounded-full shadow-md hover:bg-blue-900 text-sm transition">
                    {{ __('messages._produtos.botao_onde_encontrar_produtos') }}
                </a>
            </div>
        </div>

        <div class="bg-white px-8 pt-2 md:px-16 md:pt-5">
            @if($produto->marca->banner_2)
                <a href="{{ $produto->marca->banner_2_url ?? $produto->marca->url ?? '#' }}" class="hidden md:block">
                    <img src="{{ asset('storage/' . $produto->marca->banner_2) }}"
                         alt="Banner {{ $produto->marca->nome }}"
                         class="block">
                </a>
            @endif
            @if($produto->marca->banner_2_mobile)
                <a href="{{ $produto->marca->banner_2_url ?? $produto->marca->url ?? '#' }}"
                   class="block md:hidden w-full h-auto">
                    <img src="{{ asset('storage/' . $produto->marca->banner_2_mobile) }}"
                         alt="Banner {{ $produto->marca->nome }}" class="block">
                </a>
            @endif
        </div>

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

            <p class="text-blue-800 font-semibold text-center mb-6 font-bricolage">
                @if($produto->email)
                    {{ $produto->email }} <span class="mx-2">✦</span>
                @endif @if($produto->tel)
                    {{ $produto->tel }}
                @endif
            </p>

            <div class="flex flex-wrap justify-center gap-2">
                @if($produto->ficha_tecnica)
                    <a download="{{ $produto->slug . '-ficha-tecnica' }}"
                       href="{{ asset('storage/' . $produto->ficha_tecnica) }}"
                       class="inline-flex text-sm border border-blue-900 text-blue-900 font-semibold py-3 px-4 rounded-full flex items-center space-x-2 hover:bg-blue-100 transition">
                        <span>{{ __('messages._produtos.ficha_tecnica') }}</span>
                        <img src="{{ asset('images/download-blue.svg') }}" alt="Ícone de download" class="w-4 h-4"/>
                    </a>
                @endif
                @if($produto->fispq)
                    <a download="{{ $produto->slug . '-fispq' }}" href="{{ asset('storage/' . $produto->fispq) }}"
                       class="inline-flex text-sm border border-blue-900 text-blue-900 font-semibold py-3 px-4 rounded-full flex items-center space-x-2 hover:bg-blue-100 transition">
                        <span>{{ __('messages._produtos.fispq') }}</span>
                        <img src="{{ asset('images/download-blue.svg') }}" alt="Ícone de download" class="w-4 h-4"/>
                    </a>
                @endif
            </div>
        </div>
    </x-corpo>
    @pushonce('scripts')
        <style>
            .header-menu {
                position: absolute !important;
            }

            .produtos-blue {
                background-image: url("data:image/svg+xml, %3Csvg preserveAspectRatio='xMaxYMin' width='336' height='450' viewBox='0 0 336 450' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2_15)'%3E%3Cpath d='M0 16.37H339C396.552 16.37 451.747 39.2324 492.442 79.9278C533.138 120.623 556 175.818 556 233.37C556 290.922 533.138 346.117 492.442 386.812C451.747 427.508 396.552 450.37 339 450.37H0V16.37Z' fill='%23003CA5'/%3E%3Cpath d='M-10.8096 26.87H339C366.118 26.87 392.97 32.2113 418.024 42.5889C443.078 52.9665 465.842 68.1771 485.018 87.3524C504.193 106.528 519.404 129.292 529.781 154.346C540.159 179.4 545.5 206.252 545.5 233.37C545.5 260.488 540.159 287.34 529.781 312.394C519.404 337.448 504.193 360.212 485.018 379.388C465.842 398.563 443.078 413.774 418.024 424.151C392.97 434.529 366.118 439.87 339 439.87H-19' stroke='white' stroke-opacity='0.3'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2_15'%3E%3Crect width='336' height='450' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
            }
        </style>
    @endpushonce
</x-layout>