@extends('layouts.public')

@section('title', 'Preview: ' . $blogArticle->title)
@section('meta_description', $blogArticle->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($blogArticle->content), 150))

@push('styles')
<style>
    .preview-wrap { width:min(1060px, calc(100% - 28px)); margin:0 auto; }
    .preview-banner { margin:26px 0 18px; padding:14px 18px; border-radius:16px; background:#fff7ed; border:1px solid #fdba74; color:#9a3412; font-weight:700; }
    .preview-card { background:#fff; border:1px solid #e2e8f0; border-radius:28px; overflow:hidden; box-shadow:0 18px 44px rgba(15,23,42,.07); }
    .preview-card img { width:100%; height:380px; object-fit:cover; display:block; }
    .preview-copy { padding:28px; }
    .preview-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; }
    .preview-copy h1 { margin:0 0 12px; font-size:clamp(2rem,4vw,3.4rem); line-height:1.05; color:#0f172a; }
    .preview-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; }
</style>
@endpush

@section('content')
<section style="padding: 18px 0 60px;">
    <div class="preview-wrap">
        @php($safePreviewContent = app(\App\Support\HtmlSanitizer::class)->sanitize($blogArticle->content))
        <div class="preview-banner">
            Preview mode only. This article is not public until admin approval/publishing.
        </div>

        <article class="preview-card">
            @if($blogArticle->featured_image_url)
                <img src="{{ $blogArticle->featured_image_url }}" alt="{{ $blogArticle->title }}">
            @endif
            <div class="preview-copy">
                <div class="preview-meta">
                    <span>{{ $blogArticle->category?->name }}</span>
                    <span>{{ $blogArticle->statusLabel() }}</span>
                    <span>By {{ $blogArticle->author?->name }}</span>
                </div>
                <h1>{{ $blogArticle->title }}</h1>
                @if($blogArticle->excerpt)
                    <p style="margin:0;color:#475569;line-height:1.8;font-size:1.02rem;">{{ $blogArticle->excerpt }}</p>
                @endif
            </div>
        </article>

        <div class="preview-body">
            {!! $safePreviewContent !!}
        </div>
    </div>
</section>
@endsection