<?php
/**
 * Theme header template
 *
 * @package GoAskAuntie
 * @since 1.0.0
 */

namespace BasicWP;

$logo_url = get_theme_file_uri( '/static/img/logo.png' );
$social_twitter  = getFieldValue( 'social_media.twitter' ) ?: 'https://twitter.com/goaskauntieca';
$social_facebook = getFieldValue( 'social_media.facebook' ) ?: 'https://www.facebook.com/Goaskauntieca';
$social_instagram = getFieldValue( 'social_media.instagram' ) ?: 'https://www.instagram.com/goaskauntieca/';
?>

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
	<title><?php wp_title( '' ); ?></title>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<?php wp_head(); ?>
</head>

<body <?php echo body_class(); ?> class="bg-pattern bg-teal-light bg-contain bg-repeat-y bg-top">
	<a class="skip-link" href="#maincontent">
		<?php echo esc_html__( 'Skip to main content' ); ?>
	</a>

	<header role="banner" class="z-50 bg-white fixed top-0 w-full h-auto">
		<!-- Desktop Navigation -->
		<nav class="bg-white px-12 w-full md:flex justify-between items-baseline fixed z-top shadow-xl hidden h-20" aria-label="Main">
			<div class="mr-auto ml-0 w-auto items-start justify-evenly flex">
				<div class="flex-initial">
					<a class="" href="<?php echo esc_url( home_url( '/' ) ); ?>">
						<img src="<?php echo esc_url( $logo_url ); ?>" alt="<?php bloginfo( 'name' ); ?> logo" class="h-16 py-2">
					</a>
				</div>
				<div class="flex items-center">
					<?php
					if ( has_nav_menu( 'main_navigation' ) ) {
						$locations = get_nav_menu_locations();
						$menu = wp_get_nav_menu_items( (int) $locations['main_navigation'] );
						if ( $menu ) {
							$top_items = array_filter( $menu, function( $item ) { return $item->menu_item_parent == 0; } );
							$index = 0;
							foreach ( $top_items as $item ) {
								if ( $index > 0 ) {
									$heart_color = 'text-teal';
									$title_lower = strtolower( $item->title );
									if ( strpos( $title_lower, 'q' ) !== false && strpos( $title_lower, 'a' ) !== false ) {
										$heart_color = '!text-red';
									} elseif ( strpos( $title_lower, 'cedar' ) !== false ) {
										$heart_color = '!text-navy';
									} elseif ( strpos( $title_lower, 'contact' ) !== false ) {
										$heart_color = '!text-teal-light';
									}
									echo '<i class="fa fa-heart self-center ' . esc_attr( $heart_color ) . '"></i>';
								}
								$active_class = ( get_permalink() === $item->url || trailingslashit( get_permalink() ) === trailingslashit( $item->url ) ) ? '!text-purple' : '';
								echo '<div class="group flex-initial mx-3 lg:mx-6">';
								echo '<a class="' . esc_attr( $active_class ) . ' hover:underline font-normal capitalize lg:text-lg xl:text-xl text-sm" href="' . esc_url( $item->url ) . '">' . esc_html( $item->title ) . '</a>';
								echo '</div>';
								$index++;
							}
						}
					}
					?>
				</div>
			</div>

			<!-- Social Media Icons -->
			<div class="mx-auto flex justify-center place-items-center flex-wrap h-full flex-row md:mx-0 w-auto">
				<a href="<?php echo esc_url( $social_twitter ); ?>"><span class="fa-stack fa-lg mx-1 font-extralight text-purple mt-2"><i class="fa fa-circle fa-stack-2x"></i><i class="fab fa-twitter text-white fa-stack-1x"></i></span></a>
				<a href="<?php echo esc_url( $social_facebook ); ?>"><span class="fa-stack fa-lg mx-1 font-extralight text-purple mt-2"><i class="fa fa-circle fa-stack-2x"></i><i class="fab fa-facebook-f text-white fa-stack-1x"></i></span></a>
				<a href="<?php echo esc_url( $social_instagram ); ?>"><span class="fa-stack fa-lg mx-1 font-extralight text-purple mt-2"><i class="fa fa-circle fa-stack-2x"></i><i class="fab fa-instagram text-white fa-stack-1x"></i></span></a>
			</div>
		</nav>

		<!-- Mobile Hamburger Button -->
		<a href="javascript:void(0);" class="icon md:hidden block" onclick="mobileNav()">
			<i id="nav-icon" class="bg-white text-black rounded-full block mr-8 py-4 z-top leading-none fixed px-4 mt-5 text-2xl right-0 md:hidden fas fa-bars"></i>
		</a>

		<!-- Mobile Navigation -->
		<nav class="w-full bg-white fixed z-50 md:hidden" aria-label="Mobile">
			<div class="w-full hidden h-screen" id="myLinks">
				<div class="flex flex-col mt-4">
					<?php
					if ( has_nav_menu( 'main_navigation' ) ) {
						$locations = get_nav_menu_locations();
						$menu = wp_get_nav_menu_items( (int) $locations['main_navigation'] );
						if ( $menu ) {
							$top_items = array_filter( $menu, function( $item ) { return $item->menu_item_parent == 0; } );
							foreach ( $top_items as $item ) {
								$active_class = ( get_permalink() === $item->url || trailingslashit( get_permalink() ) === trailingslashit( $item->url ) ) ? '!text-yellow' : '';
								echo '<div class="group flex-initial sm:ml-20 ml-6 my-2">';
								echo '<a class="capitalize text-2xl ' . esc_attr( $active_class ) . '" href="' . esc_url( $item->url ) . '">' . esc_html( $item->title ) . '</a>';

								$children = array_filter( $menu, function( $child ) use ( $item ) { return $child->menu_item_parent == $item->ID; } );
								if ( $children ) {
									echo '<i class="ml-2 fas fa-sort-down text-white"></i>';
									echo '<div id="' . esc_attr( sanitize_title( $item->title ) ) . '" class="hidden my-2 ml-5">';
									echo '<div class="bg-gray rounded-xl p-4">';
									foreach ( $children as $child ) {
										echo '<a class="relative z-top text-2xl block mt-4 !text-left" href="' . esc_url( $child->url ) . '">' . esc_html( $child->title ) . '</a>';
									}
									echo '</div></div>';
								}
								echo '</div>';
							}
						}
					}
					?>
				</div>
			</div>
		</nav>
	</header>

	<main id="maincontent" class="overflow-hidden min-h-[78dvh]">