@extends('layouts.front')

@section('title', '🎬 الفيديوهات')

@section('content')
<div class="container mx-auto py-10">

  <h1 class="text-3xl font-extrabold mb-8 border-r-4 border-primary pr-3">🎥 أحدث الفيديوهات</h1>

  @if($videos->count())
    <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
      @foreach($videos as $video)
        <div class="bg-white/80 dark:bg-slate-800/40 rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition">
          @if($video->thumbnail)
            <div class="relative">
              <img src="{{ Storage::url($video->thumbnail) }}" alt="{{ $video->title }}" class="w-full h-52 object-cover">
              <a href="{{ $video->url }}" target="_blank"
                 class="absolute inset-0 flex items-center justify-center bg-black/40 hover:bg-black/60 transition">
                <i class="fa-solid fa-play text-white text-3xl"></i>
              </a>
            </div>
          @else
            <div class="aspect-video bg-slate-200 flex items-center justify-center">
              <a href="{{ $video->url }}" target="_blank">
                <i class="fa-solid fa-play text-primary text-4xl"></i>
              </a>
            </div>
          @endif
          <div class="p-4 text-center">
            <h3 class="font-bold text-lg line-clamp-2">{{ $video->title }}</h3>
            <a href="{{ $video->url }}" target="_blank" class="text-primary text-sm hover:underline">
              مشاهدة على YouTube →
            </a>
          </div>
        </div>
      @endforeach
    </div>

    <div class="mt-10">
      {{ $videos->links() }}
    </div>

  @else
    <div class="text-center text-gray-500 py-20">
      لا توجد فيديوهات حاليًا.
    </div>
  @endif

</div>
@endsection