@php
    // Função helper para extrair texto do content_json (TipTap/ProseMirror)
    if (!function_exists('extractTextFromJson')) {
        function extractTextFromJson($node)
        {
            $text = '';

            if (!is_array($node)) {
                return $text;
            }

            // Se é um nó de texto, retornar o texto
            if (isset($node['type']) && $node['type'] === 'text' && isset($node['text'])) {
                return $node['text'];
            }

            // Processar conteúdo recursivamente
            if (isset($node['content']) && is_array($node['content'])) {
                foreach ($node['content'] as $child) {
                    $text .= extractTextFromJson($child);
                }
            }

            return $text;
        }
    }
@endphp

@if ($relatedArticles && $relatedArticles->count() > 0)
    <div class="jl_relsec_wrap">
        <div class="jl_relsec">
            <div class="jl_relsec_in jl_sep_dot">
                <span class="rel_head h2">Artigos relacionados</span>
                <div class="jl_rel_posts">
                    @foreach ($relatedArticles as $relatedArticle)
                        @php
                            $relatedImage = $relatedArticle->topImage ?? $relatedArticle->featuredImage;
                            $hasImage = $relatedImage && $relatedImage->file_url;
                            $relatedImageUrl = $hasImage ? $relatedImage->file_url : null;
                            $relatedUrl = url("/{$relatedArticle->slug}");
                            $relatedReadingTime = calculateReadingTime($relatedArticle->body);
                            $relatedAuthorName =
                                $relatedArticle->authorUser?->name ??
                                ($relatedArticle->author_name ?? ($relatedArticle->author ?? 'Redação'));
                            $relatedAuthorAvatar =
                                $relatedArticle->authorUser?->avatar_url ??
                                '/assets/theme/v6/images/profile_1-120x120.jpeg';
                            $shareUrl = urlencode($relatedUrl);
                            $shareTitle = urlencode($relatedArticle->title);
                            $shareImage = urlencode($relatedImageUrl ?? '');

                            // Se não tem imagem, sempre mostrar 100 caracteres do corpo (body ou content_json)
                            if (!$hasImage) {
                                $bodyText = '';

                                // Tentar usar body primeiro
                                if ($relatedArticle->body) {
                                    $bodyText = strip_tags($relatedArticle->body);
                                }

                                // Se body está vazio, tentar extrair de content_json
                                if (empty($bodyText) && $relatedArticle->content_json) {
                                    $contentJson = is_string($relatedArticle->content_json)
                                        ? json_decode($relatedArticle->content_json, true)
                                        : $relatedArticle->content_json;

                                    if (is_array($contentJson)) {
                                        $bodyText = extractTextFromJson($contentJson);
                                    }
                                }

                                $descriptionText = $bodyText ? \Illuminate\Support\Str::limit($bodyText, 200) : '';
                            } else {
                                $descriptionText = $relatedArticle->headline ?? ($relatedArticle->excerpt ?? '');
                                $descriptionText = $descriptionText
                                    ? \Illuminate\Support\Str::limit($descriptionText, 200)
                                    : '';
                            }
                        @endphp
                        <div class="jl_cgrid_layout">
                            @if ($hasImage)
                                <div class="jl_img_holder">
                                    <div class="jl_imgw jl_radus_e">
                                        <div class="jl_imgin">
                                            <img width="680" height="455" src="{{ $relatedImageUrl }}"
                                                class="attachment-bopea_layouts size-bopea_layouts jl-lazyload wp-post-image"
                                                alt="{{ $relatedArticle->title }}" decoding="async">
                                        </div>
                                        <a class="jl_imgl" href="{{ $relatedUrl }}"
                                            aria-label="{{ $relatedArticle->title }}"></a>
                                    </div>
                                </div>
                            @endif
                            <div class="jl_fe_text">
                                @if ($relatedArticle->section)
                                    <span class="jl_f_cat jl_lb1">
                                        <a class="jl_cat_txt jl_cat21" href="/{{ $relatedArticle->section->slug }}">
                                            <span>{{ $relatedArticle->section->name }}</span>
                                        </a>
                                    </span>
                                @endif
                                <h3 class="h3 jl_fe_title">
                                    <a href="{{ $relatedUrl }}">{{ $relatedArticle->title }}</a>
                                </h3>
                                @if ($descriptionText)
                                    <p class="jl_fe_des">{{ $descriptionText }}</p>
                                @endif
                                <span class="jl_post_meta">

                                    <span class="jl_fot_share_i jl_share_l_bg jls_tooltip">
                                        <i class="jli-share"></i>
                                        <span class="jls_tooltip_w jls_tooltip-top">
                                            <span class="jls_tooltiptext">
                                                <span class="jls_tooltip_in">
                                                    <span class="jl_sli_in">
                                                        <span class="jl_sli_fb jl_shli"><a class="jl_sshl"
                                                                href="https://www.facebook.com/sharer.php?u={{ $shareUrl }}"
                                                                rel="nofollow" alt="facebook"><i
                                                                    class="jli-facebook"></i></a></span>
                                                        <span class="jl_sli_tw jl_shli"><a class="jl_sshl"
                                                                href="https://twitter.com/intent/tweet?text={{ $shareTitle }}&url={{ $shareUrl }}"
                                                                rel="nofollow" alt="twitter"><i
                                                                    class="jli-x"></i></a></span>
                                                        <span class="jl_sli_pi jl_shli"><a class="jl_sshl"
                                                                href="https://pinterest.com/pin/create/bookmarklet/?url={{ $shareUrl }}&media={{ $shareImage }}&description={{ $shareTitle }}"
                                                                rel="nofollow" alt="pinterest"><i
                                                                    class="jli-pinterest"></i></a></span>
                                                        <span class="jl_sli_din jl_shli"><a class="jl_sshl"
                                                                href="https://www.linkedin.com/shareArticle?url={{ $shareUrl }}"
                                                                rel="nofollow" alt="linkedin"><i
                                                                    class="jli-linkedin"></i></a></span>
                                                        <span class="jl_sli_wapp jl_shli"><a class="jl_sshl"
                                                                href="https://api.whatsapp.com/send?text={{ $shareTitle }} {{ $shareUrl }}"
                                                                data-action="share/whatsapp/share" rel="nofollow"
                                                                alt="whatsapp"><i class="jli-whatsapp"></i></a></span>
                                                    </span>
                                                </span>
                                            </span>
                                        </span>
                                    </span>
                                </span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endif