{{-- Hidden Counter Payload for AJAX Synchronisation with Sidebar & Mobile Tabs --}}
<div id="ajax-counter-payload" style="display: none;">
    Showing <span class="counter-highlight">{{ $newsItems->firstItem() ?? 0 }}–{{ $newsItems->lastItem() ?? 0 }}</span> of <span class="counter-highlight">{{ $newsItems->total() }}</span> articles @if(isset($tabs[$activeTab])) in <span class="counter-tab-name">{{ $tabs[$activeTab]['label'] }}</span>@endif
</div>

@if($newsItems->isEmpty())
    {{-- Empty State --}}
    <div class="news-empty-state">
        <div class="empty-icon-wrap">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/>
            </svg>
        </div>
        <h3>No articles found</h3>
        <p>There are currently no updates in this category. Please explore another tab above.</p>
    </div>
@else

    @php
        // Each page features its top item as the Lead Hero Story,
        // leaving the remaining 9 items in 3 complete rows of 3 cards (no orphan cards!).
        $leadItem = $newsItems->first();
        $gridItems = $newsItems->slice(1);
    @endphp

    {{-- Lead Hero Story for the current page --}}
    @if($leadItem)
        <div class="news-featured-story">
            <div class="row g-0 align-items-stretch">
                <div class="col-xl-7 col-12">
                    <div class="featured-image-wrapper">
                        <a href="{{ $leadItem->link }}" target="_blank" rel="noopener">
                            <img src="{{ $leadItem->category_image }}" alt="{{ $leadItem->title }}"
                                 loading="lazy" decoding="async"
                                 onerror="this.onerror=null;this.src='{{ asset('assets/images/post-1.jpg') }}';">
                        </a>
                        <div class="featured-overlay"></div>
                        <div class="featured-badges">
                            <span class="badge-type category-{{ strtolower($leadItem->type ?? 'news') }}">{{ $leadItem->type ?? 'News' }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-xl-5 col-12">
                    <div class="featured-content-wrapper">
                        <div class="featured-header">
                            <div class="news-date-text">
                                <svg class="news-icon-cal" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                <span>{{ $leadItem->published_at?->format('d M Y') }}</span>
                            </div>

                            @if($leadItem->publication_logo_url)
                                <div class="featured-pub-logo-wrap">
                                    <img src="{{ $leadItem->publication_logo_url }}" alt="{{ $leadItem->title }}" class="pub-logo-img">
                                </div>
                            @endif
                        </div>

                        <h2 class="featured-title">
                            <a href="{{ $leadItem->link }}" target="_blank" rel="noopener">
                                {{ $leadItem->title }}
                            </a>
                        </h2>

                        <p class="featured-desc">
                            {{ $leadItem->description }}
                        </p>

                        <div class="featured-footer">
                            <span class="featured-verified-note">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                                {{ ($leadItem->type ?? '') === 'Newsletter' ? 'Hornbill Dispatch' : (($leadItem->type ?? '') === 'Blogs' ? 'Blog Post' : (($leadItem->type ?? '') === 'Insights' ? 'Insight' : 'Media Coverage')) }}
                            </span>
                            <a href="{{ $leadItem->link }}" target="_blank" rel="noopener" class="btn-read-featured">
                                <span>{{ ($leadItem->type ?? '') === 'Newsletter' ? 'Read Newsletter' : 'Read Full Story' }}</span>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- 3-Column Card Grid with Generous Bottom Margins & Publication on Right of Date --}}
    @if($gridItems->isNotEmpty())
        <div class="row news-grid-row">
            @foreach($gridItems as $item)
                <div class="col-xl-4 col-md-6 mb-4 news-card-col">
                    <article class="news-card">
                        <div class="news-card-image-wrap">
                            <a href="{{ $item->link }}" target="_blank" rel="noopener" class="news-image-link">
                                <img src="{{ $item->category_image }}" alt="{{ $item->title }}"
                                     loading="lazy" decoding="async"
                                     onerror="this.onerror=null;this.src='{{ asset('assets/images/post-1.jpg') }}';">
                            </a>

                            {{-- Category tag --}}
                            <div class="news-card-type-badge category-{{ strtolower($item->type ?? 'news') }}">
                                {{ $item->type ?? 'News' }}
                            </div>
                        </div>

                        <div class="news-card-body">
                            {{-- Meta: Date on left, Publication logo on right --}}
                            <div class="news-card-meta">
                                <span class="news-date-text">
                                    <svg class="news-icon-cal" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>
                                    {{ $item->published_at?->format('d M Y') }}
                                </span>

                                @if($item->publication_logo_url)
                                    <span class="news-meta-pub-logo" title="{{ $item->title }}">
                                        <img src="{{ $item->publication_logo_url }}" alt="{{ $item->title }}" class="pub-meta-img">
                                    </span>
                                @endif
                            </div>

                            <h3 class="news-card-title">
                                <a href="{{ $item->link }}" target="_blank" rel="noopener">
                                    {{ $item->title }}
                                </a>
                            </h3>

                            <p class="news-card-desc">
                                {{ \Illuminate\Support\Str::limit($item->description, 140) }}
                            </p>

                            <div class="news-card-footer">
                                <span class="news-footer-tag">{{ ($item->type ?? '') === 'Newsletter' ? 'Newsletter' : (($item->type ?? '') === 'Blogs' ? 'Blog Post' : (($item->type ?? '') === 'Insights' ? 'Insight' : 'Media Coverage')) }}</span>
                                <a href="{{ $item->link }}" target="_blank" rel="noopener" class="news-read-btn">
                                    <span>{{ ($item->type ?? '') === 'Newsletter' ? 'Read Issue' : 'Read Story' }}</span>
                                    <svg class="arrow-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                                </a>
                            </div>
                        </div>
                    </article>
                </div>
            @endforeach
        </div>
    @endif

@endif

{{-- Pagination Container --}}
@if($newsItems->hasPages())
    <div class="news-pagination-wrapper">
        <div class="pagination-info">
            Page {{ $newsItems->currentPage() }} of {{ $newsItems->lastPage() }}
        </div>
        <div class="pagination-links-box">
            {{ $newsItems->links('vendor.pagination.news-pagination') }}
        </div>
    </div>
@endif