<?php
/**
 * The header for our theme.
 *
 * Displays: doctype, head, skip link, alert banner, top bar, navigation.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="theme-color" content="#1B4D3E">
	<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<a class="skip-link" href="#main-content">
	<?php esc_html_e( 'Skip to main content', 'northfield-theatre' ); ?>
</a>

<div class="demo-banner" role="note" aria-label="<?php esc_attr_e( 'Portfolio demonstration notice', 'northfield-theatre' ); ?>">
	<div class="demo-banner__inner">
		<span class="demo-banner__label"><?php esc_html_e( 'Portfolio demonstration', 'northfield-theatre' ); ?></span>
		<span class="demo-banner__sep" aria-hidden="true">·</span>
		<span class="demo-banner__body"><?php esc_html_e( 'Built by ECORP Consulting Ltd. Northfield Theatre is a fictional venue.', 'northfield-theatre' ); ?></span>
	</div>
</div>

<?php
/**
 * Alert banner — controlled from CMS (Customizer or options page).
 * For Phase 1 we render the markup; CMS integration comes later.
 * The banner is hidden by default via the hidden attribute.
 * To show it, remove the hidden attribute or control via JS/PHP.
 */
$alert_message = get_theme_mod( 'northfield_alert_message', '' );
$alert_visible = ! empty( $alert_message );
?>
<?php if ( $alert_visible ) : ?>
	<div class="alert-banner" id="alert-banner" role="alert">
		<div class="alert-banner__inner container">
			<p class="alert-banner__message">
				<?php echo wp_kses_post( $alert_message ); ?>
			</p>
			<button class="alert-banner__dismiss"
			        id="alert-banner-dismiss"
			        aria-label="<?php esc_attr_e( 'Dismiss alert', 'northfield-theatre' ); ?>">
				<?php echo northfield_icon( 'close', 18 ); ?>
			</button>
		</div>
	</div>
<?php endif; ?>

<header class="site-header" id="site-header" role="banner">
	<!-- Top Bar -->
	<div class="top-bar">
		<div class="top-bar__inner container">
			<!-- Logo -->
			<div class="top-bar__logo">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
					<?php if ( has_custom_logo() ) : ?>
						<?php the_custom_logo(); ?>
					<?php else : ?>
						<span class="top-bar__logo-text">
							<?php echo esc_html( get_bloginfo( 'name' ) ); ?>
						</span>
					<?php endif; ?>
					<span class="top-bar__logo-strapline">
						<?php echo esc_html( get_bloginfo( 'description' ) ); ?>
					</span>
				</a>
			</div>

			<!-- Search (desktop) -->
			<div class="top-bar__search" id="top-bar-search">
				<form role="search"
				      method="get"
				      class="top-bar__search-form"
				      action="<?php echo esc_url( home_url( '/' ) ); ?>"
				      autocomplete="off"
				      aria-haspopup="listbox"
				      aria-expanded="false">
					<label class="sr-only" for="header-search-input">
						<?php esc_html_e( 'Search', 'northfield-theatre' ); ?>
					</label>
					<input type="search"
					       id="header-search-input"
					       class="top-bar__search-input"
					       placeholder="<?php esc_attr_e( 'Search events, pages...', 'northfield-theatre' ); ?>"
					       value="<?php echo get_search_query(); ?>"
					       name="s"
					       aria-autocomplete="list"
					       aria-controls="search-autocomplete-results"
					       autocomplete="off" />
					<button type="submit"
					        class="top-bar__search-submit"
					        aria-label="<?php esc_attr_e( 'Submit search', 'northfield-theatre' ); ?>">
						<?php echo northfield_icon( 'search', 18 ); ?>
					</button>
				</form>
				<div class="search-autocomplete"
				     id="search-autocomplete-results"
				     role="listbox"
				     aria-label="<?php esc_attr_e( 'Matching events', 'northfield-theatre' ); ?>"
				     hidden></div>
			</div>

			<!-- Actions -->
			<div class="top-bar__actions">
				<a href="<?php echo esc_url( home_url( '/support/membership/' ) ); ?>" class="top-bar__support">
					<?php esc_html_e( 'Support us', 'northfield-theatre' ); ?>
				</a>

				<?php get_template_part( 'template-parts/header', 'basket' ); ?>

				<a href="#" class="top-bar__login">
					<?php esc_html_e( 'Log In', 'northfield-theatre' ); ?>
				</a>

				<!-- Mobile menu toggle -->
				<button class="mobile-menu-toggle"
				        id="mobile-menu-toggle"
				        aria-label="<?php esc_attr_e( 'Open menu', 'northfield-theatre' ); ?>"
				        aria-expanded="false"
				        aria-controls="mobile-nav">
					<?php echo northfield_icon( 'menu', 24 ); ?>
				</button>
			</div>
		</div>
	</div>

	<!-- Navigation (desktop bar + mobile overlay) -->
	<?php get_template_part( 'template-parts/header', 'navigation' ); ?>
</header>

<main id="main-content" class="site-main" tabindex="-1">
