@props(['produto', 'relacionados', 'embalagens', 'fragrancias', 'canonical'])
@php
    use \Mcamara\LaravelLocalization\Facades\LaravelLocalization;
    
    $currentLocale = LaravelLocalization::getCurrentLocale();
    $canonicalUrl = null;
    
    $alternates = [];
    foreach (LaravelLocalization::getSupportedLocales() as $locale => $properties) {
        $lang = str_replace('_', '-', $locale);
        $href = \App\Helpers\TranslationHelper::getProdutoUrl($produto->slug, $produto->familia?->slug, $locale);
        if ($locale === $currentLocale) {
            $canonicalUrl = $href;
        }
        
        $alternates[] = [
            'locale' => $locale,
            'lang' => $lang,
            'href' => $href,
        ];
    }
@endphp
<x-layout
    :title="$produto->nome_do_produto"
    :description="$produto->descricao_comercial"
    :canonical="$canonicalUrl ?? $canonical"
    :alternates="$alternates">
    <div
        class="pt-[calc(var(--header-height)_+_2.5rem)] pb-[120px] bg-brand-brown text-white flex justify-center items-center">
        <div class="max-w-[85.375rem] mx-auto flex flex-col md:flex-row w-full 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] rounded-full bg-[radial-gradient(50%_50%,#4d3e3e,transparent)] blur-[50px]"
                    ></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-extrabold mb-4 mt-4 font-main 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>

                @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 not-italic"> {{ __('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-brand-yellow 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-bold rounded-full',
                                            'bg-white text-brand-brown' => $key === $produto->embalagem,
                                            'text-brand-brown' => $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 not-italic"> {{ __('messages._produtos.fragrancias') }}</h5>
                            <div
                                class="flex gap-2 overflow-x-auto md:overflow-visible whitespace-nowrap sm:flex-wrap no-scrollbar">
                                @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-brand-yellow cursor-pointer transition-colors font-bold bg-brand-yellow rounded-full',
                                                'bg-white text-brand-brown' => $key === $produto->fragrancias,
                                                'text-white' => $key !== $produto->fragrancias,
                                                'opacity-50' => !$is_available
                                        ])>
                                        {{ $key }}
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    @endif
                @endif
            </div>
        </div>
    </div>

    <x-corpo>
        <div>
            <h2 class="text-3xl font-extrabold mb-6 text-center text-brand-brown font-main">
                {{ __('messages._produtos.para_que_serve') }}
            </h2>

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

            <h2 class="text-3xl font-extrabold mb-8 mt-16 text-center text-brand-brown font-main">
                {{ __('messages._produtos.onde_aplicar') }}
            </h2>
            <x-galeria-grande
                class="px-8"
                :cartoes="array_map(fn($el) => ['titulo' => $el['nome'], 'imagem' => $el['imagem'] ?? null], array_filter($produto->superficies, fn($el) => !empty($el['nome'])))"
            />
        </div>

        @if (!empty($produto->modo_de_uso))
            <div class="flex flex-col-reverse gap-12 lg:flex-row bg-white px-8 my-16 sm:mb-32 md:gap-10 lg:gap-20">
                @if (!empty($produto->video_modo_de_uso))
                    <div class="relative">
                        <x-video-player video="{{ $produto->video_modo_de_uso }}" :defaultSize="false"
                                        class="bg-black w-full sm:!w-[395px] !h-[600px] rounded-[24px] bg-brand-brown"></x-video-player>
                        <x-star class="absolute bottom-[calc(100%_-_45px)] right-0 hidden md:block" color="yellow"
                                width="90" height="90"></x-star>
                        <x-star class="absolute top-8 left-[calc(100%_+_20px)] hidden md:block" color="aquamarine" width="40"
                                height="40"></x-star>

                        <x-star class="absolute bottom-[calc(100%_-_35px)] right-0 md:hidden" color="yellow"
                                width="70px"
                                height="70px"></x-star>
                        <x-star class="absolute bottom-[calc(100%_+_16px)] left-[calc(100%_-_16px)] md:hidden"
                                color="aquamarine"
                                width="32" height="32"></x-star>
                    </div>
                @endif
                <div x-data="{ ativo: '{{ head($produto->modo_de_uso)['nome'] }}' }"
                     class="flex flex-col w-full text-brand-brown justify-center text-center max-lg:items-center  {{ !empty($produto->video_modo_de_uso) ? 'lg:text-left' : 'items-center' }}">
                    <p class="text-balance text-3xl md:text-5xl mb-6 max-md:mt-6 font-main font-extrabold max-w-[50rem] italic">
                        {{ __('messages._produtos.modo_de_uso_frase') }}
                    </p>
                    <h2 class="text-3xl font-extrabold text-brand-brown mb-4 font-main">
                        {{ __('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-brand-brown 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>
        @endif

        <div class="bg-white my-20">
            <div class="mx-auto text-center">
                <h2 class="px-8 text-3xl sm:text-5xl font-extrabold text-brand-brown mb-8 font-main text-balance"> {{ __('messages._produtos.conheca_mais_produtos', ['nome' => optional($produto->marca)->nome ?? 'Indy']) }}</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 sm:w-60 sm:h-60 rounded-full border border-brand-brown/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-brand-brown font-semibold text-center font-main">
                                {{ $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-brand-brown/50 rounded-full w-10 h-10 flex items-center justify-center">
                        <img src="{{ asset('images/arrow-left1.svg') }}" alt="Anterior" class="w-4 h-4">
                    </button>
                    <button
                        @click="$refs.mobileProdutos.scrollBy({ left: 320, behavior: 'smooth' })"
                        class="bg-white border-2 border-brand-brown/50 rounded-full w-10 h-10 flex items-center justify-center">
                        <img src="{{ asset('images/arrow-right1.svg') }}" alt="Próximo" class="w-4 h-4">
                    </button>
                </div>
            </div>
        </div>

        @if($produto->marca)
            <div class="bg-white my-20">
                <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>
            </div>
        @endif
        <div class="relative px-8 bg-white mt-20">
            @php
                $email = app(\App\Settings\ConfiguracaoGeral::class)->email_do_site
            @endphp
            @if(!empty($email))
                <div class="text-center">
                    <a href="mailto:{{ $email }}"
                       class="text-brand-brown font-semibold text-center mb-6 font-main inline-flex whitespace-nowrap text-sm sm:text-lg max-sm:text-center">
                        {{ '✦ ' .  $email . ' ✦' }}
                    </a>
                </div>
            @endif
            <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-brand-brown text-brand-brown font-semibold py-3 px-4 rounded-full flex items-center space-x-2 hover:bg-brand-yellow/20 transition">
                        <span>{{ __('messages._produtos.ficha_tecnica') }}</span>
                        <x-icons.download alt="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-brand-brown text-brand-brown font-semibold py-3 px-4 rounded-full flex items-center space-x-2 hover:bg-brand-yellow/20 transition">
                        <span>{{ __('messages._produtos.fispq') }}</span>
                        <x-icons.download alt="Download" class="w-4 h-4"/>
                    </a>
                @endif
            </div>
        </div>
    </x-corpo>
</x-layout>