{{--
	A single insight — ported from the legacy per-post pages
	(july-at-prime-on-call-service.php and its three siblings).

	Three of the four legacy posts have no body text yet. The article body is
	therefore conditional: an empty <div class="ip-article-body"> would render
	as a blank gap rather than an absent section.
--}}

<x-layouts.app
	:title="$post->metaTitle()"
	:description="$post->metaDescription()"
	:keywords="$post->meta_keywords"
	body-class="page-solid page-blog-post"
	{{-- Served by SlugRouterController under `page.show`, so the header
	     cannot infer the section from the route name. --}}
	nav="insights"
	:styles="['main', 'property-pages', 'inner-pages']"
	:lcp="$post->image"
>

	<main id="main">
		<article class="ip-article" aria-labelledby="ip-article-title">
			<div class="container">
				<div class="ip-article-inner">
					<x-breadcrumb :items="[
						['label' => 'Home', 'href' => route('home')],
						['label' => 'Information and Insights', 'href' => route('posts.index')],
						['label' => $post->title],
					]" />

					@if ($post->categoryName() !== '')
						<p class="ip-article-kicker">{{ $post->categoryName() }}</p>
					@endif

					<h1 id="ip-article-title" class="ip-article-title">{{ $post->title }}</h1>

					@if (filled($post->excerpt))
						<p class="ip-article-excerpt">{{ $post->excerpt }}</p>
					@endif

					@if ($post->published_at)
						<p class="ip-article-date">
							<time datetime="{{ $post->published_at->toDateString() }}">{{ $post->displayDate() }}</time>
						</p>
					@endif

					@if (filled($post->image))
						<figure class="ip-article-media">
							<img src="{{ \App\Support\MediaUrl::resolve($post->image) }}" alt="" decoding="async" fetchpriority="high">
						</figure>
					@endif

					@if ($post->paragraphs() !== [])
						<div class="ip-article-body">
							@foreach ($post->paragraphs() as $paragraph)
								<p>{{ $paragraph }}</p>
							@endforeach
						</div>
					@endif

					<aside class="ip-article-cta" aria-label="Contact B Bailey">
						<div class="ip-article-cta-copy">
							<h2 class="ip-article-cta-title">Need advice for your property?</h2>
							<p class="ip-article-cta-text">Speak to our chartered surveyors and property managers about management, surveying or leasehold matters.</p>
						</div>
						<x-btn-pill :href="route('contact')" variant="dark" label="Discuss your requirements" />
					</aside>
				</div>
			</div>
		</article>

		{{-- insights--related, not ip-related: the modifier carries the
		     section's own vertical rhythm (main.css:1505) and ip-related was
		     styled nowhere. --}}
		@if ($related->isNotEmpty())
			<section id="related-insights" class="insights insights--related" aria-labelledby="ip-related-heading">
				<div class="container">
					<x-section-head
						label="Insights"
						title="More from B Bailey"
						sub="Further news and practical updates for landlords, freeholders and residents."
						title-id="ip-related-heading"
						:on-dark="true"
					>
						<x-btn-pill :href="route('posts.index')" variant="light" label="View all insights" />
					</x-section-head>

					<div class="insights-grid">
						@foreach ($related as $other)
							<x-article-card
								:href="$other->url"
								:image="$other->image"
								:alt="$other->imageAlt()"
								:title="$other->title"
								:category="$other->categoryName()"
								:date="$other->displayDate()"
							/>
						@endforeach
					</div>
				</div>
			</section>
		@endif

		@include('partials.cta')
	</main>

</x-layouts.app>