renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
$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 .= ' 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 .= ' Mostrar en móvil (<992px) ';
$html .= ' ';
$html .= '
';
$html .= '
';
// =============================================
// Checkboxes de visibilidad por tipo de página
// Grupo especial: _page_visibility
// =============================================
$html .= '
';
$html .= '
';
$html .= '
';
$showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', true);
$showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true);
$showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true);
$showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false);
$showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityHome', 'Home', 'bi-house', $showOnHome);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
$html .= '
';
$html .= '
';
$html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= ' ';
// Text: Button Text
$buttonText = $this->renderer->getFieldValue($componentId, 'content', 'button_text', "Let's Talk");
$html .= '
';
$html .= ' Texto del botón ';
$html .= '
';
// Switch: Show Icon
$showIcon = $this->renderer->getFieldValue($componentId, 'content', 'show_icon', true);
$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 .= '
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 .= '
';
// 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 .= '
';
$html .= ' ';
// Text: Font Size
$fontSize = $this->renderer->getFieldValue($componentId, 'typography', 'font_size', '1rem');
$html .= '
';
$html .= ' Tamaño de fuente ';
$html .= '
';
// Select: Font Weight
$fontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'font_weight', '600');
$html .= '
';
$html .= ' Peso de fuente ';
$html .= ' ';
$html .= ' Normal (400) ';
$html .= ' Medium (500) ';
$html .= ' Semibold (600) ';
$html .= ' Bold (700) ';
$html .= ' ';
$html .= '
';
// Select: Text Transform
$textTransform = $this->renderer->getFieldValue($componentId, 'typography', 'text_transform', 'none');
$html .= '
';
$html .= ' Transformación de texto ';
$html .= ' ';
$html .= ' Normal ';
$html .= ' MAYÚSCULAS ';
$html .= ' minúsculas ';
$html .= ' Capitalizado ';
$html .= ' ';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= ' ';
// Color: Background
$bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#FF8600');
$html .= '
';
$html .= ' Color de fondo ';
$html .= '
';
// Color: Background Hover
$bgHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_hover_color', '#FF6B35');
$html .= '
';
$html .= ' Color de fondo (hover) ';
$html .= '
';
// Color: Text
$textColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_color', '#FFFFFF');
$html .= '
';
$html .= ' Color del texto ';
$html .= '
';
// Color: Text Hover
$textHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_hover_color', '#FFFFFF');
$html .= '
';
$html .= ' Color del texto (hover) ';
$html .= '
';
// Text: Border Color (permite transparent)
$borderColor = $this->renderer->getFieldValue($componentId, 'colors', 'border_color', 'transparent');
$html .= '
';
$html .= ' Color del borde ';
$html .= ' Usa "transparent" para sin borde visible ';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= '
';
$html .= ' ';
// Text: Padding Top/Bottom
$paddingTB = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_top_bottom', '0.5rem');
$html .= '
';
$html .= ' Padding vertical ';
$html .= '
';
// Text: Padding Left/Right
$paddingLR = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_left_right', '1.5rem');
$html .= '
';
$html .= ' Padding horizontal ';
$html .= '
';
// Text: Margin Left
$marginLeft = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_left', '1rem');
$html .= '
';
$html .= ' Margen izquierdo (desktop) ';
$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 .= '
';
$html .= ' ';
// Text: Border Radius
$borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '6px');
$html .= '
';
$html .= ' Radio de bordes ';
$html .= '
';
// Text: Border Width
$borderWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_width', '0');
$html .= '
';
$html .= ' Grosor del borde ';
$html .= '
';
// Text: Box Shadow
$boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', 'none');
$html .= '
';
$html .= ' Sombra ';
$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 .= '