<?php

namespace Calio\Widgets;

use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Typography;
use Elementor\Plugin;

if (!defined('ABSPATH')) {
    exit;
}

/**
 * Renders a menu bar with optional Elementor-powered mega menu panels per menu item.
 */
class CalioMegaMenuWalker extends \Walker_Nav_Menu
{
    /**
     * @var array<int, string>
     */
    private array $template_cache = [];
    private string $indicator_style = 'chevron';

    /**
     * @param array{indicator_style?: string} $args
     */
    public function __construct(array $args = [])
    {
        if (!empty($args['indicator_style']) && is_string($args['indicator_style'])) {
            $style = sanitize_key($args['indicator_style']);
            if (in_array($style, ['chevron', 'line', 'angle', 'plus', 'dot'], true)) {
                $this->indicator_style = $style;
            }
        }
    }

    public function start_lvl(&$output, $depth = 0, $args = null): void
    {
        $output .= '<div class="calio-submenu-wrap"><ul class="calio-submenu">';
    }

    public function end_lvl(&$output, $depth = 0, $args = null): void
    {
        $output .= '</ul></div>';
    }

    public function start_el(&$output, $item, $depth = 0, $args = null, $id = 0): void
    {
        $item_id = isset($item->ID) ? (int) $item->ID : 0;
        $classes = empty($item->classes) ? [] : (array) $item->classes;
        $meta = $this->get_item_meta($item_id);

        $has_children = !empty($item->hasChildren) || in_array('menu-item-has-children', $classes, true);
        $is_megamenu = $depth === 0 && $this->is_megamenu_enabled($meta);

        $classes[] = 'calio-menu-item';
        $classes[] = 'calio-menu-item-' . $item_id;

        if ($has_children) {
            $classes[] = 'calio-has-children';
        }

        if ($is_megamenu) {
            $classes[] = 'calio-has-megamenu';
            $classes[] = 'calio-mega-width-' . $meta['width_mode'];
            $classes[] = 'calio-mega-position-' . $meta['position_type'];
            $classes[] = 'calio-mobile-submenu-mode-' . $meta['mobile_submenu_type'];
        }

        if (!empty($item->current) || !empty($item->current_item_parent) || !empty($item->current_item_ancestor)) {
            $classes[] = 'calio-active';
        }

        $classes = array_map('sanitize_html_class', array_unique(array_filter($classes)));
        $class_attr = implode(' ', $classes);

        $output .= '<li class="' . esc_attr($class_attr) . '" data-calio-item-id="' . esc_attr((string) $item_id) . '">';

        $attributes = [];
        $attributes['title'] = !empty($item->attr_title) ? (string) $item->attr_title : '';
        $attributes['target'] = !empty($item->target) ? (string) $item->target : '';
        $attributes['rel'] = !empty($item->xfn) ? (string) $item->xfn : '';
        $attributes['href'] = !empty($item->url) ? (string) $item->url : '#';

        if ($attributes['target'] === '_blank') {
            $rel = preg_split('/\s+/', trim($attributes['rel']));
            $rel = is_array($rel) ? $rel : [];
            $rel[] = 'noopener';
            $rel[] = 'noreferrer';
            $attributes['rel'] = implode(' ', array_unique(array_filter($rel)));
        }

        $link_class = $depth === 0 ? 'calio-menu-link' : 'calio-submenu-link';
        $attributes['class'] = $link_class;

        if ($has_children || $is_megamenu) {
            $attributes['aria-haspopup'] = 'true';
            $attributes['aria-expanded'] = 'false';
        }

        $attr_html = '';
        foreach ($attributes as $name => $value) {
            if ($value === '') {
                continue;
            }

            if ($name === 'href') {
                $attr_html .= ' href="' . esc_url($value) . '"';
                continue;
            }

            $attr_html .= ' ' . esc_attr($name) . '="' . esc_attr($value) . '"';
        }

        // WordPress core filter.
        // phpcs:ignore WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedHooknameFound
        $title = apply_filters('the_title', (string) $item->title, $item_id);
        $content = '';

        if ($depth === 0 && $meta['icon_class'] !== '') {
            $icon_style = $meta['icon_color'] !== '' ? ' style="color:' . esc_attr($meta['icon_color']) . ';"' : '';
            $content .= '<i class="calio-menu-icon ' . esc_attr($meta['icon_class']) . '" aria-hidden="true"' . $icon_style . '></i>';
        }

        $content .= '<span class="calio-menu-title">' . esc_html($title) . '</span>';

        if ($depth === 0 && $meta['badge_text'] !== '') {
            $badge_style = '';
            if ($meta['badge_color'] !== '') {
                $badge_style .= 'color:' . $meta['badge_color'] . ';';
            }
            if ($meta['badge_bg'] !== '') {
                $badge_style .= 'background:' . $meta['badge_bg'] . ';';
            }

            $content .= '<span class="calio-menu-badge" style="' . esc_attr($badge_style) . '">' . esc_html($meta['badge_text']) . '</span>';
        }

        if ($has_children || $is_megamenu) {
            $content .= '<span class="calio-menu-indicator indicator-' . esc_attr($this->indicator_style) . '" aria-hidden="true"></span>';
        }

        $output .= '<a' . $attr_html . '>' . $content . '</a>';

        if ($is_megamenu) {
            $panel_style = '';
            if ($meta['width_mode'] === 'custom' && $meta['custom_width'] !== '') {
                $panel_style = ' style="--calio-mega-panel-width:' . esc_attr($meta['custom_width']) . ';"';
            }

            $panel_attrs = '';
            $panel_content = '';
            $should_ajax_load = $meta['ajax_load'] && !$this->is_elementor_editor_mode();

            if ($should_ajax_load) {
                $panel_attrs .= ' data-template-id="' . esc_attr((string) $meta['template_id']) . '" data-ajax-load="yes" data-loaded="no"';
                $panel_content = '<div class="calio-mega-loading">' . esc_html__('Loading menu content...', 'calio-addon') . '</div>';
            } else {
                $panel_attrs .= ' data-ajax-load="no" data-loaded="yes"';
                $panel_content = $this->get_template_content((int) $meta['template_id']);
                if ($panel_content === '') {
                    $panel_content = '<div class="calio-mega-empty">' . esc_html__('No template content found.', 'calio-addon') . '</div>';
                }
            }

            $output .= '<div class="calio-megamenu-panel"' . $panel_style . $panel_attrs . '><div class="calio-megamenu-panel-inner">' . $panel_content . '</div></div>';
        }
    }

    public function end_el(&$output, $item, $depth = 0, $args = null): void
    {
        $output .= '</li>';
    }

    public function display_element($element, &$children_elements, $max_depth, $depth, $args, &$output): void
    {
        if (!is_object($element) || !isset($element->ID)) {
            parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
            return;
        }

        $element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);
        parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }

    /**
     * @return array{enabled: bool, template_id: int, width_mode: string, custom_width: string, icon_class: string, icon_color: string, badge_text: string, badge_color: string, badge_bg: string, position_type: string, mobile_submenu_type: string, ajax_load: bool}
     */
    private function get_item_meta(int $item_id): array
    {
        $enabled = get_post_meta($item_id, '_calio_megamenu_enabled', true) === '1';
        $template_id = (int) get_post_meta($item_id, '_calio_megamenu_template_id', true);
        $width_mode = (string) get_post_meta($item_id, '_calio_megamenu_width_mode', true);
        $custom_width = (string) get_post_meta($item_id, '_calio_megamenu_custom_width', true);
        $icon_class = (string) get_post_meta($item_id, '_calio_megamenu_icon_class', true);
        $icon_color = (string) get_post_meta($item_id, '_calio_megamenu_icon_color', true);
        $badge_text = (string) get_post_meta($item_id, '_calio_megamenu_badge_text', true);
        $badge_color = (string) get_post_meta($item_id, '_calio_megamenu_badge_color', true);
        $badge_bg = (string) get_post_meta($item_id, '_calio_megamenu_badge_bg', true);
        $position_type = (string) get_post_meta($item_id, '_calio_megamenu_position_type', true);
        $mobile_submenu_type = (string) get_post_meta($item_id, '_calio_megamenu_mobile_submenu_type', true);
        $ajax_load = (string) get_post_meta($item_id, '_calio_megamenu_ajax_load', true);

        if (!in_array($width_mode, ['default', 'full', 'custom'], true)) {
            $width_mode = 'default';
        }

        if (!in_array($position_type, ['relative', 'top'], true)) {
            $position_type = 'relative';
        }

        if (!in_array($mobile_submenu_type, ['builder', 'submenu'], true)) {
            $mobile_submenu_type = 'builder';
        }

        if ($custom_width !== '' && !preg_match('/^\d+(\.\d+)?(px|%|rem|em|vw)$/', $custom_width)) {
            $custom_width = '';
        }

        $icon_tokens = preg_split('/\s+/', trim($icon_class));
        if (!is_array($icon_tokens)) {
            $icon_tokens = [];
        }

        $icon_tokens = array_filter(array_map(static function ($token): string {
            return sanitize_html_class((string) $token);
        }, $icon_tokens));

        return [
            'enabled' => $enabled,
            'template_id' => $template_id,
            'width_mode' => $width_mode,
            'custom_width' => $custom_width,
            'icon_class' => implode(' ', $icon_tokens),
            'icon_color' => $icon_color !== '' ? (string) sanitize_hex_color($icon_color) : '',
            'badge_text' => $badge_text,
            'badge_color' => $this->sanitize_css_color($badge_color),
            'badge_bg' => $this->sanitize_css_color($badge_bg),
            'position_type' => $position_type,
            'mobile_submenu_type' => $mobile_submenu_type,
            'ajax_load' => $ajax_load === 'yes',
        ];
    }

    private function sanitize_css_color(string $value): string
    {
        $value = trim(wp_strip_all_tags($value));
        if ($value === '') {
            return '';
        }

        $hex = sanitize_hex_color($value);
        return is_string($hex) ? $hex : '';
    }

    /**
     * @param array{enabled: bool, template_id: int, width_mode: string, custom_width: string, icon_class: string, icon_color: string, badge_text: string, badge_color: string, badge_bg: string, position_type: string, mobile_submenu_type: string, ajax_load: bool} $meta
     */
    private function is_megamenu_enabled(array $meta): bool
    {
        return $meta['enabled'] && $meta['template_id'] > 0 && class_exists('\Elementor\Plugin');
    }

    private function is_elementor_editor_mode(): bool
    {
        if (!class_exists('\Elementor\Plugin')) {
            return false;
        }

        $plugin = \Elementor\Plugin::$instance;
        if (isset($plugin->editor) && method_exists($plugin->editor, 'is_edit_mode') && $plugin->editor->is_edit_mode()) {
            return true;
        }

        if (isset($plugin->preview) && method_exists($plugin->preview, 'is_preview_mode') && $plugin->preview->is_preview_mode()) {
            return true;
        }

        if (did_action('elementor/preview/init') || did_action('elementor/editor/init')) {
            return true;
        }

        // Read-only Elementor/editor request detection.
        // phpcs:ignore WordPress.Security.NonceVerification.Recommended
        $action = isset($_GET['action']) ? sanitize_key((string) wp_unslash($_GET['action'])) : '';
        if ($action === 'elementor') {
            return true;
        }

        // phpcs:ignore WordPress.Security.NonceVerification.Recommended
        return isset($_GET['elementor-preview']);
    }

    private function get_template_content(int $template_id): string
    {
        if ($template_id <= 0 || !class_exists('\Elementor\Plugin')) {
            return '';
        }

        if (isset($this->template_cache[$template_id])) {
            return $this->template_cache[$template_id];
        }

        $content = (string) \Elementor\Plugin::$instance->frontend->get_builder_content_for_display($template_id, true);
        $this->template_cache[$template_id] = $content;
        return $content;
    }
}

class MegaMenuWidget extends BaseWidget
{
    public function get_name(): string
    {
        return 'calio-mega-menu';
    }

    public function get_title(): string
    {
        return esc_html__('Mega Menu', 'calio-addon');
    }

    public function get_icon(): string
    {
        return 'eicon-nav-menu';
    }

    public function get_style_depends(): array
    {
        return $this->resolve_widget_style_depends('calio-widget-mega-menu');
    }

    public function get_script_depends(): array
    {
        return $this->resolve_widget_script_depends('calio-widget-mega-menu');
    }

    public function has_widget_inner_wrapper(): bool
    {
        return !Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
    }

    protected function register_controls(): void
    {
        $this->register_content_controls();
        $this->register_menu_style_controls();
        $this->register_dropdown_style_controls();
        $this->register_panel_style_controls();
        $this->register_mobile_style_controls();
    }

    private function register_content_controls(): void
    {
        $this->start_controls_section('mega_menu_content', [
            'label' => esc_html__('Menu', 'calio-addon'),
        ]);

        $this->add_control('menu_id', [
            'label' => esc_html__('Select Menu', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'options' => $this->get_available_menus(),
            'default' => '0',
        ]);

        $this->add_responsive_control('menu_align', [
            'label' => esc_html__('Alignment', 'calio-addon'),
            'type' => Controls_Manager::CHOOSE,
            'options' => [
                'flex-start' => [
                    'title' => esc_html__('Start', 'calio-addon'),
                    'icon' => 'eicon-h-align-left',
                ],
                'center' => [
                    'title' => esc_html__('Center', 'calio-addon'),
                    'icon' => 'eicon-h-align-center',
                ],
                'flex-end' => [
                    'title' => esc_html__('End', 'calio-addon'),
                    'icon' => 'eicon-h-align-right',
                ],
            ],
            'default' => 'flex-start',
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu' => 'justify-content: {{VALUE}};',
            ],
        ]);

        $this->add_control('interaction', [
            'label' => esc_html__('Open Interaction', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'hover',
            'options' => [
                'hover' => esc_html__('Hover', 'calio-addon'),
                'click' => esc_html__('Click', 'calio-addon'),
            ],
        ]);

        $this->add_control('submenu_indicator_icon', [
            'label' => esc_html__('Submenu Indicator', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'chevron',
            'options' => [
                'chevron' => esc_html__('Chevron', 'calio-addon'),
                'line' => esc_html__('Line Arrow', 'calio-addon'),
                'angle' => esc_html__('Angle', 'calio-addon'),
                'plus' => esc_html__('Plus', 'calio-addon'),
                'dot' => esc_html__('Dot', 'calio-addon'),
            ],
        ]);

        $this->add_control('submenu_indicator_motion', [
            'label' => esc_html__('Indicator Motion', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'rotate',
            'options' => [
                'rotate' => esc_html__('Rotate', 'calio-addon'),
                'slide' => esc_html__('Slide', 'calio-addon'),
                'fade' => esc_html__('Fade', 'calio-addon'),
                'pop' => esc_html__('Pop', 'calio-addon'),
                'minimal' => esc_html__('Minimal', 'calio-addon'),
                'none' => esc_html__('None', 'calio-addon'),
            ],
        ]);

        $this->add_control('submenu_indicator_behavior', [
            'label' => esc_html__('Indicator Visibility', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'always',
            'options' => [
                'always' => esc_html__('Always', 'calio-addon'),
                'hover' => esc_html__('Hover Only', 'calio-addon'),
                'open' => esc_html__('Open Only', 'calio-addon'),
            ],
        ]);

        $this->add_control('mobile_toggle', [
            'label' => esc_html__('Mobile Toggle', 'calio-addon'),
            'type' => Controls_Manager::SWITCHER,
            'default' => 'yes',
            'return_value' => 'yes',
        ]);

        $this->add_control('mobile_menu_id', [
            'label' => esc_html__('Mobile Menu Source', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'options' => $this->get_available_menus(),
            'default' => '0',
            'description' => esc_html__('Pick another menu for mobile. If empty, desktop menu is reused.', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_label', [
            'label' => esc_html__('Toggle Label', 'calio-addon'),
            'type' => Controls_Manager::TEXT,
            'default' => esc_html__('Menu', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_skin', [
            'label' => esc_html__('Toggle Skin', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'glass',
            'options' => [
                'glass' => esc_html__('Glass', 'calio-addon'),
                'solid' => esc_html__('Solid', 'calio-addon'),
                'outline' => esc_html__('Outline', 'calio-addon'),
                'minimal' => esc_html__('Minimal', 'calio-addon'),
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_layout_mode', [
            'label' => esc_html__('Mobile Layout', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'dropdown',
            'options' => [
                'dropdown' => esc_html__('Dropdown', 'calio-addon'),
                'offcanvas-left' => esc_html__('Offcanvas Left', 'calio-addon'),
                'offcanvas-right' => esc_html__('Offcanvas Right', 'calio-addon'),
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_overlay', [
            'label' => esc_html__('Overlay', 'calio-addon'),
            'type' => Controls_Manager::SWITCHER,
            'default' => 'yes',
            'return_value' => 'yes',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_breakpoint', [
            'label' => esc_html__('Mobile Breakpoint', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => [
                    'min' => 600,
                    'max' => 1400,
                ],
            ],
            'default' => [
                'size' => 1024,
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_section();
    }

    private function register_menu_style_controls(): void
    {
        $this->start_controls_section('mega_menu_style', [
            'label' => esc_html__('Menu Items', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name' => 'menu_typography',
            'selector' => '{{WRAPPER}} .calio-menu-link',
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'menu_link_border',
            'selector' => '{{WRAPPER}} .calio-menu-link',
        ]);

        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'menu_link_shadow',
            'selector' => '{{WRAPPER}} .calio-menu-link',
        ]);

        $this->start_controls_tabs('menu_item_state_tabs');

        $this->start_controls_tab('menu_item_state_normal', [
            'label' => esc_html__('Normal', 'calio-addon'),
        ]);

        $this->add_control('menu_text_color', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_bg_color', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_border_color', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link' => 'border-color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_icon_color', [
            'label' => esc_html__('Icon Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link .calio-menu-icon' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_badge_text_color', [
            'label' => esc_html__('Badge Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link .calio-menu-badge' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_badge_bg_color', [
            'label' => esc_html__('Badge Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link .calio-menu-badge' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('menu_item_state_hover', [
            'label' => esc_html__('Hover', 'calio-addon'),
        ]);

        $this->add_control('menu_hover_color', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item:hover > .calio-menu-link, {{WRAPPER}} .calio-menu-item.is-open > .calio-menu-link, {{WRAPPER}} .calio-menu-item:focus-within > .calio-menu-link' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_hover_bg', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item:hover > .calio-menu-link, {{WRAPPER}} .calio-menu-item.is-open > .calio-menu-link, {{WRAPPER}} .calio-menu-item:focus-within > .calio-menu-link' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_hover_border_color', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item:hover > .calio-menu-link, {{WRAPPER}} .calio-menu-item.is-open > .calio-menu-link, {{WRAPPER}} .calio-menu-item:focus-within > .calio-menu-link' => 'border-color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_hover_icon_color', [
            'label' => esc_html__('Icon Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item:hover > .calio-menu-link .calio-menu-icon, {{WRAPPER}} .calio-menu-item.is-open > .calio-menu-link .calio-menu-icon, {{WRAPPER}} .calio-menu-item:focus-within > .calio-menu-link .calio-menu-icon' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_hover_badge_text_color', [
            'label' => esc_html__('Badge Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item:hover > .calio-menu-link .calio-menu-badge, {{WRAPPER}} .calio-menu-item.is-open > .calio-menu-link .calio-menu-badge, {{WRAPPER}} .calio-menu-item:focus-within > .calio-menu-link .calio-menu-badge' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_hover_badge_bg_color', [
            'label' => esc_html__('Badge Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item:hover > .calio-menu-link .calio-menu-badge, {{WRAPPER}} .calio-menu-item.is-open > .calio-menu-link .calio-menu-badge, {{WRAPPER}} .calio-menu-item:focus-within > .calio-menu-link .calio-menu-badge' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('menu_item_state_active', [
            'label' => esc_html__('Active', 'calio-addon'),
        ]);

        $this->add_control('menu_active_color', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item.calio-active > .calio-menu-link' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_active_bg', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item.calio-active > .calio-menu-link' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_active_border_color', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item.calio-active > .calio-menu-link' => 'border-color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_active_icon_color', [
            'label' => esc_html__('Icon Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item.calio-active > .calio-menu-link .calio-menu-icon' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_active_badge_text_color', [
            'label' => esc_html__('Badge Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item.calio-active > .calio-menu-link .calio-menu-badge' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_active_badge_bg_color', [
            'label' => esc_html__('Badge Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-item.calio-active > .calio-menu-link .calio-menu-badge' => 'background: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_responsive_control('menu_item_padding', [
            'label' => esc_html__('Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('menu_item_radius', [
            'label' => esc_html__('Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-link' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('menu_item_gap', [
            'label' => esc_html__('Item Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-list' => 'column-gap: {{SIZE}}{{UNIT}}; row-gap: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name' => 'menu_badge_typography',
            'selector' => '{{WRAPPER}} .calio-menu-badge',
        ]);

        $this->add_responsive_control('menu_badge_padding', [
            'label' => esc_html__('Badge Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('menu_badge_radius', [
            'label' => esc_html__('Badge Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-badge' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('menu_badge_gap', [
            'label' => esc_html__('Badge Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 24],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-badge' => 'margin-inline-start: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_control('menu_indicator_color', [
            'label' => esc_html__('Indicator Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-indicator' => 'color: {{VALUE}};',
                '{{WRAPPER}} .calio-menu-indicator::before' => 'border-color: {{VALUE}}; background-color: {{VALUE}}; color: {{VALUE}};',
                '{{WRAPPER}} .calio-menu-indicator::after' => 'border-color: {{VALUE}}; background-color: {{VALUE}}; color: {{VALUE}};',
            ],
        ]);

        $this->add_responsive_control('menu_indicator_size', [
            'label' => esc_html__('Indicator Size', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 8, 'max' => 30],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-indicator' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; font-size: calc({{SIZE}}{{UNIT}} * 0.95);',
            ],
        ]);

        $this->add_responsive_control('menu_indicator_gap', [
            'label' => esc_html__('Indicator Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 30],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-indicator' => 'margin-inline-start: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_control('menu_indicator_motion_heading', [
            'label' => esc_html__('Indicator Motion', 'calio-addon'),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
        ]);

        $this->add_responsive_control('menu_indicator_motion_duration', [
            'label' => esc_html__('Motion Duration', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 60, 'max' => 900],
            ],
            'default' => [
                'size' => 180,
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper' => '--calio-indicator-duration: {{SIZE}}ms;',
            ],
        ]);

        $this->add_control('menu_indicator_motion_easing', [
            'label' => esc_html__('Motion Easing', 'calio-addon'),
            'type' => Controls_Manager::SELECT,
            'default' => 'cubic-bezier(0.22, 1, 0.36, 1)',
            'options' => [
                'linear' => esc_html__('Linear', 'calio-addon'),
                'ease' => esc_html__('Ease', 'calio-addon'),
                'ease-in-out' => esc_html__('Ease In Out', 'calio-addon'),
                'cubic-bezier(0.22, 1, 0.36, 1)' => esc_html__('Smooth Out', 'calio-addon'),
                'cubic-bezier(0.4, 0, 0.2, 1)' => esc_html__('Material', 'calio-addon'),
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper' => '--calio-indicator-easing: {{VALUE}};',
            ],
        ]);

        $this->add_responsive_control('menu_indicator_slide_distance', [
            'label' => esc_html__('Slide Distance', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 16],
            ],
            'default' => [
                'size' => 2,
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper' => '--calio-indicator-slide-distance: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_control('menu_indicator_pop_scale_closed', [
            'label' => esc_html__('Pop Idle Scale', 'calio-addon'),
            'type' => Controls_Manager::NUMBER,
            'min' => 0.7,
            'max' => 1.2,
            'step' => 0.01,
            'default' => 0.92,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper' => '--calio-indicator-pop-scale-closed: {{VALUE}};',
            ],
        ]);

        $this->add_control('menu_indicator_pop_scale_open', [
            'label' => esc_html__('Pop Open Scale', 'calio-addon'),
            'type' => Controls_Manager::NUMBER,
            'min' => 0.8,
            'max' => 1.5,
            'step' => 0.01,
            'default' => 1.12,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper' => '--calio-indicator-pop-scale-open: {{VALUE}};',
            ],
        ]);

        $this->end_controls_section();
    }

    private function register_dropdown_style_controls(): void
    {
        $this->start_controls_section('mega_dropdown_style', [
            'label' => esc_html__('Dropdown', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name' => 'submenu_typography',
            'selector' => '{{WRAPPER}} .calio-submenu-link',
        ]);

        $this->add_control('submenu_text_color', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-link' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_bg_color', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-wrap' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'submenu_border',
            'selector' => '{{WRAPPER}} .calio-submenu-wrap',
        ]);

        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'submenu_shadow',
            'selector' => '{{WRAPPER}} .calio-submenu-wrap',
        ]);

        $this->add_responsive_control('submenu_min_width', [
            'label' => esc_html__('Minimum Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 140, 'max' => 700],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-wrap' => 'min-inline-size: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('submenu_radius', [
            'label' => esc_html__('Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-wrap' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('submenu_padding', [
            'label' => esc_html__('Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'submenu_item_border',
            'selector' => '{{WRAPPER}} .calio-submenu-link',
        ]);

        $this->add_responsive_control('submenu_item_radius', [
            'label' => esc_html__('Item Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-link' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('submenu_item_padding', [
            'label' => esc_html__('Item Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('submenu_item_gap', [
            'label' => esc_html__('Item Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 24],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-submenu > li + li' => 'margin-top: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->start_controls_tabs('submenu_item_state_tabs');

        $this->start_controls_tab('submenu_item_state_normal', [
            'label' => esc_html__('Normal', 'calio-addon'),
        ]);

        $this->add_control('submenu_item_bg_color', [
            'label' => esc_html__('Item Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-link' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_item_normal_border_color', [
            'label' => esc_html__('Item Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu-link' => 'border-color: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('submenu_item_state_hover', [
            'label' => esc_html__('Hover', 'calio-addon'),
        ]);

        $this->add_control('submenu_hover_text_color', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu li:hover > .calio-submenu-link, {{WRAPPER}} .calio-submenu li.is-open > .calio-submenu-link, {{WRAPPER}} .calio-submenu li:focus-within > .calio-submenu-link' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_hover_bg_color', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu li:hover > .calio-submenu-link, {{WRAPPER}} .calio-submenu li.is-open > .calio-submenu-link, {{WRAPPER}} .calio-submenu li:focus-within > .calio-submenu-link' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_hover_border_color', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu li:hover > .calio-submenu-link, {{WRAPPER}} .calio-submenu li.is-open > .calio-submenu-link, {{WRAPPER}} .calio-submenu li:focus-within > .calio-submenu-link' => 'border-color: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('submenu_item_state_active', [
            'label' => esc_html__('Active', 'calio-addon'),
        ]);

        $this->add_control('submenu_active_text_color', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu li.calio-active > .calio-submenu-link' => 'color: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_active_bg_color', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu li.calio-active > .calio-submenu-link' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_control('submenu_active_border_color', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-submenu li.calio-active > .calio-submenu-link' => 'border-color: {{VALUE}};',
            ],
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->end_controls_section();
    }

    private function register_panel_style_controls(): void
    {
        $this->start_controls_section('mega_panel_style', [
            'label' => esc_html__('Mega Panel', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_control('panel_bg_color', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-megamenu-panel' => 'background: {{VALUE}};',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'panel_border',
            'selector' => '{{WRAPPER}} .calio-megamenu-panel',
        ]);

        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'panel_shadow',
            'selector' => '{{WRAPPER}} .calio-megamenu-panel',
        ]);

        $this->add_responsive_control('panel_padding', [
            'label' => esc_html__('Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-megamenu-panel-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
        ]);

        $this->add_responsive_control('panel_radius', [
            'label' => esc_html__('Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 50],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-megamenu-panel' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
        ]);

        $this->end_controls_section();
    }

    private function register_mobile_style_controls(): void
    {
        $this->start_controls_section('mega_mobile_style', [
            'label' => esc_html__('Mobile', 'calio-addon'),
            'tab' => Controls_Manager::TAB_STYLE,
        ]);

        $this->add_control('mobile_toggle_heading', [
            'label' => esc_html__('Toggle Button', 'calio-addon'),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name' => 'mobile_toggle_typography',
            'selector' => '{{WRAPPER}} .calio-menu-toggle',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'mobile_toggle_border',
            'selector' => '{{WRAPPER}} .calio-menu-toggle',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'mobile_toggle_shadow',
            'selector' => '{{WRAPPER}} .calio-menu-toggle',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->start_controls_tabs('mobile_toggle_state_tabs');

        $this->start_controls_tab('mobile_toggle_state_normal', [
            'label' => esc_html__('Normal', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_text_color_style', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle' => 'color: {{VALUE}};',
                '{{WRAPPER}} .calio-menu-toggle-icon span' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_bg_color_style', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_border_color_style', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle' => 'border-color: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('mobile_toggle_state_hover', [
            'label' => esc_html__('Hover', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_hover_text_color_style', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle:hover, {{WRAPPER}} .calio-menu-toggle:focus-visible' => 'color: {{VALUE}};',
                '{{WRAPPER}} .calio-menu-toggle:hover .calio-menu-toggle-icon span, {{WRAPPER}} .calio-menu-toggle:focus-visible .calio-menu-toggle-icon span' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_hover_bg_color_style', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle:hover, {{WRAPPER}} .calio-menu-toggle:focus-visible' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_hover_border_color_style', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle:hover, {{WRAPPER}} .calio-menu-toggle:focus-visible' => 'border-color: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('mobile_toggle_state_open', [
            'label' => esc_html__('Open', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_open_text_color_style', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle.is-open' => 'color: {{VALUE}};',
                '{{WRAPPER}} .calio-menu-toggle.is-open .calio-menu-toggle-icon span' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_open_bg_color_style', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle.is-open' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_toggle_open_border_color_style', [
            'label' => esc_html__('Border Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle.is-open' => 'border-color: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_responsive_control('mobile_toggle_padding_style', [
            'label' => esc_html__('Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_toggle_radius_style', [
            'label' => esc_html__('Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_toggle_gap_style', [
            'label' => esc_html__('Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 30],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle' => 'gap: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_toggle_icon_size_style', [
            'label' => esc_html__('Icon Size', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 12, 'max' => 36],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-menu-toggle-icon' => 'width: {{SIZE}}{{UNIT}}; gap: calc({{SIZE}}{{UNIT}} / 4.5);',
                '{{WRAPPER}} .calio-menu-toggle-icon span' => 'height: calc({{SIZE}}{{UNIT}} / 9);',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_panel_heading', [
            'label' => esc_html__('Mobile Panel', 'calio-addon'),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_panel_bg_color_style', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-toggle-enabled .calio-menu-list' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_group_control(Group_Control_Border::get_type(), [
            'name' => 'mobile_panel_border',
            'selector' => '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-toggle-enabled .calio-menu-list',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_group_control(Group_Control_Box_Shadow::get_type(), [
            'name' => 'mobile_panel_shadow',
            'selector' => '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-toggle-enabled .calio-menu-list',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_panel_padding_style', [
            'label' => esc_html__('Panel Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-toggle-enabled .calio-menu-list' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_panel_radius_style', [
            'label' => esc_html__('Panel Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-toggle-enabled .calio-menu-list' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_panel_margin_top_style', [
            'label' => esc_html__('Panel Top Spacing', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 60],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-toggle-enabled .calio-menu-list' => 'margin-top: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_offcanvas_panel_width_style', [
            'label' => esc_html__('Offcanvas Width', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 220, 'max' => 520],
                '%' => ['min' => 45, 'max' => 100],
                'vw' => ['min' => 35, 'max' => 100],
            ],
            'default' => [
                'size' => 340,
                'unit' => 'px',
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-layout-offcanvas-left.calio-mobile-toggle-enabled .calio-menu-list, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view.calio-mobile-layout-offcanvas-right.calio-mobile-toggle-enabled .calio-menu-list' => 'width: {{SIZE}}{{UNIT}}; max-width: min({{SIZE}}{{UNIT}}, 96vw);',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_overlay_heading', [
            'label' => esc_html__('Overlay Layer', 'calio-addon'),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_overlay_bg_color_style', [
            'label' => esc_html__('Overlay Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mobile-overlay' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_overlay_blur_style', [
            'label' => esc_html__('Overlay Blur', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 24],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mobile-overlay' => 'backdrop-filter: blur({{SIZE}}{{UNIT}});',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_items_heading', [
            'label' => esc_html__('Mobile Items', 'calio-addon'),
            'type' => Controls_Manager::HEADING,
            'separator' => 'before',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_group_control(Group_Control_Typography::get_type(), [
            'name' => 'mobile_items_typography',
            'selector' => '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu-link',
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->start_controls_tabs('mobile_item_state_tabs');

        $this->start_controls_tab('mobile_item_state_normal', [
            'label' => esc_html__('Normal', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_item_text_color_style', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu-link' => 'color: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_item_bg_color_style', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu-link' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('mobile_item_state_hover', [
            'label' => esc_html__('Hover', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_item_hover_text_color_style', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item:hover > .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu li:hover > .calio-submenu-link' => 'color: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_item_hover_bg_color_style', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item:hover > .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu li:hover > .calio-submenu-link' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_tab();

        $this->start_controls_tab('mobile_item_state_open', [
            'label' => esc_html__('Open/Active', 'calio-addon'),
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_item_open_text_color_style', [
            'label' => esc_html__('Text Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item.is-open > .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item.calio-active > .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu li.is-open > .calio-submenu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu li.calio-active > .calio-submenu-link' => 'color: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_item_open_bg_color_style', [
            'label' => esc_html__('Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item.is-open > .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item.calio-active > .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu li.is-open > .calio-submenu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu li.calio-active > .calio-submenu-link' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_tab();
        $this->end_controls_tabs();

        $this->add_responsive_control('mobile_item_padding_style', [
            'label' => esc_html__('Item Padding', 'calio-addon'),
            'type' => Controls_Manager::DIMENSIONS,
            'size_units' => ['px', 'em', '%'],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu-link' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_item_radius_style', [
            'label' => esc_html__('Item Radius', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 40],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-link, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu-link' => 'border-radius: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_item_separator_color_style', [
            'label' => esc_html__('Separator Color', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item + .calio-menu-item' => 'border-top-color: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_item_gap_style', [
            'label' => esc_html__('Item Gap', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 30],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-menu-item + .calio-menu-item' => 'margin-top: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_control('mobile_submenu_bg_color_style', [
            'label' => esc_html__('Submenu Background', 'calio-addon'),
            'type' => Controls_Manager::COLOR,
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu-wrap, {{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-megamenu-panel' => 'background: {{VALUE}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->add_responsive_control('mobile_submenu_indent_style', [
            'label' => esc_html__('Submenu Indent', 'calio-addon'),
            'type' => Controls_Manager::SLIDER,
            'range' => [
                'px' => ['min' => 0, 'max' => 60],
            ],
            'selectors' => [
                '{{WRAPPER}} .calio-mega-menu-wrapper.calio-is-mobile-view .calio-submenu .calio-submenu-wrap' => 'margin-inline-start: {{SIZE}}{{UNIT}};',
            ],
            'condition' => [
                'mobile_toggle' => 'yes',
            ],
        ]);

        $this->end_controls_section();
    }

    protected function render(): void
    {
        $settings = $this->get_settings_for_display();
        $menu_id = isset($settings['menu_id']) ? (int) $settings['menu_id'] : 0;

        if ($menu_id <= 0) {
            echo '<div class="calio-mega-empty">' . esc_html__('Please select a menu.', 'calio-addon') . '</div>';
            return;
        }

        $menu_object = wp_get_nav_menu_object($menu_id);
        if (!$menu_object) {
            echo '<div class="calio-mega-empty">' . esc_html__('Selected menu is not available.', 'calio-addon') . '</div>';
            return;
        }

        $menu_wrapper_id = 'calio-mega-menu-' . $this->get_id();
        $menu_list_id = $menu_wrapper_id . '-desktop-list';
        $mobile_menu_list_id = $menu_wrapper_id . '-mobile-list';

        $mobile_toggle = !empty($settings['mobile_toggle']) && $settings['mobile_toggle'] === 'yes';
        $mobile_label = isset($settings['mobile_toggle_label']) ? (string) $settings['mobile_toggle_label'] : '';
        $mobile_skin = isset($settings['mobile_toggle_skin']) ? sanitize_key((string) $settings['mobile_toggle_skin']) : 'glass';
        if (!in_array($mobile_skin, ['glass', 'solid', 'outline', 'minimal'], true)) {
            $mobile_skin = 'glass';
        }
        $mobile_layout = isset($settings['mobile_layout_mode']) ? sanitize_key((string) $settings['mobile_layout_mode']) : 'dropdown';
        if (!in_array($mobile_layout, ['dropdown', 'offcanvas-left', 'offcanvas-right'], true)) {
            $mobile_layout = 'dropdown';
        }
        $mobile_overlay = !empty($settings['mobile_overlay']) && $settings['mobile_overlay'] === 'yes';

        $mobile_menu_id = isset($settings['mobile_menu_id']) ? (int) $settings['mobile_menu_id'] : 0;
        if ($mobile_menu_id === $menu_id) {
            $mobile_menu_id = 0;
        }

        $mobile_menu_object = $mobile_menu_id > 0 ? wp_get_nav_menu_object($mobile_menu_id) : null;
        $has_mobile_menu_source = $mobile_toggle && $mobile_menu_object;

        $mobile_breakpoint = 1024;
        if (!empty($settings['mobile_breakpoint']) && is_array($settings['mobile_breakpoint']) && isset($settings['mobile_breakpoint']['size'])) {
            $size = (float) $settings['mobile_breakpoint']['size'];
            if ($size >= 600 && $size <= 1600) {
                $mobile_breakpoint = (int) round($size);
            }
        }

        $interaction = isset($settings['interaction']) ? sanitize_key((string) $settings['interaction']) : 'hover';
        if (!in_array($interaction, ['hover', 'click'], true)) {
            $interaction = 'hover';
        }

        $indicator_style = isset($settings['submenu_indicator_icon']) ? sanitize_key((string) $settings['submenu_indicator_icon']) : 'chevron';
        if (!in_array($indicator_style, ['chevron', 'line', 'angle', 'plus', 'dot'], true)) {
            $indicator_style = 'chevron';
        }
        $indicator_motion = isset($settings['submenu_indicator_motion']) ? sanitize_key((string) $settings['submenu_indicator_motion']) : 'rotate';
        if (!in_array($indicator_motion, ['rotate', 'slide', 'fade', 'pop', 'minimal', 'none'], true)) {
            $indicator_motion = 'rotate';
        }
        $indicator_behavior = isset($settings['submenu_indicator_behavior']) ? sanitize_key((string) $settings['submenu_indicator_behavior']) : 'always';
        if (!in_array($indicator_behavior, ['always', 'hover', 'open'], true)) {
            $indicator_behavior = 'always';
        }

        $this->add_render_attribute('wrapper', 'class', ['calio-mega-menu-wrapper']);
        $this->add_render_attribute('wrapper', 'class', ['calio-indicator-motion-' . $indicator_motion]);
        $this->add_render_attribute('wrapper', 'class', ['calio-indicator-behavior-' . $indicator_behavior]);
        if ($mobile_toggle) {
            $this->add_render_attribute('wrapper', 'class', [
                'calio-mobile-toggle-enabled',
                'calio-toggle-skin-' . $mobile_skin,
                'calio-mobile-layout-' . $mobile_layout,
            ]);
            if ($mobile_layout !== 'dropdown' && $mobile_overlay) {
                $this->add_render_attribute('wrapper', 'class', ['calio-mobile-overlay-enabled']);
            }
        }
        if ($has_mobile_menu_source) {
            $this->add_render_attribute('wrapper', 'class', ['calio-has-mobile-menu-source']);
        }

        $desktop_menu_config = [
            'interaction' => $interaction,
            'mobile-toggle' => $has_mobile_menu_source ? false : $mobile_toggle,
            'mobile-breakpoint' => $mobile_breakpoint,
            'mobile-layout' => $mobile_layout,
            'ajax-url' => admin_url('admin-ajax.php'),
            'ajax-action' => 'calio_megamenu_template',
            'ajax-nonce' => wp_create_nonce('calio_megamenu_template'),
            'menu-role' => 'desktop',
        ];

        $desktop_menu_config_json = wp_json_encode($desktop_menu_config, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);

        $this->add_render_attribute('menu_desktop', 'class', ['calio-mega-menu', 'calio-menu-desktop', 'calio-interaction-' . $interaction]);
        $this->add_render_attribute('menu_desktop', 'id', $menu_wrapper_id . '-desktop');
        $this->add_render_attribute('menu_desktop', 'data-calio-menu', is_string($desktop_menu_config_json) ? $desktop_menu_config_json : '{}');

        if ($has_mobile_menu_source) {
            $mobile_menu_config = [
                'interaction' => 'click',
                'mobile-toggle' => true,
                'mobile-breakpoint' => $mobile_breakpoint,
                'mobile-layout' => $mobile_layout,
                'ajax-url' => admin_url('admin-ajax.php'),
                'ajax-action' => 'calio_megamenu_template',
                'ajax-nonce' => wp_create_nonce('calio_megamenu_template'),
                'menu-role' => 'mobile',
                'mobile-only' => true,
            ];

            $mobile_menu_config_json = wp_json_encode($mobile_menu_config, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);

            $this->add_render_attribute('menu_mobile', 'class', ['calio-mega-menu', 'calio-menu-mobile', 'calio-interaction-click']);
            $this->add_render_attribute('menu_mobile', 'id', $menu_wrapper_id . '-mobile');
            $this->add_render_attribute('menu_mobile', 'data-calio-menu', is_string($mobile_menu_config_json) ? $mobile_menu_config_json : '{}');
        }

        $walker = new CalioMegaMenuWalker([
            'indicator_style' => $indicator_style,
        ]);

        $desktop_menu_args = [
            'fallback_cb' => false,
            'container' => false,
            'menu_class' => 'calio-menu-list',
            'items_wrap' => '<ul id="' . esc_attr($menu_list_id) . '" class="%2$s">%3$s</ul>',
            'menu' => $menu_object,
            'depth' => 5,
            'echo' => true,
            'walker' => $walker,
        ];

        $mobile_menu_args = [];
        if ($has_mobile_menu_source) {
            $mobile_menu_args = [
                'fallback_cb' => false,
                'container' => false,
                'menu_class' => 'calio-menu-list',
                'items_wrap' => '<ul id="' . esc_attr($mobile_menu_list_id) . '" class="%2$s">%3$s</ul>',
                'menu' => $mobile_menu_object,
                'depth' => 5,
                'echo' => true,
                'walker' => $walker,
            ];
        }

        $toggle_controls_id = $has_mobile_menu_source ? $mobile_menu_list_id : $menu_list_id;
        ?>
        <div <?php $this->print_render_attribute_string('wrapper'); ?>>
            <?php if ($mobile_toggle) : ?>
                <div class="calio-menu-toggle-wrap">
                    <button class="calio-menu-toggle" type="button" aria-controls="<?php echo esc_attr($toggle_controls_id); ?>" aria-expanded="false">
                        <span class="calio-menu-toggle-icon" aria-hidden="true"><span></span><span></span><span></span></span>
                        <?php if ($mobile_label !== '') : ?>
                            <span class="calio-menu-toggle-label"><?php echo esc_html($mobile_label); ?></span>
                        <?php endif; ?>
                    </button>
                </div>
            <?php endif; ?>
            <?php if ($mobile_toggle && $mobile_layout !== 'dropdown' && $mobile_overlay) : ?>
                <div class="calio-mobile-overlay" aria-hidden="true"></div>
            <?php endif; ?>
            <nav <?php $this->print_render_attribute_string('menu_desktop'); ?>>
                <?php wp_nav_menu($desktop_menu_args); ?>
            </nav>
            <?php if ($has_mobile_menu_source) : ?>
                <nav <?php $this->print_render_attribute_string('menu_mobile'); ?>>
                    <?php wp_nav_menu($mobile_menu_args); ?>
                </nav>
            <?php endif; ?>
        </div>
        <?php
    }

    /**
     * @return array<string, string>
     */
    private function get_available_menus(): array
    {
        $options = ['0' => esc_html__('Select a menu', 'calio-addon')];
        $menus = wp_get_nav_menus();

        foreach ($menus as $menu) {
            if (!isset($menu->term_id, $menu->name)) {
                continue;
            }

            $options[(string) (int) $menu->term_id] = (string) $menu->name;
        }

        return $options;
    }
}
