<?php
/**
 * The header for our theme.
 *
 * This is the template that displays all of the <head> section
 * 
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package pawwell
 */

?><!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="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>

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

      // Preloader.
      if ( get_theme_mod( 'pawwell_enable_preloader', true ) ) :
    ?>
    <div id="pawwell-preloader" class="pawwell-preloader" aria-hidden="true">
        <div class="pawwell-preloader-inner">
            <div class="pawwell-preloader-wrapper">
                <div class="pawwell-preloader-drop">&#x1F9B4;</div>
                <div class="pawwell-preloader-catcher"></div>
                <div class="pawwell-preloader-caption"><?php esc_html_e( 'Fetching Treats...', 'pawwell' ); ?></div>
            </div>
        </div>
    </div>
    <?php endif; ?>

<!-- Skip to main content link for accessibility -->
<a class="skip-link" href="#main-content">
    <?php esc_html_e( 'Skip to content', 'pawwell' ); ?>
</a>

<!-- Search Overlay -->
<div id="searchOverlay" class="search-overlay">
    <div class="search-overlay-backdrop"></div>
    <div class="search-overlay-inner">
        <div class="search-overlay-header">
            <div class="search-overlay-heading">
                <span class="search-overlay-label"><?php esc_html_e( 'Search', 'pawwell' ); ?></span>
            </div>
            <button id="search-close" class="search-close-btn" aria-label="<?php esc_attr_e( 'Close search', 'pawwell' ); ?>">
                <span class="search-close-text"><?php esc_html_e( 'Close', 'pawwell' ); ?></span>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                </svg>
            </button>
        </div>
        <div class="search-input-wrapper">
            <?php get_search_form(); ?>
        </div>
        <div class="search-trending">
            <p class="search-trending-label"><?php esc_html_e( 'Trending', 'pawwell' ); ?></p>
            <div class="search-tags">
                <?php
                $trending_searches = array();
                if ( function_exists( 'pawwell_get_trending_searches' ) ) {
                    $trending_searches = apply_filters( 'pawwell_trending_searches', pawwell_get_trending_searches( 6 ) );
                }
                if ( ! empty( $trending_searches ) && is_array( $trending_searches ) ) :
                    foreach ( $trending_searches as $search_term ) :
                ?>
                <a href="<?php echo esc_url( home_url( '/?s=' . urlencode( $search_term ) . ( pawwell_is_active_woocommerce() ? '&post_type=product' : '' ) ) ); ?>" class="search-tag"><?php echo esc_html( $search_term ); ?></a>
                <?php
                    endforeach;
                endif;
                ?>
            </div>
        </div>
    </div>
</div>

<!-- ANNOUNCEMENT BAR -->
<?php if ( is_active_sidebar( 'topbar' ) ) : ?>
<div class="announcement-bar">
    <?php dynamic_sidebar( 'topbar' ); ?>
</div>
<?php endif; ?>

<!-- HEADER -->
<header id="mainHeader" class="site-header">
    <div class="header-inner">
        <!-- Logo -->
        <div class="site-branding">
            <?php
            $pawwell_show_brand_text = get_theme_mod( 'pawwell_display_site_title_tagline', true );
            $pawwell_site_desc       = get_bloginfo( 'description', 'display' );

            if ( has_custom_logo() ) :
                if ( $pawwell_show_brand_text ) :
                    $pawwell_custom_logo_id = get_theme_mod( 'custom_logo' );
                    ?>
                    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo-link">
                        <img src="<?php echo esc_url( wp_get_attachment_image_url( $pawwell_custom_logo_id, 'full' ) ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="custom-logo">
                        <span class="site-title-text">
                            <span class="site-title-name"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>
                            <?php if ( $pawwell_site_desc ) : ?>
                                <span class="site-description"><?php echo esc_html( $pawwell_site_desc ); ?></span>
                            <?php endif; ?>
                        </span>
                    </a>
                    <?php
                else :
                    pawwell_custom_logo();
                endif;
            elseif ( $pawwell_show_brand_text ) :
                ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-logo-text">
                    <span class="site-title-text">
                        <span class="site-title-name"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></span>
                        <?php if ( $pawwell_site_desc ) : ?>
                            <span class="site-description"><?php echo esc_html( $pawwell_site_desc ); ?></span>
                        <?php endif; ?>
                    </span>
                </a>
                <?php
            endif;
            ?>
        </div>

        <!-- Desktop Navigation -->
        <nav class="main-navigation">
            <ul class="nav-links">
                <?php 
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'container' => false,
                    'items_wrap' => '%3$s',
                    'fallback_cb' => 'pawwell_default_menu_fallback',
                    'depth' => 3,
                ));
                ?>
            </ul>
        </nav>

        <!-- Header Actions -->
        <div class="nav-actions">
            <!-- Search -->
            <button class="nav-action-btn search-btn" id="search-toggle" aria-label="<?php esc_attr_e( 'Search', 'pawwell' ); ?>">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="11" cy="11" r="8"/>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"/>
                </svg>
            </button>

            <?php do_action('pawwell_nav_after_search'); ?>

            <!-- Account -->
            <?php 
            if (pawwell_is_active_woocommerce()) :
                $myaccount_page_id = get_option('woocommerce_myaccount_page_id');
                if ($myaccount_page_id) :
            ?>
            <a href="<?php echo esc_url(get_permalink($myaccount_page_id)); ?>" class="nav-action-btn nav-action-desktop" aria-label="<?php esc_attr_e( 'Account', 'pawwell' ); ?>">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
            </a>
            <?php 
                endif;
            endif; 
            ?>

            <!-- Wishlist -->
            <?php do_action( 'pawwell_action_header_wishlist' ); ?>

            <!-- Cart -->
            <?php 
            if (pawwell_is_active_woocommerce()) :
                if (function_exists('wc_get_cart_url')) :
            ?>
            <a href="<?php echo esc_url( wc_get_cart_url() ); ?>" class="nav-action-btn" id="cart-toggle" aria-label="<?php esc_attr_e( 'Cart', 'pawwell' ); ?>">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <circle cx="9" cy="21" r="1"/>
                    <circle cx="20" cy="21" r="1"/>
                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
                </svg>
                <span class="cart-count"><?php echo esc_html( WC()->cart ? WC()->cart->get_cart_contents_count() : '0' ); ?></span>
            </a>
            <?php
                endif;
            endif; 
            ?>

            <!-- Hamburger Menu -->
            <button class="hamburger" id="hamburger" aria-label="<?php esc_attr_e( 'Menu', 'pawwell' ); ?>" aria-expanded="false" aria-controls="mobileMenuDrawer">
                <svg class="hamburger-icon hamburger-icon-open" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
                    <path d="M4 7h16"/>
                    <path d="M4 12h10"/>
                    <path d="M4 17h16"/>
                </svg>
                <svg class="hamburger-icon hamburger-icon-close" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
                    <path d="M18 6 6 18"/>
                    <path d="M6 6l12 12"/>
                </svg>
            </button>
        </div>
    </div>

     <!-- Mobile Menu -->
    <div id="mobileMenuDrawer" class="mobile-nav">
        <nav class="mobile-menu-nav" aria-label="<?php esc_attr_e( 'Mobile', 'pawwell' ); ?>">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'primary',
                'container'      => false,
                'menu_class'     => 'mobile-menu-links',
                'fallback_cb'    => 'pawwell_default_menu_fallback',
                'depth'          => 3,
            ));
            ?>
        </nav>
        <div class="mobile-menu-footer">
            <?php if ( pawwell_is_active_woocommerce() ) :
                $myaccount_page_id = get_option('woocommerce_myaccount_page_id');
                if ($myaccount_page_id) :
            ?>
            <a href="<?php echo esc_url(get_permalink($myaccount_page_id)); ?>" class="mobile-menu-footer-link">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
                <?php esc_html_e( 'Account', 'pawwell' ); ?>
            </a>
            <?php
                endif;
            endif;
            ?>
            <?php do_action( 'pawwell_mobile_menu_footer' ); ?>
        </div>
    </div>
</header>
