'; $html .= '

'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildBehaviorGroup($componentId); $html .= '

'; $html .= '

'; $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildColorsGroup($componentId); $html .= $this->buildSpacingGroup($componentId); $html .= $this->buildVisualEffectsGroup($componentId); $html .= '

'; $html .= '

renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar botón Let\'s Talk'; $html .= ' '; $html .= '

'; $html .= '

'; // Switch: Show on Desktop $showDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en escritorio (≥992px)'; $html .= ' '; $html .= '

'; $html .= '

'; // Switch: Show on Mobile $showMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', false); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar en móvil (<992px)'; $html .= ' '; $html .= '

'; $html .= '

'; // Select: Show on Pages $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'all'); $html .= '

'; $html .= ' Mostrar en'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Contenido'; $html .= '

'; // Text: Button Text $buttonText = $this->renderer->getFieldValue($componentId, 'content', 'button_text', "Let's Talk"); $html .= '

'; $html .= ' Texto del botón'; $html .= ' '; $html .= '

'; // Switch: Show Icon $showIcon = $this->renderer->getFieldValue($componentId, 'content', 'show_icon', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Mostrar ícono'; $html .= ' '; $html .= '

'; $html .= '

'; // Text: Icon Class $iconClass = $this->renderer->getFieldValue($componentId, 'content', 'icon_class', 'bi-lightning-charge-fill'); $html .= '

'; $html .= ' '; $html .= ' Clase del ícono '; $html .= ' '; $html .= ' '; $html .= ' Usa clases de Bootstrap Icons (ej: bi-chat-dots)'; $html .= '

'; // Text: Modal Target $modalTarget = $this->renderer->getFieldValue($componentId, 'content', 'modal_target', '#contactModal'); $html .= '

'; $html .= ' ID del modal'; $html .= ' '; $html .= '

'; // Text: ARIA Label $ariaLabel = $this->renderer->getFieldValue($componentId, 'content', 'aria_label', 'Abrir formulario de contacto'); $html .= '

'; $html .= ' Etiqueta ARIA (accesibilidad)'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Comportamiento'; $html .= '

'; // Switch: Enable Modal $enableModal = $this->renderer->getFieldValue($componentId, 'behavior', 'enable_modal', true); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Abrir modal al hacer clic'; $html .= ' '; $html .= '

'; $html .= ' Si está desactivado, usará la URL personalizada'; $html .= '

'; // URL: Custom URL $customUrl = $this->renderer->getFieldValue($componentId, 'behavior', 'custom_url', ''); $html .= '

'; $html .= ' URL personalizada'; $html .= ' '; $html .= ' Solo se usa si "Abrir modal" está desactivado'; $html .= '

'; // Switch: Open in New Tab $openNewTab = $this->renderer->getFieldValue($componentId, 'behavior', 'open_in_new_tab', false); $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' '; $html .= ' Abrir en nueva pestaña'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Tipografía'; $html .= '

'; // Text: Font Size $fontSize = $this->renderer->getFieldValue($componentId, 'typography', 'font_size', '1rem'); $html .= '

'; $html .= ' Tamaño de fuente'; $html .= ' '; $html .= '

'; // Select: Font Weight $fontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'font_weight', '600'); $html .= '

'; $html .= ' Peso de fuente'; $html .= ' '; $html .= '

'; // Select: Text Transform $textTransform = $this->renderer->getFieldValue($componentId, 'typography', 'text_transform', 'none'); $html .= '

'; $html .= ' Transformación de texto'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Colores'; $html .= '

'; // Color: Background $bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#FF8600'); $html .= '

'; $html .= ' Color de fondo'; $html .= ' '; $html .= '

'; // Color: Background Hover $bgHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_hover_color', '#FF6B35'); $html .= '

'; $html .= ' Color de fondo (hover)'; $html .= ' '; $html .= '

'; // Color: Text $textColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_color', '#FFFFFF'); $html .= '

'; $html .= ' Color del texto'; $html .= ' '; $html .= '

'; // Color: Text Hover $textHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_hover_color', '#FFFFFF'); $html .= '

'; $html .= ' Color del texto (hover)'; $html .= ' '; $html .= '

'; // Text: Border Color (permite transparent) $borderColor = $this->renderer->getFieldValue($componentId, 'colors', 'border_color', 'transparent'); $html .= '

'; $html .= ' Color del borde'; $html .= ' '; $html .= ' Usa "transparent" para sin borde visible'; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Espaciado'; $html .= '

'; // Text: Padding Top/Bottom $paddingTB = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_top_bottom', '0.5rem'); $html .= '

'; $html .= ' Padding vertical'; $html .= ' '; $html .= '

'; // Text: Padding Left/Right $paddingLR = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_left_right', '1.5rem'); $html .= '

'; $html .= ' Padding horizontal'; $html .= ' '; $html .= '

'; // Text: Margin Left $marginLeft = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_left', '1rem'); $html .= '

'; $html .= ' Margen izquierdo (desktop)'; $html .= ' '; $html .= ' Separación del menú en pantallas ≥992px'; $html .= '

'; // Text: Icon Spacing $iconSpacing = $this->renderer->getFieldValue($componentId, 'spacing', 'icon_spacing', '0.5rem'); $html .= '

'; $html .= ' Espaciado del ícono'; $html .= ' '; $html .= '

'; $html .= '

'; $html .= ' '; $html .= ' Efectos Visuales'; $html .= '

'; // Text: Border Radius $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '6px'); $html .= '

'; $html .= ' Radio de bordes'; $html .= ' '; $html .= '

'; // Text: Border Width $borderWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_width', '0'); $html .= '

'; $html .= ' Grosor del borde'; $html .= ' '; $html .= '

'; // Text: Box Shadow $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', 'none'); $html .= '

'; $html .= ' Sombra'; $html .= ' '; $html .= ' Ej: 0 2px 4px rgba(0,0,0,0.1)'; $html .= '

'; // Text: Transition Duration $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s'); $html .= '

'; $html .= ' Duración de transición'; $html .= ' '; $html .= '

'; $html .= '