@extends('layouts.shell')
@section('title', $article->metaTitle())
@section('meta_title', $article->metaTitle())
@section('meta_description', $article->metaDescription())
@section('og_image', $article->coverUrl())
@section('main-pad', 'px-5 pb-6')

@section('jsonld')
<script type="application/ld+json">{!! json_encode([
    '@context'=>'https://schema.org','@type'=>'Article','headline'=>$article->title,
    'image'=>$article->coverUrl(),'datePublished'=>$article->published_at?->toAtomString(),
    'author'=>['@type'=>'Person','name'=>$article->author?->name ?? 'Quran Review'],
    'description'=>$article->metaDescription(),
], JSON_UNESCAPED_SLASHES) !!}</script>
@endsection

@section('content')
<a href="{{ route('articles.index') }}" class="mb-4 inline-flex items-center gap-1 text-small text-muted hover:text-primary">
    <x-icon name="arrow-left" class="w-4 h-4"/> Semua Artikel
</a>

<article>
    @if($article->category)<span class="chip-primary mb-3">{{ $article->category }}</span>@endif
    <h1 class="text-h1 leading-tight">{{ $article->title }}</h1>
    <div class="mt-3 flex items-center gap-3 text-small text-muted">
        <span class="grid h-8 w-8 place-items-center rounded-full bg-primary/15 text-primary font-bold text-xs">{{ strtoupper(substr($article->author?->name ?? 'Q',0,1)) }}</span>
        <span>{{ $article->author?->name ?? 'Tim Quran Review' }}</span>
        <span>·</span><span>{{ $article->published_at?->translatedFormat('d M Y') }}</span>
        <span>·</span><span>{{ $article->readingMinutes() }} mnt baca</span>
        <span class="ml-auto"><x-bookmark-button type="article" :id="$article->id" :model="$article"/></span>
    </div>

    <div class="cinema relative mt-5 aspect-[16/9] overflow-hidden rounded-2xl">
        <img src="{{ $article->coverUrl() }}" class="h-full w-full object-cover" alt="{{ $article->title }}">
    </div>

    @if($article->excerpt)
    <p class="text-body-lg text-muted mt-6 prose-body font-medium">{{ $article->excerpt }}</p>
    @endif

    <div class="prose-body mt-5 space-y-4 text-body-lg leading-relaxed">
        @foreach(preg_split('/\n\n+/', $article->body) as $para)
            <p>{{ trim($para) }}</p>
        @endforeach
    </div>

    <div class="mt-6 border-t border-outline/60 pt-4">
        <x-share-buttons :url="route('articles.show', $article->slug)" :title="$article->title" />
    </div>
</article>

@if($related->isNotEmpty())
<section class="mt-10">
    <h2 class="text-h3 mb-3">Artikel Terkait</h2>
    <div class="space-y-3">
        @foreach($related as $r)
        <a href="{{ route('articles.show', $r->slug) }}" class="card flex items-center gap-4 p-3 hover:shadow-e3 transition-shadow">
            <img src="{{ $r->coverUrl() }}" class="h-14 w-20 rounded-lg object-cover shrink-0" alt="">
            <div class="min-w-0"><h3 class="text-h4 line-clamp-2 leading-tight">{{ $r->title }}</h3>
            <p class="text-caption text-muted mt-0.5">{{ $r->readingMinutes() }} mnt baca</p></div>
        </a>
        @endforeach
    </div>
</section>
@endif
@endsection