<?php
/**
 * The header for our theme
 *
 * This is the template that displays all of the <head> section and everything up until <div id="content">
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package voltmaster-electrician
 */
?>
<!doctype html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">

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

<body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <div id="page" class="site header">
        <a class="skip-link screen-reader-text"
            href="#primaryid"><?php esc_html_e('Skip to content', 'voltmaster-electrician'); ?></a>
        <header id="masthead" class="site-header">
            <div id="section-header" class="section-header">

                <?php
                $header_location = get_theme_mod('header_location','24/7 Emergency Service Available');
                $mail = get_theme_mod('header_email','Licensed & Insured');
                $address = get_theme_mod('header_address','Serving Springfield & Surrounding Areas');
                $tellphone = get_theme_mod('header_tellphone','(555) 911-ELEC');
                $featured_icon_header1 = voltmaster_electrician_get_option('featured_icon_header1');
                $featured_icon_header2 = voltmaster_electrician_get_option('featured_icon_header2');
                $featured_icon_header3 = voltmaster_electrician_get_option('featured_icon_header3');
                $featured_phoneheading = get_theme_mod('featured_phoneheading','Emergency:'); ?>
                <div class="text-white py-2 hidden lg:block">
                    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
                        <div class="flex items-center justify-between text-sm">
                            <div class="flex items-center space-x-6">
                                <?php if (!empty($header_location)): ?>
                                <div class="flex items-center space-x-2">
                                    <i class="<?php echo esc_attr($featured_icon_header1); ?>"></i>
                                    <div class="">
                                        <a><?php echo esc_html($header_location); ?></a>
                                    </div>
                                </div>
                                <?php endif; ?>
                                <?php if (!empty($mail)): ?>
                                <div class="flex items-center space-x-2">
                                    <i class="<?php echo esc_attr($featured_icon_header2); ?>"></i>
                                    <div class="">
                                        <a href=""><?php echo esc_html($mail); ?></a>
                                    </div>
                                </div>
                                <?php endif; ?>
                                <?php if (!empty($address)): ?>
                                <div class="flex items-center space-x-2">
                                    <i class="<?php echo esc_attr($featured_icon_header3); ?>"></i>
                                    <div class="">
                                        <a href=""><?php echo esc_html($address); ?></a>
                                    </div>
                                </div>
                                <?php endif; ?>

                            </div>



                            <?php if (!empty($tellphone)): ?>
                            <div class="flex items-center space-x-4 ">
                                <div class="">
                                    <span class=""><?php echo esc_html( $featured_phoneheading ); ?></span>
                                    <a href=""><?php echo esc_html( $tellphone ); ?></a>
                                </div>

                            </div>
                            <?php endif; ?>



                        </div>
                    </div>
                </div>

                <div class="bottomheader stickyheader <?php echo esc_attr(voltmaster_electrician_sticky_header()); ?>">
                    <div class="container"
                        style="<?php if (get_header_image()): ?>background-image: url('<?php echo esc_url(get_header_image()); ?>');<?php endif; ?>background-position: center top;background-size: cover;">
                        <div class="row header-row">
                            <nav id="site-navigation" class="main-navigation navbar navbar-expand-lg">
                                <div class=" col-12 d-flex">
                                    <div class="col-xl-3 col-lg-3 col-md-12 col-12 pd-0 logo">
                                        <div class="sitenave">
                                            <div class="site-branding">
                                                <?php
                                                if (has_custom_logo()) {
                                                    the_custom_logo();
                                                } else {
                                                    if (is_front_page() && is_home()): ?>
                                                <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>"
                                                        rel="home"><?php bloginfo('name'); ?></a></h1>
                                                <?php else: ?>
                                                <div class="business-box">
                                                    <div class="business-title-container">
                                                        <h1 class="site-title"><a
                                                                href="<?php echo esc_url(home_url('/')); ?>"
                                                                rel="home"><?php bloginfo('name'); ?></a></h1>
                                                    </div>
                                                </div>
                                                <?php endif; ?>

                                                <?php
                                                    $the_voltmaster_electrician_description = get_bloginfo('description', 'display');
                                                    if ($the_voltmaster_electrician_description || is_customize_preview()): ?>
                                                <p class="site-description">
                                                    <?php echo $the_voltmaster_electrician_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
                                                </p>
                                                <?php endif;
                                                } ?>
                                            </div>
                                            <button class="menu-toggle" aria-controls="primary-menu"
                                                aria-expanded="false">
                                                <i class="fa-solid fa-bars mobile-nav-icon bars"></i>
                                                <i class="fa-solid fa-xmark mobile-nav-icon close"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="col-xl-9 col-lg-9 col-md-12 col-sm-9 pd-0 logocontent">
                                        <div class="row ">
                                            <div class="col-xl-6 col-lg-6" style="position: relative;">
                                                <?php
                                                wp_nav_menu(array(
                                                    'theme_location' => 'menu-1',
                                                    'menu_id' => 'primary-menu',
                                                    'container' => false, // disable default <div class="menu-1-container">
                                                    'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
                                                ));
                                                ?>
                                            </div>
                                            <div class="col-xl-3 col-lg-3 justify-right call-content">
                                                <div class="grid">
                                                    <a class="text-right text-sm" style="color:#ffffff">
                                                        <?php echo esc_html(get_theme_mod('contact_nu_text', 'Call Us Now')); ?>
                                                    </a>
                                                    <a href="tel:<?php echo esc_url(get_theme_mod('contact_numbe', '#')); ?>"
                                                        class="text-right text-xl" style="color:#ffffff;">
                                                        <?php echo esc_html(get_theme_mod('contact_numbe', '(555) 123-4567')); ?>
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="col-xl-3 col-lg-3 btn">
                                                <a href="<?php echo esc_url(get_theme_mod('voltmaster_electrician_header_btnlink', '#')); ?>"
                                                    class="headbtn"><i class="fa-solid fa-phone"></i>
                                                    <?php echo esc_html(get_theme_mod('voltmaster_electrician_header_btntext', 'Enquire Now')); ?>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </nav><!-- #site-navigation -->
                        </div>
                    </div>
                </div>
            </div>
        </header><!-- #masthead -->