{{-- Contact — ported from the legacy contact.php, with a form that works. --}}

<x-layouts.app
	title="Contact | B Bailey Property Management"
	description="Contact B Bailey Property Management in Ilford — phone, email and office address for property management and surveying enquiries."
	keywords="contact B Bailey, property management Ilford, Cranbrook Road"
	body-class="page-contact"
	:styles="['property-pages', 'inner-pages']"
>

	<main id="main">
		<x-page-hero
			title="Contact"
			lead="Speak to our team about property management, surveying or lettings."
			:breadcrumbs="[
				['label' => 'Home', 'href' => route('home')],
				['label' => 'Contact'],
			]"
		/>

		<section class="ip-contact">
			<div class="container">
				<div class="ip-contact-layout">
					<div class="ip-contact-card">
						<h2>Visit or get in touch</h2>
						<p class="ip-contact-sub">Our Ilford office has been part of Cranbrook Road since 1896. We are happy to discuss your requirements by phone, email or in person.</p>

						<ul class="ip-contact-list">
							<li class="ip-contact-map">
								<div class="ip-contact-map-frame">
									<iframe
										src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2480.3304879651923!2d0.06838219999999998!3d51.5621747!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a6f48144c909%3A0xbd97e865c05c25cf!2sB%20Bailey%20Property%20Management%20Ltd!5e0!3m2!1sen!2sin!4v1786120226170!5m2!1sen!2sin"
										title="B Bailey Property Management Ltd on Google Maps"
										loading="lazy"
										referrerpolicy="strict-origin-when-cross-origin"
										allowfullscreen></iframe>
								</div>
							</li>
							<li>
								<i class="bx bx-map" aria-hidden="true"></i>
								<span>
									{{ config('site.address.line_1') }}<br>
									{{ config('site.address.city') }},
									{{ config('site.address.county') }}<br>
									{{ config('site.address.postcode') }}
								</span>
							</li>
							<li>
								<i class="bx bx-phone" aria-hidden="true"></i>
								<a href="tel:{{ config('site.phone.tel') }}">{{ config('site.phone.display') }}</a>
							</li>
							<li>
								<i class="bx bx-envelope" aria-hidden="true"></i>
								<a href="mailto:{{ config('site.email') }}">{{ config('site.email') }}</a>
							</li>
						</ul>

						<div class="ip-contact-follow">
							<h3>Follow us</h3>
							<div class="ip-contact-social">
								<a href="{{ config('site.social.x') }}" target="_blank" rel="noopener noreferrer" aria-label="{{ config('site.name') }} on X">
									<i class="bxl bx-twitter-x" aria-hidden="true"></i>
								</a>
							</div>
						</div>
					</div>

					<div class="ip-form-panel" id="enquiry-form">
						<h2>Send an enquiry</h2>
						<p class="ip-form-lead">Tell us a little about your property or requirements and we will get back to you.</p>

						@if (session('enquiry_sent'))
							<p class="ip-form-success" role="status">
								Thank you — your enquiry has been sent and we will be in touch shortly.
								For urgent matters please call {{ config('site.phone.display') }}.
							</p>
						@endif

						@if ($property)
							<p class="ip-form-context">
								Enquiring about
								<a href="{{ route('properties.show', $property) }}"><strong>{{ $property->title }}</strong></a>.
							</p>
						@endif

						@if ($errors->any())
							<div class="ip-form-errors" role="alert">
								<p>Please check the form and try again.</p>
								<ul>
									@foreach ($errors->all() as $error)
										<li>{{ $error }}</li>
									@endforeach
								</ul>
							</div>
						@endif

						<form id="enquiry" class="ip-form" action="{{ route('contact.store') }}" method="post" novalidate>
							@csrf

							@if ($property)
								<input type="hidden" name="property" value="{{ $property->slug }}">
							@endif

							{{--
								Honeypot. Hidden from people three ways — off-screen, aria-hidden
								and out of tab order — but present in the DOM for bots to fill.
								Submitting anything here fails validation.
							--}}
							<div class="ip-form-hp" aria-hidden="true" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;">
								<label for="{{ \App\Http\Requests\StoreEnquiryRequest::HONEYPOT }}">Leave this field empty</label>
								<input
									type="text"
									id="{{ \App\Http\Requests\StoreEnquiryRequest::HONEYPOT }}"
									name="{{ \App\Http\Requests\StoreEnquiryRequest::HONEYPOT }}"
									value=""
									tabindex="-1"
									autocomplete="off">
							</div>

							{{--
								.ip-field, not .ip-form-field. The field wrapper, its
								label and every input / select / textarea inside it are
								styled off .ip-field in inner-pages.css — the renamed
								class matched nothing, so the controls fell back to
								browser defaults for width, height and spacing.
							--}}
							<div class="ip-form-row">
								<div class="ip-field">
									<label for="name">Full name</label>
									<input type="text" id="name" name="name" autocomplete="name"
										value="{{ old('name') }}" required
										@error('name') aria-invalid="true" aria-describedby="name-error" @enderror>
									@error('name')
										<span class="ip-form-error" id="name-error">{{ $message }}</span>
									@enderror
								</div>
								<div class="ip-field">
									<label for="email">Email</label>
									<input type="email" id="email" name="email" autocomplete="email"
										value="{{ old('email') }}" required
										@error('email') aria-invalid="true" aria-describedby="email-error" @enderror>
									@error('email')
										<span class="ip-form-error" id="email-error">{{ $message }}</span>
									@enderror
								</div>
							</div>

							<div class="ip-form-row">
								<div class="ip-field">
									<label for="phone">Phone</label>
									<input type="tel" id="phone" name="phone" autocomplete="tel" value="{{ old('phone') }}"
										@error('phone') aria-invalid="true" aria-describedby="phone-error" @enderror>
									@error('phone')
										<span class="ip-form-error" id="phone-error">{{ $message }}</span>
									@enderror
								</div>
								<div class="ip-field">
									<label for="topic">Enquiry type</label>
									<select id="topic" name="topic" required
										@error('topic') aria-invalid="true" aria-describedby="topic-error" @enderror>
										@foreach (\App\Enums\EnquiryTopic::options() as $value => $label)
											<option value="{{ $value }}" @selected(old('topic', $selectedTopic->value) === $value)>{{ $label }}</option>
										@endforeach
									</select>
									@error('topic')
										<span class="ip-form-error" id="topic-error">{{ $message }}</span>
									@enderror
								</div>
							</div>

							<div class="ip-field">
								<label for="message">Message</label>
								<textarea id="message" name="message" required placeholder="How can we help?"
									@error('message') aria-invalid="true" aria-describedby="message-error" @enderror>{{ old('message', $property ? 'I would like to enquire about ' . $property->title . '.' : '') }}</textarea>
								@error('message')
									<span class="ip-form-error" id="message-error">{{ $message }}</span>
								@enderror
							</div>

							{{-- Legacy order: the note sits above the button, which is
							     what .ip-form's flex column and the button's
							     align-self: flex-start were laid out around. --}}
							<p class="ip-form-note">
								We use your details only to respond to your enquiry. See our
								<a href="{{ route('privacy') }}">Privacy Policy</a>.
							</p>

							@error(\App\Http\Requests\StoreEnquiryRequest::RECAPTCHA)
								<span class="ip-form-error" id="recaptcha-error">{{ $message }}</span>
							@enderror

							{{--
								Invisible reCAPTCHA binds to the submit button: Google
								intercepts the click, runs its check, and calls the
								callback with a token which the handler posts. Without
								the key pair configured, this is an ordinary button and
								the form posts directly.
							--}}
							<button type="submit"
								@class(['btn-pill', 'btn-pill--dark', 'g-recaptcha' => $recaptchaSiteKey])
								@if ($recaptchaSiteKey)
									data-sitekey="{{ $recaptchaSiteKey }}"
									data-callback="onEnquiryVerified"
									data-size="invisible"
								@endif>
								<span class="btn-pill-dot" aria-hidden="true"></span>
								<span class="btn-pill-label">Send enquiry</span>
							</button>
						</form>
					</div>
				</div>
			</div>
		</section>
	</main>

	{{--
		Only loaded when a key pair is configured, so an install without
		credentials pulls nothing from Google at all.

		The callback fires after Google has issued a token and written it into
		the form's g-recaptcha-response field; submit() then posts the form
		with the token attached, which App\Rules\ValidRecaptcha verifies.
	--}}
	@if ($recaptchaSiteKey)
		@push('scripts')
			<script>
				function onEnquiryVerified() {
					document.getElementById('enquiry').submit();
				}
			</script>
			<script src="https://www.google.com/recaptcha/api.js" async defer></script>
		@endpush
	@endif

</x-layouts.app>