@extends('layouts.public')

@section('title', ($article->seo_title ?: $article->title) . ' - ' . config('app.name'))
@section('meta_description', $article->seo_description ?: ($article->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($article->content), 150)))

@push('styles')
<style>
    .article-wrap { width: min(1060px, calc(100% - 28px)); margin: 0 auto; }
    .article-shell { padding: 34px 0 60px; }
    .article-hero { background:#fff; border:1px solid #e2e8f0; border-radius:28px; overflow:hidden; box-shadow:0 18px 44px rgba(15,23,42,.07); }
    .article-hero img { width:100%; height:380px; object-fit:cover; display:block; }
    .article-copy { padding:28px; }
    .article-meta { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; font-size:.78rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:#64748b; }
    .article-copy h1 { margin:0 0 12px; font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; color:#0f172a; }
    .article-excerpt { margin:0; color:#475569; line-height:1.8; font-size:1.02rem; }
    .article-body { margin-top:24px; background:#fff; border:1px solid #e2e8f0; border-radius:24px; padding:28px; box-shadow:0 16px 34px rgba(15,23,42,.05); color:#1e293b; line-height:1.9; }
    .article-body p { margin:0 0 18px; }
    .article-related { margin-top:28px; }
    .article-related h3 { margin:0 0 14px; font-size:1.4rem; }
    .article-related-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:18px; }
    .article-related-card { background:#fff; border:1px solid #e2e8f0; border-radius:20px; overflow:hidden; text-decoration:none; color:#0f172a; box-shadow:0 14px 28px rgba(15,23,42,.05); }
    .article-related-card img { width:100%; height:160px; object-fit:cover; }
    .article-related-card div { padding:16px; }
    @media (max-width: 900px) {
        .article-hero img { height:260px; }
        .article-related-grid { grid-template-columns:1fr; }
    }
</style>
@endpush

@section('content')
<section class="article-shell">
    <div class="article-wrap">
        @php($safeArticleContent = app(\App\Support\HtmlSanitizer::class)->sanitize($article->content))
        <article class="article-hero">
            @if($article->featured_image_url)
                <img src="{{ $article->featured_image_url }}" alt="{{ $article->title }}">
            @endif
            <div class="article-copy">
                <div class="article-meta">
                    <span>{{ $article->category?->name }}</span>
                    <span>{{ optional($article->published_at)->format('d M Y') }}</span>
                    <span>By {{ $article->author?->name }}</span>
                </div>
                <h1>{{ $article->title }}</h1>
                @if($article->excerpt)
                    <p class="article-excerpt">{{ $article->excerpt }}</p>
                @endif
            </div>
        </article>

        <div class="article-body">
            {!! $safeArticleContent !!}
        </div>

        @if($relatedArticles->isNotEmpty())
            <div class="article-related">
                <h3>Related articles</h3>
                <div class="article-related-grid">
                    @foreach($relatedArticles as $related)
                        <a href="{{ route('blogs.show', $related->slug) }}" class="article-related-card">
                            @if($related->featured_image_url)
                                <img src="{{ $related->featured_image_url }}" alt="{{ $related->title }}">
                            @endif
                            <div>
                                <strong>{{ $related->title }}</strong>
                                <p style="margin:8px 0 0;color:#64748b;">{{ $related->excerpt ?: \Illuminate\Support\Str::limit(strip_tags(app(\App\Support\HtmlSanitizer::class)->sanitize($related->content)), 110) }}</p>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</section>
@endsection