@extends('layouts.public')
@section('title', $tenant->name)

@section('content')

{{-- === شريط مواضيع ملوّن === --}}
@if ($topicTiles->count())
@php $tileColors = ['#2563eb', '#dc2626', '#16a34a', '#d97706', '#7c3aed', '#0891b2']; @endphp
<div class="grid grid-cols-6 gap-3 mb-8">
    @foreach ($topicTiles as $i => $topic)
    <a href="/category/{{ $topic->slug }}" class="block text-center text-white rounded-lg py-4 px-2 font-semibold text-sm hover:opacity-90" style="background:{{ $tileColors[$i % count($tileColors)] }};">
        {{ $topic->name }}
    </a>
    @endforeach
</div>
@endif

{{-- === الهيرو: المقال الرئيسي بصورة خلفية كبيرة وتراكب نص === --}}
@if ($featured)
<a href="/article/{{ $featured->slug }}" class="block mb-6 group relative rounded-lg overflow-hidden" style="height:420px;">
    @if ($featured->featured_image)
        <img src="{{ Storage::url($featured->featured_image) }}" alt="{{ $featured->title }}" class="w-full h-full object-cover">
    @else
        <div class="w-full h-full" style="background:var(--primary-color);"></div>
    @endif
    <div class="absolute inset-0" style="background:linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1) 60%);"></div>
    <div class="absolute bottom-0 right-0 left-0 p-6">
        @if ($featured->category)
            <span class="inline-block text-xs font-bold px-2 py-1 rounded mb-2" style="background:var(--primary-color); color:#fff;">{{ $featured->category->name }}</span>
        @endif
        <h1 class="text-3xl font-bold text-white group-hover:underline">{{ $featured->title }}</h1>
        <p class="text-gray-200 text-sm mt-2">{{ $featured->published_at?->diffForHumans() }}</p>
    </div>
</a>
@endif

{{-- === صف الأخبار الثانوية (٣ بطاقات جنب بعض) === --}}
@if ($secondaryFeatured->count())
<div class="grid grid-cols-3 gap-4 mb-10">
    @foreach ($secondaryFeatured as $article)
    <a href="/article/{{ $article->slug }}" class="block group">
        @if ($article->featured_image)
            <img src="{{ $article->thumb_url }}" alt="{{ $article->title }}" class="w-full h-32 object-cover rounded mb-2">
        @endif
        <h3 class="font-semibold text-sm group-hover:text-blue-600">{{ $article->title }}</h3>
        <p class="text-xs text-gray-500 mt-1">{{ $article->published_at?->diffForHumans() }}</p>
    </a>
    @endforeach
</div>
@endif

<div class="grid" style="grid-template-columns: 2fr 1fr; gap:32px;">
    {{-- === العمود الرئيسي: أحدث المقالات + أقسام مخصصة === --}}
    <div>
        <h2 class="text-xl font-bold mb-4 border-r-4 pr-3" style="border-color:var(--primary-color);">أحدث المقالات</h2>
        <div class="grid grid-cols-2 gap-6 mb-10">
            @forelse ($latest as $article)
            <a href="/article/{{ $article->slug }}" class="block group">
                @if ($article->featured_image)
                    <img src="{{ $article->thumb_url }}" alt="{{ $article->title }}" class="w-full h-40 object-cover rounded mb-2">
                @endif
                <h3 class="font-semibold group-hover:text-blue-600">{{ $article->title }}</h3>
                <p class="text-xs text-gray-500 mt-1">{{ $article->category->name ?? '' }} — {{ $article->published_at?->diffForHumans() }}</p>
            </a>
            @empty
            <p class="text-gray-500 col-span-2">لا توجد مقالات بعد.</p>
            @endforelse
        </div>

        <div class="mb-10">{{ $latest->links() }}</div>

        {{-- === أقسام مخصصة (أكثر قسمين نشاطاً) === --}}
        @foreach ($categorySections as $section)
        <div class="mb-10">
            <div class="flex justify-between items-center mb-4 border-r-4 pr-3" style="border-color:var(--primary-color);">
                <h2 class="text-xl font-bold">{{ $section->name }}</h2>
                <a href="/category/{{ $section->slug }}" class="text-sm text-blue-600 hover:underline">عرض الكل ←</a>
            </div>
            <div class="grid grid-cols-2 gap-4">
                @foreach ($section->latestArticles as $article)
                <a href="/article/{{ $article->slug }}" class="flex gap-3 group">
                    @if ($article->featured_image)
                        <img src="{{ $article->thumb_url }}" alt="{{ $article->title }}" class="w-20 h-20 object-cover rounded flex-shrink-0">
                    @endif
                    <div>
                        <h4 class="font-semibold text-sm group-hover:text-blue-600">{{ $article->title }}</h4>
                        <p class="text-xs text-gray-500 mt-1">{{ $article->published_at?->diffForHumans() }}</p>
                    </div>
                </a>
                @endforeach
            </div>
        </div>
        @endforeach
    </div>

    {{-- === الشريط الجانبي: الأكثر قراءة + الإعلانات === --}}
    <div>
        @foreach (\App\Models\Ad::forSlot($tenant->id, 'sidebar') as $ad)
        <div class="mb-6 text-center">
            @if ($ad->type === 'adsense_code')
                {!! $ad->adsense_code !!}
            @else
                <a href="{{ $ad->banner_link }}" target="_blank"><img src="{{ Storage::url($ad->banner_image) }}" alt="إعلان" class="mx-auto max-h-32"></a>
            @endif
        </div>
        @endforeach

        @if ($mostRead->count())
        <div class="bg-gray-50 rounded-lg p-4">
            <h3 class="font-bold mb-3 border-r-4 pr-3" style="border-color:var(--primary-color);">🔥 الأكثر قراءة</h3>
            <ol class="space-y-3">
                @foreach ($mostRead as $i => $article)
                <li class="flex gap-3 items-start">
                    <span class="text-2xl font-bold text-gray-300">{{ $i + 1 }}</span>
                    <a href="/article/{{ $article->slug }}" class="group">
                        <h4 class="text-sm font-semibold group-hover:text-blue-600">{{ $article->title }}</h4>
                        <p class="text-xs text-gray-500">{{ number_format($article->views) }} مشاهدة</p>
                    </a>
                </li>
                @endforeach
            </ol>
        </div>
        @endif
    </div>
</div>

{{-- === معاينة الفيديوهات === --}}
@if ($latestVideos->count())
<div class="mt-10">
    <div class="flex justify-between items-center mb-4 border-r-4 pr-3" style="border-color:var(--primary-color);">
        <h2 class="text-xl font-bold">فيديو</h2>
        <a href="/videos" class="text-sm text-blue-600 hover:underline">عرض الكل ←</a>
    </div>
    <div class="grid grid-cols-4 gap-4">
        @foreach ($latestVideos as $video)
        <a href="/video/{{ $video->slug }}" class="block group relative">
            <div class="w-full h-24 bg-gray-900 rounded overflow-hidden flex items-center justify-center">
                @if ($video->thumbnail)
                    <img src="{{ Storage::url($video->thumbnail) }}" alt="{{ $video->title }}" class="w-full h-full object-cover opacity-80">
                @endif
                <span class="absolute text-white text-2xl">▶</span>
            </div>
            <h4 class="text-sm font-semibold mt-1 group-hover:text-blue-600">{{ $video->title }}</h4>
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- === معاينة معارض الصور === --}}
@if ($latestGalleries->count())
<div class="mt-10">
    <div class="flex justify-between items-center mb-4 border-r-4 pr-3" style="border-color:var(--primary-color);">
        <h2 class="text-xl font-bold">معرض الصور</h2>
        <a href="/galleries" class="text-sm text-blue-600 hover:underline">عرض الكل ←</a>
    </div>
    <div class="grid grid-cols-4 gap-4">
        @foreach ($latestGalleries as $gallery)
        <a href="/gallery/{{ $gallery->slug }}" class="block group relative">
            @if ($gallery->cover_image)
                <img src="{{ Storage::url($gallery->cover_image) }}" alt="{{ $gallery->title }}" class="w-full h-24 object-cover rounded">
            @endif
            <h4 class="text-sm font-semibold mt-1 group-hover:text-blue-600">{{ $gallery->title }}</h4>
        </a>
        @endforeach
    </div>
</div>
@endif

{{-- === معاينة البودكاست === --}}
@if ($latestPodcasts->count())
<div class="mt-10">
    <div class="flex justify-between items-center mb-4 border-r-4 pr-3" style="border-color:var(--primary-color);">
        <h2 class="text-xl font-bold">بودكاست</h2>
        <a href="/podcast" class="text-sm text-blue-600 hover:underline">عرض الكل ←</a>
    </div>
    <div class="grid grid-cols-4 gap-4">
        @foreach ($latestPodcasts as $episode)
        <a href="/podcast/{{ $episode->slug }}" class="flex gap-2 items-center group">
            @if ($episode->cover_image)
                <img src="{{ Storage::url($episode->cover_image) }}" alt="{{ $episode->title }}" class="w-12 h-12 object-cover rounded flex-shrink-0">
            @endif
            <h4 class="text-sm font-semibold group-hover:text-blue-600">{{ $episode->title }}</h4>
        </a>
        @endforeach
    </div>
</div>
@endif

<style>
@media (max-width: 768px) {
    div[style*="grid-template-columns: 2fr 1fr"] { grid-template-columns: 1fr !important; }
}
</style>
@endsection