{
  "component_name": "top-notification-bar",
  "version": "1.0.0",
  "description": "Barra de notificación superior con anuncio destacado, ícono y enlace de acción",
  "groups": {
    "visibility": {
      "label": "Visibilidad",
      "priority": 10,
      "fields": {
        "is_enabled": {
          "type": "boolean",
          "label": "Mostrar barra de notificación",
          "default": true,
          "editable": true,
          "required": true,
          "description": "Activa o desactiva la barra de notificación superior"
        },
        "show_on_pages": {
          "type": "select",
          "label": "Mostrar en",
          "default": "all",
          "editable": true,
          "required": 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 mostrará la barra"
        },
        "show_on_desktop": {
          "type": "boolean",
          "label": "Mostrar en desktop",
          "default": true,
          "editable": true,
          "required": true,
          "description": "Muestra la barra en dispositivos desktop (pantallas grandes)"
        },
        "show_on_mobile": {
          "type": "boolean",
          "label": "Mostrar en mobile",
          "default": true,
          "editable": true,
          "required": true,
          "description": "Muestra la barra en dispositivos móviles (pantallas pequeñas)"
        },
        "is_critical": {
          "type": "boolean",
          "label": "CSS Crítico",
          "default": true,
          "editable": true,
          "description": "Inyectar CSS inline en <head> para optimizar LCP (componente above-the-fold)"
        }
      }
    },
    "content": {
      "label": "Contenido",
      "priority": 20,
      "fields": {
        "icon_class": {
          "type": "text",
          "label": "Clase del ícono Bootstrap",
          "default": "bi-megaphone-fill",
          "editable": true,
          "required": true,
          "placeholder": "Ej: bi-megaphone-fill",
          "description": "Clase del ícono Bootstrap Icons (sin prefijo 'bi')"
        },
        "label_text": {
          "type": "text",
          "label": "Etiqueta del anuncio",
          "default": "Nueva imagen, mejor experiencia:",
          "editable": true,
          "required": true,
          "maxlength": 30,
          "placeholder": "Ej: Nuevo:, Importante:, Aviso:",
          "description": "Texto destacado en negrita antes del mensaje"
        },
        "message_text": {
          "type": "textarea",
          "label": "Texto del mensaje",
          "default": "+200,000 APUs disponibles. 10,000 con costos 2025, actualizamos los costos de 300 más cada día.",
          "editable": true,
          "required": true,
          "maxlength": 200,
          "rows": 3,
          "description": "Mensaje principal del anuncio (máximo 200 caracteres)"
        },
        "link_text": {
          "type": "text",
          "label": "Texto del enlace",
          "default": "Convertirme en V.I.P.",
          "editable": true,
          "required": true,
          "maxlength": 50,
          "description": "Texto del enlace de acción"
        },
        "link_url": {
          "type": "url",
          "label": "URL del enlace",
          "default": "/suscripcion-vip",
          "editable": true,
          "required": true,
          "placeholder": "https://",
          "description": "URL de destino del enlace. Fase 4.4: Debe coincidir con otros CTAs del mismo texto"
        }
      }
    },
    "colors": {
      "label": "Colores",
      "priority": 30,
      "fields": {
        "background_color": {
          "type": "color",
          "label": "Color de fondo",
          "default": "#0E2337",
          "editable": true,
          "description": "Color de fondo de la barra (por defecto: navy dark)"
        },
        "text_color": {
          "type": "color",
          "label": "Color del texto",
          "default": "#FFFFFF",
          "editable": true,
          "description": "Color del texto del mensaje"
        },
        "label_color": {
          "type": "color",
          "label": "Color de la etiqueta",
          "default": "#FF8600",
          "editable": true,
          "description": "Color del texto en negrita (etiqueta del anuncio)"
        },
        "icon_color": {
          "type": "color",
          "label": "Color del ícono",
          "default": "#FF8600",
          "editable": true,
          "description": "Color del ícono Bootstrap"
        },
        "link_color": {
          "type": "color",
          "label": "Color del enlace",
          "default": "#FFFFFF",
          "editable": true,
          "description": "Color del enlace de acción"
        },
        "link_hover_color": {
          "type": "color",
          "label": "Color del enlace (hover)",
          "default": "#FF8600",
          "editable": true,
          "description": "Color del enlace al pasar el mouse"
        }
      }
    },
    "spacing": {
      "label": "Espaciado",
      "priority": 40,
      "fields": {
        "font_size": {
          "type": "text",
          "label": "Tamaño de fuente",
          "default": "0.9rem",
          "editable": true,
          "description": "Tamaño del texto (usar unidades CSS: rem, px, em)"
        },
        "padding": {
          "type": "text",
          "label": "Padding vertical",
          "default": "0.5rem 0",
          "editable": true,
          "description": "Espaciado interno vertical (usar formato CSS: 0.5rem 0)"
        }
      }
    }
  }
}
