@extends('layouts.front')
@section('title', 'الرئيسية')

@section('content')

<div class="grid lg:grid-cols-3 gap-10">

  {{-- 📰 العمود الرئيسي --}}
  <div class="lg:col-span-2 space-y-12">

    {{-- 🌟 الأخبار المميزة --}}
    @if($trending->count())
      <section>
        <div class="flex items-center justify-between mb-5">
          <h2 class="text-2xl font-extrabold border-r-4 border-primary pr-3">المميزة</h2>
          <a href="#" class="text-sm text-primary hover:underline">عرض الكل</a>
        </div>

        <div class="grid sm:grid-cols-2 gap-6">
          @foreach($trending as $post)
            <article class="group bg-white/80 dark:bg-slate-800/40 backdrop-blur-md rounded-2xl overflow-hidden border border-slate-200/40 dark:border-slate-700/30 shadow-md hover:shadow-2xl transition-all duration-500">
              @if($post->cover)
                <div class="relative overflow-hidden">
                  <img src="{{ Storage::url($post->cover) }}" alt="{{ $post->title }}"
                       class="w-full h-60 object-cover group-hover:scale-110 transition-transform duration-700 ease-out">
                  <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/25 to-transparent"></div>
                  <span class="absolute bottom-3 right-4 text-xs text-white bg-black/50 px-2 py-1 rounded">
                    {{ optional($post->category)->name }}
                  </span>
                </div>
              @endif

              <div class="p-5">
                <h3 class="text-lg font-bold leading-snug group-hover:text-primary transition line-clamp-2">
                  <a href="{{ route('front.post', $post->slug) }}">{{ $post->title }}</a>
                </h3>
                <p class="text-gray-600 dark:text-gray-400 mt-3 text-sm line-clamp-3">
                  {{ Str::limit(strip_tags($post->excerpt ?? $post->body), 120) }}
                </p>
                <div class="text-xs text-gray-400 mt-3 flex items-center gap-1">
                  <i class="far fa-clock"></i> {{ $post->published_at->diffForHumans() }}
                </div>
              </div>
            </article>
          @endforeach
        </div>
      </section>
    @endif

    {{-- 🎥 قسم الفيديوهات --}}
    @php
      $videos = \App\Models\Video::latest()->take(6)->get();
    @endphp
    @if($videos->count())
      <section>
        <div class="flex items-center justify-between mb-5">
          <h2 class="text-2xl font-extrabold border-r-4 border-primary pr-3">الفيديوهات</h2>
          <a href="{{ route('front.videos') }}" class="text-sm text-primary hover:underline">عرض الكل</a>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          @foreach($videos as $video)
            <div class="group bg-white/80 dark:bg-slate-800/40 backdrop-blur-md rounded-2xl overflow-hidden border border-slate-200/40 dark:border-slate-700/30 shadow-sm hover:shadow-xl transition">
              <div class="relative overflow-hidden">
                @if(Str::contains($video->url, 'youtube'))
                  <iframe class="w-full h-40"
                          src="{{ Str::replace('watch?v=', 'embed/', $video->url) }}"
                          frameborder="0"
                          allowfullscreen></iframe>
                @elseif($video->thumbnail)
                  <img src="{{ Storage::url($video->thumbnail) }}" class="w-full h-40 object-cover">
                @endif
              </div>
              <div class="p-4">
                <h3 class="text-sm font-semibold line-clamp-2 hover:text-primary transition">
                  {{ $video->title }}
                </h3>
              </div>
            </div>
          @endforeach
        </div>
      </section>
    @endif

    {{-- 🗞️ قسم الجرائد --}}
    @php
      $newspapers = \App\Models\Newspaper::latest()->take(6)->get();
    @endphp
    @if($newspapers->count())
      <section>
        <div class="flex items-center justify-between mb-5">
          <h2 class="text-2xl font-extrabold border-r-4 border-primary pr-3">الجريدة</h2>
          <a href="{{ route('front.newspapers') }}" class="text-sm text-primary hover:underline">عرض الكل</a>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
          @foreach($newspapers as $paper)
            <div class="bg-white/80 dark:bg-slate-800/40 backdrop-blur-md rounded-2xl overflow-hidden border border-slate-200/40 dark:border-slate-700/30 shadow-sm hover:shadow-xl transition">
              <a href="{{ Storage::url($paper->pdf_path) }}" target="_blank">
                <img src="{{ Storage::url($paper->cover_image) }}" alt="{{ $paper->title }}"
                     class="w-full h-64 object-cover hover:scale-105 transition-transform duration-700">
              </a>
              <div class="p-3 text-center">
                <h3 class="text-base font-semibold hover:text-primary transition">{{ $paper->title }}</h3>
                <p class="text-xs text-gray-500 mt-1">{{ $paper->created_at->format('Y/m/d') }}</p>
              </div>
            </div>
          @endforeach
        </div>
      </section>
    @endif

    {{-- 🏷️ الأقسام المعتادة --}}
    @foreach($cats as $cat)
      @php
        $posts = $cat->posts()->published()->latest('published_at')->take(4)->get();
      @endphp
      @if($posts->count())
        <section>
          <div class="flex items-center justify-between mb-5">
            <h2 class="text-2xl font-extrabold border-r-4 border-primary pr-3">{{ $cat->name }}</h2>
            <a href="{{ route('front.category', $cat->slug) }}" class="text-sm text-primary hover:underline">عرض الكل</a>
          </div>
          <div class="grid md:grid-cols-2 gap-6">
            @foreach($posts as $post)
              <article class="group bg-white/80 dark:bg-slate-800/50 rounded-2xl overflow-hidden backdrop-blur-md border border-slate-200/40 dark:border-slate-700/30 shadow-sm hover:shadow-2xl transition-all duration-500">
                @if($post->cover)
                  <div class="overflow-hidden">
                    <img src="{{ Storage::url($post->cover) }}" alt="{{ $post->title }}"
                         class="w-full h-52 object-cover group-hover:scale-110 transition-transform duration-700">
                  </div>
                @endif
                <div class="p-5">
                  <h3 class="text-lg font-bold line-clamp-2 hover:text-primary transition">
                    <a href="{{ route('front.post', $post->slug) }}">{{ $post->title }}</a>
                  </h3>
                  <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 line-clamp-3">
                    {{ Str::limit(strip_tags($post->excerpt ?? $post->body), 120) }}
                  </p>
                  <div class="text-xs text-gray-400 mt-3 flex items-center gap-1">
                    <i class="far fa-clock"></i> {{ $post->published_at->diffForHumans() }}
                  </div>
                </div>
              </article>
            @endforeach
          </div>
        </section>
      @endif
    @endforeach
  </div>

  {{-- 📎 العمود الجانبي --}}
  @include('front.partials.sidebar')

</div>
@endsection