<?php
/**
 * Desktop and mobile navigation.
 *
 * Desktop: horizontal nav bar with dropdown sub-menus.
 * Mobile: fullscreen overlay triggered by hamburger button.
 *
 * @package Northfield_Theatre
 * @since 1.0.0
 */

$nav_items = array(
	array(
		'label' => __( "What's On", 'northfield-theatre' ),
		'url'   => home_url( '/whats-on/' ),
	),
	array(
		'label'    => __( 'Your Visit', 'northfield-theatre' ),
		'url'      => home_url( '/visit/' ),
		'children' => array(
			array( 'label' => __( 'Getting Here', 'northfield-theatre' ), 'url' => home_url( '/visit/#getting-here' ) ),
			array( 'label' => __( 'Seating Plan', 'northfield-theatre' ), 'url' => home_url( '/seating-plan/' ) ),
			array( 'label' => __( 'Access', 'northfield-theatre' ), 'url' => home_url( '/access/' ) ),
			array( 'label' => __( 'Eat & Drink', 'northfield-theatre' ), 'url' => home_url( '/visit/#eat-drink' ) ),
			array( 'label' => __( 'FAQs', 'northfield-theatre' ), 'url' => home_url( '/visit/#faqs' ) ),
		),
	),
	array(
		'label' => __( 'Take Part', 'northfield-theatre' ),
		'url'   => home_url( '/take-part/' ),
	),
	array(
		'label'    => __( 'Our Story', 'northfield-theatre' ),
		'url'      => home_url( '/our-story/' ),
		'children' => array(
			array( 'label' => __( 'About Northfield', 'northfield-theatre' ), 'url' => home_url( '/our-story/' ) ),
			array( 'label' => __( 'Moorside Town Hall', 'northfield-theatre' ), 'url' => home_url( '/moorside/' ) ),
			array( 'label' => __( 'Contact', 'northfield-theatre' ), 'url' => home_url( '/contact/' ) ),
		),
	),
	array(
		'label' => __( 'News', 'northfield-theatre' ),
		'url'   => home_url( '/news/' ),
	),
	array(
		'label' => __( 'Hire', 'northfield-theatre' ),
		'url'   => home_url( '/hire/' ),
	),
);
?>

<!-- Desktop Navigation -->
<nav class="nav-bar" aria-label="<?php esc_attr_e( 'Main navigation', 'northfield-theatre' ); ?>">
	<div class="nav-bar__inner container">
		<ul class="primary-nav" role="list">
			<?php foreach ( $nav_items as $item ) : ?>
				<li class="primary-nav__item">
					<a href="<?php echo esc_url( $item['url'] ); ?>"
					   class="primary-nav__link"
					   <?php if ( ! empty( $item['children'] ) ) : ?>
					   		aria-haspopup="true"
					   		aria-expanded="false"
					   <?php endif; ?>
					   <?php
					   		// Mark current page
					   		$current_url = trailingslashit( home_url( add_query_arg( array(), '' ) ) );
					   		if ( trailingslashit( $item['url'] ) === $current_url ) {
					   			echo 'aria-current="page"';
					   		}
					   ?>
					>
						<?php echo esc_html( $item['label'] ); ?>
						<?php if ( ! empty( $item['children'] ) ) : ?>
							<?php echo northfield_icon( 'chevron-down', 12, 'icon-chevron' ); ?>
						<?php endif; ?>
					</a>
					<?php if ( ! empty( $item['children'] ) ) : ?>
						<ul class="primary-nav__dropdown" role="list">
							<?php foreach ( $item['children'] as $child ) : ?>
								<li>
									<a href="<?php echo esc_url( $child['url'] ); ?>"
									   class="primary-nav__dropdown-link">
										<?php echo esc_html( $child['label'] ); ?>
									</a>
								</li>
							<?php endforeach; ?>
						</ul>
					<?php endif; ?>
				</li>
			<?php endforeach; ?>
		</ul>
	</div>
</nav>

<!-- Mobile Navigation Overlay -->
<nav class="mobile-nav" id="mobile-nav" aria-label="<?php esc_attr_e( 'Mobile navigation', 'northfield-theatre' ); ?>" aria-hidden="true">
	<div class="mobile-nav__header">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="mobile-nav__logo">
			<?php echo esc_html( get_bloginfo( 'name' ) ); ?>
		</a>
		<button class="mobile-nav__close" id="mobile-nav-close" aria-label="<?php esc_attr_e( 'Close menu', 'northfield-theatre' ); ?>">
			<?php echo northfield_icon( 'close', 24 ); ?>
		</button>
	</div>

	<div class="mobile-nav__search">
		<form role="search" method="get" class="mobile-nav__search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
			<label class="sr-only" for="mobile-search-input"><?php esc_html_e( 'Search', 'northfield-theatre' ); ?></label>
			<input type="search"
			       id="mobile-search-input"
			       class="mobile-nav__search-input"
			       placeholder="<?php esc_attr_e( 'Search events, pages...', 'northfield-theatre' ); ?>"
			       value="<?php echo get_search_query(); ?>"
			       name="s" />
			<button type="submit" class="mobile-nav__search-submit" aria-label="<?php esc_attr_e( 'Submit search', 'northfield-theatre' ); ?>">
				<?php echo northfield_icon( 'search', 20 ); ?>
			</button>
		</form>
	</div>

	<ul class="mobile-nav__menu" role="list">
		<?php foreach ( $nav_items as $item ) : ?>
			<li>
				<a href="<?php echo esc_url( $item['url'] ); ?>" class="mobile-nav__link">
					<?php echo esc_html( $item['label'] ); ?>
				</a>
				<?php if ( ! empty( $item['children'] ) ) : ?>
					<ul class="mobile-nav__submenu" role="list">
						<?php foreach ( $item['children'] as $child ) : ?>
							<li>
								<a href="<?php echo esc_url( $child['url'] ); ?>" class="mobile-nav__submenu-link">
									<?php echo esc_html( $child['label'] ); ?>
								</a>
							</li>
						<?php endforeach; ?>
					</ul>
				<?php endif; ?>
			</li>
		<?php endforeach; ?>
	</ul>

	<div class="mobile-nav__actions">
		<a href="<?php echo esc_url( home_url( '/support/membership/' ) ); ?>" class="mobile-nav__action-link mobile-nav__action-link--support">
			<?php esc_html_e( 'Support us', 'northfield-theatre' ); ?>
		</a>
		<a href="<?php echo esc_url( home_url( '/basket/' ) ); ?>" class="mobile-nav__action-link">
			<?php echo northfield_icon( 'basket', 20 ); ?>
			<?php esc_html_e( 'View Basket', 'northfield-theatre' ); ?>
		</a>
		<a href="#" class="mobile-nav__action-link">
			<?php echo northfield_icon( 'user', 20 ); ?>
			<?php esc_html_e( 'Log In / Register', 'northfield-theatre' ); ?>
		</a>
	</div>
</nav>
