jQuery(document).ready(function($) {
        // Elementos DOM
        const menuBtn=$('#menuBtn');
        const closeBtn=$('#closeBtn');
        const backBtn=$('#backBtn');
        const menuOverlay=$('#menuOverlay');
        const menuPanel=$('#menuPanel');
        const submenuPanel=$('#submenuPanel');
        const categoriesList=$('#categoriesList');
        const submenuTitle=$('#submenuTitle');
        const submenuContent=$('#submenuContent');

        // Generar categorías desde WooCommerce
        function generarCategorias() {
            categoriesList.empty();

            if (typeof menuData !=='undefined') {
                $.each(menuData, function(categoria, productos) {
                        if (productos.length > 0) {
                            const categoryItem=$('<button>', {

                                    class: 'category-item',
                                    text: categoria,
                                    click: function() {
                                        mostrarSubmenu(categoria, productos);
                                    }
                                }

                            );
                            categoriesList.append(categoryItem);
                        }
                    }

                );
            }

            else {
                categoriesList.html('<p class="no-categories">No hay categorías disponibles</p>');
            }
        }

        // Mostrar submenú
        function mostrarSubmenu(categoria, productos) {
            submenuTitle.text(categoria);
            submenuContent.empty();

            if (productos.length > 0) {
                $.each(productos, function(index, item) {
                        const menuItem=$('<div>', {
                                class: 'menu-item'
                            }

                        ).html(` <h4>$ {
                                item.nombre
                            }

                            </h4> <p>$ {
                                item.descripcion
                            }

                            </p> <div class="price">$ {
                                item.precio
                            }

                            </div> `);
                        submenuContent.append(menuItem);
                    }

                );
            }

            else {
                submenuContent.html('<p>No hay productos en esta categoría</p>');
            }

            // Animación para mostrar submenú
            menuPanel.removeClass('active');

            setTimeout(()=> {
                    submenuPanel.addClass('active');
                }

                , 300);
        }

        // Event Listeners
        menuBtn.on('click', function() {
                menuOverlay.addClass('active');
                menuPanel.addClass('active');
            }

        );

        closeBtn.on('click', cerrarMenu);
        menuOverlay.on('click', cerrarMenu);

        backBtn.on('click', function() {
                submenuPanel.removeClass('active');

                setTimeout(()=> {
                        menuPanel.addClass('active');
                    }

                    , 300);
            }

        );

        // Cerrar menú
        function cerrarMenu() {
            menuOverlay.removeClass('active');
            menuPanel.removeClass('active');
            submenuPanel.removeClass('active');
        }

        // Cerrar con ESC
        $(document).on('keydown', function(e) {
                if (e.key==='Escape') {
                    cerrarMenu();
                }
            }

        );

        // Inicializar
        generarCategorias();
    }

);