<?php
/**
 * Template Name: Seating Plan
 *
 * Interactive seating plan for the Main Auditorium. Clickable zones
 * reveal pricing and accessibility info. Fully keyboard accessible.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

get_header();

// Price bands displayed in the legend and zone panel.
$price_bands = array(
	'premium'    => array(
		'label'    => __( 'Premium', 'northfield-theatre' ),
		'price'    => 45,
		'swatch'   => '#1B4D3E',
	),
	'band-a'     => array(
		'label'    => __( 'Band A', 'northfield-theatre' ),
		'price'    => 35,
		'swatch'   => '#2F6B58',
	),
	'band-b'     => array(
		'label'    => __( 'Band B', 'northfield-theatre' ),
		'price'    => 25,
		'swatch'   => '#E8A33D',
	),
	'restricted' => array(
		'label'    => __( 'Restricted View', 'northfield-theatre' ),
		'price'    => 15,
		'swatch'   => '#B45309',
	),
);

// Zones: each one is a clickable region on the SVG. Data used by both
// the SVG rendering (via data-zone) and the info panel (via JSON-LD block).
$zones = array(
	'stalls-centre' => array(
		'label'     => __( 'Stalls — Centre', 'northfield-theatre' ),
		'band'      => 'premium',
		'rows'      => __( 'Rows D–K', 'northfield-theatre' ),
		'seats'     => 280,
		'notes'     => __( 'The best sightlines in the house, directly facing the stage.', 'northfield-theatre' ),
		'access'    => __( 'Level access via the main foyer. Aisle-transfer seats on rows F and J.', 'northfield-theatre' ),
	),
	'stalls-front' => array(
		'label'     => __( 'Stalls — Front', 'northfield-theatre' ),
		'band'      => 'band-a',
		'rows'      => __( 'Rows A–C', 'northfield-theatre' ),
		'seats'     => 90,
		'notes'     => __( 'Close to the action. Note that sightlines to elevated set pieces may be limited.', 'northfield-theatre' ),
		'access'    => __( 'Step-free from the foyer. Six wheelchair spaces on row A.', 'northfield-theatre' ),
	),
	'stalls-left' => array(
		'label'     => __( 'Stalls — Left', 'northfield-theatre' ),
		'band'      => 'band-a',
		'rows'      => __( 'Rows D–R (left block)', 'northfield-theatre' ),
		'seats'     => 160,
		'notes'     => __( 'Side-block seating with a good angle on the stage.', 'northfield-theatre' ),
		'access'    => __( 'Level access. Companion seats available next to wheelchair positions.', 'northfield-theatre' ),
	),
	'stalls-right' => array(
		'label'     => __( 'Stalls — Right', 'northfield-theatre' ),
		'band'      => 'band-a',
		'rows'      => __( 'Rows D–R (right block)', 'northfield-theatre' ),
		'seats'     => 160,
		'notes'     => __( 'Side-block seating with a good angle on the stage.', 'northfield-theatre' ),
		'access'    => __( 'Level access. Companion seats available next to wheelchair positions.', 'northfield-theatre' ),
	),
	'stalls-rear' => array(
		'label'     => __( 'Stalls — Rear', 'northfield-theatre' ),
		'band'      => 'band-b',
		'rows'      => __( 'Rows L–R (centre block)', 'northfield-theatre' ),
		'seats'     => 180,
		'notes'     => __( 'Elevated slightly towards the back — great overall view.', 'northfield-theatre' ),
		'access'    => __( 'Level access via the side foyer.', 'northfield-theatre' ),
	),
	'dress-centre' => array(
		'label'     => __( 'Dress Circle — Centre', 'northfield-theatre' ),
		'band'      => 'premium',
		'rows'      => __( 'Rows A–E', 'northfield-theatre' ),
		'seats'     => 140,
		'notes'     => __( 'The traditional "best seats in the house" — elevated with an uninterrupted view.', 'northfield-theatre' ),
		'access'    => __( 'Lift access to the Dress Circle level. Two wheelchair spaces on row A.', 'northfield-theatre' ),
	),
	'dress-side' => array(
		'label'     => __( 'Dress Circle — Side', 'northfield-theatre' ),
		'band'      => 'band-a',
		'rows'      => __( 'Rows A–E (side blocks)', 'northfield-theatre' ),
		'seats'     => 80,
		'notes'     => __( 'Sloped blocks on each side with an angled view of the stage.', 'northfield-theatre' ),
		'access'    => __( 'Lift access to the Dress Circle level.', 'northfield-theatre' ),
	),
	'upper-circle' => array(
		'label'     => __( 'Upper Circle', 'northfield-theatre' ),
		'band'      => 'band-b',
		'rows'      => __( 'Rows A–F', 'northfield-theatre' ),
		'seats'     => 180,
		'notes'     => __( 'Bright, steep gallery with a full view of the stage. Excellent value.', 'northfield-theatre' ),
		'access'    => __( 'Lift access to the Upper Circle foyer; a short flight of steps to the seats.', 'northfield-theatre' ),
	),
	'upper-rear' => array(
		'label'     => __( 'Upper Circle — Rear', 'northfield-theatre' ),
		'band'      => 'restricted',
		'rows'      => __( 'Rows G–H', 'northfield-theatre' ),
		'seats'     => 60,
		'notes'     => __( 'Back rows of the gallery — sightlines to downstage can be slightly obscured.', 'northfield-theatre' ),
		'access'    => __( 'Lift access to the Upper Circle foyer; a short flight of steps to the seats.', 'northfield-theatre' ),
	),
	'box-left' => array(
		'label'     => __( 'Box — Stage Left', 'northfield-theatre' ),
		'band'      => 'premium',
		'rows'      => __( 'Private box (4 seats)', 'northfield-theatre' ),
		'seats'     => 4,
		'notes'     => __( 'Intimate, private box with a dedicated welcome from front of house.', 'northfield-theatre' ),
		'access'    => __( 'Level access. Complimentary programmes included.', 'northfield-theatre' ),
	),
	'box-right' => array(
		'label'     => __( 'Box — Stage Right', 'northfield-theatre' ),
		'band'      => 'premium',
		'rows'      => __( 'Private box (4 seats)', 'northfield-theatre' ),
		'seats'     => 4,
		'notes'     => __( 'Intimate, private box with a dedicated welcome from front of house.', 'northfield-theatre' ),
		'access'    => __( 'Level access. Complimentary programmes included.', 'northfield-theatre' ),
	),
);
?>

<article class="seating-page">

	<header class="seating-hero section--dark">
		<div class="container seating-hero__inner">
			<p class="seating-hero__eyebrow"><?php esc_html_e( 'Main Auditorium', 'northfield-theatre' ); ?></p>
			<h1 class="seating-hero__title"><?php esc_html_e( 'The house, from above.', 'northfield-theatre' ); ?></h1>
			<p class="seating-hero__lead">
				<?php esc_html_e( 'Our 1,200-seat main auditorium has a generous horseshoe — two tiers, a wide stalls, and a pair of private boxes. Tap any section below to see prices, access notes, and sightlines.', 'northfield-theatre' ); ?>
			</p>
		</div>
	</header>

	<div class="seating-main">
		<div class="container">
			<div class="seating-layout">

				<!-- PLAN + LEGEND -->
				<div class="seating-visual">

					<div class="seating-legend" aria-label="<?php esc_attr_e( 'Price bands', 'northfield-theatre' ); ?>">
						<h2 class="seating-legend__title"><?php esc_html_e( 'Price bands', 'northfield-theatre' ); ?></h2>
						<ul class="seating-legend__list" role="list">
							<?php foreach ( $price_bands as $key => $band ) : ?>
								<li class="seating-legend__item">
									<span class="seating-legend__swatch" style="background: <?php echo esc_attr( $band['swatch'] ); ?>" aria-hidden="true"></span>
									<span class="seating-legend__label"><?php echo esc_html( $band['label'] ); ?></span>
									<span class="seating-legend__price"><?php echo esc_html( northfield_format_price( $band['price'] ) ); ?></span>
								</li>
							<?php endforeach; ?>
						</ul>
					</div>

					<div class="seating-plan" role="img" aria-label="<?php esc_attr_e( 'Interactive seating plan for the Main Auditorium. Use Tab to move between sections.', 'northfield-theatre' ); ?>">
						<svg class="seating-plan__svg"
						     viewBox="0 0 800 720"
						     xmlns="http://www.w3.org/2000/svg"
						     role="presentation">
							<!-- Stage -->
							<g class="seating-plan__stage" aria-hidden="true">
								<path d="M 150 40 Q 400 10 650 40 L 650 95 L 150 95 Z" fill="#1A1A1A" />
								<text x="400" y="70" text-anchor="middle" fill="#FFFFFF" font-family="Fraunces, serif" font-size="22" font-weight="700" letter-spacing="6">STAGE</text>
							</g>

							<!-- Level label: Stalls -->
							<text class="seating-plan__level-label" x="400" y="130" text-anchor="middle" aria-hidden="true">STALLS</text>

							<!-- Boxes -->
							<g class="seating-plan__zone" data-zone="box-left" tabindex="0" role="button" aria-label="Box, Stage Left. Premium, £45.">
								<rect x="60" y="140" width="70" height="80" rx="6" class="seating-plan__shape seating-plan__shape--premium" />
								<text x="95" y="185" text-anchor="middle" class="seating-plan__text">Box</text>
							</g>
							<g class="seating-plan__zone" data-zone="box-right" tabindex="0" role="button" aria-label="Box, Stage Right. Premium, £45.">
								<rect x="670" y="140" width="70" height="80" rx="6" class="seating-plan__shape seating-plan__shape--premium" />
								<text x="705" y="185" text-anchor="middle" class="seating-plan__text">Box</text>
							</g>

							<!-- Stalls front (Band A, rows A–C) -->
							<g class="seating-plan__zone" data-zone="stalls-front" tabindex="0" role="button" aria-label="Stalls, Front. Band A, £35.">
								<path d="M 170 140 Q 400 125 630 140 L 600 195 Q 400 182 200 195 Z" class="seating-plan__shape seating-plan__shape--band-a" />
								<text x="400" y="170" text-anchor="middle" class="seating-plan__text">Front · A–C</text>
							</g>

							<!-- Stalls centre premium (rows D–K) -->
							<g class="seating-plan__zone" data-zone="stalls-centre" tabindex="0" role="button" aria-label="Stalls, Centre. Premium, £45.">
								<path d="M 240 210 L 560 210 L 560 360 L 240 360 Z" class="seating-plan__shape seating-plan__shape--premium" />
								<text x="400" y="275" text-anchor="middle" class="seating-plan__text">Stalls · Centre</text>
								<text x="400" y="300" text-anchor="middle" class="seating-plan__text seating-plan__text--sub">Rows D–K</text>
							</g>

							<!-- Stalls left (Band A) -->
							<g class="seating-plan__zone" data-zone="stalls-left" tabindex="0" role="button" aria-label="Stalls, Left block. Band A, £35.">
								<path d="M 150 210 L 225 210 L 225 425 L 150 425 Z" class="seating-plan__shape seating-plan__shape--band-a" />
								<text x="188" y="320" text-anchor="middle" class="seating-plan__text seating-plan__text--vertical" transform="rotate(-90 188 320)">Left D–R</text>
							</g>

							<!-- Stalls right (Band A) -->
							<g class="seating-plan__zone" data-zone="stalls-right" tabindex="0" role="button" aria-label="Stalls, Right block. Band A, £35.">
								<path d="M 575 210 L 650 210 L 650 425 L 575 425 Z" class="seating-plan__shape seating-plan__shape--band-a" />
								<text x="612" y="320" text-anchor="middle" class="seating-plan__text seating-plan__text--vertical" transform="rotate(90 612 320)">Right D–R</text>
							</g>

							<!-- Stalls rear centre (Band B, rows L–R) -->
							<g class="seating-plan__zone" data-zone="stalls-rear" tabindex="0" role="button" aria-label="Stalls, Rear. Band B, £25.">
								<path d="M 240 375 L 560 375 L 560 440 L 240 440 Z" class="seating-plan__shape seating-plan__shape--band-b" />
								<text x="400" y="413" text-anchor="middle" class="seating-plan__text">Rear · L–R</text>
							</g>

							<!-- Level divider -->
							<line x1="60" y1="465" x2="740" y2="465" stroke="#E5E5E5" stroke-width="1" stroke-dasharray="3 5" aria-hidden="true" />
							<text class="seating-plan__level-label" x="400" y="490" text-anchor="middle" aria-hidden="true">DRESS CIRCLE</text>

							<!-- Dress Circle centre (Premium) -->
							<g class="seating-plan__zone" data-zone="dress-centre" tabindex="0" role="button" aria-label="Dress Circle, Centre. Premium, £45.">
								<path d="M 210 510 Q 400 495 590 510 L 570 580 Q 400 565 230 580 Z" class="seating-plan__shape seating-plan__shape--premium" />
								<text x="400" y="540" text-anchor="middle" class="seating-plan__text">Dress Circle · Centre</text>
								<text x="400" y="562" text-anchor="middle" class="seating-plan__text seating-plan__text--sub">Rows A–E</text>
							</g>

							<!-- Dress Circle sides (Band A) -->
							<g class="seating-plan__zone" data-zone="dress-side" tabindex="0" role="button" aria-label="Dress Circle, Sides. Band A, £35.">
								<path d="M 100 510 Q 140 495 205 510 L 225 580 Q 150 570 110 580 Z" class="seating-plan__shape seating-plan__shape--band-a" />
							</g>
							<g class="seating-plan__zone" data-zone="dress-side" tabindex="0" role="button" aria-hidden="true" aria-label="Dress Circle, Sides. Band A, £35.">
								<path d="M 595 510 Q 660 495 700 510 L 690 580 Q 650 570 575 580 Z" class="seating-plan__shape seating-plan__shape--band-a" />
							</g>

							<!-- Upper Circle main (Band B) -->
							<g class="seating-plan__zone" data-zone="upper-circle" tabindex="0" role="button" aria-label="Upper Circle. Band B, £25.">
								<path d="M 150 605 Q 400 588 650 605 L 625 655 Q 400 640 175 655 Z" class="seating-plan__shape seating-plan__shape--band-b" />
								<text x="400" y="636" text-anchor="middle" class="seating-plan__text">Upper Circle · A–F</text>
							</g>

							<!-- Upper Circle rear (restricted) -->
							<g class="seating-plan__zone" data-zone="upper-rear" tabindex="0" role="button" aria-label="Upper Circle Rear, restricted view. £15.">
								<path d="M 190 670 L 610 670 L 590 705 L 210 705 Z" class="seating-plan__shape seating-plan__shape--restricted" />
								<text x="400" y="693" text-anchor="middle" class="seating-plan__text">Gallery · G–H</text>
							</g>
						</svg>
					</div>

					<p class="seating-plan__hint" aria-live="polite">
						<?php esc_html_e( 'Select a section to see prices and access notes.', 'northfield-theatre' ); ?>
					</p>
				</div>

				<!-- ZONE DETAIL PANEL -->
				<aside class="seating-detail" aria-labelledby="zone-detail-heading">
					<div class="seating-detail__inner" id="seating-detail-panel">
						<p class="seating-detail__eyebrow" id="seating-detail-band-label"><?php esc_html_e( 'Select a zone', 'northfield-theatre' ); ?></p>
						<h2 class="seating-detail__title" id="zone-detail-heading">
							<?php esc_html_e( 'Main Auditorium', 'northfield-theatre' ); ?>
						</h2>
						<p class="seating-detail__intro" id="seating-detail-intro">
							<?php esc_html_e( 'Click any section of the plan on the left to see the ticket price, capacity, sightlines and access notes for that part of the house.', 'northfield-theatre' ); ?>
						</p>

						<div class="seating-detail__price-block" id="seating-detail-price-block" hidden>
							<span class="seating-detail__price-label"><?php esc_html_e( 'Price from', 'northfield-theatre' ); ?></span>
							<span class="seating-detail__price" id="seating-detail-price">£—</span>
						</div>

						<dl class="seating-detail__list" id="seating-detail-meta" hidden>
							<div class="seating-detail__list-row">
								<dt><?php esc_html_e( 'Rows', 'northfield-theatre' ); ?></dt>
								<dd id="seating-detail-rows">—</dd>
							</div>
							<div class="seating-detail__list-row">
								<dt><?php esc_html_e( 'Seats', 'northfield-theatre' ); ?></dt>
								<dd id="seating-detail-seats">—</dd>
							</div>
							<div class="seating-detail__list-row">
								<dt><?php esc_html_e( 'Sightlines', 'northfield-theatre' ); ?></dt>
								<dd id="seating-detail-notes">—</dd>
							</div>
							<div class="seating-detail__list-row">
								<dt><?php esc_html_e( 'Access', 'northfield-theatre' ); ?></dt>
								<dd id="seating-detail-access">—</dd>
							</div>
						</dl>

						<a href="<?php echo esc_url( home_url( '/whats-on/' ) ); ?>" class="btn btn--primary seating-detail__cta">
							<?php esc_html_e( "Book a performance", 'northfield-theatre' ); ?>
						</a>
					</div>
				</aside>

			</div>
		</div>
	</div>

	<!-- SECONDARY INFO -->
	<section class="seating-info section--cream">
		<div class="container seating-info__grid">
			<div class="seating-info__col">
				<h2><?php esc_html_e( 'Access at a glance', 'northfield-theatre' ); ?></h2>
				<ul class="seating-info__list" role="list">
					<li><?php esc_html_e( '6 wheelchair spaces in the stalls, 2 in the Dress Circle', 'northfield-theatre' ); ?></li>
					<li><?php esc_html_e( 'Lift access to all levels including Upper Circle foyer', 'northfield-theatre' ); ?></li>
					<li><?php esc_html_e( 'Infrared hearing loop covering every seat', 'northfield-theatre' ); ?></li>
					<li><?php esc_html_e( 'Aisle-transfer seats on stalls rows F and J', 'northfield-theatre' ); ?></li>
					<li><?php esc_html_e( 'Assistance dogs welcome throughout the auditorium', 'northfield-theatre' ); ?></li>
				</ul>
				<a href="<?php echo esc_url( home_url( '/access/' ) ); ?>" class="btn btn--outline btn--sm">
					<?php esc_html_e( 'Full access information', 'northfield-theatre' ); ?>
				</a>
			</div>
			<div class="seating-info__col">
				<h2><?php esc_html_e( 'Good to know', 'northfield-theatre' ); ?></h2>
				<ul class="seating-info__list" role="list">
					<li><?php esc_html_e( 'Ticket prices vary by performance — the plan above shows our standard bands.', 'northfield-theatre' ); ?></li>
					<li><?php esc_html_e( 'Under-26s pay £12 for any B-band or restricted-view seat.', 'northfield-theatre' ); ?></li>
					<li><?php esc_html_e( 'Groups of 10+ receive a 15% discount — contact the box office to book.', 'northfield-theatre' ); ?></li>
					<li><?php esc_html_e( 'An essential companion ticket is complimentary for disabled visitors.', 'northfield-theatre' ); ?></li>
				</ul>
				<a href="<?php echo esc_url( home_url( '/visit/' ) ); ?>" class="btn btn--outline btn--sm">
					<?php esc_html_e( 'Plan your visit', 'northfield-theatre' ); ?>
				</a>
			</div>
		</div>
	</section>

</article>

<script type="application/json" id="seating-zones-data">
<?php
$zone_payload = array();
foreach ( $zones as $key => $zone ) {
	$band = $price_bands[ $zone['band'] ];
	$zone_payload[ $key ] = array(
		'label'       => $zone['label'],
		'bandLabel'   => $band['label'],
		'bandKey'     => $zone['band'],
		'price'       => northfield_format_price( $band['price'] ),
		'swatch'      => $band['swatch'],
		'rows'        => $zone['rows'],
		'seats'       => $zone['seats'],
		'notes'       => $zone['notes'],
		'access'      => $zone['access'],
	);
}
echo wp_json_encode( $zone_payload );
?>
</script>

<?php
get_footer();
