<?php
declare(strict_types=1);

namespace ROITheme\Admin\CtaLetsTalk\Infrastructure\Ui;

use ROITheme\Admin\Infrastructure\Ui\AdminDashboardRenderer;
use ROITheme\Admin\Shared\Infrastructure\Ui\ExclusionFormPartial;

/**
 * Class CtaLetsTalkFormBuilder
 *
 * Genera el formulario de administración para el componente CTA "Let's Talk".
 *
 * Responsabilidades:
 * - Renderizar formulario de configuración del botón CTA
 * - Organizar campos en grupos según el schema JSON
 * - Aplicar Design System (gradiente navy, borde orange)
 * - Usar Bootstrap 5 form controls
 *
 * @package ROITheme\Admin\CtaLetsTalk\Infrastructure\Ui
 */
final class CtaLetsTalkFormBuilder
{
    private const COMPONENT_ID = 'cta-lets-talk';

    public function __construct(
        private AdminDashboardRenderer $renderer
    ) {}

    public function buildForm(string $componentId): string
    {
        $html = '';

        // Header
        $html .= $this->buildHeader($componentId);

        // Layout 2 columnas
        $html .= '<div class="row g-3">';
        $html .= '    <div class="col-lg-6">';
        $html .= $this->buildVisibilityGroup($componentId);
        $html .= $this->buildContentGroup($componentId);
        $html .= $this->buildBehaviorGroup($componentId);
        $html .= '    </div>';
        $html .= '    <div class="col-lg-6">';
        $html .= $this->buildTypographyGroup($componentId);
        $html .= $this->buildColorsGroup($componentId);
        $html .= $this->buildSpacingGroup($componentId);
        $html .= $this->buildVisualEffectsGroup($componentId);
        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildHeader(string $componentId): string
    {
        $html = '<div class="rounded p-4 mb-4 shadow text-white" ';
        $html .= 'style="background: linear-gradient(135deg, #0E2337 0%, #1e3a5f 100%); border-left: 4px solid #FF8600;">';
        $html .= '    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">';
        $html .= '        <div>';
        $html .= '            <h3 class="h4 mb-1 fw-bold">';
        $html .= '                <i class="bi bi-lightning-charge-fill me-2" style="color: #FF8600;"></i>';
        $html .= '                Configuración del Botón "Let\'s Talk"';
        $html .= '            </h3>';
        $html .= '            <p class="mb-0 small" style="opacity: 0.85;">';
        $html .= '                Personaliza el botón CTA principal del navbar';
        $html .= '            </p>';
        $html .= '        </div>';
        $html .= '        <button type="button" class="btn btn-sm btn-outline-light btn-reset-defaults" data-component="cta-lets-talk">';
        $html .= '            <i class="bi bi-arrow-counterclockwise me-1"></i>';
        $html .= '            Restaurar valores por defecto';
        $html .= '        </button>';
        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildVisibilityGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-toggle-on me-2" style="color: #FF8600;"></i>';
        $html .= '            Visibilidad';
        $html .= '        </h5>';

        // Switch: Enabled
        $enabled = $this->renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkEnabled" name="visibility[is_enabled]" ';
        $html .= checked($enabled, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkEnabled">';
        $html .= '                    <strong>Mostrar botón Let\'s Talk</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: Show on Desktop
        $showDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkShowDesktop" name="visibility[show_on_desktop]" ';
        $html .= checked($showDesktop, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkShowDesktop">';
        $html .= '                    <strong>Mostrar en escritorio</strong> <span class="text-muted">(≥992px)</span>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: Show on Mobile
        $showMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', false);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkShowMobile" name="visibility[show_on_mobile]" ';
        $html .= checked($showMobile, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkShowMobile">';
        $html .= '                    <strong>Mostrar en móvil</strong> <span class="text-muted">(<992px)</span>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // =============================================
        // Checkboxes de visibilidad por tipo de página
        // Grupo especial: _page_visibility
        // =============================================
        $html .= '        <hr class="my-3">';
        $html .= '        <p class="small fw-semibold mb-2">';
        $html .= '            <i class="bi bi-eye me-1" style="color: #FF8600;"></i>';
        $html .= '            Mostrar en tipos de pagina';
        $html .= '        </p>';

        $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 .= '        <div class="row g-2">';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityHome', 'Home', 'bi-house', $showOnHome);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives);
        $html .= '            </div>';
        $html .= '            <div class="col-md-4">';
        $html .= $this->buildPageVisibilityCheckbox('ctaLetsTalkVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch);
        $html .= '            </div>';
        $html .= '        </div>';

        // =============================================
        // Reglas de exclusion avanzadas
        // Grupo especial: _exclusions (Plan 99.11)
        // =============================================
        $exclusionPartial = new ExclusionFormPartial($this->renderer);
        $html .= $exclusionPartial->render($componentId, 'letsTalk');

        // Switch: CSS Crítico
        $isCritical = $this->renderer->getFieldValue($componentId, 'visibility', 'is_critical', true);
        $html .= '        <div class="mb-2 mt-3">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkIsCritical" ';
        $html .= checked($isCritical, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkIsCritical" style="color: #495057;">';
        $html .= '                    <i class="bi bi-lightning-charge me-1" style="color: #FF8600;"></i>';
        $html .= '                    <strong>CSS Crítico</strong>';
        $html .= '                    <small class="text-muted d-block">Inyectar CSS en &lt;head&gt; para optimizar LCP</small>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Switch: Ocultar para usuarios logueados (Plan 99.16)
        $hideForLoggedIn = $this->renderer->getFieldValue($componentId, 'visibility', 'hide_for_logged_in', false);
        $html .= '        <div class="mb-0">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkHideForLoggedIn" ';
        $html .= checked($hideForLoggedIn, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkHideForLoggedIn" style="color: #495057;">';
        $html .= '                    <i class="bi bi-person-lock me-1" style="color: #FF8600;"></i>';
        $html .= '                    <strong>Ocultar para usuarios logueados</strong>';
        $html .= '                    <small class="text-muted d-block">No mostrar a usuarios con sesión iniciada</small>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildContentGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-type me-2" style="color: #FF8600;"></i>';
        $html .= '            Contenido';
        $html .= '        </h5>';

        // Text: Button Text
        $buttonText = $this->renderer->getFieldValue($componentId, 'content', 'button_text', "Let's Talk");
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkButtonText" class="form-label small mb-1 fw-semibold">Texto del botón</label>';
        $html .= '            <input type="text" id="ctaLetsTalkButtonText" name="content[button_text]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($buttonText) . '" maxlength="30" placeholder="Let\'s Talk">';
        $html .= '        </div>';

        // Switch: Show Icon
        $showIcon = $this->renderer->getFieldValue($componentId, 'content', 'show_icon', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkShowIcon" name="content[show_icon]" ';
        $html .= checked($showIcon, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkShowIcon">';
        $html .= '                    <strong>Mostrar ícono</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        // Text: Icon Class
        $iconClass = $this->renderer->getFieldValue($componentId, 'content', 'icon_class', 'bi-lightning-charge-fill');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkIconClass" class="form-label small mb-1 fw-semibold">';
        $html .= '                Clase del ícono <a href="https://icons.getbootstrap.com/" target="_blank" class="text-decoration-none"><i class="bi bi-box-arrow-up-right"></i></a>';
        $html .= '            </label>';
        $html .= '            <input type="text" id="ctaLetsTalkIconClass" name="content[icon_class]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($iconClass) . '" placeholder="bi-lightning-charge-fill">';
        $html .= '            <small class="text-muted">Usa clases de Bootstrap Icons (ej: bi-chat-dots)</small>';
        $html .= '        </div>';

        // Text: Modal Target
        $modalTarget = $this->renderer->getFieldValue($componentId, 'content', 'modal_target', '#contactModal');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkModalTarget" class="form-label small mb-1 fw-semibold">ID del modal</label>';
        $html .= '            <input type="text" id="ctaLetsTalkModalTarget" name="content[modal_target]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($modalTarget) . '" placeholder="#contactModal">';
        $html .= '        </div>';

        // Text: ARIA Label
        $ariaLabel = $this->renderer->getFieldValue($componentId, 'content', 'aria_label', 'Abrir formulario de contacto');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="ctaLetsTalkAriaLabel" class="form-label small mb-1 fw-semibold">Etiqueta ARIA (accesibilidad)</label>';
        $html .= '            <input type="text" id="ctaLetsTalkAriaLabel" name="content[aria_label]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($ariaLabel) . '" maxlength="100">';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildBehaviorGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-mouse me-2" style="color: #FF8600;"></i>';
        $html .= '            Comportamiento';
        $html .= '        </h5>';

        // Switch: Enable Modal
        $enableModal = $this->renderer->getFieldValue($componentId, 'behavior', 'enable_modal', true);
        $html .= '        <div class="mb-2">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkEnableModal" name="behavior[enable_modal]" ';
        $html .= checked($enableModal, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkEnableModal">';
        $html .= '                    <strong>Abrir modal al hacer clic</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '            <small class="text-muted">Si está desactivado, usará la URL personalizada</small>';
        $html .= '        </div>';

        // URL: Custom URL
        $customUrl = $this->renderer->getFieldValue($componentId, 'behavior', 'custom_url', '');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkCustomUrl" class="form-label small mb-1 fw-semibold">URL personalizada</label>';
        $html .= '            <input type="url" id="ctaLetsTalkCustomUrl" name="behavior[custom_url]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($customUrl) . '" placeholder="https://ejemplo.com/contacto">';
        $html .= '            <small class="text-muted">Solo se usa si "Abrir modal" está desactivado</small>';
        $html .= '        </div>';

        // Switch: Open in New Tab
        $openNewTab = $this->renderer->getFieldValue($componentId, 'behavior', 'open_in_new_tab', false);
        $html .= '        <div class="mb-0">';
        $html .= '            <div class="form-check form-switch">';
        $html .= '                <input class="form-check-input" type="checkbox" id="ctaLetsTalkOpenNewTab" name="behavior[open_in_new_tab]" ';
        $html .= checked($openNewTab, true, false) . '>';
        $html .= '                <label class="form-check-label small" for="ctaLetsTalkOpenNewTab">';
        $html .= '                    <strong>Abrir en nueva pestaña</strong>';
        $html .= '                </label>';
        $html .= '            </div>';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildTypographyGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-fonts me-2" style="color: #FF8600;"></i>';
        $html .= '            Tipografía';
        $html .= '        </h5>';

        // Text: Font Size
        $fontSize = $this->renderer->getFieldValue($componentId, 'typography', 'font_size', '1rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkFontSize" class="form-label small mb-1 fw-semibold">Tamaño de fuente</label>';
        $html .= '            <input type="text" id="ctaLetsTalkFontSize" name="typography[font_size]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($fontSize) . '" placeholder="1rem">';
        $html .= '        </div>';

        // Select: Font Weight
        $fontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'font_weight', '600');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkFontWeight" class="form-label small mb-1 fw-semibold">Peso de fuente</label>';
        $html .= '            <select id="ctaLetsTalkFontWeight" name="typography[font_weight]" class="form-select form-select-sm">';
        $html .= '                <option value="400" ' . selected($fontWeight, '400', false) . '>Normal (400)</option>';
        $html .= '                <option value="500" ' . selected($fontWeight, '500', false) . '>Medium (500)</option>';
        $html .= '                <option value="600" ' . selected($fontWeight, '600', false) . '>Semibold (600)</option>';
        $html .= '                <option value="700" ' . selected($fontWeight, '700', false) . '>Bold (700)</option>';
        $html .= '            </select>';
        $html .= '        </div>';

        // Select: Text Transform
        $textTransform = $this->renderer->getFieldValue($componentId, 'typography', 'text_transform', 'none');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="ctaLetsTalkTextTransform" class="form-label small mb-1 fw-semibold">Transformación de texto</label>';
        $html .= '            <select id="ctaLetsTalkTextTransform" name="typography[text_transform]" class="form-select form-select-sm">';
        $html .= '                <option value="none" ' . selected($textTransform, 'none', false) . '>Normal</option>';
        $html .= '                <option value="uppercase" ' . selected($textTransform, 'uppercase', false) . '>MAYÚSCULAS</option>';
        $html .= '                <option value="lowercase" ' . selected($textTransform, 'lowercase', false) . '>minúsculas</option>';
        $html .= '                <option value="capitalize" ' . selected($textTransform, 'capitalize', false) . '>Capitalizado</option>';
        $html .= '            </select>';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildColorsGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-palette me-2" style="color: #FF8600;"></i>';
        $html .= '            Colores';
        $html .= '        </h5>';

        // Color: Background
        $bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#FF8600');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkBgColor" class="form-label small mb-1 fw-semibold">Color de fondo</label>';
        $html .= '            <input type="color" id="ctaLetsTalkBgColor" name="colors[background_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($bgColor) . '">';
        $html .= '        </div>';

        // Color: Background Hover
        $bgHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_hover_color', '#FF6B35');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkBgHoverColor" class="form-label small mb-1 fw-semibold">Color de fondo (hover)</label>';
        $html .= '            <input type="color" id="ctaLetsTalkBgHoverColor" name="colors[background_hover_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($bgHoverColor) . '">';
        $html .= '        </div>';

        // Color: Text
        $textColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_color', '#FFFFFF');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkTextColor" class="form-label small mb-1 fw-semibold">Color del texto</label>';
        $html .= '            <input type="color" id="ctaLetsTalkTextColor" name="colors[text_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($textColor) . '">';
        $html .= '        </div>';

        // Color: Text Hover
        $textHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_hover_color', '#FFFFFF');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkTextHoverColor" class="form-label small mb-1 fw-semibold">Color del texto (hover)</label>';
        $html .= '            <input type="color" id="ctaLetsTalkTextHoverColor" name="colors[text_hover_color]" class="form-control form-control-color w-100" ';
        $html .= '                   value="' . esc_attr($textHoverColor) . '">';
        $html .= '        </div>';

        // Text: Border Color (permite transparent)
        $borderColor = $this->renderer->getFieldValue($componentId, 'colors', 'border_color', 'transparent');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="ctaLetsTalkBorderColor" class="form-label small mb-1 fw-semibold">Color del borde</label>';
        $html .= '            <input type="text" id="ctaLetsTalkBorderColor" name="colors[border_color]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($borderColor) . '" placeholder="transparent o #RRGGBB">';
        $html .= '            <small class="text-muted">Usa "transparent" para sin borde visible</small>';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildSpacingGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-arrows-angle-expand me-2" style="color: #FF8600;"></i>';
        $html .= '            Espaciado';
        $html .= '        </h5>';

        // Text: Padding Top/Bottom
        $paddingTB = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_top_bottom', '0.5rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkPaddingTB" class="form-label small mb-1 fw-semibold">Padding vertical</label>';
        $html .= '            <input type="text" id="ctaLetsTalkPaddingTB" name="spacing[padding_top_bottom]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($paddingTB) . '" placeholder="0.5rem">';
        $html .= '        </div>';

        // Text: Padding Left/Right
        $paddingLR = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_left_right', '1.5rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkPaddingLR" class="form-label small mb-1 fw-semibold">Padding horizontal</label>';
        $html .= '            <input type="text" id="ctaLetsTalkPaddingLR" name="spacing[padding_left_right]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($paddingLR) . '" placeholder="1.5rem">';
        $html .= '        </div>';

        // Text: Margin Left
        $marginLeft = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_left', '1rem');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkMarginLeft" class="form-label small mb-1 fw-semibold">Margen izquierdo (desktop)</label>';
        $html .= '            <input type="text" id="ctaLetsTalkMarginLeft" name="spacing[margin_left]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($marginLeft) . '" placeholder="1rem">';
        $html .= '            <small class="text-muted">Separación del menú en pantallas ≥992px</small>';
        $html .= '        </div>';

        // Text: Icon Spacing
        $iconSpacing = $this->renderer->getFieldValue($componentId, 'spacing', 'icon_spacing', '0.5rem');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="ctaLetsTalkIconSpacing" class="form-label small mb-1 fw-semibold">Espaciado del ícono</label>';
        $html .= '            <input type="text" id="ctaLetsTalkIconSpacing" name="spacing[icon_spacing]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($iconSpacing) . '" placeholder="0.5rem">';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildVisualEffectsGroup(string $componentId): string
    {
        $html = '<div class="card shadow-sm mb-3" style="border-left: 4px solid #1e3a5f;">';
        $html .= '    <div class="card-body">';
        $html .= '        <h5 class="fw-bold mb-3" style="color: #1e3a5f;">';
        $html .= '            <i class="bi bi-stars me-2" style="color: #FF8600;"></i>';
        $html .= '            Efectos Visuales';
        $html .= '        </h5>';

        // Text: Border Radius
        $borderRadius = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_radius', '6px');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkBorderRadius" class="form-label small mb-1 fw-semibold">Radio de bordes</label>';
        $html .= '            <input type="text" id="ctaLetsTalkBorderRadius" name="visual_effects[border_radius]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($borderRadius) . '" placeholder="6px">';
        $html .= '        </div>';

        // Text: Border Width
        $borderWidth = $this->renderer->getFieldValue($componentId, 'visual_effects', 'border_width', '0');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkBorderWidth" class="form-label small mb-1 fw-semibold">Grosor del borde</label>';
        $html .= '            <input type="text" id="ctaLetsTalkBorderWidth" name="visual_effects[border_width]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($borderWidth) . '" placeholder="0">';
        $html .= '        </div>';

        // Text: Box Shadow
        $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', 'none');
        $html .= '        <div class="mb-2">';
        $html .= '            <label for="ctaLetsTalkBoxShadow" class="form-label small mb-1 fw-semibold">Sombra</label>';
        $html .= '            <input type="text" id="ctaLetsTalkBoxShadow" name="visual_effects[box_shadow]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($boxShadow) . '" placeholder="none">';
        $html .= '            <small class="text-muted">Ej: 0 2px 4px rgba(0,0,0,0.1)</small>';
        $html .= '        </div>';

        // Text: Transition Duration
        $transitionDuration = $this->renderer->getFieldValue($componentId, 'visual_effects', 'transition_duration', '0.3s');
        $html .= '        <div class="mb-0">';
        $html .= '            <label for="ctaLetsTalkTransition" class="form-label small mb-1 fw-semibold">Duración de transición</label>';
        $html .= '            <input type="text" id="ctaLetsTalkTransition" name="visual_effects[transition_duration]" class="form-control form-control-sm" ';
        $html .= '                   value="' . esc_attr($transitionDuration) . '" placeholder="0.3s">';
        $html .= '        </div>';

        $html .= '    </div>';
        $html .= '</div>';

        return $html;
    }

    private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string
    {
        $checked = $checked === true || $checked === '1' || $checked === 1;

        $html = '                <div class="form-check form-check-checkbox mb-2">';
        $html .= sprintf(
            '                    <input class="form-check-input" type="checkbox" id="%s" %s>',
            esc_attr($id),
            $checked ? 'checked' : ''
        );
        $html .= sprintf(
            '                    <label class="form-check-label small" for="%s">',
            esc_attr($id)
        );
        $html .= sprintf('                        <i class="bi %s me-1" style="color: #FF8600;"></i>', esc_attr($icon));
        $html .= sprintf('                        %s', esc_html($label));
        $html .= '                    </label>';
        $html .= '                </div>';

        return $html;
    }
}
