{{-- News and forum columns --}}
@php
    use Carbon\Carbon;
    use Illuminate\Support\Str;
@endphp

<section class="px-6 pb-14 pt-2 md:px-10">
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

        {{-- ── LEFT: Forum News ── --}}
        <div class="space-y-1">
            <div class="flex items-center gap-2 mb-5">
                <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-sky-500/15 text-sky-400">
                    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M7 8h10M7 12h6m-6 4h4M5 20H4a2 2 0 01-2-2V6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2h-1l-4 4-4-4z"/></svg>
                </span>
                <h2 class="text-base font-semibold text-white/90 tracking-wide uppercase">Forum News</h2>
            </div>

            @forelse ($forumNews as $item)
                <article class="group rounded-xl bg-white/[0.03] border border-white/[0.06] hover:border-sky-500/30 hover:bg-white/[0.05] transition-all duration-200 p-4">
                    <a href="{{ route('forum.thread.show', ['thread' => $item->topic_id, 'slug' => Str::slug($item->topic ?? '')]) }}"
                       class="block text-sm font-semibold text-white/90 group-hover:text-sky-300 transition-colors leading-snug mb-1 line-clamp-2">
                        {{ $item->topic }}
                    </a>
                    <div class="flex items-center gap-3 text-xs text-white/40 mb-2">
                        <span class="inline-flex items-center gap-1">
                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                            {{ $item->uname }}
                        </span>
                        <span class="inline-flex items-center gap-1">
                            <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            {{ Carbon::parse($item->post_date)->format('j M Y') }}
                        </span>
                    </div>
                    @if (!empty($item->preview))
                        <p class="text-xs text-white/50 leading-relaxed line-clamp-3">{{ Str::limit(strip_tags($item->preview), 200) }}</p>
                    @endif
                </article>
            @empty
                <div class="rounded-xl bg-white/[0.03] border border-white/[0.06] p-6 text-sm text-white/40 text-center">
                    No forum news available.
                </div>
            @endforelse
        </div>

        {{-- ── RIGHT: Site News + Info + Forum Activity ── --}}
        <div class="space-y-8">

            {{-- Site News --}}
            <div>
                <div class="flex items-center gap-2 mb-5">
                    <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-violet-500/15 text-violet-400">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10l6 6v8a2 2 0 01-2 2z"/><path stroke-linecap="round" stroke-linejoin="round" d="M13 4v6h6"/></svg>
                    </span>
                    <h2 class="text-base font-semibold text-white/90 tracking-wide uppercase">Site News</h2>
                </div>

                @forelse ($ourNews as $news)
                    @php $nid = floor($news->news_id / 100); @endphp
                    <article class="group rounded-xl bg-white/[0.03] border border-white/[0.06] hover:border-violet-500/30 hover:bg-white/[0.05] transition-all duration-200 p-4 mb-3 last:mb-0">
                        <a href="/news/{{ $news->news_id }}/{{ Str::slug($news->headline ?? '') }}"
                           class="block text-sm font-semibold text-white/90 group-hover:text-violet-300 transition-colors leading-snug mb-1 line-clamp-2">
                            {{ $news->headline }}
                        </a>
                        <div class="flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-white/40 mb-3">
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                                {{ $news->uname }}
                            </span>
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                {{ Carbon::parse($news->create_date)->format('j M Y') }}
                            </span>
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                                {{ number_format($news->views) }}
                            </span>
                            <span class="inline-flex items-center gap-1">
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                {{ $news->num_comments }}
                            </span>
                        </div>
                        @if (!empty($news->picture))
                            <div class="flex gap-3">
                                <img src="/archive/news/{{ $nid }}/{{ $news->picture }}"
                                     class="w-20 h-14 object-cover rounded-lg flex-shrink-0 ring-1 ring-white/10"
                                     alt="{{ e($news->headline) }}" loading="lazy">
                                <p class="text-xs text-white/50 leading-relaxed line-clamp-3">{!! Str::limit(strip_tags($news->preview ?? ''), 180) !!}</p>
                            </div>
                        @else
                            <p class="text-xs text-white/50 leading-relaxed line-clamp-3">{!! Str::limit(strip_tags($news->preview ?? ''), 240) !!}</p>
                        @endif
                    </article>
                @empty
                    <div class="rounded-xl bg-white/[0.03] border border-white/[0.06] p-6 text-sm text-white/40 text-center">
                        No news available.
                    </div>
                @endforelse
            </div>

            {{-- About Skinbase --}}
            <div class="rounded-xl bg-gradient-to-br from-sky-500/10 to-violet-500/10 border border-white/[0.07] p-5">
                <div class="flex items-center gap-2 mb-3">
                    <span class="inline-flex items-center justify-center w-6 h-6 rounded-md bg-sky-500/20 text-sky-400">
                        <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </span>
                    <h3 class="text-sm font-semibold text-white/80">About Skinbase</h3>
                </div>
                <p class="text-xs text-white/55 leading-relaxed">
                    Skinbase is dedicated to <span class="text-white/80 font-medium">Photography</span>, <span class="text-white/80 font-medium">Wallpapers</span> and <span class="text-white/80 font-medium">Skins</span> for popular applications on Windows, macOS, Linux, iOS and Android.
                    Browse categories, discover curated artwork, and download everything for free.
                </p>
            </div>

            {{-- Latest Forum Activity --}}
            <div>
                <div class="flex items-center gap-2 mb-4">
                    <span class="inline-flex items-center justify-center w-7 h-7 rounded-md bg-emerald-500/15 text-emerald-400">
                        <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8"><path stroke-linecap="round" stroke-linejoin="round" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"/></svg>
                    </span>
                    <h2 class="text-base font-semibold text-white/90 tracking-wide uppercase">Forum Activity</h2>
                </div>

                <div class="rounded-xl border border-white/[0.06] overflow-hidden divide-y divide-white/[0.05]">
                    @forelse ($latestForumActivity as $topic)
                        <a href="{{ route('forum.thread.show', ['thread' => $topic->topic_id, 'slug' => Str::slug($topic->topic ?? '')]) }}"
                           class="flex items-center justify-between gap-3 px-4 py-3 text-sm text-white/70 hover:bg-white/[0.04] hover:text-white transition-colors group">
                            <span class="truncate group-hover:text-emerald-300 transition-colors">{{ $topic->topic }}</span>
                            <span class="flex-shrink-0 inline-flex items-center gap-1 text-xs text-white/35 group-hover:text-white/60 transition-colors">
                                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
                                {{ $topic->numPosts }}
                            </span>
                        </a>
                    @empty
                        <div class="px-4 py-5 text-sm text-white/40 text-center">No recent forum activity.</div>
                    @endforelse
                </div>
            </div>

        </div>{{-- end right column --}}
    </div>
</section>