@php
    if (!function_exists('calculateReadingTime')) {
        function calculateReadingTime($body)
        {
            if (!$body) {
                return 2;
            }
            $text = strip_tags($body);
            $words = str_word_count($text);
            $minutes = ceil($words / 200);
            return max(1, $minutes);
        }
    }
@endphp

<div class="jl_fr16_wrap">
    <div class="jl_fr16_inner">
        @if ($latestPosts && $latestPosts->count() > 0)
            @foreach ($latestPosts as $index => $latestPost)
                @php
                    $latestImage = $latestPost->topImage ?? $latestPost->featuredImage;
                    $latestImageUrl = $latestImage?->file_url ?? '/assets/theme/v6/images/profile_1-120x120.jpeg';
                    $latestUrl = url("/{$latestPost->slug}");
                    $latestReadingTime = calculateReadingTime($latestPost->body);
                    $latestAuthorName =
                        $latestPost->authorUser?->name ??
                        ($latestPost->author_name ?? ($latestPost->author ?? 'Redação'));
                    $latestAuthorAvatar =
                        $latestPost->authorUser?->avatar_url ?? '/assets/theme/v6/images/profile_1-120x120.jpeg';
                @endphp
                @if ($index === 0)
                    {{-- Primeiro post como destaque --}}
                    <div class="jl_mini_ov_sb">
                        <div class="jl_ov_layout jl_ov_mix_opt jl_ov_el jl_ov_mh jl_sm_mt">
                            @if ($latestImage)
                                <div class="jl_img_holder">
                                    <div class="jl_imgw jl_radus_e">
                                        <div class="jl_imgin">
                                            <img width="680" height="453" src="{{ $latestImageUrl }}"
                                                class="attachment-bopea_layouts size-bopea_layouts jl-lazyload wp-post-image"
                                                alt="{{ $latestPost->title }}" decoding="async">
                                        </div>
                                        <a class="jl_imgl" aria-label="{{ $latestPost->title }}"
                                            href="{{ $latestUrl }}"></a>
                                    </div>
                                </div>
                            @endif
                            <div class="jl_fe_text">
                                <div class="jl_fe_inner">
                                    @if ($latestPost->section)
                                        <span class="jl_f_cat jl_lb3">
                                            <a class="jl_cat_lbl jl_cat16" href="/{{ $latestPost->section->slug }}">
                                                <span>{{ $latestPost->section->name }}</span>
                                            </a>
                                        </span>
                                    @endif
                                    <h3 class="h3 jl_fe_title jl_txt_2row">
                                        <a href="{{ $latestUrl }}">{{ $latestPost->title }}</a>
                                    </h3>
                                    {{-- <span class="jl_post_meta">
                            <span class="jl_author_img_w">
                                <span class="jl_aimg_in">
                                    <img src="{{ $latestAuthorAvatar }}" width="50" height="50"
                                        alt="{{ $latestAuthorName }}"
                                        class="avatar avatar-50 wp-user-avatar wp-user-avatar-50 alignnone photo">
                                </span>
                                <a href="#" title="Posts by {{ $latestAuthorName }}" rel="author">{{ $latestAuthorName }}</a>
                            </span>
                            <span class="post-read-time"><i class="jli-timer"></i>{{ $latestReadingTime }} Mins read</span>
                        </span> --}}
                                    <a href="{{ $latestUrl }}" aria-label="{{ $latestPost->title }}"
                                        class="jl_cap_ov"></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    {{-- Posts seguintes como lista --}}
                    <div class="jl_mmlistw jl_lisep">
                        <div class="jl_mmlistc">
                            <div class="jl_mmlist_layout jl_lisep">
                                <div class="jl_li_in">
                                    @if ($latestImage)
                                        <div class="jl_img_holder">
                                            <div class="jl_imgw jl_radus_e">
                                                <div class="jl_imgin">
                                                    <img width="200" height="133" src="{{ $latestImageUrl }}"
                                                        class="attachment-bopea_small size-bopea_small jl-lazyload wp-post-image"
                                                        alt="{{ $latestPost->title }}" decoding="async">
                                                </div>
                                                <a class="jl_imgl" aria-label="{{ $latestPost->title }}"
                                                    href="{{ $latestUrl }}"></a>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="jl_fe_text">
                                        @if ($latestPost->section)
                                            <span class="jl_f_cat jl_lb1">
                                                <a class="jl_cat_txt jl_cat20"
                                                    href="/{{ $latestPost->section->slug }}">
                                                    <span>{{ $latestPost->section->name }}</span>
                                                </a>
                                            </span>
                                        @endif
                                        <h3 class="h3 jl_fe_title jl_txt_2row">
                                            <a href="{{ $latestUrl }}">{{ $latestPost->title }}</a>
                                        </h3>
                                        {{-- <span class="jl_post_meta">
                                            <span class="post-read-time"><i
                                                    class="jli-timer"></i>{{ $latestReadingTime }} Mins read</span>
                                        </span> --}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            @endforeach
        @endif
    </div>
</div>