{{--
	Information and Insights — ported from the legacy blog.php.

	The section is .insights.insights--light.insights--listing, not a bespoke
	wrapper: .insights-grid and the whole .article-card block live in main.css,
	and .insights--light is what repaints the dark homepage variant onto the
	soft canvas the listing uses. Dropping either leaves the cards unstyled.
--}}

<x-layouts.app
	title="Information and Insights | B Bailey"
	description="Practical updates and industry insight for landlords, freeholders and property professionals from B Bailey Property Management."
	keywords="property insights, leasehold news, block management advice, B Bailey"
	body-class="page-blog"
	:styles="['main', 'property-pages', 'inner-pages']"
>

	<main id="main">
		<x-page-hero
			title="Information and Insights"
			lead="Practical updates and industry insight for landlords, freeholders and property professionals."
			:breadcrumbs="[
				['label' => 'Home', 'href' => route('home')],
				['label' => 'Information and Insights'],
			]"
		/>

		<section id="blog-articles" class="insights insights--light insights--listing" aria-label="News and insights">
			<div class="container">
				<x-section-head
					label="All insights"
					title="News and practical updates for landlords, freeholders and property professionals."
					sub="Stay informed on management, leasehold and surveying matters across London and the South East."
				/>

				@if ($posts->isEmpty())
					{{-- The legacy page had four hardcoded cards and so needed no
					     empty state. This one reads a table that can be empty. --}}
					<div class="ip-empty">
						<h2>Nothing published here yet</h2>
						<p>We publish updates on leasehold reform, block management and property compliance. Check back shortly, or speak to our team in the meantime.</p>
						<x-btn-pill :href="route('contact')" variant="dark" label="Contact us" />
					</div>
				@else
					<div class="insights-grid">
						@foreach ($posts as $post)
							<x-article-card
								:href="$post->url"
								:image="$post->image"
								:alt="$post->imageAlt()"
								:title="$post->title"
								:category="$post->categoryName()"
								:date="$post->displayDate()"
								:excerpt="$post->excerpt ?? ''"
							/>
						@endforeach
					</div>

					{{-- Nine per page, so this stays hidden until a tenth post
					     exists — the legacy page showed four and no control. --}}
					@if ($posts->hasPages())
						<nav class="ip-pagination" aria-label="Insights pagination">
							{{ $posts->onEachSide(1)->links() }}
						</nav>
					@endif
				@endif
			</div>
		</section>
	</main>

</x-layouts.app>