{
  "component_name": "featured-image",
  "version": "1.0.0",
  "description": "Imagen destacada del post con estilos configurables",
  "groups": {
    "visibility": {
      "label": "Visibilidad",
      "priority": 10,
      "fields": {
        "is_enabled": {
          "type": "boolean",
          "label": "Mostrar imagen destacada",
          "default": true,
          "editable": true,
          "required": true,
          "description": "Activa o desactiva la imagen destacada en posts"
        },
        "show_on_desktop": {
          "type": "boolean",
          "label": "Mostrar en desktop",
          "default": true,
          "editable": true,
          "required": true,
          "description": "Muestra la imagen en dispositivos desktop (>=768px)"
        },
        "show_on_mobile": {
          "type": "boolean",
          "label": "Mostrar en mobile",
          "default": true,
          "editable": true,
          "required": true,
          "description": "Muestra la imagen en dispositivos moviles (<768px)"
        }
      }
    },
    "content": {
      "label": "Contenido",
      "priority": 20,
      "fields": {
        "image_size": {
          "type": "select",
          "label": "Tamano de imagen",
          "default": "roi-featured-large",
          "editable": true,
          "options": {
            "roi-featured-large": "Grande (1200x600)",
            "roi-featured-medium": "Mediano (800x400)",
            "full": "Original (tamano completo)"
          },
          "description": "Tamano de imagen de WordPress a utilizar"
        },
        "lazy_loading": {
          "type": "boolean",
          "label": "Carga diferida (lazy loading)",
          "default": true,
          "editable": true,
          "description": "Mejora rendimiento cargando imagen cuando es visible"
        },
        "link_to_media": {
          "type": "boolean",
          "label": "Enlazar a imagen completa",
          "default": false,
          "editable": true,
          "description": "Abre la imagen en tamano completo al hacer clic"
        }
      }
    },
    "spacing": {
      "label": "Espaciado",
      "priority": 30,
      "fields": {
        "margin_top": {
          "type": "text",
          "label": "Margen superior",
          "default": "1rem",
          "editable": true,
          "description": "Espacio arriba del contenedor (ej: 1rem, 16px)"
        },
        "margin_bottom": {
          "type": "text",
          "label": "Margen inferior",
          "default": "2rem",
          "editable": true,
          "description": "Espacio debajo del contenedor (ej: 2rem, 32px)"
        }
      }
    },
    "visual_effects": {
      "label": "Efectos Visuales",
      "priority": 40,
      "fields": {
        "border_radius": {
          "type": "text",
          "label": "Radio de bordes",
          "default": "12px",
          "editable": true,
          "description": "Redondeo de esquinas del contenedor (ej: 12px, 0.75rem)"
        },
        "box_shadow": {
          "type": "text",
          "label": "Sombra",
          "default": "0 8px 24px rgba(0, 0, 0, 0.1)",
          "editable": true,
          "description": "Sombra CSS del contenedor"
        },
        "hover_effect": {
          "type": "boolean",
          "label": "Efecto hover",
          "default": true,
          "editable": true,
          "description": "Aplica efecto de escala sutil al pasar el mouse"
        },
        "hover_scale": {
          "type": "text",
          "label": "Escala en hover",
          "default": "1.02",
          "editable": true,
          "description": "Factor de escala en hover (ej: 1.02 = 2% mas grande)"
        },
        "transition_duration": {
          "type": "text",
          "label": "Duracion de transicion",
          "default": "0.3s",
          "editable": true,
          "description": "Duracion de animaciones (ej: 0.3s, 300ms)"
        }
      }
    }
  }
}
