@extends('layouts.site')
@section('content')
<article>
    <header class="sec" style="padding-bottom:48px">
        <div class="wrap-n stack" style="gap:20px">
            <nav class="xs muted" aria-label="Breadcrumb"><a href="{{ route('blog.index') }}">Insights</a> / {{ $post->category }}</nav>
            <h1 class="d2">{{ $post->title }}</h1>
            <p class="lead">{{ $post->excerpt }}</p>
            <p class="small muted">By KalpCanvas · <time datetime="{{ $post->published_at->toDateString() }}">{{ $post->published_at->format('j F Y') }}</time> · {{ $post->read_minutes }} min read</p>
        </div>
    </header>
    @if($post->cover)<div class="wrap" style="max-width:1000px"><img src="{{ asset('storage/'.$post->cover) }}" alt="" style="width:100%;border-radius:8px"></div>@endif
    <div class="wrap-n" style="padding-bottom:72px"><div class="prose">{!! $post->body !!}</div></div>
    @if($post->faqs)
    <section class="sec tint"><div class="wrap-n stack" style="gap:24px"><h2 class="d3">Quick answers</h2>@include('partials.faq', ['faqs' => $post->faqs])</div></section>
    @endif
</article>
@if($related->isNotEmpty())
<section class="sec">
    <div class="wrap stack" style="gap:32px"><h2 class="d3">Keep reading</h2>
        <div class="grid g3">@foreach($related as $p)<a href="{{ route('blog.show', $p) }}" class="card box"><span class="eyebrow">{{ $p->category }}</span><span class="card-t">{{ $p->title }}</span></a>@endforeach</div>
    </div>
</section>
@endif
@include('partials.cta-band')
@endsection