{
  "component_name": "cta-below-content",
  "version": "1.0.0",
  "description": "Call to Action que se muestra debajo del contenido del post",
  "groups": {
    "visibility": {
      "label": "Visibilidad",
      "priority": 10,
      "fields": {
        "is_enabled": {
          "type": "boolean",
          "label": "Activar CTA",
          "default": true,
          "required": true,
          "description": "Activa o desactiva el componente de Call to Action"
        },
        "layout": {
          "type": "select",
          "label": "Layout del CTA",
          "default": "two-column",
          "options": {
            "two-column": "Dos columnas (texto izquierda, botón derecha)",
            "centered": "Centrado",
            "stacked": "Apilado"
          },
          "required": true,
          "description": "Distribución del contenido en el CTA"
        }
      }
    },
    "content": {
      "label": "Contenido",
      "priority": 20,
      "fields": {
        "title": {
          "type": "text",
          "label": "Título del CTA",
          "default": "Accede a 200,000+ Análisis de Precios Unitarios",
          "maxlength": 200,
          "required": true,
          "description": "Título principal que aparece en el CTA"
        },
        "subtitle": {
          "type": "textarea",
          "label": "Subtítulo del CTA",
          "default": "Consulta estructuras completas, insumos y dosificaciones de los APUs más utilizados en construcción en México.",
          "maxlength": 500,
          "rows": 3,
          "required": true,
          "description": "Texto descriptivo que complementa el título"
        }
      }
    },
    "button": {
      "label": "Configuración del Botón",
      "priority": 30,
      "fields": {
        "button_text": {
          "type": "text",
          "label": "Texto del botón",
          "default": "Ver Catálogo Completo",
          "maxlength": 100,
          "required": true,
          "description": "Texto que aparece en el botón de acción"
        },
        "button_url": {
          "type": "url",
          "label": "URL del botón",
          "default": "#",
          "required": true,
          "description": "URL de destino al hacer clic en el botón"
        },
        "button_target": {
          "type": "select",
          "label": "Abrir enlace en",
          "default": "_self",
          "options": {
            "_self": "Misma ventana",
            "_blank": "Nueva ventana"
          },
          "description": "Atributo target del enlace del botón"
        },
        "button_color": {
          "type": "select",
          "label": "Color del botón",
          "default": "light",
          "options": {
            "light": "Blanco",
            "dark": "Negro",
            "primary": "Azul",
            "success": "Verde",
            "danger": "Rojo",
            "warning": "Amarillo"
          },
          "description": "Color de fondo del botón"
        },
        "button_size": {
          "type": "select",
          "label": "Tamaño del botón",
          "default": "lg",
          "options": {
            "sm": "Pequeño",
            "md": "Mediano",
            "lg": "Grande"
          },
          "description": "Tamaño del botón de acción"
        },
        "show_icon": {
          "type": "boolean",
          "label": "Mostrar icono en botón",
          "default": true,
          "description": "Muestra u oculta el icono de flecha en el botón"
        },
        "icon_class": {
          "type": "text",
          "label": "Clase del icono",
          "default": "bi bi-arrow-right",
          "conditional_logic": {
            "field": "show_icon",
            "operator": "==",
            "value": true
          },
          "description": "Clase de Bootstrap Icons para el icono del botón"
        }
      }
    },
    "styles": {
      "label": "Estilos y Colores",
      "priority": 40,
      "fields": {
        "gradient_start_color": {
          "type": "color",
          "label": "Color de inicio del gradiente",
          "default": "#FF8600",
          "description": "Color hexadecimal de inicio del gradiente"
        },
        "gradient_end_color": {
          "type": "color",
          "label": "Color de fin del gradiente",
          "default": "#FFB800",
          "description": "Color hexadecimal de fin del gradiente"
        },
        "gradient_angle": {
          "type": "number",
          "label": "Ángulo del gradiente",
          "default": 135,
          "min": 0,
          "max": 360,
          "description": "Ángulo en grados del gradiente (0-360)"
        },
        "text_color": {
          "type": "color",
          "label": "Color del texto",
          "default": "#FFFFFF",
          "description": "Color del texto del título y subtítulo"
        },
        "container_classes": {
          "type": "text",
          "label": "Clases CSS del contenedor",
          "default": "my-5 p-4 rounded cta-section",
          "description": "Clases CSS adicionales para el contenedor principal"
        }
      }
    },
    "advanced": {
      "label": "Configuración Avanzada",
      "priority": 50,
      "fields": {
        "animation_enabled": {
          "type": "boolean",
          "label": "Activar animación de entrada",
          "default": false,
          "description": "Activa animaciones de entrada para hacer el CTA más llamativo"
        },
        "animation_type": {
          "type": "select",
          "label": "Tipo de animación",
          "default": "fade-in",
          "options": {
            "fade-in": "Fade In",
            "slide-up": "Slide Up",
            "scale": "Scale"
          },
          "conditional_logic": {
            "field": "animation_enabled",
            "operator": "==",
            "value": true
          },
          "description": "Tipo de animación de entrada"
        },
        "animation_duration": {
          "type": "number",
          "label": "Duración de animación (ms)",
          "default": 500,
          "min": 100,
          "max": 3000,
          "step": 50,
          "conditional_logic": {
            "field": "animation_enabled",
            "operator": "==",
            "value": true
          },
          "description": "Duración de la animación en milisegundos"
        }
      }
    }
  }
}