@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 ?? $produto->nome_do_produto" :description="$produto->descricao_comercial" :canonical="$canonicalUrl ?? $canonical" :alternates="$alternates">
    <div
        class="pt-[calc(var(--header-height)_+_2.5rem)] pb-[12rem] bg-deepblue 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="uppercase tracking-widest opacity-80 mb-2 text-[10px] mx-[34px] text-center text-white leading-5 sm:hidden">
                @foreach (collect($produto->palavras_chave)->take(3) as $palavra)
                    {{ trim($palavra) }}
                    @if (!$loop->last)
                        <span class="mx-1 ">&#x2726;</span>
                    @endif
                @endforeach
            </div>
            <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%,#a1dcf5,transparent)] opacity-40 blur-[50px]">
                    </div>
                </div>

                @if ($produto->imagem_md)
                    <img src="{{ asset('storage/' . $produto->imagem_md) }}"
                        width="450" height="429"
                        alt="{{ __('messages._produtos.imagem_do_produto', ['nome' => $produto->nome ?? $produto->nome_do_produto]) }}"
                        class="h-[227px] md:h-[429px] w-auto object-contain 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 hidden sm:block">
                    @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-headline px-4 sm:px-0">
                    {{ $produto->nome ?? $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"> {{ __('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-darkslateblue-300 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 @if($is_available) href="{{ $href }}" @endif @class([
                                        'py-3 px-4 m-[4px] transition-colors font-semibold rounded-full',
                                        'cursor-pointer' => $is_available,
                                        'cursor-default pointer-events-none' => !$is_available,
                                        'bg-white text-deepblue' => $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 whitespace-nowrap 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 @if($is_available) href="{{ $href }}" @endif @class([
                                        'py-3 px-4 border-solid border-[4px] border-blue-950 transition-colors font-semibold bg-blue-950 rounded-full',
                                        'cursor-pointer' => $is_available,
                                        'cursor-default pointer-events-none' => !$is_available,
                                        'bg-white text-deepblue' => $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-bold mb-6 sm:text-center px-8 text-deepblue font-headline">
                {{ __('messages._produtos.para_que_serve') }}
            </h2>

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

            <h2 class="text-3xl font-bold mb-8 mt-16 sm:text-center px-8 text-deepblue font-headline">
                {{ __('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="w-[395px] h-[600px] rounded-[24px] bg-deepblue"></x-video-player>
                        <x-icons.heart
                            class="absolute bottom-[calc(100%_-_90px)] -right-[45px] hidden md:block text-pink"
                            width="90" height="90" />
                        <x-star class="absolute top-[80px] left-[calc(100%_+_20px)] hidden md:block" color="babyblue"
                                width="40" height="40"></x-star>

                        <x-star class="absolute bottom-[calc(100%_-_35px)] right-0 md:hidden" color="skyblue"
                                width="70px" height="70px"></x-star>
                        <x-star class="absolute bottom-[calc(100%_+_16px)] left-[calc(100%_-_16px)] md:hidden"
                                color="blue" 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-deepblue 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-headline font-bold max-w-[50rem]">
                        {{ __('messages._produtos.modo_de_uso_frase') }}
                    </p>
                    <h2 class="text-3xl font-bold text-deepblue mb-4 font-headline">
                        {{ __('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-darkslateblue-300 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-bold text-deepblue mb-8 font-headline 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 sm:w-60 sm:h-60 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'] ?? $relacionado['nome_do_produto']]) }}"
                                        class="object-contain h-3/4">
                                @endif
                            </div>
                            <p class="mt-4 text-deepblue font-bold text-center font-headline">
                                {{ $relacionado['nome'] ?? $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 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 rounded-2xl">
                    </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 rounded-2xl">
                    </a>
                @endif
            </div>
        </div>
        <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-deepblue font-semibold text-center mb-6 font-headline 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-blue-900 text-deepblue 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-deepblue 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>
</x-layout>