<?php

/**
 * The header for our theme
 *
 * @package Theme_An_Phat
 */
?>
<!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">
        <!-- --- TOP BAR --- -->
        <div class="top-bar py-2 text-white" style="background-color: var(--primary-dark);">
            <div class="container d-flex justify-content-between align-items-center flex-wrap gap-2">
                <div class="top-bar-info d-flex align-items-center">
                    <span class="info-item"><i class="fa-regular fa-envelope me-2 text-white"></i><?php echo esc_html(__('info@anphatpharma.com', 'theme-anphat')); ?></span>
                </div>
                <div class="top-bar-lang d-flex align-items-center gap-3">
                    <?php
                    $current_lang = 'vi';
                    if (function_exists('pll_current_language')) {
                        $current_lang = pll_current_language();
                        $langs = pll_the_languages(array('raw' => 1));
                        $en_url = isset($langs['en']) ? $langs['en']['url'] : '#';
                        $vi_url = isset($langs['vi']) ? $langs['vi']['url'] : '#';
                    } else {
                        $current_locale = get_locale();
                        $current_lang = ($current_locale === 'en_US' || $current_locale === 'en') ? 'en' : 'vi';
                        $en_url = add_query_arg('lang', 'en');
                        $vi_url = add_query_arg('lang', 'vi');
                    }
                    ?>
                    <div class="language-selector d-flex align-items-center gap-2">
                        <a href="<?php echo esc_url($en_url); ?>" class="lang-item <?php echo $current_lang === 'en' ? 'active' : ''; ?>" title="English">
                            <svg class="flag-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 30" width="20" height="12" style="display: inline-block; vertical-align: middle;">
                                <rect width="50" height="30" fill="#012169" />
                                <path d="M0,0 L50,30 M0,30 L50,0" stroke="#fff" stroke-width="6" />
                                <path d="M0,0 L50,30 M0,30 L50,0" stroke="#C8102E" stroke-width="2" />
                                <path d="M25,0 L25,30 M0,15 L50,15" stroke="#fff" stroke-width="10" />
                                <path d="M25,0 L25,30 M0,15 L50,15" stroke="#C8102E" stroke-width="6" />
                            </svg>
                        </a>
                        <a href="<?php echo esc_url($vi_url); ?>" class="lang-item <?php echo $current_lang === 'vi' ? 'active' : ''; ?>" title="Tiếng Việt">
                            <svg class="flag-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 2" width="20" height="13.3" style="display: inline-block; vertical-align: middle;">
                                <rect width="3" height="2" fill="#da251d" />
                                <polygon points="1.5,0.4 1.62,0.85 2.1,0.85 1.71,1.13 1.86,1.58 1.5,1.3 1.14,1.58 1.29,1.13 0.9,0.85 1.38,0.85" fill="#ffff00" />
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- --- MAIN HEADER --- -->
        <header id="masthead" class="site-header bg-white shadow-sm sticky-top">
            <div class="container d-flex justify-content-between align-items-center py-3">
                <div class="site-branding d-flex align-items-center">
                    <?php
                    if (has_custom_logo()) :
                        the_custom_logo();
                    else :
                    ?>
                        <a href="<?php echo esc_url(home_url('/')); ?>" class="site-logo-text d-flex align-items-center gap-2 text-decoration-none">
                            <span class="logo-icon d-flex align-items-center justify-content-center text-white bg-primary rounded-circle"><i class="fa-solid fa-prescription-bottle-medical"></i></span>
                            <div class="logo-text-group">
                                <span class="logo-title font-heading fw-bold text-primary">NAFARMA</span>
                                <span class="logo-tagline text-muted"><?php esc_html_e('Good Products & Intelligent Service', 'theme-anphat'); ?></span>
                            </div>
                        </a>
                    <?php
                    endif;
                    ?>
                </div>

                <!-- Main Menu (Desktop) -->
                <nav id="site-navigation" class="main-navigation d-none d-lg-block">
                    <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'menu-primary',
                            'menu_id'        => 'primary-menu',
                            'container'      => false,
                            'menu_class'     => 'nav-menu d-flex align-items-center gap-4 list-unstyled mb-0',
                            'fallback_cb'    => 'wp_page_menu',
                            'depth'          => 3,
                        )
                    );
                    ?>
                </nav>

                <!-- Mobile Menu Toggle -->
                <button class="menu-toggle btn d-lg-none text-primary border-0 p-2" aria-controls="mobile-navigation" aria-expanded="false">
                    <i class="fa-solid fa-bars fa-lg"></i>
                </button>
            </div>

            <!-- Mobile Navigation Panel -->
            <div id="mobile-navigation" class="mobile-navigation-panel d-lg-none bg-white border-top shadow">
                <div class="container py-3">
                    <?php
                    wp_nav_menu(
                        array(
                            'theme_location' => 'menu-primary',
                            'menu_id'        => 'mobile-menu',
                            'container'      => false,
                            'menu_class'     => 'mobile-menu-list list-unstyled mb-0 d-flex flex-column gap-3',
                            'depth'          => 3,
                        )
                    );
                    ?>
                </div>
            </div>
        </header>