<?php
/**
 * Custom Walker Class for simple dropdown navigation
 * Icons on left, title and description on right
 */
class Mega_Menu_Walker extends Walker_Nav_Menu {
    private $has_grandchildren = false;
    private $current_item = null;
    
    private $item_icons = array(
        // Google Cloud
        'Google Workspace' => 'fa-brands fa-google',
        'Google Drive' => 'fa-brands fa-google-drive',
        'Gemini Business' => 'fa-regular fa-message',
        'Google Education' => 'fa-solid fa-graduation-cap',
        
        // Google Marketing
        'Social Media Management' => 'fa-solid fa-chart-line',
        'Google Ads' => 'fa-brands fa-google',
        
        // Graphics
        'Logo Designing' => 'fa-solid fa-pen-nib',
        'Company Profile' => 'fa-regular fa-building',
        'Social Media Graphics' => 'fa-solid fa-images',
        
        // Default
        'default' => 'fa-solid fa-arrow-right'
    );
    
    private $item_descriptions = array(
        // Google Cloud
        'Google Workspace' => 'Professional email and docs',
        'Google Drive' => 'Secure cloud storage for all your files',
        'Gemini Business' => 'AI-powered assistant for your business',
        'Google Education' => 'Tools for learning and collaboration',
        
        // Google Marketing
        'Social Media Management' => 'Grow your brand on social platforms',
        'Google Ads' => 'Reach customers with targeted ads',
        
        // Graphics
        'Logo Designing' => 'Unique, memorable brand identity',
        'Company Profile' => 'Professional company brochures and profiles',
        'Social Media Graphics' => 'Engaging visuals for your campaigns',
        
        // Default fallback
        'default' => 'Learn more about this service'
    );
    
    function start_lvl(&$output, $depth = 0, $args = null) {
        if ($depth == 0) {
            // Simple dropdown without illustration
            $output .= '<div class="simple-dropdown"><div class="simple-dropdown-content">';
            $output .= '<div class="simple-menu-items-wrapper">';
            $output .= '<ul class="simple-menu-items">';
        } else if ($depth >= 1) {
            $output .= '<ul class="simple-submenu">';
        }
    }
    
    function end_lvl(&$output, $depth = 0, $args = null) {
        if ($depth == 0) {
            $output .= '</ul>'; // Close simple-menu-items
            $output .= '</div>'; // Close simple-menu-items-wrapper
            $output .= '</div></div>'; // Close simple-dropdown-content and simple-dropdown
        } else if ($depth >= 1) {
            $output .= '</ul>';
        }
    }
    
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $this->current_item = $item;
        $classes = empty($item->classes) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        
        $has_children = in_array('menu-item-has-children', $classes);
        
        if ($depth == 0 && $has_children) {
            $classes[] = 'has-simple-dropdown has-dropdown';
        }
        
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        
        if ($depth == 0) {
            $output .= '<li' . $class_names . '>';
        } elseif ($depth >= 1) {
            $output .= '<li' . $class_names . '>';
        }
        
        $atts = array();
        $atts['title']  = !empty($item->attr_title) ? $item->attr_title : '';
        $atts['target'] = !empty($item->target) ? $item->target : '';
        $atts['rel']    = !empty($item->xfn) ? $item->xfn : '';
        $atts['href']   = !empty($item->url) ? $item->url : '';
        
        if ($depth == 0) {
            $atts['class'] = 'nav-item' . ($has_children ? ' dropdown-toggle' : '');
        }
        
        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args, $depth);
        
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
        
        $item_output = $args->before;
        
        // Check if this is a card-style item (depth >= 1)
        $is_card_item = ($depth >= 1);
        
        if ($is_card_item) {
            // Card-style menu item with icon on left, title and description on right
            $icon_class = isset($this->item_icons[$item->title]) ? $this->item_icons[$item->title] : $this->item_icons['default'];
            $description = isset($this->item_descriptions[$item->title]) ? $this->item_descriptions[$item->title] : $this->item_descriptions['default'];
            
            $item_output .= '<a' . $attributes . '>';
            $item_output .= '<span class="menu-item-icon"><i class="' . esc_attr($icon_class) . '" aria-hidden="true"></i></span>';
            $item_output .= '<span class="menu-item-content">';
            $item_output .= '<span class="menu-item-title">' . apply_filters('the_title', $item->title, $item->ID) . '</span>';
            $item_output .= '<span class="menu-item-description">' . $description . '</span>';
            $item_output .= '</span>';
            $item_output .= '</a>';
        } else {
            // Regular menu item (top level)
            $item_output .= '<a' . $attributes . '>';
            $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
            if ($depth == 0 && $has_children) {
                $item_output .= '<span class="dropdown-arrow"><i class="fa-solid fa-chevron-down" aria-hidden="true"></i></span>';
            }
            $item_output .= '</a>';
        }
        
        $item_output .= $args->after;
        
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
    
    function end_el(&$output, $item, $depth = 0, $args = null) {
        if ($depth == 0) {
            $output .= '</li>';
        } elseif ($depth >= 1) {
            $output .= '</li>';
        }
    }
}

// Mobile Menu Walker
class Mobile_Menu_Walker extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth = 0, $args = null) {
        $output .= '<ul class="mobile-submenu">';
    }
    
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $classes = empty($item->classes) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;
        
        $has_children = in_array('menu-item-has-children', $classes);
        if ($has_children) {
            $classes[] = 'has-children';
        }
        
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';
        
        $output .= '<li' . $class_names . '>';
        
        $atts = array();
        $atts['title'] = !empty($item->attr_title) ? $item->attr_title : '';
        $atts['target'] = !empty($item->target) ? $item->target : '';
        $atts['rel'] = !empty($item->xfn) ? $item->xfn : '';
        $atts['href'] = !empty($item->url) ? $item->url : '';
        $atts['class'] = 'mobile-nav-item';
        
        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args, $depth);
        
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (!empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }
        
        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;
        
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}
?>

<!-- Main Header -->
<header class="main-header">
    <!-- Sticky Main Header -->
    <div class="header-main sticky-top">
        <div class="header-container">
            <!-- Logo -->
            <div class="logo">
                <a href="<?php echo esc_url(home_url('/')); ?>">
                    <?php
                    $custom_logo_id = get_theme_mod('custom_logo');
                    $logo = wp_get_attachment_image_src($custom_logo_id, 'full');
                    if ($logo) {
                        echo '<img src="' . esc_url($logo[0]) . '" alt="' . get_bloginfo('name') . '">';
                    } else {
                        echo '<h2>' . get_bloginfo('name') . '</h2>';
                    }
                    ?>
                </a>
            </div>

            <!-- Navigation Menu -->
            <nav class="main-nav">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'container' => false,
                    'menu_class' => 'nav-menu',
                    'fallback_cb' => false,
                    'walker' => new Mega_Menu_Walker()
                ));
                ?>
            </nav>

            <!-- Header Actions -->
            <div class="header-actions">
                <!-- Order Now Button -->
                <div class="order-now-wrapper">
                    <a href="contact-us" class="order-now-btn">
                        Contact Us
                        <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
                    </a>
                </div>
                <!-- Mobile Nav Toggle Button -->
                <button class="mobile-nav-toggle" id="mobileNavToggle">
                    <i class="bi bi-list" aria-hidden="true"></i>
                </button>
            </div>
        </div>
    </div>
</header>

<!-- Mobile Navigation Menu -->
<div class="mobile-nav-menu" id="mobileNavMenu">
    <div class="mobile-nav-header">
        <h3>Menu</h3>
        <button class="mobile-nav-close" id="mobileNavClose">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
        </button>
    </div>
    <?php
    wp_nav_menu(array(
        'theme_location' => 'primary',
        'container' => false,
        'menu_class' => 'mobile-nav-list',
        'fallback_cb' => false,
        'walker' => new Mobile_Menu_Walker()
    ));
    ?>
    
    <!-- Mobile Order Now Button -->
    <div class="mobile-order-now">
        <a href="contact-us" class="order-now-btn mobile">
            Contact Us
            <i class="fa-solid fa-arrow-right" aria-hidden="true"></i>
        </a>
    </div>
</div>

<!-- Mobile Navigation Overlay -->
<div class="mobile-nav-overlay" id="mobileNavOverlay"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Mobile Navigation Toggle
    const mobileNavToggle = document.getElementById('mobileNavToggle');
    const mobileNavMenu = document.getElementById('mobileNavMenu');
    const mobileNavClose = document.getElementById('mobileNavClose');
    const mobileNavOverlay = document.getElementById('mobileNavOverlay');
    
    if (mobileNavToggle && mobileNavMenu && mobileNavClose && mobileNavOverlay) {
        mobileNavToggle.addEventListener('click', function() {
            mobileNavMenu.classList.add('active');
            mobileNavOverlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        });
        
        mobileNavClose.addEventListener('click', function() {
            mobileNavMenu.classList.remove('active');
            mobileNavOverlay.classList.remove('active');
            document.body.style.overflow = '';
        });
        
        mobileNavOverlay.addEventListener('click', function() {
            mobileNavMenu.classList.remove('active');
            mobileNavOverlay.classList.remove('active');
            document.body.style.overflow = '';
        });
    }
    
    // Optimized scroll effect with requestAnimationFrame
    let ticking = false;
    let lastScrollY = 0;
    
    window.addEventListener('scroll', function() {
        const header = document.querySelector('.main-header');
        if (!header) return;
        
        lastScrollY = window.scrollY;
        
        if (!ticking) {
            requestAnimationFrame(function() {
                if (lastScrollY > 50) {
                    if (!header.classList.contains('scrolled')) {
                        header.classList.add('scrolled');
                    }
                } else {
                    if (header.classList.contains('scrolled')) {
                        header.classList.remove('scrolled');
                    }
                }
                ticking = false;
            });
            ticking = true;
        }
    }, { passive: true });
    
    // Initialize header position on page load
    const header = document.querySelector('.main-header');
    if (window.scrollY > 50 && header) {
        header.classList.add('scrolled');
    }
    
    // Mobile Accordion
    const mobileMenu = document.getElementById('mobileNavMenu');
    if (mobileMenu) {
        mobileMenu.addEventListener('click', function(e) {
            const link = e.target.closest('.has-children > a');
            if (link) {
                e.preventDefault();
                const parentLi = link.parentElement;
                const submenu = parentLi.querySelector(':scope > .mobile-submenu');
                
                if (submenu) {
                    // Close other open submenus
                    parentLi.parentElement.querySelectorAll('.has-children').forEach(sibling => {
                        if (sibling !== parentLi) {
                            sibling.classList.remove('open');
                            const siblingSubmenu = sibling.querySelector(':scope > .mobile-submenu');
                            if (siblingSubmenu) siblingSubmenu.classList.remove('active');
                        }
                    });
                    
                    // Toggle current submenu
                    submenu.classList.toggle('active');
                    parentLi.classList.toggle('open');
                }
            }
        });
    }
});
</script>