@extends('layouts.front')

@section('title', 'الكتّاب')

@section('content')
<section class="max-w-7xl mx-auto">

  {{-- ⭐ العنوان --}}
  <div class="text-center mb-12">
    <h1 class="text-4xl font-extrabold text-primary">قائمة الكتّاب</h1>
    <p class="text-gray-500 dark:text-gray-400 mt-2">
      جميع الكتّاب النشطين مع عدد المقالات والمشاهدات
    </p>
  </div>

  {{-- شبكة الكتّاب --}}
  <div class="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
    
    @foreach($authors as $author)
    <div class="group bg-white/70 dark:bg-slate-800/40 border border-slate-200/40 dark:border-slate-700/40 
                backdrop-blur-xl rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 
                transition-all duration-300 p-6 text-center">

      {{-- الصورة --}}
      <div class="relative inline-block">
        <img src="{{ $author->avatar ? Storage::url($author->avatar) : asset('images/default-avatar.png') }}"
             class="w-28 h-28 rounded-full mx-auto object-cover shadow-lg ring-4 ring-white/70 dark:ring-slate-700"
             alt="{{ $author->name }}">
      </div>

      {{-- الاسم --}}
      <h3 class="mt-4 text-xl font-extrabold text-slate-800 dark:text-white">
        <a href="{{ route('front.author', $author->id) }}" 
           class="hover:text-primary transition">
          {{ $author->name }}
        </a>
      </h3>

      {{-- الوظيفة --}}
      @if($author->job_title)
      <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">
        {{ $author->job_title }}
      </p>
      @endif

      {{-- عدد المقالات + المشاهدات --}}
      <div class="mt-4 flex justify-center gap-4 text-sm text-gray-500 dark:text-gray-400">
        <div class="flex items-center gap-1">
          <i class="fas fa-pen-nib text-primary"></i>
          {{ $author->posts_count }}
        </div>
        <div class="flex items-center gap-1">
          <i class="fas fa-eye text-secondary"></i>
          {{ $author->total_views }}
        </div>
      </div>

      {{-- روابط التواصل --}}
      <div class="flex justify-center gap-4 mt-5 text-xl text-primary">

        @if($author->facebook)
        <a href="{{ $author->facebook }}" target="_blank" class="hover:text-secondary transition">
          <i class="fab fa-facebook"></i>
        </a>
        @endif

        @if($author->twitter)
        <a href="{{ $author->twitter }}" target="_blank" class="hover:text-secondary transition">
          <i class="fab fa-twitter"></i>
        </a>
        @endif

        @if($author->instagram)
        <a href="{{ $author->instagram }}" target="_blank" class="hover:text-secondary transition">
          <i class="fab fa-instagram"></i>
        </a>
        @endif

        @if($author->website)
        <a href="{{ $author->website }}" target="_blank" class="hover:text-secondary transition">
          <i class="fas fa-globe"></i>
        </a>
        @endif

      </div>

      {{-- زر عرض الملف --}}
      <div class="mt-6">
        <a href="{{ route('front.author', $author->id) }}"
           class="px-4 py-2 text-sm font-bold rounded-xl 
                  bg-primary text-white hover:bg-secondary
                  transition block w-full">
          عرض الملف
        </a>
      </div>

    </div>
    @endforeach
  </div>

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

</section>
@endsection