<?php
/**
 * Template Name: Contact
 *
 * Contact form, direct contact details, and press/media information.
 * The form is intentionally static — in production it would connect
 * to Contact Form 7 or a mail service. Includes client-side validation
 * and a simulated success flow.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

get_header();

$contact_cards = array(
	array(
		'icon'    => 'phone',
		'title'   => __( 'Box Office', 'northfield-theatre' ),
		'line1'   => '<a href="tel:01484567890">01484 567 890</a>',
		'line2'   => __( 'Mon–Sat, 10am–8pm', 'northfield-theatre' ),
		'line3'   => __( 'For bookings, exchanges, access seats, and group sales.', 'northfield-theatre' ),
	),
	array(
		'icon'    => 'mail',
		'title'   => __( 'General enquiries', 'northfield-theatre' ),
		'line1'   => '<a href="mailto:hello@northfieldtheatre.co.uk">hello@northfieldtheatre.co.uk</a>',
		'line2'   => __( 'Replies within two working days', 'northfield-theatre' ),
		'line3'   => __( 'For anything we haven\'t covered elsewhere on the site.', 'northfield-theatre' ),
	),
	array(
		'icon'    => 'user',
		'title'   => __( 'Access bookings', 'northfield-theatre' ),
		'line1'   => '<a href="mailto:access@northfieldtheatre.co.uk">access@northfieldtheatre.co.uk</a>',
		'line2'   => __( 'Priority line: 01484 567 891', 'northfield-theatre' ),
		'line3'   => __( 'Wheelchair seats, companion tickets, hearing loops, audio description.', 'northfield-theatre' ),
	),
);
?>

<article class="contact-page">

	<header class="contact-hero section--dark">
		<div class="container contact-hero__inner">
			<p class="contact-hero__eyebrow"><?php esc_html_e( 'Contact', 'northfield-theatre' ); ?></p>
			<h1 class="contact-hero__title"><?php esc_html_e( 'Come and say hello.', 'northfield-theatre' ); ?></h1>
			<p class="contact-hero__lead">
				<?php esc_html_e( 'You\'ll get through to a real person — every time. The box office is open for most of the day; emails are answered within two working days.', 'northfield-theatre' ); ?>
			</p>
		</div>
	</header>

	<!-- Contact cards -->
	<section class="contact-cards section">
		<div class="container">
			<div class="contact-cards__grid">
				<?php foreach ( $contact_cards as $card ) : ?>
					<div class="contact-card">
						<span class="contact-card__icon" aria-hidden="true">
							<?php echo northfield_icon( $card['icon'], 22 ); ?>
						</span>
						<h2 class="contact-card__title"><?php echo esc_html( $card['title'] ); ?></h2>
						<p class="contact-card__line1"><?php echo wp_kses_post( $card['line1'] ); ?></p>
						<p class="contact-card__line2"><?php echo esc_html( $card['line2'] ); ?></p>
						<p class="contact-card__line3"><?php echo esc_html( $card['line3'] ); ?></p>
					</div>
				<?php endforeach; ?>
			</div>
		</div>
	</section>

	<!-- Contact form + sidebar -->
	<section class="contact-form-section section--cream">
		<div class="container">
			<div class="contact-form-layout">
				<div class="contact-form-intro">
					<p class="contact-form-intro__eyebrow"><?php esc_html_e( 'Drop us a line', 'northfield-theatre' ); ?></p>
					<h2 class="contact-form-intro__heading"><?php esc_html_e( 'Send us a message.', 'northfield-theatre' ); ?></h2>
					<p class="contact-form-intro__body">
						<?php esc_html_e( 'Use the form for anything that isn\'t a booking — access requests, press and media, hire enquiries, community partnerships, or just to let us know what you thought of a show.', 'northfield-theatre' ); ?>
					</p>
					<p class="contact-form-intro__body">
						<?php esc_html_e( 'If your enquiry is about a specific booking, the box office will be able to help you fastest.', 'northfield-theatre' ); ?>
					</p>
				</div>

				<form class="contact-form"
				      id="contact-form"
				      action="#"
				      method="post"
				      novalidate
				      aria-describedby="contact-form-desc">
					<p id="contact-form-desc" class="sr-only">
						<?php esc_html_e( 'All fields marked required must be completed.', 'northfield-theatre' ); ?>
					</p>

					<div class="contact-form__row">
						<div class="form-group">
							<label class="form-label" for="contact-name">
								<?php esc_html_e( 'Your name', 'northfield-theatre' ); ?>
								<span class="contact-form__required" aria-hidden="true">*</span>
							</label>
							<input type="text"
							       id="contact-name"
							       name="name"
							       class="form-input"
							       autocomplete="name"
							       required
							       aria-required="true" />
							<span class="contact-form__error" id="contact-name-error" hidden></span>
						</div>

						<div class="form-group">
							<label class="form-label" for="contact-email">
								<?php esc_html_e( 'Email address', 'northfield-theatre' ); ?>
								<span class="contact-form__required" aria-hidden="true">*</span>
							</label>
							<input type="email"
							       id="contact-email"
							       name="email"
							       class="form-input"
							       autocomplete="email"
							       required
							       aria-required="true" />
							<span class="contact-form__error" id="contact-email-error" hidden></span>
						</div>
					</div>

					<div class="form-group">
						<label class="form-label" for="contact-subject">
							<?php esc_html_e( 'What\'s it about?', 'northfield-theatre' ); ?>
							<span class="contact-form__required" aria-hidden="true">*</span>
						</label>
						<select id="contact-subject"
						        name="subject"
						        class="form-select"
						        required
						        aria-required="true">
							<option value=""><?php esc_html_e( 'Please choose…', 'northfield-theatre' ); ?></option>
							<option value="general"><?php esc_html_e( 'General enquiry', 'northfield-theatre' ); ?></option>
							<option value="access"><?php esc_html_e( 'Access booking', 'northfield-theatre' ); ?></option>
							<option value="feedback"><?php esc_html_e( 'Feedback on a show', 'northfield-theatre' ); ?></option>
							<option value="hire"><?php esc_html_e( 'Venue hire', 'northfield-theatre' ); ?></option>
							<option value="press"><?php esc_html_e( 'Press or media', 'northfield-theatre' ); ?></option>
							<option value="community"><?php esc_html_e( 'Community partnership', 'northfield-theatre' ); ?></option>
							<option value="other"><?php esc_html_e( 'Something else', 'northfield-theatre' ); ?></option>
						</select>
						<span class="contact-form__error" id="contact-subject-error" hidden></span>
					</div>

					<div class="form-group">
						<label class="form-label" for="contact-message">
							<?php esc_html_e( 'Your message', 'northfield-theatre' ); ?>
							<span class="contact-form__required" aria-hidden="true">*</span>
						</label>
						<textarea id="contact-message"
						          name="message"
						          class="form-textarea"
						          rows="6"
						          required
						          aria-required="true"></textarea>
						<span class="contact-form__error" id="contact-message-error" hidden></span>
					</div>

					<div class="form-group contact-form__consent">
						<label class="contact-form__checkbox">
							<input type="checkbox" id="contact-consent" name="consent" required aria-required="true" />
							<span>
								<?php
								printf(
									/* translators: %s: link to privacy policy */
									esc_html__( 'I\'ve read and agree to the %s.', 'northfield-theatre' ),
									'<a href="' . esc_url( get_privacy_policy_url() ) . '">' . esc_html__( 'privacy policy', 'northfield-theatre' ) . '</a>'
								);
								?>
							</span>
						</label>
						<span class="contact-form__error" id="contact-consent-error" hidden></span>
					</div>

					<button type="submit" class="btn btn--primary btn--lg">
						<?php esc_html_e( 'Send message', 'northfield-theatre' ); ?>
					</button>

					<div class="contact-form__status"
					     id="contact-form-status"
					     role="status"
					     aria-live="polite"
					     hidden></div>
				</form>
			</div>
		</div>
	</section>

	<!-- Address / map strip -->
	<section class="contact-address section">
		<div class="container contact-address__grid">
			<div class="contact-address__info">
				<h2 class="contact-address__heading"><?php esc_html_e( 'Find us', 'northfield-theatre' ); ?></h2>
				<address class="contact-address__text">
					<strong><?php echo esc_html( get_bloginfo( 'name' ) ); ?></strong><br>
					<?php esc_html_e( 'Theatre Square', 'northfield-theatre' ); ?><br>
					<?php esc_html_e( 'Northfield', 'northfield-theatre' ); ?><br>
					<?php esc_html_e( 'West Yorkshire', 'northfield-theatre' ); ?><br>
					<?php esc_html_e( 'NF1 2AB', 'northfield-theatre' ); ?>
				</address>
				<ul class="contact-address__social" role="list" aria-label="<?php esc_attr_e( 'Our social channels', 'northfield-theatre' ); ?>">
					<li><a href="https://facebook.com/northfieldtheatre" rel="noopener noreferrer" target="_blank"><?php echo northfield_icon( 'facebook', 18 ); ?> Facebook</a></li>
					<li><a href="https://instagram.com/northfieldtheatre" rel="noopener noreferrer" target="_blank"><?php echo northfield_icon( 'instagram', 18 ); ?> Instagram</a></li>
					<li><a href="https://twitter.com/northfieldthtr" rel="noopener noreferrer" target="_blank"><?php echo northfield_icon( 'twitter', 18 ); ?> Twitter</a></li>
				</ul>
			</div>
			<div class="contact-address__map" aria-label="<?php esc_attr_e( 'Map showing theatre location', 'northfield-theatre' ); ?>">
				<div class="contact-address__map-inner">
					<span class="contact-address__map-icon" aria-hidden="true">📍</span>
					<p class="contact-address__map-title"><?php esc_html_e( 'Theatre Square, Northfield', 'northfield-theatre' ); ?></p>
					<p class="contact-address__map-note"><?php esc_html_e( 'An interactive map would load here in production, using Google Maps or Leaflet / OpenStreetMap.', 'northfield-theatre' ); ?></p>
					<a href="<?php echo esc_url( home_url( '/visit/#getting-here' ) ); ?>" class="btn btn--outline btn--sm"><?php esc_html_e( 'Getting here', 'northfield-theatre' ); ?></a>
				</div>
			</div>
		</div>
	</section>

</article>

<?php
get_footer();
