@props(['novidade'])
@php
    use App\Helpers\TranslationHelper;
    $alternates = [];
    $slugJson = json_decode($novidade->getRawOriginal('slug'), true);

    foreach ($slugJson as $locale => $value) {
        $lang = str_replace('_', '-', $locale);
        $alternates[] = [
            'locale' => $locale,
            'lang' => $lang,
            'href' => TranslationHelper::getNovidadeUrl($value, $locale, true),
        ];
    }
    $canonical = TranslationHelper::getNovidadeUrl($novidade->slug);
@endphp
<x-layout :title="$novidade->meta_title" :description="$novidade->meta_description" :canonical="$canonical" :alternates="$alternates">
    @push('scripts')
        <meta property="og:title" content="{{ $novidade->meta_title ?? $novidade->titulo }}">
        <meta property="og:description" content="{{ $novidade->meta_description }}">
        <meta property="og:image" content="{{ asset('storage/' . $novidade->thumbnail) }}">
        <meta property="og:url" content="{{ $canonical }}">
        <meta property="og:type" content="article">
    @endpush
    <x-vitrine-simples class="py-20 sm:py-10">
        <div class="text-center">
            <div class="m-0 text-white tracking-[0.5em] uppercase font-headline text-xs sm:text-base">
                {{ $novidade->categoria->nome }}
            </div>
            <h1
                class="px-5 sm:px-0 font-bold text-balance text-[2rem] mx-auto leading-tight sm:leading-none my-3 text-white sm:text-[3rem] font-headline max-w-[50rem] text-center">
                {{ $novidade->titulo }}
            </h1>
        </div>
        @if ($novidade->autor)
            <div class="flex gap-4 text-white mx-auto items-center text-center justify-center mt-8">
                <div class="w-[60px] h-[60px] border-white border border-solid rounded-full overflow-hidden">
                    @if ($novidade->autor->profile_picture)
                        <img alt="{{ $novidade->autor->name }}"
                            src="{{ asset('storage/' . $novidade->autor->profile_picture) }}"
                            class="aspect-square h-full w-full">
                    @else
                        <div
                            class="bg-blue-100 aspect-square h-full w-full text-darkslateblue-200 uppercase text-[30px] font-medium flex items-center justify-center">
                            {{ substr($novidade->autor->name, 0, 2) }}
                        </div>
                    @endif
                </div>
                <div>
                    {{ __('messages._pagina_novidades.por', ['name' => $novidade->autor->name]) }}
                    ,
                    {{ \Carbon\Carbon::parse($novidade->data_publicacao)->timezone('America/Sao_Paulo')->translatedFormat(__('messages._pagina_novidades.date_format')) }}
                </div>
            </div>
        @endif
        <x-slot:slot3>
            <x-tuff-heart
                class="absolute w-[300px] h-[300px] left-[-50px] bottom-[-140px] rotate-[-20deg] text-[#1b5ea1] bg-blend-overlay max-sm:scale-75 max-sm:rotate-[20deg] max-sm:bottom-[-80px] max-sm:left-auto max-sm:right-[-80px]" />
            <x-tuff-heart
                class="absolute w-[300px] h-[300px] top-[80px] right-[-40px] rotate-[20deg] text-[#1b5ea1] max-sm:hidden" />
        </x-slot:slot3>
        <x-slot name="slot2">
            <div class="absolute inset-0 top-[5rem] hidden md:block">
                <x-star class="absolute left-[10%] top-[18%]" width="48px" height="48px" color="white" />
                <x-star class="absolute right-[10%] top-[20%]" width="24px" height="24px" color="white" />
                <x-star class="absolute right-[12%] top-[36%]" width="54px" height="54px" color="babyblue" />
            </div>
            <div class="absolute inset-0 top-[5rem] md:hidden">
                <x-star class="absolute left-[10%] top-[-3rem]" width="48px" height="48px" color="babyblue" />
                <x-star class="absolute right-[15%] bottom-[0]" width="32px" height="32px" color="white" />
            </div>
        </x-slot>
    </x-vitrine-simples>
    <x-corpo>
        <main class="start-conteudo px-8 sm:px-16 leading-8 mb-0 text-base text-darkslateblue-300 [&>*]:mt-0">
            {!! str(
                tiptap_converter()->asHTML(\App\Helpers\TranslationHelper::getTranslationDeep('conteudo', $novidade)),
            )->sanitizeHtml() !!}
        </main>
        <aside>
            <div class="text-center box-content px-8 sm:px-16">
                <h3 class="mb-2 font-bold text-deepblue">{{ __('messages._pagina_novidades.compartilhe') }}</h3>
                <x-compartilhe modo="compartilhar" />
                <hr class="border-midnightblue-100 my-16" />
            </div>
            <div class="max-w-lg box-content px-8 sm:px-16 mx-auto">
                <div class="text-deepblue text-xs tracking-36 uppercase text-center">
                    {{ __('messages._pagina_novidades.noticias_relacionadas') }}</div>
                <h3
                    class="mb-10 font-headline font-bold mx-4 sm:mx-auto relative text-center
                text-deepblue text-13xl sm:text-33xl text-balance">
                    {{ __('messages._pagina_novidades.o_que_ha_de_novo') }}
                </h3>
            </div>
            @if (!$relacionadas->isEmpty())
                <x-galeria-grande :cartoes="$relacionadas->map(
                    fn($item) => [
                        'url' => TranslationHelper::getNovidadeUrl($item->slug),
                        'imagem' => $item['thumbnail'],
                        'titulo' => $item['titulo'],
                        'sobrancelha' => $item['categoria']['nome'],
                    ],
                )" />
            @else
                <x-ultimas-novidades />
            @endif
        </aside>
    </x-corpo>
</x-layout>