@extends('layouts.front')

@section('title', $author->name)

@section('content')
<section class="max-w-6xl mx-auto">
  
  {{-- 👤 بطاقة الكاتب --}}
  <div class="text-center mb-14">
    
    {{-- صورة الكاتب --}}
    <div class="relative inline-block">
      <img src="{{ $author->avatar ? Storage::url($author->avatar) : asset('images/default-avatar.png') }}" 
           class="w-36 h-36 rounded-full mx-auto shadow-xl object-cover border-4 border-white/70 dark:border-slate-700" 
           alt="{{ $author->name }}">
      <div class="absolute inset-0 rounded-full bg-gradient-to-tr from-primary/20 to-secondary/20 blur-xl -z-10"></div>
    </div>

    {{-- الاسم --}}
    <h1 class="text-3xl font-extrabold mt-5 text-slate-900 dark:text-white">
      {{ $author->name }}
    </h1>

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

    {{-- السيرة --}}
    @if($author->bio)
      <p class="text-gray-600 dark:text-gray-300 mt-4 max-w-2xl mx-auto leading-relaxed">
        {{ $author->bio }}
      </p>
    @endif

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

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

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

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

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

    </div>
  </div>

  {{-- ✍️ مقالات الكاتب --}}
  <div class="mb-8 flex items-center justify-between border-b border-slate-200 dark:border-slate-700 pb-3">
    <h2 class="text-2xl font-bold text-primary flex items-center gap-2">
      <i class="fas fa-pen-nib"></i>
      مقالات {{ $author->name }}
    </h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">
      {{ $posts->total() }} مقال منشور
    </span>
  </div>

  {{-- شبكة المقالات --}}
  @if($posts->count())
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
      @foreach($posts as $post)
        <article class="group bg-white/80 dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl border border-slate-200/50 dark:border-slate-700/50 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
          
          @if($post->cover)
            <img src="{{ Storage::url($post->cover) }}" 
                 alt="{{ $post->title }}"
                 class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500">
          @endif

          <div class="p-4">
            <a href="{{ route('front.post', $post->slug) }}"
               class="font-bold text-lg text-slate-800 dark:text-white hover:text-primary transition">
              {{ $post->title }}
            </a>

            <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm leading-relaxed line-clamp-3">
              {{ Str::limit(strip_tags($post->excerpt ?? $post->body), 110) }}
            </p>

            <div class="mt-3 text-xs text-gray-400 flex items-center gap-2">
              <i class="far fa-clock"></i>
              {{ $post->published_at->diffForHumans() }}
            </div>
          </div>

        </article>
      @endforeach
    </div>

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

  @else
    <div class="text-center py-10 bg-white/60 dark:bg-slate-800/40 backdrop-blur-lg rounded-2xl shadow-sm">
      <i class="fas fa-file-circle-xmark text-4xl text-gray-400 mb-3"></i>
      <p class="text-gray-500 dark:text-gray-400 text-lg font-medium">
        لا توجد مقالات منشورة لهذا الكاتب حالياً.
      </p>
    </div>
  @endif

</section>
@endsection