{
  "component_name": "navbar",
  "version": "2.0.0",
  "description": "Menú de navegación principal de WordPress con soporte Bootstrap 5",
  "groups": {
    "visibility": {
      "label": "Activación y Visibilidad",
      "priority": 10,
      "fields": {
        "is_enabled": {
          "type": "boolean",
          "label": "Activar Navbar",
          "default": true,
          "editable": true,
          "required": true,
          "description": "Activa o desactiva el menú de navegación"
        },
        "show_on_mobile": {
          "type": "boolean",
          "label": "Mostrar en Mobile",
          "default": true,
          "editable": true,
          "description": "Muestra el menú en dispositivos móviles (<768px)"
        },
        "show_on_desktop": {
          "type": "boolean",
          "label": "Mostrar en Desktop",
          "default": true,
          "editable": true,
          "description": "Muestra el menú en dispositivos de escritorio (≥768px)"
        },
        "show_on_pages": {
          "type": "select",
          "label": "Mostrar en",
          "default": "all",
          "editable": true,
          "options": {
            "all": "Todas las páginas",
            "home": "Solo página de inicio",
            "posts": "Solo posts individuales",
            "pages": "Solo páginas"
          },
          "description": "Define en qué páginas se muestra el navbar"
        },
        "sticky_enabled": {
          "type": "boolean",
          "label": "Navbar fijo (sticky)",
          "default": true,
          "editable": true,
          "description": "Mantiene el navbar fijo en la parte superior al hacer scroll"
        }
      }
    },
    "layout": {
      "label": "Layout y Estructura",
      "priority": 20,
      "fields": {
        "container_type": {
          "type": "select",
          "label": "Tipo de contenedor",
          "default": "container",
          "editable": true,
          "options": {
            "container": "Container (ancho fijo)",
            "container-fluid": "Container Fluid (ancho completo)"
          },
          "description": "Define el tipo de contenedor Bootstrap"
        },
        "padding_vertical": {
          "type": "text",
          "label": "Padding vertical",
          "default": "0.75rem 0",
          "editable": true,
          "description": "Espaciado vertical del navbar (ej: 0.75rem 0)"
        },
        "z_index": {
          "type": "text",
          "label": "Z-index",
          "default": "1030",
          "editable": true,
          "description": "Prioridad de capa (mayor número = más arriba, ej: 1030)"
        }
      }
    },
    "behavior": {
      "label": "Configuración del Menú",
      "priority": 30,
      "fields": {
        "menu_location": {
          "type": "select",
          "label": "Ubicación del menú",
          "default": "primary",
          "editable": true,
          "options": {
            "primary": "Menú Principal",
            "secondary": "Menú Secundario",
            "custom": "Menú personalizado"
          },
          "required": true,
          "description": "Selecciona qué menú de WordPress mostrar"
        },
        "custom_menu_id": {
          "type": "text",
          "label": "ID del menú personalizado",
          "default": "0",
          "editable": true,
          "conditional_logic": {
            "field": "menu_location",
            "operator": "==",
            "value": "custom"
          },
          "description": "ID del menú personalizado de WordPress"
        },
        "enable_dropdowns": {
          "type": "boolean",
          "label": "Habilitar submenús desplegables",
          "default": true,
          "editable": true,
          "description": "Permite submenús desplegables (depth 2)"
        },
        "mobile_breakpoint": {
          "type": "select",
          "label": "Breakpoint para menú móvil",
          "default": "lg",
          "editable": true,
          "options": {
            "sm": "Small (576px)",
            "md": "Medium (768px)",
            "lg": "Large (992px)",
            "xl": "Extra Large (1200px)"
          },
          "description": "Punto de quiebre para mostrar menú hamburguesa"
        }
      }
    },
    "media": {
      "label": "Logo/Marca",
      "priority": 40,
      "fields": {
        "show_brand": {
          "type": "boolean",
          "label": "Mostrar logo/marca",
          "default": false,
          "editable": true,
          "description": "Muestra el logo o nombre de la marca en el navbar"
        },
        "use_logo": {
          "type": "boolean",
          "label": "Usar logo (imagen)",
          "default": false,
          "editable": true,
          "conditional_logic": {
            "field": "show_brand",
            "operator": "==",
            "value": true
          },
          "description": "Usa una imagen como logo en lugar de texto"
        },
        "logo_url": {
          "type": "text",
          "label": "URL del logo",
          "default": "",
          "editable": true,
          "conditional_logic": {
            "field": "use_logo",
            "operator": "==",
            "value": true
          },
          "description": "URL completa de la imagen del logo"
        },
        "logo_height": {
          "type": "text",
          "label": "Altura del logo",
          "default": "40px",
          "editable": true,
          "conditional_logic": {
            "field": "use_logo",
            "operator": "==",
            "value": true
          },
          "description": "Altura del logo (ej: 40px, 2.5rem)"
        },
        "brand_text": {
          "type": "text",
          "label": "Texto de la marca",
          "default": "APU's México",
          "editable": true,
          "maxlength": 50,
          "conditional_logic": {
            "field": "show_brand",
            "operator": "==",
            "value": true
          },
          "description": "Texto que se muestra como marca (si no hay logo)"
        },
        "brand_font_size": {
          "type": "text",
          "label": "Tamaño de fuente",
          "default": "1.5rem",
          "editable": true,
          "conditional_logic": {
            "field": "show_brand",
            "operator": "==",
            "value": true
          },
          "description": "Tamaño de fuente de la marca (ej: 1.5rem, 24px)"
        },
        "brand_color": {
          "type": "color",
          "label": "Color de la marca",
          "default": "#FFFFFF",
          "editable": true,
          "conditional_logic": {
            "field": "show_brand",
            "operator": "==",
            "value": true
          },
          "description": "Color del texto de la marca"
        },
        "brand_hover_color": {
          "type": "color",
          "label": "Color hover de la marca",
          "default": "#FF8600",
          "editable": true,
          "conditional_logic": {
            "field": "show_brand",
            "operator": "==",
            "value": true
          },
          "description": "Color al pasar el mouse sobre la marca"
        }
      }
    },
    "links": {
      "label": "Estilos de Enlaces",
      "priority": 50,
      "fields": {
        "text_color": {
          "type": "color",
          "label": "Color del texto",
          "default": "#FFFFFF",
          "editable": true,
          "description": "Color del texto de los links del menú"
        },
        "hover_color": {
          "type": "color",
          "label": "Color hover",
          "default": "#FF8600",
          "editable": true,
          "description": "Color al pasar el mouse sobre los links"
        },
        "active_color": {
          "type": "color",
          "label": "Color del item activo",
          "default": "#FF8600",
          "editable": true,
          "description": "Color del item de menú activo/actual"
        },
        "font_size": {
          "type": "text",
          "label": "Tamaño de fuente",
          "default": "0.9rem",
          "editable": true,
          "description": "Tamaño de fuente de los enlaces (ej: 0.9rem, 14px)"
        },
        "font_weight": {
          "type": "text",
          "label": "Grosor de fuente",
          "default": "500",
          "editable": true,
          "description": "Grosor de la fuente (100-900, ej: 500)"
        },
        "padding": {
          "type": "text",
          "label": "Padding de enlaces",
          "default": "0.5rem 0.65rem",
          "editable": true,
          "description": "Espaciado interno de los enlaces (ej: 0.5rem 0.65rem)"
        },
        "border_radius": {
          "type": "text",
          "label": "Border radius hover",
          "default": "4px",
          "editable": true,
          "description": "Radio de borde al pasar el mouse (ej: 4px)"
        },
        "show_underline_effect": {
          "type": "boolean",
          "label": "Mostrar efecto de subrayado",
          "default": true,
          "editable": true,
          "description": "Muestra una línea animada debajo del enlace al hover"
        },
        "underline_color": {
          "type": "color",
          "label": "Color del subrayado",
          "default": "#FF8600",
          "editable": true,
          "conditional_logic": {
            "field": "show_underline_effect",
            "operator": "==",
            "value": true
          },
          "description": "Color de la línea de subrayado"
        }
      }
    },
    "visual_effects": {
      "label": "Estilos de Dropdown",
      "priority": 60,
      "fields": {
        "background_color": {
          "type": "color",
          "label": "Fondo de dropdown",
          "default": "#FFFFFF",
          "editable": true,
          "description": "Color de fondo de los submenús desplegables"
        },
        "border_radius": {
          "type": "text",
          "label": "Border radius",
          "default": "8px",
          "editable": true,
          "description": "Radio de borde del dropdown (ej: 8px)"
        },
        "shadow": {
          "type": "text",
          "label": "Sombra del dropdown",
          "default": "0 8px 24px rgba(0, 0, 0, 0.12)",
          "editable": true,
          "description": "Sombra CSS del dropdown"
        },
        "item_color": {
          "type": "color",
          "label": "Color de items",
          "default": "#495057",
          "editable": true,
          "description": "Color del texto de los items del dropdown"
        },
        "item_hover_background": {
          "type": "color",
          "label": "Fondo hover de items",
          "default": "rgba(255, 133, 0, 0.1)",
          "editable": true,
          "description": "Color de fondo al pasar el mouse sobre items"
        },
        "item_padding": {
          "type": "text",
          "label": "Padding de items",
          "default": "0.625rem 1.25rem",
          "editable": true,
          "description": "Espaciado interno de items del dropdown"
        },
        "dropdown_max_height": {
          "type": "text",
          "label": "Altura máxima del dropdown",
          "default": "500px",
          "editable": true,
          "description": "Altura máxima del submenú. Si se excede, aparece scroll (ej: 300px, 20rem)"
        }
      }
    },
    "colors": {
      "label": "Estilos del Navbar",
      "priority": 70,
      "fields": {
        "background_color": {
          "type": "color",
          "label": "Color de fondo",
          "default": "#1e3a5f",
          "editable": true,
          "description": "Color de fondo del navbar"
        },
        "box_shadow": {
          "type": "text",
          "label": "Sombra del navbar",
          "default": "0 4px 12px rgba(30, 58, 95, 0.15)",
          "editable": true,
          "description": "Sombra CSS del navbar"
        }
      }
    }
  }
}
