<?php
/**
 * Template Name: Moorside Town Hall (microsite)
 *
 * Branded sub-section for our second venue. Demonstrates the
 * domain-mapped microsite concept: a `.moorside-site` body class
 * overrides the global palette and typographic accents so this section
 * reads as its own identity while sharing the parent theme's plumbing.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

get_header();

// Fetch Moorside events only.
$moorside_events = northfield_get_events( array(
	'venue'   => 'Moorside Town Hall',
	'orderby' => 'date',
	'order'   => 'ASC',
) );
?>

<article class="moorside-site">

	<!-- Microsite header bar -->
	<div class="moorside-bar" role="banner">
		<div class="container moorside-bar__inner">
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="moorside-bar__parent">
				← <?php esc_html_e( 'Back to Northfield Theatre', 'northfield-theatre' ); ?>
			</a>
			<span class="moorside-bar__badge">
				<?php esc_html_e( 'A Northfield Theatre venue', 'northfield-theatre' ); ?>
			</span>
		</div>
	</div>

	<!-- Hero -->
	<header class="moorside-hero">
		<div class="container moorside-hero__inner">
			<p class="moorside-hero__eyebrow"><?php esc_html_e( 'Moorside Town Hall', 'northfield-theatre' ); ?></p>
			<h1 class="moorside-hero__title">
				<?php esc_html_e( 'Live music, new theatre, and the odd folk night in the finest Victorian hall in West Yorkshire.', 'northfield-theatre' ); ?>
			</h1>
			<p class="moorside-hero__lead">
				<?php esc_html_e( 'Since 2024 we\'ve programmed the stage at Moorside Town Hall — a 280-seat jewel with soaring ceilings, a sprung floor, and a bar that stays open late.', 'northfield-theatre' ); ?>
			</p>
			<div class="moorside-hero__facts">
				<div>
					<span class="moorside-hero__num">280</span>
					<span class="moorside-hero__label"><?php esc_html_e( 'Seat capacity', 'northfield-theatre' ); ?></span>
				</div>
				<div>
					<span class="moorside-hero__num">1875</span>
					<span class="moorside-hero__label"><?php esc_html_e( 'Year built', 'northfield-theatre' ); ?></span>
				</div>
				<div>
					<span class="moorside-hero__num">10</span>
					<span class="moorside-hero__label"><?php esc_html_e( 'Min walk from station', 'northfield-theatre' ); ?></span>
				</div>
			</div>
		</div>
	</header>

	<!-- Intro band -->
	<section class="moorside-intro section">
		<div class="container moorside-intro__grid">
			<div>
				<p class="moorside-intro__eyebrow"><?php esc_html_e( 'About the hall', 'northfield-theatre' ); ?></p>
				<h2 class="moorside-intro__heading">
					<?php esc_html_e( 'A grand Victorian room with a genuinely friendly reception.', 'northfield-theatre' ); ?>
				</h2>
			</div>
			<div class="moorside-intro__body">
				<p>
					<?php esc_html_e( 'Designed by the Leeds architect John Gibson and opened in 1875, Moorside Town Hall is a Grade I listed building in the heart of the town. The main hall — an oak-panelled first-floor room with an enormous pipe organ at one end — is one of the finest small performance spaces in the North.', 'northfield-theatre' ); ?>
				</p>
				<p>
					<?php esc_html_e( 'We took on the programming of the hall in 2024 as part of a partnership with West Yorkshire Council. Everything you see below is curated by Northfield Theatre\'s Studio team, with a remit to champion new writing, folk and roots music, and work made by and for the Upper Calder Valley.', 'northfield-theatre' ); ?>
				</p>
			</div>
		</div>
	</section>

	<!-- What's on at Moorside -->
	<section class="moorside-whats-on section--cream">
		<div class="container">
			<div class="moorside-whats-on__header">
				<h2 class="moorside-whats-on__heading"><?php esc_html_e( 'What\'s on at Moorside', 'northfield-theatre' ); ?></h2>
				<a href="<?php echo esc_url( home_url( '/whats-on/' ) ); ?>?venue=Moorside%20Town%20Hall" class="btn btn--outline-moorside btn--sm">
					<?php esc_html_e( 'Full listing', 'northfield-theatre' ); ?>
				</a>
			</div>

			<?php if ( ! empty( $moorside_events ) ) : ?>
				<div class="moorside-events">
					<?php foreach ( $moorside_events as $event ) : ?>
						<?php
						$first_date   = northfield_get_event_first_date( $event['id'] );
						$last_date    = northfield_get_event_last_date( $event['id'] );
						$date_display = northfield_format_event_date_range( $first_date, $last_date );
						$price_display = northfield_format_event_price_range( $event );
						$event_url    = home_url( '/events/' . $event['slug'] . '/' );
						$thumb_path   = NORTHFIELD_DIR . '/assets/images/' . $event['thumbnail'];
						$has_thumb    = ! empty( $event['thumbnail'] ) && file_exists( $thumb_path );
						?>
						<article class="moorside-event">
							<a href="<?php echo esc_url( $event_url ); ?>" class="moorside-event__link">
								<div class="moorside-event__image">
									<?php if ( $has_thumb ) : ?>
										<img src="<?php echo esc_url( NORTHFIELD_URI . '/assets/images/' . $event['thumbnail'] ); ?>"
										     alt=""
										     loading="lazy"
										     decoding="async" />
									<?php endif; ?>
									<span class="moorside-event__category"><?php echo esc_html( $event['category'] ); ?></span>
								</div>
								<div class="moorside-event__body">
									<h3 class="moorside-event__title"><?php echo esc_html( $event['name'] ); ?></h3>
									<p class="moorside-event__date"><?php echo esc_html( $date_display ); ?></p>
									<p class="moorside-event__summary"><?php echo esc_html( $event['summary'] ); ?></p>
									<div class="moorside-event__meta">
										<span class="moorside-event__price"><?php echo esc_html( $price_display ); ?></span>
										<span class="moorside-event__more"><?php esc_html_e( 'Book', 'northfield-theatre' ); ?> →</span>
									</div>
								</div>
							</a>
						</article>
					<?php endforeach; ?>
				</div>
			<?php else : ?>
				<p><?php esc_html_e( 'The next programme is being finalised. Check back soon, or sign up below to be notified.', 'northfield-theatre' ); ?></p>
			<?php endif; ?>
		</div>
	</section>

	<!-- Getting here -->
	<section class="moorside-visit section">
		<div class="container moorside-visit__grid">
			<div>
				<h2 class="moorside-visit__heading"><?php esc_html_e( 'Getting to Moorside', 'northfield-theatre' ); ?></h2>
				<ul class="moorside-visit__list" role="list">
					<li>
						<strong><?php esc_html_e( 'By train:', 'northfield-theatre' ); ?></strong>
						<?php esc_html_e( 'Moorside station is on the Calder Valley line, with regular services from Manchester Victoria (35 mins), Leeds (55 mins), Halifax (25 mins), and Hebden Bridge (4 mins). It\'s a 10-minute walk from the station to the Town Hall.', 'northfield-theatre' ); ?>
					</li>
					<li>
						<strong><?php esc_html_e( 'By car:', 'northfield-theatre' ); ?></strong>
						<?php esc_html_e( 'Free evening parking is available at Moorside Health Centre car park (a 3-minute walk) from 6pm.', 'northfield-theatre' ); ?>
					</li>
					<li>
						<strong><?php esc_html_e( 'By bus:', 'northfield-theatre' ); ?></strong>
						<?php esc_html_e( 'The 589 and 592 services stop outside the Town Hall. Check Metro for timetables.', 'northfield-theatre' ); ?>
					</li>
				</ul>
			</div>
			<aside class="moorside-visit__access">
				<h3><?php esc_html_e( 'Access', 'northfield-theatre' ); ?></h3>
				<p>
					<?php esc_html_e( 'The Town Hall has a platform lift to the main hall. Two wheelchair spaces are reserved at the front of the hall. An infrared hearing enhancement system is in place, and assistance dogs are welcome.', 'northfield-theatre' ); ?>
				</p>
				<p>
					<?php esc_html_e( 'For access bookings or to discuss specific requirements, call our box office on 01484 567 891 or email access@northfieldtheatre.co.uk.', 'northfield-theatre' ); ?>
				</p>
				<a href="<?php echo esc_url( home_url( '/access/' ) ); ?>" class="btn btn--outline-moorside btn--sm">
					<?php esc_html_e( 'Full access information', 'northfield-theatre' ); ?>
				</a>
			</aside>
		</div>
	</section>

	<!-- Mailing list CTA -->
	<section class="moorside-cta">
		<div class="container moorside-cta__inner">
			<h2 class="moorside-cta__heading">
				<?php esc_html_e( 'Folk, theatre, curious nights out.', 'northfield-theatre' ); ?>
			</h2>
			<p class="moorside-cta__body">
				<?php esc_html_e( 'Sign up to the dedicated Moorside mailing list and we\'ll let you know what\'s coming up a month in advance — no more, no less.', 'northfield-theatre' ); ?>
			</p>
			<form class="moorside-cta__form" action="#" method="post" novalidate>
				<label class="sr-only" for="moorside-email"><?php esc_html_e( 'Email address', 'northfield-theatre' ); ?></label>
				<input type="email"
				       id="moorside-email"
				       name="email"
				       class="moorside-cta__input"
				       placeholder="<?php esc_attr_e( 'your@email.com', 'northfield-theatre' ); ?>"
				       autocomplete="email"
				       required />
				<button type="submit" class="moorside-cta__submit">
					<?php esc_html_e( 'Sign up', 'northfield-theatre' ); ?>
				</button>
			</form>
		</div>
	</section>

</article>

<?php
get_footer();
