<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

/**
 * Port of the reference builder embed_html/route.ts field renderers (Text group).
 * Source line ranges are listed on each method. See docs/renderer-port.md for porting rules.
 */
trait WPVFB_FP_Fields_Text {
    /** renderGridField — route.ts lines 698-941 */
    public function render_grid_field( $field, $gs, $render_field ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };

        if ( ! $J::truthy( $f( 'columns' ) ) ) {
            return '';
        }

        $columns = $f( 'columns' );
        $column_keys = $this->text_object_keys( $columns );
        $column_count = count( $column_keys );

        $width_presets = array(
            'single' => '1fr',
            'equal' => 'minmax(0, 1fr) minmax(0, 1fr)',
            'narrow-wide' => 'minmax(0, 1fr) minmax(0, 2fr)',
            'wide-narrow' => 'minmax(0, 2fr) minmax(0, 1fr)',
            'very-narrow-wide' => 'minmax(0, 1fr) minmax(0, 3fr)',
            'wide-very-narrow' => 'minmax(0, 3fr) minmax(0, 1fr)',
            'center-wide' => 'minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr)',
            'wide-narrow-narrow' => 'minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr)',
            'narrow-narrow-wide' => 'minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr)',
            'wide-narrow-narrow-narrow' => 'minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)',
            'narrow-wide-narrow-narrow' => 'minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr)',
        );

        $column_widths = $J::or_( $f( 'columnWidths' ), 'equal' );
        $custom_widths = $f( 'customColumnWidths' );
        if ( 1 === $column_count ) {
            $grid_template_columns = '1fr';
        } elseif ( 'custom' === $column_widths && $J::is_array( $custom_widths ) && count( $custom_widths ) > 0 ) {
            $grid_template_columns = implode( ' ', array_map( function ( $w ) {
                return 'minmax(0, ' . WPVFB_JS::str( $w ) . '%)';
            }, $custom_widths ) );
        } else {
            $cw_key = $J::str( $column_widths );
            $grid_template_columns = isset( $width_presets[ $cw_key ] ) ? $width_presets[ $cw_key ] : 'repeat(' . $column_count . ', minmax(0, 1fr))';
        }

        $grid_padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $padding_scope = $J::or_( $f( 'paddingScope' ), 'entire' );

        $grid_margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $gm = function ( $k ) use ( $grid_margin ) {
            return WPVFB_JS::defined( $grid_margin, $k ) ? WPVFB_JS::get( $grid_margin, $k ) : 0;
        };

        $overlay_color = $this->text_grid_overlay_color( $f( 'backgroundOverlayColor' ), $f( 'backgroundOverlayOpacity' ) );

        $gap = $f( 'gap' );
        $grid_gap = ! $J::is_nullish( $gap )
            ? ( ( is_int( $gap ) || is_float( $gap ) ) ? $J::num( $gap ) . 'px' : $gap )
            : '0px';

        $entire_radius = 'entire' === $f( 'borderRadiusScope' ) && $J::truthy( $f( 'borderRadius' ) );
        $radius_style = $entire_radius ? $J::str( $f( 'borderRadius' ) ) . 'px' : '0px';
        $box_shadow = ( $J::truthy( $f( 'dropShadowColor' ) ) && $J::defined( $field, 'dropShadowOffsetX' ) && $J::defined( $field, 'dropShadowOffsetY' ) && $J::defined( $field, 'dropShadowBlur' ) )
            ? $J::str( $f( 'dropShadowOffsetX' ) ) . 'px ' . $J::str( $f( 'dropShadowOffsetY' ) ) . 'px ' . $J::str( $f( 'dropShadowBlur' ) ) . 'px ' . $J::str( $f( 'dropShadowColor' ) )
            : 'none';
        $gp = function ( $k ) use ( $grid_padding ) { return WPVFB_JS::str( WPVFB_JS::get( $grid_padding, $k ) ); };

        $grid_styles = '
    display: grid;
    grid-template-columns: ' . $grid_template_columns . ';
    gap: ' . $J::str( $grid_gap ) . ';
    width: ' . $J::str( $J::or_( $f( 'width' ), '100%' ) ) . ';
    align-items: ' . $J::str( $J::or_( $f( 'alignItems' ), 'stretch' ) ) . ';
    margin: ' . $J::str( $gm( 'top' ) ) . 'px ' . $J::str( $gm( 'right' ) ) . 'px ' . $J::str( $gm( 'bottom' ) ) . 'px ' . $J::str( $gm( 'left' ) ) . 'px;
    background-color: ' . $J::str( $J::or_( $f( 'backgroundColor' ), 'transparent' ) ) . ';
    background-image: ' . ( $J::truthy( $f( 'backgroundImageUrl' ) ) ? 'url(' . $J::str( $f( 'backgroundImageUrl' ) ) . ')' : 'none' ) . ';
    background-size: ' . $J::str( $J::or_( $f( 'backgroundImageSize' ), 'cover' ) ) . ';
    background-position: ' . $J::str( $J::or_( $f( 'backgroundImagePosition' ), 'center' ) ) . ';
    background-repeat: ' . $J::str( $J::or_( $f( 'backgroundImageRepeat' ), 'no-repeat' ) ) . ';
    border-radius: ' . $radius_style . ';
    overflow: ' . ( $entire_radius ? 'hidden' : 'visible' ) . ';
    box-shadow: ' . $box_shadow . ';
    ' . ( 'entire' === $padding_scope ? 'padding: ' . $gp( 'top' ) . 'px ' . $gp( 'right' ) . 'px ' . $gp( 'bottom' ) . 'px ' . $gp( 'left' ) . 'px;' : '' ) . '
    position: relative;
  ';

        $overlay_styles = ( 'transparent' !== $overlay_color && $J::truthy( $f( 'backgroundImageUrl' ) ) )
            ? '
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: ' . $J::str( $overlay_color ) . ';
      pointer-events: none;
      border-radius: ' . $radius_style . ';
      z-index: 1;
    '
            : '';

        $responsive_grid_styles = '
    @media (max-width: 768px) {
      .grid-field {
        grid-template-columns: 1fr !important;
        gap: ' . $this->css( $grid_gap ) . ' !important;
      }
      .grid-item {
        width: 100% !important;
        min-width: 0 !important;
      }
    }
  ';

        $columns_html = '';
        foreach ( $column_keys as $column_key ) {
            $column_fields = $J::or_( $this->text_grid_prop( $columns, $column_key ), array() );

            $cb = $this->text_grid_prop( $f( 'columnBackgrounds' ), $column_key );
            $cbg = function ( $k ) use ( $cb ) { return WPVFB_JS::get( $cb, $k ); };
            $column_background = $J::or_( $cbg( 'backgroundColor' ), 'transparent' );
            $column_background_image = $J::or_( $cbg( 'backgroundImageUrl' ), '' );
            $column_background_size = $J::or_( $cbg( 'backgroundImageSize' ), 'cover' );
            $column_background_position = $J::or_( $cbg( 'backgroundImagePosition' ), 'center' );
            $column_background_repeat = $J::or_( $cbg( 'backgroundImageRepeat' ), 'no-repeat' );
            $column_overlay_color = $cbg( 'backgroundOverlayColor' );
            $column_overlay_opacity = $cbg( 'backgroundOverlayOpacity' );
            $column_padding = $J::or_( $this->text_grid_prop( $f( 'columnPaddings' ), $column_key ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
            $column_border_radius = $J::or_( $this->text_grid_prop( $f( 'columnBorderRadius' ), $column_key ), array( 'topLeft' => 0, 'topRight' => 0, 'bottomRight' => 0, 'bottomLeft' => 0 ) );
            $column_drop_shadow = $this->text_grid_prop( $f( 'columnDropShadows' ), $column_key );
            $cds = function ( $k ) use ( $column_drop_shadow ) { return WPVFB_JS::get( $column_drop_shadow, $k ); };
            $column_drop_shadow_style = ( $J::truthy( $column_drop_shadow ) && $J::truthy( $cds( 'dropShadowColor' ) ) && $J::defined( $column_drop_shadow, 'dropShadowOffsetX' ) && $J::defined( $column_drop_shadow, 'dropShadowOffsetY' ) && $J::defined( $column_drop_shadow, 'dropShadowBlur' ) )
                ? $J::str( $cds( 'dropShadowOffsetX' ) ) . 'px ' . $J::str( $cds( 'dropShadowOffsetY' ) ) . 'px ' . $J::str( $cds( 'dropShadowBlur' ) ) . 'px ' . $J::str( $cds( 'dropShadowColor' ) )
                : 'none';

            $column_overlay_color_value = $this->text_grid_overlay_color( $column_overlay_color, $column_overlay_opacity );

            $should_apply_column_border_radius = 'columns' === $f( 'borderRadiusScope' ) || $J::eq( $f( 'borderRadiusScope' ), $column_key );
            $cbr = function ( $k ) use ( $column_border_radius ) { return WPVFB_JS::str( WPVFB_JS::get( $column_border_radius, $k ) ); };
            $column_border_radius_style = $should_apply_column_border_radius
                ? $cbr( 'topLeft' ) . 'px ' . $cbr( 'topRight' ) . 'px ' . $cbr( 'bottomRight' ) . 'px ' . $cbr( 'bottomLeft' ) . 'px'
                : '0px';

            $column_fields_html = '';
            if ( is_array( $column_fields ) ) {
                foreach ( $column_fields as $nested_field ) {
                    $column_fields_html .= call_user_func( $render_field, $nested_field );
                }
            }

            $column_overlay_styles = ( 'transparent' !== $column_overlay_color_value && $J::truthy( $column_background_image ) )
                ? '
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: ' . $J::str( $column_overlay_color_value ) . ';
        pointer-events: none;
        border-radius: ' . $column_border_radius_style . ';
        z-index: 1;
      '
                : '';

            $cp = function ( $k ) use ( $column_padding ) { return WPVFB_JS::str( WPVFB_JS::get( $column_padding, $k ) ); };
            $column_style = '
      display: flex; 
      flex-direction: column; 
      min-width: 0;
      width: 100%;
      background-color: ' . $J::str( $column_background ) . ';
      background-image: ' . ( $J::truthy( $column_background_image ) ? 'url(' . $J::str( $column_background_image ) . ')' : 'none' ) . ';
      background-size: ' . $J::str( $column_background_size ) . ';
      background-position: ' . $J::str( $column_background_position ) . ';
      background-repeat: ' . $J::str( $column_background_repeat ) . ';
      padding: ' . $cp( 'top' ) . 'px ' . $cp( 'right' ) . 'px ' . $cp( 'bottom' ) . 'px ' . $cp( 'left' ) . 'px;
      border-radius: ' . $column_border_radius_style . ';
      box-shadow: ' . $column_drop_shadow_style . ';
      overflow: ' . ( 'entire' === $f( 'borderRadiusScope' ) ? 'visible' : 'hidden' ) . ';
      position: relative;
    ';

            $columns_html .= '<div class="grid-item" style="' . $this->a( $column_style ) . '">
      ' . ( '' !== $column_overlay_styles ? '<div style="' . $this->a( $column_overlay_styles ) . '"></div>' : '' ) . '
      <div style="position: relative; z-index: ' . ( '' !== $column_overlay_styles ? '2' : '1' ) . ';">
        ' . $column_fields_html . '
      </div>
    </div>';
        }

        return '
  ' . $this->add_inline_css( $responsive_grid_styles ) . '
  <div class="grid-field" data-field-id="' . $this->a( $J::or_( $f( 'id' ), '' ) ) . '" style="' . $this->a( $grid_styles ) . '">
    ' . ( '' !== $overlay_styles ? '<div style="' . $this->a( $overlay_styles ) . '"></div>' : '' ) . '
    ' . $columns_html . '
  </div>
';
    }

    /** Object.keys() order: integer-like keys ascending first, then string keys in insertion order. */
    protected function text_object_keys( $obj ) {
        if ( ! is_array( $obj ) ) {
            return array();
        }
        $ints = array();
        $strs = array();
        foreach ( array_keys( $obj ) as $k ) {
            $k = (string) $k;
            if ( preg_match( '/^(0|[1-9]\d*)$/', $k ) && strlen( $k ) < 10 ) {
                $ints[] = (int) $k;
            } else {
                $strs[] = $k;
            }
        }
        sort( $ints );
        return array_merge( array_map( 'strval', $ints ), $strs );
    }

    /** obj?.[key] for a single (possibly dotted) key. */
    protected function text_grid_prop( $obj, $key ) {
        if ( is_array( $obj ) && array_key_exists( $key, $obj ) ) {
            return $obj[ $key ];
        }
        return WPVFB_JS::undef();
    }

    /** parseInt(s, 16) */
    protected function text_parse_hex( $s ) {
        $s = ltrim( $s );
        $sign = 1;
        if ( '' !== $s && ( '-' === $s[0] || '+' === $s[0] ) ) {
            $sign = '-' === $s[0] ? -1 : 1;
            $s = substr( $s, 1 );
        }
        if ( preg_match( '/^0[xX]/', $s ) ) {
            $s = substr( $s, 2 );
        }
        if ( preg_match( '/^[0-9a-fA-F]+/', $s, $m ) ) {
            return $sign * hexdec( $m[0] );
        }
        return NAN;
    }

    /** hexToRgba (inside renderGridField) */
    protected function text_hex_to_rgba( $hex, $opacity ) {
        $r = $this->text_parse_hex( substr( $hex, 1, 2 ) );
        $g = $this->text_parse_hex( substr( $hex, 3, 2 ) );
        $b = $this->text_parse_hex( substr( $hex, 5, 2 ) );
        return 'rgba(' . WPVFB_JS::num( $r ) . ', ' . WPVFB_JS::num( $g ) . ', ' . WPVFB_JS::num( $b ) . ', ' . WPVFB_JS::num( WPVFB_JS::to_number( $opacity ) / 100 ) . ')';
    }

    /** overlayColor / columnOverlayColorValue computation of renderGridField. */
    protected function text_grid_overlay_color( $color, $opacity ) {
        if ( ! WPVFB_JS::truthy( $color ) || WPVFB_JS::is_undef( $opacity ) || ! ( WPVFB_JS::to_number( $opacity ) > 0 ) ) {
            return 'transparent';
        }
        $color = WPVFB_JS::str( $color );
        if ( 0 === strpos( $color, '#' ) ) {
            return $this->text_hex_to_rgba( $color, $opacity );
        }
        if ( false !== strpos( $color, 'rgba' ) ) {
            return preg_replace_callback( '/rgba?\([^)]+\)/', function ( $match ) use ( $opacity ) {
                if ( preg_match( '/(\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?/', $match[0], $m ) ) {
                    $o = WPVFB_JS::to_number( $opacity ) / 100;
                    return 'rgba(' . $m[1] . ', ' . $m[2] . ', ' . $m[3] . ', ' . WPVFB_JS::num( $o ) . ')';
                }
                return $match[0];
            }, $color, 1 );
        }
        return $color;
    }

    /** renderTextField — route.ts lines 942-1141 */
    public function render_text_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };

        $input_border_color = $J::or_( $f( 'inputBorderColor' ), $g( 'inputBorderColor' ), '#D1D5DB' );
        $hover_border_color = $J::or_( $f( 'hoverBorderColor' ), $g( 'hoverBorderColor' ), '#6B7280' );
        $focus_border_color = $J::or_( $f( 'focusBorderColor' ), $g( 'focusBorderColor' ), '#3B82F6' );
        $input_background_color = $J::or_( $f( 'inputBackgroundColor' ), $g( 'inputBackgroundColor' ), '#F9FAFB' );
        $placeholder_text_color = $J::or_( $f( 'placeholderTextColor' ), $g( 'placeholderTextColor' ), $g( 'globalColorScheme.placeholderTextColor' ), '#9CA3AF' );

        $should_hide = 'hidden' === $f( 'visibility' ) || 'administrative' === $f( 'visibility' ) || ( $J::truthy( $f( 'enableConditionalLogic' ) ) && ! $J::truthy( $f( 'conditionalLogicMet' ) ) );
        $visibility_style = $should_hide ? 'display: none;' : '';
        $custom_class = $J::truthy( $f( 'cssClassName' ) ) ? ' ' . $J::str( $f( 'cssClassName' ) ) : '';
        $label_class = 'left' === $g( 'labelPlacement' ) ? 'flex items-start space-x-4' : 'flex flex-col';

        $has_icon = $J::truthy( $f( 'fieldIcon' ) ) && 'none' !== $f( 'fieldIcon' );
        $icon_position = $J::or_( $f( 'iconPosition' ), 'left' );
        $icon_color = $J::or_( $f( 'iconColor' ), '#6B7280' );

        $pad = function ( $side, $gkey, $def ) use ( $f, $g, $J ) {
            $v = $f( 'padding.' . $side );
            if ( $J::truthy( $f( 'padding' ) ) && ! $J::is_undef( $v ) && $J::to_number( $v ) > 0 ) {
                return $v;
            }
            return $J::or_( $g( 'inputSettings.' . $gkey ), $def );
        };
        $pad_top = $pad( 'top', 'paddingTop', 8 );
        $pad_bottom = $pad( 'bottom', 'paddingBottom', 8 );
        $pad_left = ( $has_icon && 'left' === $icon_position ) ? 40 : $pad( 'left', 'paddingLeft', 12 );
        $pad_right = ( $has_icon && 'right' === $icon_position ) ? 40 : $pad( 'right', 'paddingRight', 12 );
        $input_padding = $J::str( $pad_top ) . 'px ' . $J::str( $pad_right ) . 'px ' . $J::str( $pad_bottom ) . 'px ' . $J::str( $pad_left ) . 'px';

        $radius = $J::defined( $field, 'borderRadius' ) ? $f( 'borderRadius' ) : $J::or_( $g( 'inputSettings.borderRadius' ), 4 );
        $line_height = $J::truthy( $f( 'lineHeight' ) ) ? $J::str( $f( 'lineHeight' ) ) . 'px' : $J::str( $J::or_( $g( 'lineHeight' ), 20 ) ) . 'px';
        $input_styles = '
    background-color: ' . $J::str( $input_background_color ) . ';
    border-color: ' . $J::str( $input_border_color ) . ';
    border-width: ' . $J::str( $J::or_( $g( 'inputSettings.borderWidth' ), 1 ) ) . 'px;
    border-radius: ' . $J::str( $radius ) . 'px;
    border-style: solid !important;
    font-family: inherit !important;
    color: ' . $J::str( $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ) ) ) . ';
    font-size: ' . $J::str( $g( 'fontSize' ) ) . 'px;
    line-height: ' . $line_height . ';
    letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;
    width: ' . $J::str( $J::or_( $f( 'width' ), '100%' ) ) . ';
    padding: ' . $input_padding . ';
    box-sizing: border-box;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  ';

        $sel = '#' . $this->css( $f( 'id' ) );
        $ph = $this->css( $placeholder_text_color );
        $placeholder_styles = "
    {$sel}::placeholder {
      color: {$ph} !important;
    }
    {$sel}:-ms-input-placeholder {
      color: {$ph} !important;
    }
    {$sel}::-ms-input-placeholder {
      color: {$ph} !important;
    }
  ";

        $margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $m = function ( $k ) use ( $margin ) { return WPVFB_JS::get( $margin, $k ); };

        $label_font_size = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) ) ? $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) : $J::or_( $g( 'labelFontSize' ), 15 );
        $label_lh_value = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) ) ? $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) : $J::or_( $g( 'labelLineHeight' ), $g( 'lineHeight' ), 1.5 );
        $label_line_height = ( is_int( $label_lh_value ) || is_float( $label_lh_value ) ) ? $J::str( $label_lh_value ) . 'px' : $label_lh_value;
        $label_font_weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 600 );
        $label_font_style = $J::or_( $f( 'labelFontStyle' ), 'normal' );

        $desc_font_size = ! $J::is_nullish( $f( 'descriptionFontSize' ) ) ? $f( 'descriptionFontSize' ) : $J::or_( $g( 'descriptionFontSize' ), $g( 'fontSize' ), 14 );
        $desc_lh_value = ! $J::is_nullish( $f( 'descriptionLineHeight' ) ) ? $f( 'descriptionLineHeight' ) : $J::or_( $g( 'lineHeight' ), 20 );
        $desc_line_height = ( is_int( $desc_lh_value ) || is_float( $desc_lh_value ) ) ? $J::str( $desc_lh_value ) . 'px' : $desc_lh_value;
        $desc_font_weight = $J::defined( $field, 'descriptionFontWeight' ) ? $f( 'descriptionFontWeight' ) : 400;
        $desc_font_style = $J::or_( $f( 'descriptionFontStyle' ), 'normal' );
        $desc_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );

        $left = 'left' === $g( 'labelPlacement' );
        $label_html = '';
        if ( 'none' !== $g( 'labelPlacement' ) && 'hidden' !== $f( 'labelVisibility' ) ) {
            $lm_bottom = $J::defined( $field, 'labelMargin.bottom' ) ? $f( 'labelMargin.bottom' ) : 10;
            $label_html = '<label for="' . $this->a( $f( 'id' ) ) . '" class="block text-sm font-medium mb-1"
                      style="' . $this->a( 'color:' . $J::str( $J::or_( $f( 'labelTextColor' ), $g( 'labelTextColor' ), $g( 'primaryTextColor' ) ) ) . ';
                      font-size:' . $J::str( $label_font_size ) . 'px;
                      font-weight:' . $J::str( $label_font_weight ) . ';
                      font-style:' . $J::str( $label_font_style ) . ';
                      line-height:' . $J::str( $label_line_height ) . ';
                      letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                      width:' . ( $left ? '130px' : 'auto' ) . ';
                      min-width:' . ( $left ? '130px' : 'auto' ) . ';
                      max-width:' . ( $left ? '130px' : 'none' ) . ';
                      text-align:left;
                      overflow-wrap: break-word; white-space: normal;
                      margin-top: ' . $J::str( $J::or_( $f( 'labelMargin.top' ), 0 ) ) . 'px; margin-right: ' . $J::str( $J::or_( $f( 'labelMargin.right' ), 0 ) ) . 'px; margin-bottom: ' . $J::str( $lm_bottom ) . 'px; margin-left: ' . $J::str( $J::or_( $f( 'labelMargin.left' ), 0 ) ) . 'px;' ) . '">
                        ' . $this->t( $J::or_( $f( 'name' ), 'Unnamed Field' ) ) . ' ' . $this->required_asterisk( $field, $gs ) . '
                    </label>';
        }

        $desc = function ( $where ) use ( $J, $f, $g, $desc_color, $desc_font_size, $desc_line_height, $desc_font_weight, $desc_font_style ) {
            if ( $where !== $g( 'descriptionPlacement' ) || ! $J::truthy( $f( 'description' ) ) ) {
                return '';
            }
            $above = 'above' === $where;
            return '<p class="text-sm ' . ( $above ? 'mb-1' : 'mt-1' ) . '" style="' . $this->a( 'color:' . $J::str( $desc_color ) . ';
                        font-size:' . $J::str( $desc_font_size ) . 'px;
                        line-height:' . $J::str( $desc_line_height ) . ';
                        font-weight:' . $J::str( $desc_font_weight ) . ';
                        font-style:' . $J::str( $desc_font_style ) . ';
                        letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                        margin: ' . ( $above ? '0 0 4px 0' : '4px 0 0 0' ) . ';
                        padding: 0;' ) . '">
                        ' . $this->t( $f( 'description' ) ) . '
                      </p>';
        };

        $icon_html = $has_icon ? '<i class="' . $this->a( $f( 'fieldIcon' ) ) . '" style="' . $this->a( '
                      position: absolute;
                      ' . ( 'left' === $icon_position ? 'left: 12px;' : 'right: 12px;' ) . '
                      top: 50%;
                      transform: translateY(-50%);
                      color: ' . $J::str( $icon_color ) . ';
                      z-index: 10;
                      pointer-events: none;
                      font-size: 14px;
                    ' ) . '"></i>' : '';

        $is_password = 'password' === $f( 'type' );
        $m_bottom = $J::defined( $margin, 'bottom' ) ? $m( 'bottom' ) : 15;
        $fb = $this->a( $focus_border_color );
        $ib = $this->a( $input_border_color );
        $hb = $this->a( $hover_border_color );

        return '
    <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' margin: ' . $J::str( $m( 'top' ) ) . 'px ' . $J::str( $m( 'right' ) ) . 'px ' . $J::str( $m_bottom ) . 'px ' . $J::str( $m( 'left' ) ) . 'px;' ) . '">
      ' . $this->add_inline_css( $placeholder_styles ) . '
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="
        padding: 0px;
      ">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '
              <div class="flex flex-col w-full justify-center">
                  ' . $desc( 'above' ) . '
                <div class="input-wrapper" style="position: relative;">
                  <div class="relative w-full">
                    ' . $icon_html . '
                    <input type="' . ( $is_password ? 'password' : 'text' ) . '" id="' . $this->a( $f( 'id' ) ) . '" name="' . $this->a( $this->name_attr( $field ) ) . '" value="' . $this->a( $J::or_( $f( 'defaultValue' ), '' ) ) . '"
                    placeholder="' . $this->a( $J::or_( $f( 'placeholder' ), $is_password ? 'Enter password' : 'Enter text' ) ) . '"
                    ' . ( $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '' ) . '
                    style="' . $this->a( $input_styles ) . ' outline: none; box-shadow: none;"
                    class="w-full rounded-md border transition-all"
                    data-wpvfb-border="' . $fb . '|' . $ib . '|' . $hb . '">
                  </div>
                </div>
                  ' . $desc( 'below' ) . '
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ';
    }

    /** renderTelField — route.ts lines 1142-1338 */
    public function render_tel_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };
        $g = function ( $p ) use ( $gs ) { return WPVFB_JS::get( $gs, $p ); };

        $input_border_color = $J::or_( $f( 'inputBorderColor' ), $g( 'inputBorderColor' ), '#D1D5DB' );
        $hover_border_color = $J::or_( $f( 'hoverBorderColor' ), $g( 'hoverBorderColor' ), '#6B7280' );
        $focus_border_color = $J::or_( $f( 'focusBorderColor' ), $g( 'focusBorderColor' ), '#3B82F6' );
        $input_background_color = $J::or_( $f( 'inputBackgroundColor' ), $g( 'inputBackgroundColor' ), '#F9FAFB' );
        $placeholder_text_color = $J::or_( $f( 'placeholderTextColor' ), $g( 'placeholderTextColor' ), $g( 'globalColorScheme.placeholderTextColor' ), '#9CA3AF' );

        $enable_phone_mask = $J::truthy( $J::or_( $f( 'enablePhoneMask' ), false ) );

        $should_hide = 'hidden' === $f( 'visibility' ) || 'administrative' === $f( 'visibility' ) || ( $J::truthy( $f( 'enableConditionalLogic' ) ) && ! $J::truthy( $f( 'conditionalLogicMet' ) ) );
        $visibility_style = $should_hide ? 'display: none;' : '';
        $custom_class = $J::truthy( $f( 'cssClassName' ) ) ? ' ' . $J::str( $f( 'cssClassName' ) ) : '';
        $left = 'left' === $g( 'labelPlacement' );
        $label_class = $left ? 'flex items-start space-x-4' : 'flex flex-col';

        $label_font_size = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) ) ? $J::nc( $f( 'wpvfbLabelFontSize' ), $f( 'fontSize' ) ) : $J::or_( $g( 'labelFontSize' ), 15 );
        $label_lh_value = ! $J::is_nullish( $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) ) ? $J::nc( $f( 'wpvfbLabelLineHeight' ), $f( 'lineHeight' ) ) : $J::or_( $g( 'labelLineHeight' ), $g( 'lineHeight' ), 1.5 );
        $label_line_height = ( is_int( $label_lh_value ) || is_float( $label_lh_value ) ) ? $J::str( $label_lh_value ) . 'px' : $label_lh_value;
        $label_font_weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : $J::or_( $g( 'labelFontWeight' ), 600 );
        $label_font_style = $J::or_( $f( 'labelFontStyle' ), 'normal' );

        $desc_font_size = ! $J::is_nullish( $f( 'descriptionFontSize' ) ) ? $f( 'descriptionFontSize' ) : $J::or_( $g( 'descriptionFontSize' ), $g( 'fontSize' ), 14 );
        $desc_lh_value = ! $J::is_nullish( $f( 'descriptionLineHeight' ) ) ? $f( 'descriptionLineHeight' ) : $J::or_( $g( 'lineHeight' ), 20 );
        $desc_line_height = ( is_int( $desc_lh_value ) || is_float( $desc_lh_value ) ) ? $J::str( $desc_lh_value ) . 'px' : $desc_lh_value;
        $desc_font_weight = $J::defined( $field, 'descriptionFontWeight' ) ? $f( 'descriptionFontWeight' ) : 400;
        $desc_font_style = $J::or_( $f( 'descriptionFontStyle' ), 'normal' );
        $desc_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );

        $has_icon = $J::truthy( $f( 'fieldIcon' ) ) && 'none' !== $f( 'fieldIcon' );
        $icon_position = $J::or_( $f( 'iconPosition' ), 'left' );
        $icon_color = $J::or_( $f( 'iconColor' ), '#6B7280' );

        $input_padding = $has_icon
            ? ( 'left' === $icon_position ? '8px 8px 8px 32px' : '8px 32px 8px 8px' )
            : '8px';

        $input_styles = '
    background-color: ' . $J::str( $input_background_color ) . ';
    border-color: ' . $J::str( $input_border_color ) . ';
    border-width: ' . $J::str( $J::or_( $g( 'inputSettings.borderWidth' ), 1 ) ) . 'px;
    border-radius: ' . $J::str( $J::or_( $g( 'inputSettings.borderRadius' ), 4 ) ) . 'px;
    border-style: solid !important;
    font-family: inherit !important;
    color: ' . $J::str( $J::or_( $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ) ) ) . ';
    font-size: ' . $J::str( $g( 'fontSize' ) ) . 'px;
    line-height: ' . $J::str( $g( 'lineHeight' ) ) . 'px;
    letter-spacing: ' . $J::str( $g( 'letterSpacing' ) ) . 'px;
    width: ' . $J::str( $J::or_( $f( 'width' ), '100%' ) ) . ';
    padding: ' . $input_padding . ';
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
  ';

        $ph = $this->css( $placeholder_text_color );
        $placeholder_styles = "
    ::placeholder {
      color: {$ph} !important;
    }
    :-ms-input-placeholder {
      color: {$ph} !important;
    }
    ::-ms-input-placeholder {
      color: {$ph} !important;
    }
  ";

        $phone_mask_styles = $enable_phone_mask ? $this->add_inline_css( '
      .iti {
        width: 100% !important;
      }
      .iti__tel-input {
        width: 100% !important;
      }
      .iti__search-input {
        min-height: 35px !important;
      }
      .iti__flag,
      .iti__arrow {
        display: block !important;
      }
      .iti__flag:empty,
      .iti__arrow:empty {
        display: block !important;
      }
      .iti__country-list,
      .rte .iti__country-list {
        padding-left: 0px !important;
      }
  ' ) : '';

        $field_margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $m = function ( $k ) use ( $field_margin ) { return WPVFB_JS::get( $field_margin, $k ); };
        $m_bottom = $J::defined( $field_margin, 'bottom' ) ? $m( 'bottom' ) : 15;

        $label_html = '';
        if ( 'none' !== $g( 'labelPlacement' ) && 'hidden' !== $f( 'labelVisibility' ) ) {
            $lm_bottom = $J::defined( $field, 'labelMargin.bottom' ) ? $f( 'labelMargin.bottom' ) : 10;
            $label_html = '<label for="' . $this->a( $f( 'id' ) ) . '" class="block text-sm font-medium mb-1"
                    style="' . $this->a( 'color:' . $J::str( $J::or_( $f( 'labelTextColor' ), $g( 'labelTextColor' ), $g( 'primaryTextColor' ) ) ) . ';
                    font-size:' . $J::str( $label_font_size ) . 'px;
                    font-weight:' . $J::str( $label_font_weight ) . ';
                    font-style:' . $J::str( $label_font_style ) . ';
                    line-height:' . $J::str( $label_line_height ) . ';
                    letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                    width:' . ( $left ? '130px' : 'auto' ) . ';
                    min-width:' . ( $left ? '130px' : 'auto' ) . ';
                    max-width:' . ( $left ? '130px' : 'none' ) . ';
                    text-align:left;
                    overflow-wrap: break-word; white-space: normal;
                    margin-top: ' . $J::str( $J::or_( $f( 'labelMargin.top' ), 0 ) ) . 'px; margin-right: ' . $J::str( $J::or_( $f( 'labelMargin.right' ), 0 ) ) . 'px; margin-bottom: ' . $J::str( $lm_bottom ) . 'px; margin-left: ' . $J::str( $J::or_( $f( 'labelMargin.left' ), 0 ) ) . 'px;' ) . '">
                      ' . $this->t( $J::or_( $f( 'name' ), 'Telephone' ) ) . ' ' . ( $J::truthy( $f( 'required' ) ) ? '<span class="text-red-500" style="color: #ef4444 !important;">*</span>' : '' ) . '
                  </label>';
        }

        $desc_above = '';
        if ( 'above' === $g( 'descriptionPlacement' ) && $J::truthy( $f( 'description' ) ) ) {
            $desc_above = '<p class="text-sm mb-1" style="' . $this->a( 'color:' . $J::str( $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' ) ) . ';
                        font-size:' . $J::str( $g( 'fontSize' ) ) . 'px;
                        line-height:' . $J::str( $J::or_( $g( 'labelLineHeight' ), $g( 'lineHeight' ) ) ) . 'px;
                        letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;' ) . '">
                        ' . $this->t( $f( 'description' ) ) . '
                      </p>';
        }

        $desc_below = '';
        if ( 'below' === $g( 'descriptionPlacement' ) && $J::truthy( $f( 'description' ) ) ) {
            $desc_below = '<p class="text-sm mt-1" style="' . $this->a( 'color:' . $J::str( $desc_color ) . ';
                        font-size:' . $J::str( $desc_font_size ) . 'px;
                        line-height:' . $J::str( $desc_line_height ) . ';
                        font-weight:' . $J::str( $desc_font_weight ) . ';
                        font-style:' . $J::str( $desc_font_style ) . ';
                        letter-spacing:' . $J::str( $g( 'letterSpacing' ) ) . 'px;
                        margin: 4px 0 0 0;
                        padding: 0;' ) . '">
                        ' . $this->t( $f( 'description' ) ) . '
                      </p>';
        }

        $icon_html = $has_icon ? '<i class="' . $this->a( $f( 'fieldIcon' ) ) . '" style="' . $this->a( '
                      position: absolute;
                      ' . ( 'left' === $icon_position ? 'left: 12px;' : 'right: 12px;' ) . '
                      top: 50%;
                      transform: translateY(-50%);
                      color: ' . $J::str( $icon_color ) . ';
                      z-index: 10;
                      pointer-events: none;
                      font-size: 14px;
                    ' ) . '"></i>' : '';

        $fb = $this->a( $focus_border_color );
        $ib = $this->a( $input_border_color );
        $hb = $this->a( $hover_border_color );

        return '
    ' . $phone_mask_styles . '
    <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' margin: ' . $J::str( $m( 'top' ) ) . 'px ' . $J::str( $m( 'right' ) ) . 'px ' . $J::str( $m_bottom ) . 'px ' . $J::str( $m( 'left' ) ) . 'px;' ) . '">
      ' . $this->add_inline_css( $placeholder_styles ) . '
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="
        padding: 0px;
      ">
        <div class="w-full">
          <div class="relative cursor-default">
            <div class="' . $label_class . '">
              ' . $label_html . '

              <div class="flex flex-col w-full justify-center">
                ' . $desc_above . '

                <div class="input-wrapper" style="position: relative;">
                  <div class="relative w-full">
                    ' . $icon_html . '
                    <input type="tel" id="' . $this->a( $f( 'id' ) ) . '" name="' . $this->a( $this->name_attr( $field ) ) . '" value="' . $this->a( $J::or_( $f( 'defaultValue' ), '' ) ) . '"
                      ' . ( $J::truthy( $f( 'required' ) ) ? 'data-required="true"' : '' ) . '
                      ' . ( $enable_phone_mask ? 'data-intl-tel-input="true"' : '' ) . '
                      placeholder="' . $this->a( $enable_phone_mask ? '' : $J::or_( $f( 'placeholder' ), 'Enter phone number' ) ) . '"
                      style="' . $this->a( $input_styles ) . ' outline: none; box-shadow: none;"
                      class="w-full rounded-md border transition-all' . ( $enable_phone_mask ? ' intl-tel-input' : '' ) . '"
                      data-wpvfb-border="' . $fb . '|' . $ib . '|' . $hb . '"
                    />
                  </div>
                </div>

                ' . $desc_below . '
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  ';
    }

}