@php
    $preview = $isPreview ?? false;
    $metaTitle = $article->meta_title ?: $article->title.' — Ruang Medis';
    $metaDescription = $article->meta_description ?: $article->excerpt;
    $canonical = $preview ? null : route('articles.show',$article->slug);
    $schema = $preview ? null : ['@context'=>'https://schema.org','@type'=>'Article','headline'=>$article->title,'description'=>$metaDescription,'datePublished'=>$article->published_at?->toIso8601String(),'dateModified'=>$article->updated_at->toIso8601String(),'author'=>['@type'=>'Person','name'=>$article->author->name],'publisher'=>['@type'=>'Organization','name'=>config('brand.name')],'image'=>$article->coverUrl()];
@endphp
<x-layouts.app :title="$metaTitle" :meta-description="$metaDescription" :canonical="$canonical" :og-image="$article->coverUrl()" :json-ld="$schema">
    <main class="page-shell py-5 sm:py-9">
        @if($preview)<div class="mx-auto mb-4 max-w-3xl rounded-2xl border border-amber-200 bg-amber-50 p-3 text-center text-[10px] font-extrabold text-amber-800">Mode preview · Artikel ini belum tentu tampil untuk publik.</div>@endif
        <article class="mx-auto max-w-3xl">
            <nav class="flex items-center gap-1 text-[9px] font-bold text-slate-400"><a href="{{ route('home') }}">Beranda</a><span>/</span><a href="{{ route('articles.index') }}">Artikel</a><span>/</span><span class="truncate text-slate-600">{{ $article->title }}</span></nav>
            <header class="mt-4"><div class="flex items-center justify-between gap-4"><span class="rounded-full bg-cyan-50 px-3 py-1.5 text-[9px] font-extrabold uppercase tracking-[.12em] text-cyan-700">Info Sehat</span><button type="button" data-share-article class="grid size-11 place-items-center rounded-full bg-ocean-800 text-white shadow-card" aria-label="Bagikan artikel"><x-icon name="send" size="18"/></button></div><h1 class="mt-4 text-2xl font-black leading-tight tracking-tight text-ocean-950 sm:text-4xl">{{ $article->title }}</h1><p class="mt-3 text-[10px] font-semibold text-slate-500">{{ ($article->published_at ?: $article->updated_at)->translatedFormat('d F Y') }} · {{ $article->reading_time }} menit baca · {{ $article->author->name }}</p>@if($article->excerpt)<p class="mt-4 max-w-2xl text-xs leading-6 text-slate-600 sm:text-sm">{{ $article->excerpt }}</p>@endif</header>
            @if($article->coverUrl())<figure class="mt-6 overflow-hidden rounded-[1.75rem] border border-white/80 bg-white/70 p-1.5 shadow-card backdrop-blur-xl"><img src="{{ $article->coverUrl() }}" alt="{{ $article->cover_alt ?: $article->title }}" class="aspect-[16/9] w-full rounded-[1.4rem] object-cover"></figure>@endif
            <div class="article-prose mt-6 rounded-[1.75rem] border border-white/80 bg-white/75 px-5 py-6 shadow-card backdrop-blur-xl sm:px-9 sm:py-9">{!! $article->content_html !!}</div>
        </article>
        @if($relatedArticles->isNotEmpty())<section class="mx-auto mt-8 max-w-5xl"><h2 class="text-lg font-black text-ocean-950">Bacaan sehat lainnya</h2><div class="mt-3 grid gap-3 sm:grid-cols-3">@foreach($relatedArticles as $related)<a href="{{ route('articles.show',$related->slug) }}" class="rounded-2xl border border-white/80 bg-white/70 p-4 shadow-sm backdrop-blur-xl"><p class="text-[9px] font-bold text-cyan-700">{{ $related->reading_time }} menit baca</p><strong class="mt-1 block text-xs leading-5 text-ocean-950">{{ $related->title }}</strong></a>@endforeach</div></section>@endif
    </main>
    <script>(() => { const button = document.querySelector('[data-share-article]'); if (!button) return; button.addEventListener('click', async () => { const data = { title: @js($article->title), text: @js($article->excerpt), url: location.href }; if (navigator.share) { try { await navigator.share(data); } catch (error) { if (error?.name !== 'AbortError') console.warn(error); } return; } await navigator.clipboard.writeText(location.href); button.setAttribute('aria-label', 'Tautan artikel berhasil disalin'); }); })();</script>
</x-layouts.app>