<?php
/**
 * The header template
 *
 * @package Paws_And_Care
 * @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">
    <?php wp_head(); ?>
</head>

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

    <a class="skip-link screen-reader-text" href="#primary-content"><?php esc_html_e('Skip to content', 'paws-and-care'); ?></a>

    <div class="site-wrapper">

        <?php
        // ========================================
// ELEMENTOR HEADER LOCATION
// ========================================
        if (!function_exists('elementor_theme_do_location') || !elementor_theme_do_location('header')):

            // Get customizer values
            $phone = get_theme_mod('paws_and_care_phone', '+1 234 567 890');
            $email = get_theme_mod('paws_and_care_email', 'example@example.com');
            $hours = get_theme_mod('paws_and_care_hours', 'Mon-Fri: 9AM-6PM');
            $facebook = get_theme_mod('paws_and_care_facebook', '#');
            $twitter = get_theme_mod('paws_and_care_twitter', '#');
            $instagram = get_theme_mod('paws_and_care_instagram', '#');
            $linkedin = get_theme_mod('paws_and_care_linkedin', '#');
            ?>
            <!-- Topbar -->
            <div class="topbar">
                <div class="container-fluid">
                    <!-- Desktop Layout -->
                    <div class="topbar-desktop d-none d-lg-block">
                        <div class="row align-items-center">
                            <div class="col-lg-6">
                                <div class="topbar-contact">
                                    <span class="topbar-item">
                                        <i class="fa-solid fa-phone"></i>
                                        <span><?php echo esc_html($phone); ?></span>
                                    </span>
                                    <span class="topbar-item">
                                        <i class="fa-solid fa-envelope"></i>
                                        <span><?php echo esc_html($email); ?></span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="topbar-info">
                                    <span class="topbar-item">
                                        <i class="fa-solid fa-clock"></i>
                                        <span><?php echo esc_html($hours); ?></span>
                                    </span>
                                    <div class="topbar-social">
                                        <a href="<?php echo esc_url($facebook); ?>" class="social-link"
                                            aria-label="Facebook">
                                            <i class="fa-brands fa-facebook-f"></i>
                                        </a>
                                        <a href="<?php echo esc_url($twitter); ?>" class="social-link"
                                            aria-label="Twitter">
                                            <i class="fa-brands fa-twitter"></i>
                                        </a>
                                        <a href="<?php echo esc_url($instagram); ?>" class="social-link"
                                            aria-label="Instagram">
                                            <i class="fa-brands fa-instagram"></i>
                                        </a>
                                        <a href="<?php echo esc_url($linkedin); ?>" class="social-link"
                                            aria-label="LinkedIn">
                                            <i class="fa-brands fa-linkedin-in"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Tablet Layout -->
                    <div class="topbar-tablet d-none d-md-block d-lg-none">
                        <div class="row">
                            <div class="col-12">
                                <div class="topbar-content-tablet">
                                    <div class="topbar-left">
                                        <span class="topbar-item">
                                            <i class="fa-solid fa-phone"></i>
                                            <span><?php echo esc_html($phone); ?></span>
                                        </span>
                                        <span class="topbar-item">
                                            <i class="fa-solid fa-envelope"></i>
                                            <span><?php echo esc_html($email); ?></span>
                                        </span>
                                    </div>
                                    <div class="topbar-right">
                                        <span class="topbar-item">
                                            <i class="fa-solid fa-clock"></i>
                                            <span><?php echo esc_html($hours); ?></span>
                                        </span>
                                        <div class="topbar-social">
                                            <a href="<?php echo esc_url($facebook); ?>" class="social-link"
                                                aria-label="Facebook">
                                                <i class="fa-brands fa-facebook-f"></i>
                                            </a>
                                            <a href="<?php echo esc_url($twitter); ?>" class="social-link"
                                                aria-label="Twitter">
                                                <i class="fa-brands fa-twitter"></i>
                                            </a>
                                            <a href="<?php echo esc_url($instagram); ?>" class="social-link"
                                                aria-label="Instagram">
                                                <i class="fa-brands fa-instagram"></i>
                                            </a>
                                            <a href="<?php echo esc_url($linkedin); ?>" class="social-link"
                                                aria-label="LinkedIn">
                                                <i class="fa-brands fa-linkedin-in"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Mobile Layout -->
                    <div class="topbar-mobile d-block d-md-none">
                        <div class="topbar-mobile-row">
                            <div class="topbar-mobile-contact">
                                <span class="topbar-item-mobile">
                                    <i class="fa-solid fa-phone"></i>
                                    <span><?php echo esc_html($phone); ?></span>
                                </span>
                                <span class="topbar-item-mobile">
                                    <i class="fa-solid fa-envelope"></i>
                                    <span><?php echo esc_html($email); ?></span>
                                </span>
                            </div>
                        </div>
                        <div class="topbar-mobile-row">
                            <div class="topbar-mobile-info">
                                <span class="topbar-item-mobile">
                                    <i class="fa-solid fa-clock"></i>
                                    <span><?php echo esc_html($hours); ?></span>
                                </span>
                                <div class="topbar-social-mobile">
                                    <a href="<?php echo esc_url($facebook); ?>" class="social-link-mobile"
                                        aria-label="Facebook">
                                        <i class="fa-brands fa-facebook-f"></i>
                                    </a>
                                    <a href="<?php echo esc_url($twitter); ?>" class="social-link-mobile"
                                        aria-label="Twitter">
                                        <i class="fa-brands fa-twitter"></i>
                                    </a>
                                    <a href="<?php echo esc_url($instagram); ?>" class="social-link-mobile"
                                        aria-label="Instagram">
                                        <i class="fa-brands fa-instagram"></i>
                                    </a>
                                    <a href="<?php echo esc_url($linkedin); ?>" class="social-link-mobile"
                                        aria-label="LinkedIn">
                                        <i class="fa-brands fa-linkedin-in"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Navigation -->
            <nav class="navbar navbar-expand-lg sticky-top">
                <div class="container">
                    <a class="navbar-brand" href="<?php echo esc_url(home_url('/')); ?>">
                        <?php if (has_custom_logo()): ?>
                            <?php the_custom_logo(); ?>
                        <?php else: ?>
                            <span class="logo-text"><i class="fa-solid fa-paw me-2"></i><?php bloginfo('name'); ?></span>
                        <?php endif; ?>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <?php
                        wp_nav_menu(array(
                            'theme_location' => 'primary',
                            'container' => false,
                            'menu_class' => 'navbar-nav ms-auto',
                            'fallback_cb' => array('Paws_And_Care_Bootstrap_Nav_Walker', 'fallback'),
                            'walker' => new Paws_And_Care_Bootstrap_Nav_Walker(),
                            'depth' => 4,
                        ));
                        ?>
                    </div>
                </div>
            </nav>

            <?php
        endif;
        // ========================================
// ELEMENTOR HEADER LOCATION - END
// ========================================
        ?>