<?php
/**
 * Template Name: Checkout
 *
 * Checkout placeholder page. In production, this is where the
 * Spektrix Express Checkout iframe would load.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

get_header();
?>

<div class="checkout-page container">
	<header class="page-header">
		<h1 class="page-header__title"><?php esc_html_e( 'Checkout', 'northfield-theatre' ); ?></h1>
	</header>

	<div class="checkout-layout">
		<div class="checkout-main">
			<!-- Spektrix iframe placeholder -->
			<div class="checkout-iframe-placeholder">
				<div class="checkout-iframe-placeholder__icon" aria-hidden="true">
					<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
						<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
					</svg>
				</div>
				<h2 class="checkout-iframe-placeholder__title">
					<?php esc_html_e( 'Spektrix Express Checkout', 'northfield-theatre' ); ?>
				</h2>
				<p class="checkout-iframe-placeholder__text">
					<?php esc_html_e( 'In production, the Spektrix Express Checkout iframe would load here. The basket session would be passed to Spektrix and customers would complete payment securely on Spektrix-hosted pages.', 'northfield-theatre' ); ?>
				</p>
				<p class="checkout-iframe-placeholder__note">
					<?php esc_html_e( 'This is a portfolio demonstration — no real payment processing occurs.', 'northfield-theatre' ); ?>
				</p>
			</div>

			<!-- Basket items being "checked out" -->
			<div class="checkout-items" id="checkout-items">
				<h3><?php esc_html_e( 'Your Order', 'northfield-theatre' ); ?></h3>
				<div id="checkout-items-list">
					<!-- Populated by JavaScript -->
				</div>
				<div class="checkout-total">
					<span><?php esc_html_e( 'Total:', 'northfield-theatre' ); ?></span>
					<span id="checkout-total-amount">£0.00</span>
				</div>
			</div>

			<button class="btn btn--primary btn--lg btn--full checkout-pay-btn" disabled>
				<?php esc_html_e( 'Complete Payment', 'northfield-theatre' ); ?>
			</button>
		</div>
	</div>
</div>

<?php
get_footer();
