getData(); if (!$this->isEnabled($data)) { return ''; } if (!PageVisibilityHelper::shouldShow(self::COMPONENT_NAME)) { return ''; } // Validar visibilidad por usuario logueado if (!UserVisibilityHelper::shouldShowForUser($data['visibility'] ?? [])) { return ''; } $css = $this->generateCSS($data); $html = $this->buildHTML($data); return sprintf("\n%s", $css, $html); } public function supports(string $componentType): bool { return $componentType === self::COMPONENT_NAME; } private function isEnabled(array $data): bool { $value = $data['visibility']['is_enabled'] ?? false; return $value === true || $value === '1' || $value === 1; } private function generateCSS(array $data): string { $colors = $data['colors'] ?? []; $effects = $data['visual_effects'] ?? []; $spacing = $data['spacing'] ?? []; $visibility = $data['visibility'] ?? []; $cssRules = []; // Container values $gradientStart = $colors['gradient_start'] ?? '#FF8600'; $gradientEnd = $colors['gradient_end'] ?? '#FFB800'; $gradientAngle = $effects['gradient_angle'] ?? '135deg'; $borderRadius = $effects['border_radius'] ?? '12px'; $boxShadow = $effects['box_shadow'] ?? '0 8px 24px rgba(255, 133, 0, 0.3)'; $containerPadding = $spacing['container_padding'] ?? '2rem'; // Button values $buttonBgColor = $colors['button_bg_color'] ?? '#FF8600'; $buttonTextColor = $colors['button_text_color'] ?? '#ffffff'; $buttonHoverBgColor = $colors['button_hover_bg'] ?? '#e67a00'; $buttonBorderRadius = $effects['button_border_radius'] ?? '8px'; // Container - gradient background with box-shadow and border-radius $cssRules[] = $this->cssGenerator->generate('.cta-post-container', [ 'background' => "linear-gradient({$gradientAngle}, {$gradientStart} 0%, {$gradientEnd} 100%)", 'box-shadow' => $boxShadow, 'border-radius' => $borderRadius, 'padding' => $containerPadding, ]); // Button styles (matching template .cta-button) - Using !important to override Bootstrap btn-light $cssRules[] = ".cta-post-container .cta-button { background-color: {$buttonBgColor} !important; color: {$buttonTextColor} !important; font-weight: 600; padding: 0.75rem 2rem; border: none !important; border-radius: {$buttonBorderRadius}; transition: all 0.3s ease; text-decoration: none; display: inline-block; }"; // Button hover state $cssRules[] = ".cta-post-container .cta-button:hover { background-color: {$buttonHoverBgColor}; color: {$buttonTextColor}; }"; // Responsive: button full width on mobile $cssRules[] = "@media (max-width: 768px) { .cta-post-container .cta-button { width: 100%; margin-top: 1rem; } }"; // Responsive visibility $showOnDesktop = $visibility['show_on_desktop'] ?? true; $showOnDesktop = $showOnDesktop === true || $showOnDesktop === '1' || $showOnDesktop === 1; $showOnMobile = $visibility['show_on_mobile'] ?? true; $showOnMobile = $showOnMobile === true || $showOnMobile === '1' || $showOnMobile === 1; if (!$showOnMobile) { $cssRules[] = "@media (max-width: 991.98px) { .cta-post-container { display: none !important; } }"; } if (!$showOnDesktop) { $cssRules[] = "@media (min-width: 992px) { .cta-post-container { display: none !important; } }"; } return implode("\n", $cssRules); } private function buildHTML(array $data): string { $content = $data['content'] ?? []; $title = $content['title'] ?? 'Accede a 200,000+ Análisis de Precios Unitarios'; $description = $content['description'] ?? ''; $buttonText = $content['button_text'] ?? 'Ver Catálogo Completo'; $buttonUrl = $content['button_url'] ?? '#'; $buttonIcon = $content['button_icon'] ?? 'bi-arrow-right'; $html = '

'; $html .= '

'; // Left column - Content $html .= '

'; $html .= sprintf( '

%s

', esc_html($title) ); if (!empty($description)) { $html .= sprintf( '

', esc_html($description) ); } $html .= '

'; // Right column - Button $html .= '

'; $html .= sprintf( ' %s', esc_url($buttonUrl), esc_html($buttonText) ); if (!empty($buttonIcon)) { $html .= sprintf(' ', esc_attr($buttonIcon)); } $html .= ''; $html .= '

'; $html .= '

'; return $html; } }