<?php 
$grocery_supermarket_chain_has_header_image = has_header_image();
$grocery_supermarket_chain_header_image_url = $grocery_supermarket_chain_has_header_image ? esc_url(get_header_image()) : '';
$grocery_supermarket_chain_header_style = '';
if ($grocery_supermarket_chain_has_header_image) {
    $grocery_supermarket_chain_header_style = sprintf(
        'background-image: url(%s); background-position: center; background-attachment: fixed; background-size: cover;',
        $grocery_supermarket_chain_header_image_url
    );
}
?>
<div class="header-main-area <?php echo esc_attr( get_theme_mod('grocery_supermarket_chain_sticky_header', false) ? 'sticky-header' : '' ); ?>" <?php if ($grocery_supermarket_chain_header_style) echo 'style="' . esc_attr($grocery_supermarket_chain_header_style) . '";'; ?>>
	<div class="container">
		<div class="header-row-area p-2">
			<div class="row">
				<div class="col-lg-3 col-md-3 align-self-center">
					<?php get_template_part( 'template-parts/site', 'branding' ); ?>
				</div>
				
				<div class="col-lg-3 col-md-3 align-self-center">
					<?php 
					$grocery_supermarket_chain_email_address = get_theme_mod( 'grocery_supermarket_chain_email_address', 'supermarket@example.com' ); 
					
					if ( ! empty( $grocery_supermarket_chain_email_address ) ) { ?>
						<div class="row mb-2 mb-md-0">
							<div class="col-lg-3 col-md-3 col-4 align-self-center">
								<div class="header-icon">
									<i class="fas fa-envelope-open-text"></i>
								</div>
							</div>
							<div class="col-lg-9 col-md-9 col-8 align-self-center">
								<h6 class="mb-0"><?php echo esc_html__( 'Email Address', 'grocery-supermarket-chain' ); ?></h6>
								<p class="mb-0"><?php echo esc_html( $grocery_supermarket_chain_email_address ); ?></p>
							</div>
						</div>
					<?php } ?>
				</div>


				<div class="col-lg-3 col-md-3 align-self-center">
					<?php 
					$grocery_supermarket_chain_phone_number = get_theme_mod( 'grocery_supermarket_chain_phone_number', '00 12321545648' ); 
					
					if ( ! empty( $grocery_supermarket_chain_phone_number ) ) { ?>
						<div class="row">
							<div class="col-lg-3 col-md-3 col-4 align-self-center">
								<div class="header-icon">
									<i class="fas fa-phone"></i>
								</div>
							</div>
							<div class="col-lg-9 col-md-9 col-8 align-self-center">
								<h6 class="mb-0"><?php echo esc_html__( '24/7 In Touch', 'grocery-supermarket-chain' ); ?></h6>
								<p class="mb-0"><?php echo esc_html( $grocery_supermarket_chain_phone_number ); ?></p>
							</div>
						</div>
					<?php } ?>
				</div>

				
				<div class="col-lg-3 col-md-3 align-self-center">
					<div class="social-inner-box">
						<?php
			                $grocery_supermarket_chain_facebook_url = get_theme_mod( 'grocery_supermarket_chain_facebook_url', '#' );
			                if ( ! empty( $grocery_supermarket_chain_facebook_url ) ) { ?>
			                <a href="<?php echo esc_url( $grocery_supermarket_chain_facebook_url ); ?>"><i class="fab fa-facebook-f mr-3"></i></a>
			            <?php } ?>
			            <?php
			                $grocery_supermarket_chain_twitter_url = get_theme_mod( 'grocery_supermarket_chain_twitter_url', '#' );
			                if ( ! empty( $grocery_supermarket_chain_twitter_url ) ) { ?>
			                <a ref="<?php echo esc_url( $grocery_supermarket_chain_twitter_url ); ?>"><i class="fab fa-twitter mr-3"></i></a>
			            <?php } ?>
			            <?php
			                $grocery_supermarket_chain_instagram_url = get_theme_mod( 'grocery_supermarket_chain_instagram_url', '#' );
			                if ( ! empty( $grocery_supermarket_chain_instagram_url ) ) { ?>
			                <a href="<?php echo esc_url( $grocery_supermarket_chain_instagram_url ); ?>"><i class="fab fa-instagram mr-3"></i></a>
			            <?php } ?>
			            <?php
			                $grocery_supermarket_chain_youtube_url = get_theme_mod( 'grocery_supermarket_chain_youtube_url', '#' );
			                if ( ! empty( $grocery_supermarket_chain_youtube_url ) ) { ?>
			                <a href="<?php echo esc_url( $grocery_supermarket_chain_youtube_url ); ?>"><i class="fab fa-youtube mr-3"></i></a>
			            <?php } ?>
			            <?php
			                $grocery_supermarket_chain_whatsapp_url = get_theme_mod( 'grocery_supermarket_chain_whatsapp_url', '#' );
			                if ( ! empty( $grocery_supermarket_chain_whatsapp_url ) ) { ?>
			                <a href="<?php echo esc_url( $grocery_supermarket_chain_whatsapp_url ); ?>"><i class="fab fa-whatsapp"></i></a>
			            <?php } ?>
			        </div>
				</div>
			</div>
		</div>
		<header id="masthead" class="site-header header-one py-1 mt-0 mt-md-3">
			<div class="bottom-header header-image-wrap">
				<div class="toggle-menu menu text-center text-md-left">
					<button onclick="grocery_supermarket_chain_mobile_menu_open()" class="toggle p-2"><i class="fa-solid fa-bars"></i></button>
				</div>
				<div id="responsive" class="nav side_nav">
					<nav id="top_menu" class="nav_menu" role="navigation" aria-label="<?php esc_attr_e( 'Menu', 'grocery-supermarket-chain' ); ?>">
						<?php
						    wp_nav_menu( array( 
								'theme_location' => 'menu-1',
								'container_class' => 'navigation clearfix' ,
								'menu_class' => 'clearfix',
								'items_wrap' => '<ul id="%1$s" class="%2$s mobile_nav m-0 px-0">%3$s</ul>',
								'fallback_cb' => 'wp_page_menu',
						    ) ); 
						?>
						<a href="javascript:void(0)" class="closebtn menu" onclick="grocery_supermarket_chain_mobile_menu_close()"><i class="fa-solid fa-xmark"></i></a>
					</nav>
				</div>
			</div>
		</header>
	</div>
</div>