@extends('website.layout')

@section('content')
<div class="pt-28 pb-16 min-h-screen">
    <article class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Breadcrumb --}}
        <nav class="mb-6 text-sm text-gray-400">
            <a href="{{ route('home') }}" class="hover:text-[var(--site-accent)]">الرئيسية</a>
            <span class="mx-2">/</span>
            <a href="{{ route('website.news.index', ['slug' => $academy->slug ?? 'default']) }}" class="hover:text-[var(--site-accent)]">الأخبار</a>
            <span class="mx-2">/</span>
            <span class="text-gray-600">{{ Str::limit($article->title, 40) }}</span>
        </nav>

        {{-- Header --}}
        <header class="mb-8">
            @if($article->category)
                <span class="inline-block px-3 py-1 bg-[var(--site-accent)]/10 text-[var(--site-accent)] text-xs font-medium rounded-full mb-4">
                    {{ $article->category }}
                </span>
            @endif
            <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 leading-tight" style="font-family: var(--site-heading-font);">
                {{ $article->title }}
            </h1>
            <div class="flex items-center gap-4 mt-4 text-sm text-gray-400">
                @if($article->published_at)
                    <time class="flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                        {{ $article->published_at->translatedFormat('j F Y') }}
                    </time>
                @endif
                @if($article->author)
                    <span class="flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                        {{ $article->author->name ?? '' }}
                    </span>
                @endif
            </div>
        </header>

        {{-- Featured Image --}}
        @if($article->image)
            <div class="rounded-2xl overflow-hidden mb-8 shadow-lg bg-gray-100">
                <img src="{{ $article->image->url }}"
                     alt="{{ $article->title }}"
                     class="w-full h-auto object-contain">
            </div>
        @endif

        {{-- Body --}}
        <div class="prose prose-lg max-w-none dark:prose-invert prose-headings:font-bold prose-a:text-[var(--site-accent)] prose-img:rounded-xl">
            {!! $article->body !!}
        </div>

        {{-- Share --}}
        <div class="mt-10 pt-6 border-t border-gray-100">
            <div class="flex items-center gap-3">
                <span class="text-gray-500 text-sm font-medium">مشاركة:</span>
                <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}"
                   target="_blank" rel="noopener"
                   class="w-9 h-9 rounded-full bg-gray-100 hover:bg-sky-500 hover:text-white flex items-center justify-center text-gray-500 transition-colors">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                </a>
                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}"
                   target="_blank" rel="noopener"
                   class="w-9 h-9 rounded-full bg-gray-100 hover:bg-blue-600 hover:text-white flex items-center justify-center text-gray-500 transition-colors">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
                </a>
                <a href="https://wa.me/?text={{ urlencode($article->title . ' ' . url()->current()) }}"
                   target="_blank" rel="noopener"
                   class="w-9 h-9 rounded-full bg-gray-100 hover:bg-green-500 hover:text-white flex items-center justify-center text-gray-500 transition-colors">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
                </a>
            </div>
        </div>
    </article>

    {{-- Related Articles --}}
    @if($related->count())
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-16">
            <h2 class="text-2xl font-bold text-gray-900 mb-8" style="font-family: var(--site-heading-font);">أخبار ذات صلة</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                @foreach($related as $relArticle)
                    <article class="site-card overflow-hidden group hover:shadow-xl transition-shadow">
                        @if($relArticle->image)
                            <div class="relative overflow-hidden bg-gray-100">
                                <img src="{{ $relArticle->image->url }}"
                                     alt="{{ $relArticle->title }}"
                                     class="w-full h-auto object-contain group-hover:scale-105 transition-transform duration-500"
                                     loading="lazy">
                            </div>
                        @endif
                        <div class="p-4">
                            @if($relArticle->published_at)
                                <time class="text-xs text-gray-400">{{ $relArticle->published_at->translatedFormat('j F Y') }}</time>
                            @endif
                            <h3 class="text-base font-bold text-gray-900 mt-1 line-clamp-2 group-hover:text-[var(--site-accent)] transition-colors">
                                <a href="{{ route('website.news.show', ['slug' => $academy->slug ?? 'default', 'news' => $relArticle->slug]) }}">
                                    {{ $relArticle->title }}
                                </a>
                            </h3>
                        </div>
                    </article>
                @endforeach
            </div>
        </div>
    @endif
</div>
@endsection
