<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

<style>
    .gb-navlink:hover, .gb-navlink.active {
        color: #FB9A02 !important;
        font-weight: 700 !important;
    }
    .gb-link:hover {
        border-color: #FB9A02 !important;
        background: rgba(251, 154, 2, 0.08) !important;
    }
    .gb-link:hover svg {
        stroke: #FB9A02 !important;
    }

    /* Hamburger Animation Styles */
    #gb-hamburger {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 100000;
        outline: none;
        position: relative;
    }
    .hamburger-line-top, .hamburger-line-middle, .hamburger-line-bottom {
        transition: transform 0.3s, opacity 0.3s;
        transform-origin: center;
    }
    #gb-hamburger.open .hamburger-line-top {
        transform: translateY(6px) rotate(45deg);
    }
    #gb-hamburger.open .hamburger-line-middle {
        opacity: 0;
    }
    #gb-hamburger.open .hamburger-line-bottom {
        transform: translateY(-6px) rotate(-45deg);
    }

    #gb-mobile-drawer {
        position: fixed;
        inset: 0;
        background: #1A0B05;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 24px;
        transform: translateY(-100%);
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        padding: 110px 24px 60px;
        overflow-y: auto;
    }

    body.menu-open header {
        z-index: 100000 !important;
    }

    <?php $header_logo_width = get_theme_mod('header_logo_width', 140); ?>
    .gb-site-logo {
        width: <?php echo intval($header_logo_width); ?>px !important;
        height: auto !important;
    }

    @media (max-width: 991px) {
        #gb-hamburger {
            display: block !important;
        }
        #gb-desktop-nav {
            display: none !important;
        }
        header {
            padding: 18px 24px !important;
        }
        header.header-scrolled {
            padding: 12px 24px !important;
        }
    }

    /* Scrolled Header State */
    header.header-scrolled {
        background: rgba(26, 11, 5, 0.94) !important;
        backdrop-filter: blur(12px) !important;
        padding: 14px 56px !important;
        border-bottom: 1px solid rgba(251, 247, 239, 0.1) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    }
</style>

<?php
$is_home = is_front_page();
$header_base_style = 'position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index:9999; ';
$header_style = $is_home 
    ? $header_base_style . 'padding:26px 56px; background:transparent;'
    : $header_base_style . 'padding:18px 56px; background:rgba(26,11,5,0.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(251,247,239,0.1);';
?>

<!-- ===================== HEADER ===================== -->
<header id="gb-main-header" style="<?php echo esc_attr($header_style); ?>">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" style="text-decoration:none; z-index: 60;">
        <?php echo guide_benin_get_logo('white', 'horizontal', $is_home ? 40 : 34); ?>
    </a>
    
    <!-- Hamburger Button (Visible only on mobile/tablet) -->
    <button id="gb-hamburger" aria-label="Menu">
        <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#FBF7EF" stroke-width="2.5" stroke-linecap="round">
            <line x1="3" y1="12" x2="21" y2="12" class="hamburger-line-middle"></line>
            <line x1="3" y1="6" x2="21" y2="6" class="hamburger-line-top"></line>
            <line x1="3" y1="18" x2="21" y2="18" class="hamburger-line-bottom"></line>
        </svg>
    </button>

    <!-- Desktop Navigation & Utilities -->
    <nav id="gb-desktop-nav" style="display:flex; align-items:center; gap:38px;">
        <?php
        $menus = wp_get_nav_menus();
        $menu_to_use = null;
        if ( has_nav_menu( 'primary' ) ) {
            $menu_to_use = 'primary';
        } elseif ( ! empty( $menus ) ) {
            $menu_to_use = $menus[0]->term_id;
        }

        if ( $menu_to_use ) {
            $menu_args = array(
                'container'   => false,
                'items_wrap'  => '%3$s',
                'fallback_cb' => false,
                'walker'      => new class extends Walker_Nav_Menu {
                    function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
                        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
                        $title_lower = strtolower($item->title);

                        global $wp;
                        $current_url = untrailingslashit(home_url(add_query_arg(array(), $wp->request)));
                        $item_url = untrailingslashit($item->url);
                        $is_current = in_array( 'current-menu-item', $classes ) || in_array( 'current_page_item', $classes ) || !empty($item->current) || ($current_url === $item_url);

                        if ( empty($is_current) && !empty($item->object_id) ) {
                            $is_current = (intval(get_the_ID()) === intval($item->object_id));
                        }

                        if ( in_array( 'menu-item-search', $classes ) || $title_lower === 'search' || $title_lower === 'recherche' ) {
                            $output .= sprintf(
                                '<a href="%s">
                                    <div class="gb-link" style="width:38px; height:38px; border-radius:50%%; border:1px solid rgba(251,247,239,0.45); display:flex; align-items:center; justify-content:center;">
                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FBF7EF" stroke-width="2">
                                            <circle cx="11" cy="11" r="7"></circle>
                                            <line x1="21" y1="21" x2="16.5" y2="16.5"></line>
                                        </svg>
                                    </div>
                                 </a>',
                                esc_url($item->url)
                            );
                        } elseif ( in_array( 'menu-item-lang', $classes ) || $title_lower === 'fr' || $title_lower === 'en' ) {
                            $output .= sprintf(
                                '<a href="%s" style="text-decoration:none;"><span style="font-weight:600; font-size:13px; color:#FBF7EF; letter-spacing:0.06em; cursor:pointer;">%s</span></a>',
                                esc_url($item->url),
                                esc_html($item->title)
                            );
                        } else {
                            $active_class = $is_current ? 'active' : '';
                            $color = $is_current ? '#FB9A02' : '#FBF7EF';
                            $font_weight = $is_current ? '700' : '500';
                            $output .= sprintf(
                                '<a href="%s" style="text-decoration:none;"><span class="gb-navlink %s" style="font-weight:%s; font-size:15px; color:%s; letter-spacing:0.01em; transition:color .25s;">%s</span></a>',
                                esc_url($item->url),
                                $active_class,
                                $font_weight,
                                $color,
                                esc_html($item->title)
                            );
                        }
                    }
                }
            );

            if ( $menu_to_use === 'primary' ) {
                $menu_args['theme_location'] = 'primary';
            } else {
                $menu_args['menu'] = $menu_to_use;
            }

            wp_nav_menu( $menu_args );
        } else {
            // Conformity Fallback Menu
            $nav_items = array(
                array( 'label' => 'Découvrez', 'url' => home_url( '/decouvrez/' ) ),
                array( 'label' => 'Vivez', 'url' => home_url( '/vivez/' ) ),
                array( 'label' => 'Organisez', 'url' => home_url( '/organisez/' ) ),
                array( 'label' => 'Actualités', 'url' => home_url( '/actualites/' ) ),
            );
            foreach ( $nav_items as $item ) {
                global $wp;
                $current_url = untrailingslashit(home_url(add_query_arg(array(), $wp->request)));
                $item_url = untrailingslashit($item['url']);
                $is_current = ($current_url === $item_url);
                $active_class = $is_current ? 'active' : '';
                $color = $is_current ? '#FB9A02' : '#FBF7EF';
                $font_weight = $is_current ? '700' : '500';
                echo sprintf(
                    '<a href="%s" style="text-decoration:none;"><span class="gb-navlink %s" style="font-weight:%s; font-size:15px; color:%s; letter-spacing:0.01em; transition:color .25s;">%s</span></a>',
                    esc_url( $item['url'] ),
                    $active_class,
                    $font_weight,
                    $color,
                    esc_html( $item['label'] )
                );
            }
        }
        ?>

        <!-- Unified Header Utilities (Search, Weather, Flag) -->
        <div style="display:flex; align-items:center; gap:18px; padding-left:10px;">
            <!-- Search Link -->
            <a href="<?php echo esc_url( home_url( '/recherche/' ) ); ?>">
                <div class="gb-link" style="width:38px; height:38px; border-radius:50%; border:1px solid rgba(251,247,239,0.45); display:flex; align-items:center; justify-content:center; transition: all 0.2s;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FBF7EF" stroke-width="2">
                        <circle cx="11" cy="11" r="7"></circle>
                        <line x1="21" y1="21" x2="16.5" y2="16.5"></line>
                    </svg>
                </div>
            </a>

            <!-- Weather widget -->
            <div id="gb-header-weather" title="Météo à Cotonou" style="display:flex; align-items:center; gap:8px; font-weight:600; font-size:13px; color:#FBF7EF; background:rgba(251,247,239,0.08); padding:6px 14px; border-radius:20px; border:1px solid rgba(251,247,239,0.12); flex-shrink:0; cursor:default;">
                <span id="weather-icon">☀️</span>
                <span id="weather-temp">28°C</span>
            </div>

            <!-- Wishlist Link -->
            <a href="<?php echo esc_url( home_url( '/wishlist/' ) ); ?>" title="Favoris / Wishlist">
                <div class="gb-link" style="width:38px; height:38px; border-radius:50%; border:1px solid rgba(251,247,239,0.45); display:flex; align-items:center; justify-content:center; transition: all 0.2s;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#FBF7EF" stroke-width="2" style="position:relative; top:1px;">
                        <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                    </svg>
                </div>
            </a>

            <!-- Benin Flag -->
            <svg width="24" height="16" viewBox="0 0 30 20" style="border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,0.22); display:block; flex-shrink:0;" title="Bénin">
                <rect width="30" height="20" fill="#E8112D"/>
                <rect width="30" height="10" fill="#FCD116"/>
                <rect width="12" height="20" fill="#008751"/>
            </svg>
        </div>
    </nav>
</header>

<!-- Mobile Navigation Drawer Overlay -->
<div id="gb-mobile-drawer">
        <div style="display:flex; flex-direction:column; align-items:center; gap:24px;">
            <?php
            if ( $menu_to_use ) {
                $mobile_menu_args = array(
                    'container'   => false,
                    'items_wrap'  => '%3$s',
                    'fallback_cb' => false,
                    'walker'      => new class extends Walker_Nav_Menu {
                        function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
                            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
                            $title_lower = strtolower($item->title);

                            global $wp;
                            $current_url = untrailingslashit(home_url(add_query_arg(array(), $wp->request)));
                            $item_url = untrailingslashit($item->url);
                            $is_current = in_array( 'current-menu-item', $classes ) || in_array( 'current_page_item', $classes ) || !empty($item->current) || ($current_url === $item_url);

                            if ( empty($is_current) && !empty($item->object_id) ) {
                                $is_current = (intval(get_the_ID()) === intval($item->object_id));
                            }

                            if ( in_array( 'menu-item-search', $classes ) || $title_lower === 'search' || $title_lower === 'recherche' || in_array( 'menu-item-lang', $classes ) || $title_lower === 'fr' || $title_lower === 'en' ) {
                                return; // Renders separately in mobile drawer
                            } else {
                                $active_class = $is_current ? 'active' : '';
                                $color = $is_current ? '#FB9A02' : '#FBF7EF';
                                $font_weight = $is_current ? '800' : '700';
                                $output .= sprintf(
                                    '<a href="%s" style="text-decoration:none;"><span class="gb-navlink %s" style="font-family:\'Baloo 2\',sans-serif; font-weight:%s; font-size:26px; color:%s; letter-spacing:0.01em; transition:color .25s;">%s</span></a>',
                                    esc_url($item->url),
                                    $active_class,
                                    $font_weight,
                                    $color,
                                    esc_html($item->title)
                                );
                            }
                        }
                    }
                );

                if ( $menu_to_use === 'primary' ) {
                    $mobile_menu_args['theme_location'] = 'primary';
                } else {
                    $mobile_menu_args['menu'] = $menu_to_use;
                }

                wp_nav_menu( $mobile_menu_args );
            } else {
                foreach ( $nav_items as $item ) {
                    global $wp;
                    $current_url = untrailingslashit(home_url(add_query_arg(array(), $wp->request)));
                    $item_url = untrailingslashit($item['url']);
                    $is_current = ($current_url === $item_url);
                    $active_class = $is_current ? 'active' : '';
                    $color = $is_current ? '#FB9A02' : '#FBF7EF';
                    $font_weight = $is_current ? '800' : '700';
                    echo sprintf(
                        '<a href="%s" style="text-decoration:none;"><span class="gb-navlink %s" style="font-family:\'Baloo 2\',sans-serif; font-weight:%s; font-size:26px; color:%s; letter-spacing:0.01em; transition:color .25s;">%s</span></a>',
                        esc_url( $item['url'] ),
                        $active_class,
                        $font_weight,
                        $color,
                        esc_html( $item['label'] )
                    );
                }
            }
            ?>
        </div>

        <!-- Divider -->
        <div style="width:60px; height:2px; background:rgba(251,247,239,0.15); margin:12px 0;"></div>

        <!-- Utilities inside Drawer -->
        <div style="display:flex; flex-direction:column; align-items:center; gap:20px;">
            <!-- Weather widget Mobile -->
            <div id="gb-mobile-weather" title="Météo à Cotonou" style="display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:#FBF7EF; background:rgba(251,247,239,0.08); padding:8px 16px; border-radius:20px; border:1px solid rgba(251,247,239,0.12); cursor:default;">
                <span id="weather-icon-mobile">☀️</span>
                <span id="weather-temp-mobile">28°C</span>
            </div>

            <div style="display:flex; align-items:center; gap:24px;">
                <!-- Search Mobile -->
                <a href="<?php echo esc_url( home_url( '/recherche/' ) ); ?>">
                    <div class="gb-link" style="width:44px; height:44px; border-radius:50%; border:1px solid rgba(251,247,239,0.45); display:flex; align-items:center; justify-content:center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FBF7EF" stroke-width="2">
                            <circle cx="11" cy="11" r="7"></circle>
                            <line x1="21" y1="21" x2="16.5" y2="16.5"></line>
                        </svg>
                    </div>
                </a>

                <!-- Wishlist Mobile -->
                <a href="<?php echo esc_url( home_url( '/wishlist/' ) ); ?>">
                    <div class="gb-link" style="width:44px; height:44px; border-radius:50%; border:1px solid rgba(251,247,239,0.45); display:flex; align-items:center; justify-content:center;">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FBF7EF" stroke-width="2" style="position:relative; top:1px;">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                        </svg>
                    </div>
                </a>

                <!-- Flag -->
                <svg width="30" height="20" viewBox="0 0 30 20" style="border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,0.22);" title="Bénin">
                    <rect width="30" height="20" fill="#E8112D"/>
                    <rect width="30" height="10" fill="#FCD116"/>
                    <rect width="12" height="20" fill="#008751"/>
                </svg>
            </div>
        </div>
    </div>

    <!-- JS Toggling -->
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        const burger = document.getElementById('gb-hamburger');
        const drawer = document.getElementById('gb-mobile-drawer');
        if (burger && drawer) {
            burger.addEventListener('click', function() {
                burger.classList.toggle('open');
                if (burger.classList.contains('open')) {
                    drawer.style.transform = 'translateY(0%)';
                    document.body.style.overflow = 'hidden';
                    document.body.classList.add('menu-open');
                } else {
                    drawer.style.transform = 'translateY(-100%)';
                    document.body.style.overflow = '';
                    document.body.classList.remove('menu-open');
                }
            });

            const links = drawer.querySelectorAll('a');
            links.forEach(l => {
                l.addEventListener('click', function() {
                    burger.classList.remove('open');
                    drawer.style.transform = 'translateY(-100%)';
                    document.body.style.overflow = '';
                    document.body.classList.remove('menu-open');
                });
            });
        }
    });

    (function() {
        // Fetch live weather for Cotonou (Benin)
        fetch('https://api.open-meteo.com/v1/forecast?latitude=6.37&longitude=2.43&current_weather=true')
            .then(function(res) { return res.json(); })
            .then(function(data) {
                if (data && data.current_weather) {
                    const temp = Math.round(data.current_weather.temperature);
                    const code = data.current_weather.weathercode;
                    let icon = '☀️';
                    if (code >= 1 && code <= 3) icon = '⛅';
                    else if (code >= 51 && code <= 65) icon = '🌧️';
                    else if (code >= 95) icon = '⛈️';
                    
                    const tempEl = document.getElementById('weather-temp');
                    const iconEl = document.getElementById('weather-icon');
                    const tempElMobile = document.getElementById('weather-temp-mobile');
                    const iconElMobile = document.getElementById('weather-icon-mobile');
                    
                    if (tempEl) tempEl.innerText = temp + '°C';
                    if (iconEl) iconEl.innerText = icon;
                    if (tempElMobile) tempElMobile.innerText = temp + '°C';
                    if (iconElMobile) iconElMobile.innerText = icon;
                }
            })
            .catch(function(err) { console.log('Weather fetch failed', err); });

        // Sticky Header on Scroll
        const header = document.getElementById('gb-main-header');
        if (header) {
            const onScroll = function() {
                const scrollPos = window.scrollY || window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
                if (scrollPos > 60) {
                    header.classList.add('header-scrolled');
                } else {
                    header.classList.remove('header-scrolled');
                }
            };
            window.addEventListener('scroll', onScroll, {passive: true});
            document.body.addEventListener('scroll', onScroll, {passive: true});
            document.documentElement.addEventListener('scroll', onScroll, {passive: true});
            
            // Trigger once on load in case page is already scrolled
            onScroll();
        }
    })();
    </script>
