@extends('news.layout', [
    'metaTitle'       => $article->meta_title ?: $article->title,
    'metaDescription' => $article->meta_description ?: Str::limit(strip_tags((string)$article->excerpt), 160),
    'metaCanonical'   => route('news.show', $article->slug),
])

@section('news_content')

@php
    $headerBreadcrumbs = collect([
        (object) ['name' => 'Community', 'url' => route('community.activity')],
        (object) ['name' => 'Announcements', 'url' => route('news.index')],
        $article->category
            ? (object) ['name' => $article->category->name, 'url' => route('news.category', $article->category->slug)]
            : null,
        (object) ['name' => $article->title, 'url' => route('news.show', $article->slug)],
    ])->filter()->values();
@endphp

{{-- OpenGraph meta --}}
@push('head')
<meta property="og:type"        content="article">
<meta property="og:title"       content="{{ $article->effective_og_title }}">
<meta property="og:description" content="{{ $article->effective_og_description }}">
@if($article->effective_og_image)
    <meta property="og:image" content="{{ $article->effective_og_image }}">
@endif
<meta property="article:published_time" content="{{ $article->published_at?->toIso8601String() }}">
<meta property="article:author"         content="{{ $article->author?->name }}">
@if($article->meta_keywords)
    <meta name="keywords" content="{{ $article->meta_keywords }}">
@endif
@endpush

<x-nova-page-header
    section="Community"
    :title="$article->title"
    icon="fa-newspaper"
    :breadcrumbs="$headerBreadcrumbs"
    :description="$article->excerpt ? Str::limit(strip_tags((string) $article->excerpt), 180) : 'Latest Skinbase announcement and community update.'"
    headerClass="pb-6"
>
    <x-slot name="actions">
        <div class="flex flex-wrap items-center gap-2 text-sm text-white/60">
            @if($article->category)
                <a href="{{ route('news.category', $article->category->slug) }}" class="inline-flex items-center rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1.5 text-sky-200">{{ $article->category->name }}</a>
            @endif
            <span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5">
                <i class="fa-regular fa-clock text-xs"></i>
                {{ $article->reading_time }} min read
            </span>
        </div>
    </x-slot>
</x-nova-page-header>

<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
        <article class="min-w-0">
            @if($article->cover_url)
                <div class="overflow-hidden rounded-[32px] border border-white/[0.06] bg-black/20 shadow-[0_24px_60px_rgba(0,0,0,0.24)]">
                    <img src="{{ $article->cover_url }}" alt="{{ $article->title }}" class="h-auto max-h-[520px] w-full object-cover">
                </div>
            @endif

            <div class="mt-6 rounded-[32px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.94),rgba(7,11,19,0.92))] p-6 shadow-[0_18px_45px_rgba(0,0,0,0.2)] sm:p-8">
                <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
                    <span>{{ $article->author?->name ?? 'Skinbase' }}</span>
                    <span>{{ $article->published_at?->format('d M Y') }}</span>
                    <span>{{ number_format((int) $article->views) }} views</span>
                </div>

                @if($article->excerpt)
                    <p class="mt-5 text-lg leading-8 text-white/65">{{ $article->excerpt }}</p>
                @endif

                <div class="prose prose-invert prose-sky mt-8 max-w-none prose-p:text-white/72 prose-li:text-white/70 prose-strong:text-white prose-a:text-sky-300 hover:prose-a:text-sky-200 prose-headings:text-white">
                    {!! $article->content !!}
                </div>

                @if($article->tags->isNotEmpty())
                    <div class="mt-8 flex flex-wrap gap-2 border-t border-white/[0.06] pt-6">
                        @foreach($article->tags as $tag)
                            <a href="{{ route('news.tag', $tag->slug) }}" class="inline-flex items-center rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/60 transition hover:border-white/[0.14] hover:bg-white/[0.06] hover:text-white">#{{ $tag->name }}</a>
                        @endforeach
                    </div>
                @endif

                <div class="mt-8 flex flex-wrap items-center gap-3 border-t border-white/[0.06] pt-6">
                    <span class="text-sm font-medium text-white/55">Share</span>
                    <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}" class="inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-500/10 px-4 py-2 text-sm text-sky-200 transition hover:bg-sky-500/15" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-twitter text-xs"></i>
                        Twitter
                    </a>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" class="inline-flex items-center gap-2 rounded-full border border-blue-400/20 bg-blue-500/10 px-4 py-2 text-sm text-blue-200 transition hover:bg-blue-500/15" target="_blank" rel="noopener noreferrer">
                        <i class="fab fa-facebook text-xs"></i>
                        Facebook
                    </a>
                </div>

                @if($article->forum_thread_id)
                    <div class="mt-6 rounded-2xl border border-emerald-400/20 bg-emerald-500/10 px-4 py-4 text-sm text-emerald-100/90">
                        <div class="flex flex-wrap items-center gap-2">
                            <i class="fa-solid fa-comments text-xs"></i>
                            <span class="font-medium">Join the discussion</span>
                        </div>
                        <a href="{{ url('/forum/thread/discussion-' . $article->slug) }}" class="mt-2 inline-flex items-center gap-2 text-emerald-200 transition hover:text-white">
                            Discussion: {{ $article->title }}
                            <i class="fa-solid fa-arrow-right text-[11px]"></i>
                        </a>
                    </div>
                @endif
            </div>

            @if($related->isNotEmpty())
                <section class="mt-8">
                    <div class="mb-4 flex items-center justify-between gap-3">
                        <h2 class="text-lg font-semibold text-white/90">Related Articles</h2>
                    </div>
                    <div class="grid gap-5 md:grid-cols-2">
                        @foreach($related as $rel)
                            @include('news._article_card', ['article' => $rel])
                        @endforeach
                    </div>
                </section>
            @endif
        </article>

        <aside class="space-y-4">
            @include('news._sidebar', ['categories' => $categories, 'trending' => $trending, 'tags' => $tags])
        </aside>
    </div>
</div>
@endsection