@php
    $errorCode = 404;
    $errorTitle = 'Page not found';
    $errorLead = 'We could not find that page. It may have been moved, renamed, or never existed.';
@endphp

<x-layouts.app
	:title="$errorCode . ' — ' . $errorTitle . ' | B Bailey'"
	:description="$errorLead"
	:body-class="'page-error page-error-' . $errorCode"
	:styles="['property-pages']"
>

	@push('styles')
		<meta name="robots" content="noindex, follow">
		<style>
			.error-page {
				min-height: calc(100vh - var(--header-h, 88px));
				display: flex;
				align-items: center;
				padding: var(--space-12) 0;
				background:
					radial-gradient(120% 80% at 100% 0%, rgba(227, 244, 251, 0.9) 0%, transparent 55%),
					#f7f9fc;
			}
			.error-inner {
				max-width: 560px;
			}
			.error-code {
				margin: 0 0 12px;
				font-family: var(--font-ui);
				font-size: 13px;
				font-weight: 700;
				letter-spacing: 0.12em;
				text-transform: uppercase;
				color: var(--color-navy);
				opacity: 0.7;
			}
			.error-title {
				margin: 0 0 16px;
				font-family: var(--font-body);
				font-weight: 600;
				font-size: clamp(32px, 5vw, 48px);
				line-height: 1.15;
				letter-spacing: -0.03em;
				color: var(--color-navy);
			}
			.error-lead {
				margin: 0 0 28px;
				font-size: 17px;
				line-height: 1.55;
				color: #475569;
			}
			.error-actions {
				display: flex;
				flex-wrap: wrap;
				gap: 12px;
			}
		</style>
	@endpush

	<main id="main" class="error-page">
		<div class="container">
			<div class="error-inner">
				<p class="error-code">Error {{ $errorCode }}</p>
				<h1 class="error-title">{{ $errorTitle }}</h1>
				<p class="error-lead">{{ $errorLead }}</p>
				<div class="error-actions">
					<x-btn-pill :href="route('home')" variant="dark" label="Back to home" />
					<x-btn-pill :href="route('contact')" variant="outline" label="Contact us" />
					<x-btn-pill :href="route('properties.index')" variant="outline" label="Properties to let" />
				</div>
			</div>
		</div>
	</main>

</x-layouts.app>