{
  "component_name": "cta-box-sidebar",
  "version": "1.0.0",
  "description": "CTA Box para sidebar con llamado a la acción destacado",
  "groups": {
    "content": {
      "label": "Contenido del CTA",
      "priority": 10,
      "fields": {
        "title": {
          "type": "text",
          "label": "Título",
          "default": "¿Listo para potenciar tus proyectos?",
          "maxlength": 100,
          "required": true,
          "description": "Título principal del CTA box"
        },
        "description": {
          "type": "textarea",
          "label": "Descripción",
          "default": "Accede a nuestra biblioteca completa de APUs y herramientas profesionales.",
          "maxlength": 200,
          "required": true,
          "description": "Texto descriptivo del CTA"
        }
      }
    },
    "button": {
      "label": "Configuración del Botón",
      "priority": 20,
      "fields": {
        "button_text": {
          "type": "text",
          "label": "Texto del botón",
          "default": "Solicitar Demo",
          "maxlength": 50,
          "required": true,
          "description": "Texto que aparece en el botón CTA"
        },
        "button_icon": {
          "type": "text",
          "label": "Ícono del botón",
          "default": "bi-calendar-check",
          "description": "Clase de Bootstrap Icons (ej: bi-calendar-check)"
        },
        "button_action": {
          "type": "select",
          "label": "Acción del botón",
          "default": "modal",
          "options": {
            "modal": "Abrir Modal",
            "link": "Ir a URL",
            "custom": "JavaScript Personalizado"
          },
          "required": true,
          "description": "Tipo de acción al hacer clic"
        },
        "modal_target": {
          "type": "text",
          "label": "ID del modal",
          "default": "#contactModal",
          "description": "ID del modal a abrir (si button_action es 'modal')"
        },
        "link_url": {
          "type": "url",
          "label": "URL de destino",
          "default": "",
          "description": "URL del enlace (si button_action es 'link')"
        },
        "link_target": {
          "type": "select",
          "label": "Abrir enlace en",
          "default": "_self",
          "options": {
            "_self": "Misma pestaña",
            "_blank": "Nueva pestaña"
          },
          "description": "Target del enlace"
        },
        "custom_onclick": {
          "type": "textarea",
          "label": "JavaScript personalizado",
          "default": "",
          "description": "Código JavaScript para onclick (si button_action es 'custom')"
        }
      }
    },
    "config": {
      "label": "Configuración General",
      "priority": 30,
      "fields": {
        "height": {
          "type": "text",
          "label": "Altura del CTA box",
          "default": "250px",
          "description": "Altura del CTA box (CSS válido)"
        },
        "show_on_mobile": {
          "type": "boolean",
          "label": "Mostrar en móviles",
          "default": true,
          "description": "Mostrar en dispositivos móviles"
        },
        "custom_css_class": {
          "type": "text",
          "label": "Clase CSS personalizada",
          "default": "",
          "description": "Clase CSS adicional para el contenedor"
        }
      }
    },
    "styles": {
      "label": "Estilos de Color",
      "priority": 40,
      "fields": {
        "background_gradient": {
          "type": "boolean",
          "label": "Usar gradiente",
          "default": false,
          "description": "Usar gradiente en vez de color sólido"
        },
        "background_color": {
          "type": "color",
          "label": "Color de fondo",
          "default": "#FF8600",
          "description": "Color de fondo del CTA box"
        },
        "gradient_start": {
          "type": "color",
          "label": "Color inicial del gradiente",
          "default": "#FF8600",
          "description": "Color inicial del gradiente"
        },
        "gradient_end": {
          "type": "color",
          "label": "Color final del gradiente",
          "default": "#FF6B00",
          "description": "Color final del gradiente"
        },
        "title_color": {
          "type": "color",
          "label": "Color del título",
          "default": "#ffffff",
          "description": "Color del texto del título"
        },
        "description_color": {
          "type": "text",
          "label": "Color de la descripción",
          "default": "rgba(255, 255, 255, 0.95)",
          "description": "Color del texto de la descripción"
        },
        "button_bg_color": {
          "type": "color",
          "label": "Color de fondo del botón",
          "default": "#ffffff",
          "description": "Color de fondo del botón"
        },
        "button_text_color": {
          "type": "color",
          "label": "Color del texto del botón",
          "default": "#FF8600",
          "description": "Color del texto del botón"
        },
        "button_hover_bg": {
          "type": "color",
          "label": "Color de fondo del botón (hover)",
          "default": "#0E2337",
          "description": "Color de fondo del botón al hover"
        },
        "button_hover_text": {
          "type": "color",
          "label": "Color del texto del botón (hover)",
          "default": "#ffffff",
          "description": "Color del texto del botón al hover"
        },
        "shadow_color": {
          "type": "text",
          "label": "Color de sombra",
          "default": "rgba(255, 133, 0, 0.2)",
          "description": "Color de la sombra"
        },
        "border_radius": {
          "type": "text",
          "label": "Radio del borde",
          "default": "8px",
          "description": "Radio del borde (CSS válido)"
        }
      }
    }
  }
}