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

/**
 * Port of the reference builder embed_html/route.ts field renderers (Content group).
 * Source line ranges are listed on each method. See docs/renderer-port.md for porting rules.
 */
trait WPVFB_FP_Fields_Content {
    /** Shared `visibilityStyle` expression used by every renderer in this group. */
    protected function content_visibility_style( $field ) {
        $v = WPVFB_JS::get( $field, 'visibility' );
        $hide = 'hidden' === $v || 'administrative' === $v || ( WPVFB_JS::truthy( WPVFB_JS::get( $field, 'enableConditionalLogic' ) ) && ! WPVFB_JS::truthy( WPVFB_JS::get( $field, 'conditionalLogicMet' ) ) );
        return $hide ? 'display: none;' : '';
    }

    /** `field.cssClassName ? \` ${field.cssClassName}\` : ""` */
    protected function content_custom_class( $field ) {
        $c = WPVFB_JS::get( $field, 'cssClassName' );
        return WPVFB_JS::truthy( $c ) ? ' ' . WPVFB_JS::str( $c ) : '';
    }

    /** Link targets: identical to the TS for normal URLs; script-capable schemes become "#". */
    protected function content_url( $v ) {
        $s = WPVFB_JS::str( $v );
        $probe = strtolower( preg_replace( '/[\x00-\x20]+/', '', html_entity_decode( $s, ENT_QUOTES, 'UTF-8' ) ) );
        if ( preg_match( '/^(javascript|vbscript|data):/', $probe ) ) {
            return '#';
        }
        return $s;
    }

    /** parseInt(s, 16) */
    protected function content_parse_hex( $s ) {
        if ( preg_match( '/^\s*([+-]?)(?:0[xX])?([0-9a-fA-F]+)/', $s, $m ) ) {
            $n = hexdec( $m[2] );
            return '-' === $m[1] ? -$n : $n;
        }
        return NAN;
    }

    /** Math.round */
    protected function content_round( $n ) {
        if ( is_nan( $n ) || is_infinite( $n ) ) {
            return $n;
        }
        return floor( $n + 0.5 );
    }

    /** `field.positionMode` sticky / inline style block shared by promo + countdown banners. */
    protected function content_position_styles( $field, $border_radius ) {
        $mode = WPVFB_JS::get( $field, 'positionMode' );
        $is_sticky = 'sticky-top' === $mode || 'sticky-bottom' === $mode;
        if ( $is_sticky ) {
            return '
    position: fixed;
    left: 0;
    right: 0;
    top: ' . ( 'sticky-top' === $mode ? '0' : 'auto' ) . ';
    bottom: ' . ( 'sticky-bottom' === $mode ? '0' : 'auto' ) . ';
    z-index: 999999;
    border-radius: 0;
    margin: 0;
    box-shadow: ' . ( 'sticky-top' === $mode ? '0 4px 12px rgba(0,0,0,0.15)' : '0 -4px 12px rgba(0,0,0,0.15)' ) . ';
  ';
        }
        return '
    border-radius: ' . WPVFB_JS::str( $border_radius ) . 'px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  ';
    }

    /** renderImageField — route.ts lines 2125-2258 */
    public function render_image_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 ); };

        $description_color = $J::or_( $f( 'descriptionColor' ), $g( 'descriptionColor' ), '#9CA3AF' );
        $visibility_style = $this->content_visibility_style( $field );
        $custom_class = $this->content_custom_class( $field );
        $field_padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $p = function ( $k ) use ( $field_padding ) { return WPVFB_JS::str( WPVFB_JS::get( $field_padding, $k ) ); };

        $size_map = array(
            'small'  => array( 'maxWidth' => 50, 'maxHeight' => 50 ),
            'medium' => array( 'maxWidth' => 200, 'maxHeight' => 200 ),
            'large'  => array( 'maxWidth' => 400, 'maxHeight' => 400 ),
            'custom' => array( 'maxWidth' => $J::or_( $f( 'imageCustomWidth' ), $f( 'imageMaxWidth' ), 200 ), 'maxHeight' => $J::or_( $f( 'imageCustomHeight' ), $f( 'imageMaxHeight' ), 200 ) ),
        );
        $is_full = 'full' === $f( 'imageSize' );
        if ( $is_full ) {
            $size = array( 'maxWidth' => '100%', 'maxHeight' => 'none' );
        } else {
            $size = $J::get( $size_map, $J::str( $J::or_( $f( 'imageSize' ), 'medium' ) ) );
        }
        $size_w = $J::str( $J::get( $size, 'maxWidth' ) );
        $size_h = $J::str( $J::get( $size, 'maxHeight' ) );

        $shadow_map = array(
            'none'   => 'none',
            'subtle' => '0 1px 3px rgba(0, 0, 0, 0.1)',
            'medium' => '0 4px 6px rgba(0, 0, 0, 0.1)',
            'strong' => '0 10px 15px rgba(0, 0, 0, 0.1)',
        );
        $box_shadow = $J::get( $shadow_map, $J::str( $J::or_( $f( 'imageBoxShadow' ), 'none' ) ) );

        $align = $f( 'imageAlignment' );
        $alignment_style = 'center' === $align ? 'text-align: center;' : ( 'right' === $align ? 'text-align: right;' : 'text-align: left;' );

        $border_radius = $J::str( $J::or_( $f( 'imageBorderRadiusTopLeft' ), 0 ) ) . 'px ' . $J::str( $J::or_( $f( 'imageBorderRadiusTopRight' ), 0 ) ) . 'px ' . $J::str( $J::or_( $f( 'imageBorderRadiusBottomRight' ), 0 ) ) . 'px ' . $J::str( $J::or_( $f( 'imageBorderRadiusBottomLeft' ), 0 ) ) . 'px';
        $border = $J::str( $J::or_( $f( 'imageBorderWidth' ), 0 ) ) . 'px solid ' . $J::str( $J::or_( $f( 'imageBorderColor' ), 'transparent' ) );
        $bg = $J::str( $J::or_( $f( 'imageBackgroundColor' ), 'transparent' ) );

        if ( $is_full ) {
            $bg_h = $J::truthy( $f( 'enableBackgroundHeight' ) ) && $J::truthy( $f( 'backgroundImageHeight' ) );
            $image_style = '
        max-width: 100%;
        max-height: ' . ( $bg_h ? $J::str( $f( 'backgroundImageHeight' ) ) . 'px' : 'none' ) . ';
        width: 100%;
        height: ' . ( $bg_h ? $J::str( $f( 'backgroundImageHeight' ) ) . 'px' : 'auto' ) . ';
        object-fit: ' . ( $bg_h ? 'cover' : 'contain' ) . ';
        border-radius: ' . $border_radius . ';
        border: ' . $border . ';
        box-shadow: ' . $J::str( $box_shadow ) . ';
        background-color: ' . $bg . ';
        display: inline-block;
      ';
        } else {
            $image_style = '
        max-width: ' . $size_w . 'px;
        max-height: ' . $size_h . 'px;
        width: auto;
        height: auto;
        border-radius: ' . $border_radius . ';
        border: ' . $border . ';
        box-shadow: ' . $J::str( $box_shadow ) . ';
        background-color: ' . $bg . ';
        display: inline-block;
      ';
        }

        $outer_style = $visibility_style . ' ' . ( $J::truthy( $f( 'noMarginForOuterDiv' ) ) ? 'margin-left: 0px !important; margin-right: 0px !important;' : '' );
        $padding_style = 'padding: ' . $p( 'top' ) . 'px ' . $p( 'right' ) . 'px ' . $p( 'bottom' ) . 'px ' . $p( 'left' ) . 'px;';
        $ph_w = $is_full ? '100%' : $size_w . 'px';
        $ph_h = $is_full ? 'auto' : $size_h . 'px';

        if ( ! $J::truthy( $f( 'imageUrl' ) ) ) {
            return '
      <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $outer_style ) . '">
        <div class="mb-4" style="' . $this->a( $padding_style ) . '">
          <div style="' . $this->a( $alignment_style ) . '">
            <div style="' . $this->a( '
              width: ' . $ph_w . ';
              height: ' . $ph_h . ';
              border: 2px dashed #D1D5DB;
              border-radius: ' . $border_radius . ';
              display: inline-flex;
              align-items: center;
              justify-content: center;
              background-color: #F9FAFB;
              color: #9CA3AF;
              font-size: 14px;
            ' ) . '">
              No image uploaded
            </div>
          </div>
        </div>
      </div>
    ';
        }

        $caption = '';
        if ( $J::truthy( $f( 'imageCaption' ) ) ) {
            $caption = '
            <p style="' . $this->a( '
              margin-top: 8px;
              font-size: ' . $J::str( $g( 'fontSize' ) ) . 'px;
              line-height: ' . $J::str( $g( 'lineHeight' ) ) . 'px;
              color: ' . $J::str( $description_color ) . ';
              text-align: ' . $J::str( $J::or_( $f( 'imageAlignment' ), 'left' ) ) . ';
            ' ) . '">
              ' . $this->t( $f( 'imageCaption' ) ) . '
            </p>
          ';
        }

        return '
    <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $outer_style ) . '">
      <div class="mb-4" style="' . $this->a( $padding_style ) . '">
        <div style="' . $this->a( $alignment_style ) . '">
          <img
            src="' . $this->a( $f( 'imageUrl' ) ) . '"
            alt="' . $this->a( $J::or_( $f( 'imageAltText' ), $f( 'name' ), 'Image' ) ) . '"
            style="' . $this->a( $image_style ) . '"
            data-wpvfb-fallback="1"
          />
          <div style="' . $this->a( '
            width: ' . $ph_w . ';
            height: ' . $ph_h . ';
            border: 2px dashed #D1D5DB;
            border-radius: ' . $border_radius . ';
            display: none;
            align-items: center;
            justify-content: center;
            background-color: #F9FAFB;
            color: #9CA3AF;
            font-size: 14px;
          ' ) . '">
            Image not found
          </div>
          ' . $caption . '
        </div>
      </div>
    </div>
  ';
    }

    /** renderPromoBannerField — route.ts lines 2259-2312 */
    public function render_promo_banner_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };

        $visibility_style = $this->content_visibility_style( $field );
        $custom_class = $this->content_custom_class( $field );
        $bg = $J::or_( $f( 'backgroundColor' ), '#3B82F6' );
        $text_col = $J::or_( $f( 'textColor' ), '#FFFFFF' );
        $btn_bg = $J::or_( $f( 'buttonColor' ), '#FFFFFF' );
        $btn_text_col = $J::or_( $f( 'buttonTextColor' ), '#3B82F6' );
        $border_radius = $J::defined( $field, 'borderRadius' ) ? $f( 'borderRadius' ) : 8;

        $icon_html = '<i class="fas fa-bullhorn" style="margin-right: 8px;"></i>';
        $type = $f( 'bannerType' );
        if ( 'warning' === $type ) {
            $icon_html = '<i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i>';
        }
        if ( 'success' === $type ) {
            $icon_html = '<i class="fas fa-check-circle" style="margin-right: 8px;"></i>';
        }
        if ( 'danger' === $type ) {
            $icon_html = '<i class="fas fa-exclamation-circle" style="margin-right: 8px;"></i>';
        }

        $position_styles = $this->content_position_styles( $field, $border_radius );
        $id = $this->a( $f( 'id' ) );

        $button = '';
        if ( false !== $f( 'showButton' ) ) {
            $button = '
          <a href="' . $this->a( $this->content_url( $J::or_( $f( 'buttonLink' ), '#' ) ) ) . '" target="_blank" rel="noopener noreferrer" style="' . $this->a( 'background-color: ' . $J::str( $btn_bg ) . '; color: ' . $J::str( $btn_text_col ) . '; padding: 6px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; text-decoration: none; margin-left: 16px; display: inline-block; transition: transform 0.2s;' ) . '" class="wpvfb-promo-btn">
            ' . $this->t( $J::or_( $f( 'buttonText' ), 'Claim Offer' ) ) . '
          </a>
        ';
        }

        $close = '';
        if ( false !== $f( 'allowClose' ) ) {
            $close = '
        <button type="button" class="wpvfb-promo-close" data-wpvfb-dismiss="promo-banner-' . $id . '" aria-label="' . esc_attr__( 'Close', 'efe-visual-forms' ) . '" style="background: transparent; border: none; color: currentColor; opacity: 0.8; cursor: pointer; padding: 4px; display: inline-flex; align-items: center;">
          <i class="fas fa-times" style="font-size: 14px;"></i>
        </button>
      ';
        }

        return '
    <div id="promo-banner-' . $id . '" class="wpvfb-promo-banner-wrapper' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' ' . $position_styles . ' background-color: ' . $J::str( $bg ) . '; color: ' . $J::str( $text_col ) . '; padding: 14px 16px; margin-top: 8px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; box-sizing: border-box; font-family: inherit;' ) . '">
      <div style="display: flex; align-items: center; flex: 1; padding-right: 24px;">
        <span style="font-size: 16px; display: inline-flex; align-items: center;">' . $icon_html . '</span>
        <span style="font-size: 14px; font-weight: 500; line-height: 1.4;">' . $this->t( $J::or_( $f( 'bannerMessage' ), 'Get 10% off when you complete this form!' ) ) . '</span>
        ' . $button . '
      </div>
      ' . $close . '
    </div>
  ';
    }

    /** renderTrustBadgesField — route.ts lines 2313-2353 */
    public function render_trust_badges_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };

        $visibility_style = $this->content_visibility_style( $field );
        $custom_class = $this->content_custom_class( $field );
        $badges = $J::or_( $f( 'trustBadges' ), array(
            array( 'type' => 'ssl', 'label' => 'SSL Secure Connection' ),
            array( 'type' => 'shipping', 'label' => 'Free Shipping Worldwide' ),
            array( 'type' => 'support', 'label' => '24/7 Dedicated Support' ),
        ) );

        $badge_color = $J::or_( $f( 'badgeColor' ), '#6B7280' );
        $alignment = $J::or_( $f( 'alignment' ), 'center' );
        $justify = 'left' === $alignment ? 'flex-start' : ( 'right' === $alignment ? 'flex-end' : 'center' );

        $icons = array(
            'ssl'       => '<i class="fas fa-lock" style="margin-right: 6px;"></i>',
            'shipping'  => '<i class="fas fa-truck" style="margin-right: 6px;"></i>',
            'support'   => '<i class="fas fa-headset" style="margin-right: 6px;"></i>',
            'guarantee' => '<i class="fas fa-award" style="margin-right: 6px;"></i>',
        );

        $badges_html = '';
        foreach ( $J::arr( $badges ) as $badge ) {
            $type = $J::get( $badge, 'type' );
            $icon = ( is_string( $type ) && isset( $icons[ $type ] ) ) ? $icons[ $type ] : '<i class="fas fa-certificate" style="margin-right: 6px;"></i>';
            $badges_html .= '
    <div style="' . $this->a( 'display: flex; align-items: center; font-size: 12px; font-weight: 500; color: ' . $J::str( $badge_color ) . '; padding: 6px 12px; background-color: rgba(243, 244, 246, 0.7); border: 1px solid rgba(229, 231, 235, 0.8); border-radius: 9999px; box-shadow: 0 1px 2px rgba(0,0,0,0.02); margin: 4px;' ) . '">
      ' . $icon . '
      <span>' . $this->t( $J::get( $badge, 'label' ) ) . '</span>
    </div>
  ';
        }

        return '
    <div class="wpvfb-trust-badges-wrapper' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' padding: 12px 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: ' . $justify . '; width: 100%; box-sizing: border-box;' ) . '">
      ' . $badges_html . '
    </div>
  ';
    }

    /** renderFaqAccordionField — route.ts lines 2354-2407 */
    public function render_faq_accordion_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };

        $visibility_style = $this->content_visibility_style( $field );
        $custom_class = $this->content_custom_class( $field );
        $items = $J::or_( $f( 'faqItems' ), array(
            array( 'question' => 'What is your return policy?', 'answer' => 'We offer a 30-day money-back guarantee on all products.' ),
            array( 'question' => 'How long does shipping take?', 'answer' => 'Shipping usually takes 3 to 5 business days.' ),
        ) );

        $active_color = $J::or_( $f( 'themeColor' ), '#3B82F6' );
        $fid = $this->a( $f( 'id' ) );

        $accordion_html = '';
        foreach ( $J::arr( $items ) as $idx => $item ) {
            $id = 'faq-' . $fid . '-' . $idx;
            $accordion_html .= '
      <div style="border: 1px solid #E5E7EB; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background-color: #FFFFFF; transition: all 0.2s ease;">
        <button type="button" data-wpvfb-faq="' . $id . '" data-active-color="' . $this->a( $active_color ) . '" aria-expanded="false" style="width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; background: transparent; border: none; text-align: left; font-size: 14px; font-weight: 600; color: #1F2937; cursor: pointer; outline: none; margin: 0;">
          <span>' . $this->t( $J::get( $item, 'question' ) ) . '</span>
          <i id="' . $id . '-icon" class="fas fa-chevron-down faq-icon" style="font-size: 12px; color: #9CA3AF; transition: transform 0.2s, color 0.2s;"></i>
        </button>
        <div id="' . $id . '-content" class="faq-content" style="display: none; padding: 14px 16px; pt: 0; font-size: 13px; color: #4B5563; line-height: 1.5; border-top: 1px solid #F3F4F6; background-color: #FAFAFA;">
          ' . $this->h( $J::str( $J::get( $item, 'answer' ) ) ) . '
        </div>
      </div>
    ';
        }

        return '
    <div id="faq-accordion-' . $fid . '" class="wpvfb-faq-accordion-wrapper' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' padding: 8px 0; width: 100%; box-sizing: border-box;' ) . '">
      ' . $accordion_html . '
    </div>
  ';
    }

    /** renderCountdownBannerField — route.ts lines 2408-2504 */
    public function render_countdown_banner_field( $field, $gs ) {
        $J = 'WPVFB_JS';
        $f = function ( $p ) use ( $field ) { return WPVFB_JS::get( $field, $p ); };

        $visibility_style = $this->content_visibility_style( $field );
        $custom_class = $this->content_custom_class( $field );
        $bg = $J::or_( $f( 'backgroundColor' ), '#EF4444' );
        $text_col = $J::or_( $f( 'textColor' ), '#FFFFFF' );
        $time = $J::or_( $f( 'countdownTime' ), 300 );
        // Only a number is ever passed to the countdown (data-wpvfb-countdown).
        $time_js = ( is_int( $time ) || is_float( $time ) || ( is_string( $time ) && is_numeric( trim( $time ) ) ) ) ? $J::str( $time ) : $J::num( $J::to_number( $time ) );
        $border_radius = $J::defined( $field, 'borderRadius' ) ? $f( 'borderRadius' ) : 8;

        $position_styles = $this->content_position_styles( $field, $border_radius );

        $fid_attr = $this->a( $f( 'id' ) );
        $timer_id = 'countdown-timer-' . $fid_attr;

        return '
    <div id="countdown-banner-' . $fid_attr . '" class="wpvfb-countdown-banner-wrapper' . $this->a( $custom_class ) . '" data-wpvfb-countdown="' . $this->a( wp_json_encode( array(
            'seconds'     => (float) $time_js,
            'expiryText'  => WPVFB_JS::str( $J::or_( $f( 'expiryText' ), 'This offer has expired!' ) ),
            'expiryAction' => WPVFB_JS::str( $J::or_( $f( 'expiryAction' ), 'text' ) ),
            'redirect'    => $this->content_url( $J::or_( $f( 'expiryRedirectUrl' ), '' ) ),
        ) ) ) . '" style="' . $this->a( $visibility_style . ' ' . $position_styles . ' background-color: ' . $J::str( $bg ) . '; color: ' . $J::str( $text_col ) . '; padding: 12px 16px; margin-top: 8px; margin-bottom: 12px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; transition: all 0.3s ease; box-sizing: border-box; font-family: inherit;' ) . '">
      <div style="font-size: 14px; font-weight: 600; display: flex; align-items: center;">
        <i class="fas fa-hourglass-half" style="margin-right: 8px;"></i>
        <span id="' . $timer_id . '-text">' . $this->t( $J::or_( $f( 'countdownText' ), 'Hurry, offer ends in:' ) ) . '</span>
      </div>
      <div id="' . $timer_id . '-digits" style="display: flex; align-items: center; gap: 6px;">
        <div id="' . $timer_id . '-hours-box" style="display: none; background-color: rgba(0,0,0,0.15); padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 700; min-width: 20px; text-align: center;">00</div>
        <span id="' . $timer_id . '-hours-colon" style="display: none; font-weight: 700;">:</span>
        <div id="' . $timer_id . '-mins" style="background-color: rgba(0,0,0,0.15); padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 700; min-width: 20px; text-align: center;">00</div>
        <span style="font-weight: 700;">:</span>
        <div id="' . $timer_id . '-secs" style="background-color: rgba(0,0,0,0.15); padding: 4px 8px; border-radius: 4px; font-size: 14px; font-weight: 700; min-width: 20px; text-align: center; color: #FBBF24;">00</div>
      </div>
    </div>
  ';
    }

    /** Social icon definitions from renderStaticContentField (id, svg path, originalColor). */
    protected function content_social_icons() {
        $instagram = 'M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z';
        $pinterest = 'M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.746-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24.009 12.017 24.009c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z';
        return array(
            'facebook'  => array( 'M22.675 0h-21.35c-.733 0-1.325.592-1.325 1.325v21.351c0 .732.592 1.324 1.325 1.324h11.495v-9.294h-3.124v-3.622h3.124v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.797.143v3.24l-1.918.001c-1.504 0-1.797.715-1.797 1.763v2.312h3.587l-.467 3.622h-3.12v9.293h6.116c.73 0 1.322-.592 1.322-1.324v-21.35c0-.733-.592-1.325-1.325-1.325z', '#1877F2' ),
            'twitter'   => array( 'M24 4.557a9.93 9.93 0 01-2.828.775 4.932 4.932 0 002.165-2.724c-.951.564-2.005.974-3.127 1.195a4.92 4.92 0 00-8.384 4.482c-4.086-.205-7.713-2.164-10.141-5.144a4.822 4.822 0 00-.666 2.475c0 1.708.87 3.216 2.188 4.099a4.904 4.904 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.936 4.936 0 01-2.224.084c.627 1.956 2.444 3.377 4.6 3.417a9.867 9.867 0 01-6.102 2.104c-.396 0-.787-.023-1.175-.069a13.945 13.945 0 007.548 2.212c9.057 0 14.009-7.513 14.009-14.009 0-.213-.005-.425-.014-.636a10.025 10.025 0 002.457-2.548z', '#1DA1F2' ),
            'linkedin'  => array( 'M19 0h-14c-2.76 0-5 2.24-5 5v14c0 2.76 2.24 5 5 5h14c2.76 0 5-2.24 5-5v-14c0-2.76-2.24-5-5-5zm-11 19h-3v-9h3v9zm-1.5-10.28c-.97 0-1.75-.79-1.75-1.75s.78-1.75 1.75-1.75 1.75.79 1.75 1.75-.78 1.75-1.75 1.75zm13.5 10.28h-3v-4.5c0-1.08-.02-2.47-1.5-2.47-1.5 0-1.73 1.17-1.73 2.39v4.58h-3v-9h2.89v1.23h.04c.4-.75 1.37-1.54 2.82-1.54 3.01 0 3.57 1.98 3.57 4.56v4.75z', '#0077B5' ),
            'instagram' => array( $instagram, '#E4405F' ),
            'youtube'   => array( 'M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z', '#FF0000' ),
            'tiktok'    => array( 'M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z', '#000000' ),
            'pinterest' => array( $pinterest, '#BD081C' ),
            'snapchat'  => array( $pinterest, '#FFFC00' ),
        );
    }

    /** renderStaticContentField — route.ts lines 2505-2794 */
    public function render_static_content_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 ); };

        $visibility_style = $this->content_visibility_style( $field );
        $custom_class = $this->content_custom_class( $field );
        $field_padding = $J::or_( $f( 'padding' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $field_margin = $J::or_( $f( 'margin' ), array( 'top' => 0, 'right' => 0, 'bottom' => 0, 'left' => 0 ) );
        $p = function ( $k ) use ( $field_padding ) { return WPVFB_JS::str( WPVFB_JS::get( $field_padding, $k ) ); };
        $m = function ( $k ) use ( $field_margin ) { return WPVFB_JS::str( WPVFB_JS::get( $field_margin, $k ) ); };

        $hex_to_rgba = function ( $hex, $opacity ) use ( $J ) {
            if ( ! $J::truthy( $hex ) || 'transparent' === $hex ) {
                return 'transparent';
            }
            $s = $J::str( $hex );
            $r = $this->content_parse_hex( substr( $s, 1, 2 ) );
            $gg = $this->content_parse_hex( substr( $s, 3, 2 ) );
            $b = $this->content_parse_hex( substr( $s, 5, 2 ) );
            return 'rgba(' . $J::num( $r ) . ', ' . $J::num( $gg ) . ', ' . $J::num( $b ) . ', ' . $J::num( $J::to_number( $opacity ) / 100 ) . ')';
        };

        $text_color = $J::or_( $f( 'staticTextColor' ), $f( 'textColor' ), $g( 'inputTextColor' ), $g( 'primaryTextColor' ), '#000000' );
        $background_color = $J::or_( $f( 'staticBackgroundColor' ), $f( 'backgroundColor' ), 'transparent' );
        $background_opacity = $J::defined( $field, 'backgroundOpacity' ) ? $f( 'backgroundOpacity' ) : 100;
        $final_background_color = 'transparent' === $background_color ? 'transparent' : $hex_to_rgba( $background_color, $background_opacity );
        $final_text_color = ( '#3B82F6' === $background_color && ! $J::truthy( $f( 'staticTextColor' ) ) && ! $J::truthy( $f( 'textColor' ) ) ) ? '#FFFFFF' : $text_color;
        $ct = $f( 'contentType' );
        $is_heading_tag = in_array( $ct, array( 'heading', 'heading1', 'heading2', 'heading3', 'heading4' ), true );
        $default_font_size = ( 'heading' === $ct || 'heading1' === $ct ) ? 28 : ( 'heading2' === $ct ? 24 : ( 'heading3' === $ct ? 20 : ( 'heading4' === $ct ? 18 : 14 ) ) );

        $font_size = $J::or_( $f( 'fontSize' ), $is_heading_tag ? $default_font_size : $J::or_( $g( 'fontSize' ), 14 ) );
        $line_height = $J::or_( $f( 'lineHeight' ), $g( 'lineHeight' ), 20 );
        $text_align = $J::or_( $f( 'textAlign' ), 'left' );

        $is_inherit_theme_style = true === $g( 'inheritThemeStyle' ) || true === $g( 'typography.inheritThemeStyle' );

        $text_style = $J::or_( $f( 'textStyle' ), array( 'bold' => false, 'italic' => false, 'underline' => false ) );
        $field_custom_font_weight = $f( 'fontWeight' );
        $content = $f( 'content' );
        $has_bold_in_html = is_string( $content ) && ( false !== strpos( $content, '<strong>' ) || false !== strpos( $content, '<b>' ) );
        if ( ! $J::is_nullish( $f( 'labelFontWeight' ) ) ) {
            $font_weight = $f( 'labelFontWeight' );
        } else {
            $font_weight = $J::or_( $field_custom_font_weight, $has_bold_in_html ? 'normal' : ( $J::truthy( $J::get( $text_style, 'bold' ) ) ? 'bold' : ( $is_inherit_theme_style ? ( $is_heading_tag ? 'var(--font-heading-weight, bold)' : 'inherit' ) : 'normal' ) ) );
        }
        $font_style = $J::truthy( $J::get( $text_style, 'italic' ) ) ? 'italic' : 'normal';
        $text_decoration = $J::truthy( $J::get( $text_style, 'underline' ) ) ? 'underline' : 'none';

        $tag = 'p';
        $c_type = preg_replace( '/[_-]/', '', strtolower( $J::str( $J::or_( $ct, '' ) ) ) );
        if ( 'heading' === $c_type || 'heading1' === $c_type || 'h1' === $c_type ) {
            $tag = 'h1';
        } elseif ( 'heading2' === $c_type || 'h2' === $c_type ) {
            $tag = 'h2';
        } elseif ( 'heading3' === $c_type || 'h3' === $c_type ) {
            $tag = 'h3';
        } elseif ( 'heading4' === $c_type || 'h4' === $c_type ) {
            $tag = 'h4';
        } elseif ( 'heading5' === $c_type || 'h5' === $c_type ) {
            $tag = 'h5';
        } elseif ( 'heading6' === $c_type || 'h6' === $c_type ) {
            $tag = 'h6';
        } elseif ( 'social-network-icons' === $ct ) {
            $tag = 'div';
        } elseif ( 'list-item' === $ct ) {
            $tag = 'li';
        }

        $margin_bottom = $J::defined( $field_margin, 'bottom' ) ? $m( 'bottom' ) : '15';
        $outer_margin = 'margin: ' . $m( 'top' ) . 'px ' . $m( 'right' ) . 'px ' . $margin_bottom . 'px ' . $m( 'left' ) . 'px; flex-shrink: 0;';
        $padding_decl = 'padding: ' . $p( 'top' ) . 'px ' . $p( 'right' ) . 'px ' . $p( 'bottom' ) . 'px ' . $p( 'left' ) . 'px;';

        if ( 'social-network-icons' === $ct ) {
            $icons_html = '';
            $all_icons = $this->content_social_icons();
            foreach ( $J::arr( $J::or_( $f( 'selectedSocialIcons' ), array() ) ) as $icon_id ) {
                if ( ! is_string( $icon_id ) || ! isset( $all_icons[ $icon_id ] ) ) {
                    continue;
                }
                list( $path, $original_color ) = $all_icons[ $icon_id ];
                $icon_url = $J::get( $f( 'socialIconsUrls' ), $icon_id );
                $icon_color = $J::truthy( $f( 'useOriginalColors' ) ) ? $original_color : $J::or_( $f( 'socialIconsColor' ), '#6B7280' );
                $icon_size = $this->a( $J::or_( $f( 'socialIconsSize' ), 24 ) );
                $svg = '<svg width="' . $icon_size . '" height="' . $icon_size . '" fill="currentColor" viewBox="0 0 24 24">
          <path d="' . $path . '"/>
        </svg>';
                if ( $J::truthy( $icon_url ) ) {
                    $icons_html .= '<a href="' . $this->a( $this->content_url( $icon_url ) ) . '" target="_blank" rel="noopener noreferrer" style="' . $this->a( '
          display: flex;
          align-items: center;
          padding: 0px;
          border-radius: 6px;
          transition: background-color 0.2s;
          color: ' . $J::str( $icon_color ) . ';
          text-decoration: none;
        ' ) . '" class="wpvfb-social-link">' . $svg . '</a>';
                } else {
                    $icons_html .= '<div style="' . $this->a( '
          display: flex;
          align-items: center;
          padding: 0px;
          color: ' . $J::str( $icon_color ) . ';
        ' ) . '">' . $svg . '</div>';
                }
            }

            return '
      <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' ' . $outer_margin ) . '">
        <div class="relative transition-all duration-200 group border-transparent" style="' . $this->a( '
          ' . $padding_decl . '
          background-color: ' . $J::str( $final_background_color ) . ';
        ' ) . '">
          <div class="w-full">
            <div class="relative cursor-default">
              <div style="' . $this->a( '
                display: grid;
                grid-template-columns: repeat(' . $J::str( $J::or_( $f( 'socialIconsGridColumns' ), 3 ) ) . ', 1fr);
                gap: ' . $J::str( $J::or_( $f( 'socialIconsGridGap' ), 12 ) ) . 'px;
                align-items: center;
                width: ' . $J::str( $J::or_( $f( 'socialIconsGridWidth' ), 100 ) ) . '%;
              ' ) . '">
                ' . $icons_html . '
              </div>
            </div>
          </div>
        </div>
      </div>
    ';
        }

        $ff = $f( 'fontFamily' );
        $ff_custom = $J::truthy( $ff ) && 'Arial' !== $ff && 'inherit' !== $ff;
        $is_custom_user_font = $ff_custom && ! $J::eq( $ff, $g( 'fontFamily' ) );
        $effective_font = $ff_custom ? $ff : $J::or_( $g( 'fontFamily' ), 'Arial' );
        $clean_effective_font = preg_replace( '/^[\'"]|[\'"]$/', '', $J::str( $effective_font ) );
        $font_style_inline = ( $is_inherit_theme_style && ! $is_custom_user_font )
            ? ( $is_heading_tag ? 'var(--font-heading-family, var(--font-heading--family, inherit)) !important' : 'var(--font-body-family, var(--font-body--family, inherit)) !important' )
            : ( false === strpos( $clean_effective_font, ',' ) ? $clean_effective_font . ', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Helvetica, Arial, sans-serif' : $clean_effective_font ) . ' !important';

        $border_radius_decl = $J::truthy( $f( 'borderRadius' ) ) ? 'border-radius: ' . $J::str( $f( 'borderRadius' ) ) . 'px;' : '';
        $content_html = $this->h( $J::or_( $content, 'Enter your content here' ) );

        if ( 'list-item' === $ct ) {
            $list_icon = $J::or_( $f( 'listIcon' ), 'fas fa-circle' );
            $list_icon_color = $J::or_( $f( 'listIconColor' ), $f( 'textColor' ), $final_text_color, '#6B7280' );
            $list_icon_position = $J::or_( $f( 'listIconPosition' ), 'left' );

            $is_num = is_int( $line_height ) || is_float( $line_height );
            $calculated_line_height = ( $is_num && $line_height <= 2 ) ? $line_height : ( $is_num ? $J::str( $line_height ) . 'px' : $line_height );

            $icon_size = ! $J::is_nullish( $f( 'listIconSize' ) ) ? $J::str( $f( 'listIconSize' ) ) . 'px' : $J::num( $this->content_round( $J::to_number( $font_size ) * 0.8 ) ) . 'px';
            $icon = '<i class="' . $this->a( $list_icon ) . '" style="' . $this->a( 'color: ' . $J::str( $list_icon_color ) . '; font-size: ' . $icon_size . '; flex-shrink: 0; display: flex; align-items: center; justify-content: center;' ) . '"></i>';
            $letter_spacing = ! $J::is_nullish( $f( 'letterSpacing' ) ) ? 'letter-spacing: ' . $J::str( $f( 'letterSpacing' ) ) . 'px;' : '';
            $span_font = ( $is_inherit_theme_style && ! $is_custom_user_font ) ? 'var(--font-body-family, var(--font-body--family, inherit)) !important' : "'" . $J::str( $J::or_( $ff, $g( 'fontFamily' ) ) ) . "', sans-serif !important";

            return '
      <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' ' . $outer_margin ) . '">
        <div class="relative transition-all duration-200 group border-transparent" style="' . $this->a( '
          ' . $padding_decl . '
          background-color: ' . $J::str( $final_background_color ) . ';
          ' . $border_radius_decl . '
        ' ) . '">
          <div class="w-full">
            <div class="relative cursor-default">
              <div class="flex items-center" style="gap: 8px;">
                ' . ( 'left' === $list_icon_position ? $icon : '' ) . '
                <span style="' . $this->a( '
                  color: ' . $J::str( $final_text_color ) . ';
                  font-size: ' . $J::str( $font_size ) . 'px;
                  line-height: ' . $J::str( $calculated_line_height ) . ';
                  font-weight: ' . $J::str( $font_weight ) . ';
                  font-style: ' . $font_style . ';
                  text-decoration: ' . $text_decoration . ';
                  text-align: ' . $J::str( $text_align ) . ';
                  ' . $letter_spacing . '
                  margin: 0;
                  padding: 0;
                  font-family: ' . $span_font . ';
                ' ) . '">
                  ' . $content_html . '
                </span>
                ' . ( 'right' === $list_icon_position ? $icon : '' ) . '
              </div>
            </div>
          </div>
        </div>
      </div>
    ';
        }

        $br = $f( 'borderRadius' );
        $bgc = $f( 'backgroundColor' );
        $is_pill_badge = 'badge' === $ct || ( $J::defined( $field, 'borderRadius' ) && ( is_array( $br ) ? false : $J::to_number( $br ) >= 20 ) && $J::truthy( $bgc ) && 'transparent' !== $bgc );
        $outer_align_style = $is_pill_badge
            ? 'display: flex; justify-content: ' . ( 'center' === $text_align ? 'center' : ( 'right' === $text_align ? 'flex-end' : 'flex-start' ) ) . '; width: 100%;'
            : '';
        $inner_badge_style = $is_pill_badge ? 'display: inline-flex; align-items: center; justify-content: center; width: max-content;' : '';
        $border_style = $J::truthy( $f( 'borderWidth' ) )
            ? 'border: ' . $J::str( $f( 'borderWidth' ) ) . 'px solid ' . $J::str( $J::or_( $f( 'borderColor' ), 'transparent' ) ) . ';'
            : '';
        $letter_spacing = ! $J::is_nullish( $f( 'letterSpacing' ) ) ? $J::str( $f( 'letterSpacing' ) ) . 'px' : 'normal';

        return '
    <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' ' . $outer_align_style . ' ' . $outer_margin ) . '">
      <div class="relative transition-all duration-200 group border-transparent" style="' . $this->a( '
        ' . $padding_decl . '
        background-color: ' . $J::str( $final_background_color ) . ';
        ' . $border_radius_decl . '
        ' . $border_style . '
        ' . $inner_badge_style . '
      ' ) . '">
        <div class="' . ( $is_pill_badge ? 'w-auto' : 'w-full' ) . '">
          <div class="relative cursor-default">
            <div class="flex flex-col">
              <' . $tag . ' id="wpvfb-static-' . $this->a( $f( 'id' ) ) . '" style="' . $this->a( '
                color: ' . $J::str( $final_text_color ) . ';
                font-size: ' . $J::str( $font_size ) . 'px;
                line-height: ' . $J::str( $line_height ) . ';
                font-weight: ' . $J::str( $font_weight ) . ';
                font-style: ' . $font_style . ';
                text-decoration: ' . $text_decoration . ';
                text-align: ' . $J::str( $text_align ) . ';
                letter-spacing: ' . $letter_spacing . ' !important;
                margin: 0;
                padding: 0;
                font-family: ' . $font_style_inline . ';
              ' ) . '">
                ' . $content_html . '
              </' . $tag . '>
            </div>
          </div>
        </div>
      </div>
    </div>
  ';
    }

    /** renderSubmitButton — route.ts lines 2795-2946 */
    public function render_submit_button( $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 ); };
        $lower = function ( $v ) { return is_string( $v ) ? strtolower( $v ) : $v; };

        $visibility_style = $this->content_visibility_style( $field );
        $custom_class = $this->content_custom_class( $field );

        $is_default_blue_bg = '#007bff' === $f( 'backgroundColor' ) || '#007bff' === $f( 'submitBackgroundColor' );
        $is_default_white_text = '#ffffff' === $lower( $f( 'textColor' ) ) || '#ffffff' === $lower( $f( 'submitTextColor' ) );

        $global_submit_bg = $J::or_( $g( 'submitBackgroundColor' ), $g( 'globalColorScheme.submitBackgroundColor' ) );
        $global_submit_text = $J::or_( $g( 'submitTextColor' ), $g( 'globalColorScheme.submitTextColor' ) );

        $submit_background_color = ( $is_default_blue_bg && $J::truthy( $global_submit_bg ) )
            ? $global_submit_bg
            : $J::or_( $f( 'backgroundColor' ), $f( 'submitBackgroundColor' ), $global_submit_bg, '#007bff' );
        $submit_text_color = ( $is_default_white_text && $is_default_blue_bg && $J::truthy( $global_submit_text ) )
            ? $global_submit_text
            : $J::or_( $f( 'textColor' ), $f( 'submitTextColor' ), $global_submit_text, '#FFFFFF' );

        $submit_font_size = $J::or_( $f( 'fontSize' ), $g( 'fontSize' ), 14 );
        $font_weight = $J::defined( $field, 'labelFontWeight' ) ? $f( 'labelFontWeight' ) : 'normal';
        $font_style = $J::or_( $f( 'labelFontStyle' ), 'normal' );
        $field_border_radius = $J::defined( $field, 'fieldBorderRadius' ) ? $f( 'fieldBorderRadius' ) : $J::or_( $g( 'inputSettings.borderRadius' ), 4 );

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

        $is_inherit_theme_style = true === $g( 'inheritThemeStyle' ) || true === $g( 'typography.inheritThemeStyle' );

        $alignment = $J::or_( $f( 'submitButtonAlignment' ), 'full' );
        $is_explicit_full_width = 'full' === $alignment;
        $flex_center = 'display: inline-flex !important; align-items: center !important; justify-content: center !important;';
        $sbw = $f( 'submitButtonWidth' );
        $width_style = ( ! $J::is_undef( $sbw ) && ! $J::eq( $sbw, 0 ) )
            ? 'width: ' . $J::str( $sbw ) . 'px; ' . $flex_center
            : $flex_center;
        if ( 'left' === $alignment ) {
            $alignment_style = 'display: flex; justify-content: flex-start;';
            $button_width_class = '';
            $button_width_style = $width_style;
        } elseif ( 'center' === $alignment ) {
            $alignment_style = 'display: flex; justify-content: center;';
            $button_width_class = '';
            $button_width_style = $width_style;
        } elseif ( 'right' === $alignment ) {
            $alignment_style = 'display: flex; justify-content: flex-end;';
            $button_width_class = '';
            $button_width_style = $width_style;
        } else {
            $alignment_style = '';
            $button_width_class = 'w-full';
            $button_width_style = 'width: 100% !important; ' . $flex_center;
        }

        $pad = function ( $side, $def ) use ( $f ) {
            $v = $f( 'padding.' . $side );
            return ( WPVFB_JS::truthy( $f( 'padding' ) ) && ! WPVFB_JS::is_undef( $v ) && WPVFB_JS::to_number( $v ) > 0 ) ? $v : $def;
        };
        $dynamic_btn_padding = 'padding: ' . $J::str( $pad( 'top', 10 ) ) . 'px ' . $J::str( $pad( 'right', 20 ) ) . 'px ' . $J::str( $pad( 'bottom', 10 ) ) . 'px ' . $J::str( $pad( 'left', 20 ) ) . 'px !important;';

        $no_margin = $J::truthy( $f( 'noMarginForOuterDiv' ) );
        $side_positive = function ( $k ) use ( $fm ) {
            $v = $fm( $k );
            return ! WPVFB_JS::is_undef( $v ) && WPVFB_JS::to_number( $v ) > 0;
        };
        $has_custom_side_margin = ! $no_margin && ( $side_positive( 'left' ) || $side_positive( 'right' ) );

        $zero_sides = ( $is_explicit_full_width && ! $has_custom_side_margin ) || $no_margin;
        $submit_margin_left = $zero_sides ? 0 : $J::or_( $fm( 'left' ), 0 );
        $submit_margin_right = $zero_sides ? 0 : $J::or_( $fm( 'right' ), 0 );
        $mb = $fm( 'bottom' );
        if ( $has_custom_side_margin ) {
            $submit_margin_bottom = ! $J::is_undef( $mb ) ? $mb : 0;
        } else {
            $submit_margin_bottom = $is_explicit_full_width ? 0 : ( ( ! $J::is_undef( $mb ) && ! $J::eq( $mb, 15 ) ) ? $mb : 0 );
        }

        $button_text = $J::or_( $f( 'buttonText' ), $f( 'label' ), $f( 'name' ), 'Submit' );
        $field_icon = $f( 'fieldIcon' );
        $has_icon = $J::truthy( $field_icon ) && 'none' !== $field_icon;
        $icon_position = $J::or_( $f( 'iconPosition' ), 'right' );
        $icon_html = $has_icon ? '<i class="' . $this->a( $field_icon ) . '" style="' . ( 'left' === $icon_position ? 'margin-right: 8px;' : 'margin-left: 8px;' ) . '"></i>' : '';
        $should_force_zero_side_margin = $no_margin || ( $is_explicit_full_width && ! $has_custom_side_margin );

        $bg_raw = $f( 'backgroundColor' );
        $has_gradient = $J::truthy( $f( 'buttonGradient' ) ) || ( $J::truthy( $bg_raw ) && is_string( $bg_raw ) && false !== strpos( $bg_raw, 'gradient' ) );
        $gradient = $J::str( $J::or_( $f( 'buttonGradient' ), $bg_raw ) );
        $box_shadow = $f( 'boxShadow' );

        if ( $is_inherit_theme_style ) {
            $button_style = '
              font-family: inherit !important;
              font-size: ' . $J::str( $submit_font_size ) . 'px !important;
              font-weight: ' . $J::str( $font_weight ) . ';
              letter-spacing: inherit;
              text-transform: ' . $J::str( $J::or_( $f( 'textTransform' ), $f( 'buttonTextTransform' ), 'none' ) ) . ' !important;
              ' . $dynamic_btn_padding . '
              line-height: 1.5 !important;
              white-space: nowrap !important;
              color: ' . $J::str( $submit_text_color ) . ';
              ' . ( $has_gradient ? 'background: ' . $gradient . ' !important;' : 'background-color: ' . $J::str( $submit_background_color ) . ';' ) . '
              ' . ( $J::truthy( $box_shadow ) ? 'box-shadow: ' . $J::str( $box_shadow ) . ' !important;' : '' ) . '
              border-radius: ' . $J::str( $field_border_radius ) . 'px;
              display: inline-flex !important;
              align-items: center !important;
              justify-content: center !important;
              text-align: center !important;
              box-sizing: border-box !important;
            ';
        } else {
            $button_style = '
              color: ' . $J::str( $submit_text_color ) . ';
              ' . ( $has_gradient ? 'background: ' . $gradient . ';' : 'background-color: ' . $J::str( $submit_background_color ) . ';' ) . '
              ' . ( $J::truthy( $box_shadow ) ? 'box-shadow: ' . $J::str( $box_shadow ) . ';' : '' ) . '
              border: none;
              font-size: ' . $J::str( $submit_font_size ) . 'px;
              font-weight: ' . $J::str( $font_weight ) . ';
              font-style: ' . $J::str( $font_style ) . ';
              border-radius: ' . $J::str( $field_border_radius ) . 'px;
              ' . $dynamic_btn_padding . '
              line-height: 1.5;
              white-space: nowrap !important;
              display: inline-flex !important;
              align-items: center !important;
              justify-content: center !important;
              text-align: center !important;
              box-sizing: border-box !important;
            ';
        }

        return '
    <div class="relative' . $this->a( $custom_class ) . '" style="' . $this->a( $visibility_style . ' ' . ( $should_force_zero_side_margin ? 'margin-left: 0px !important; margin-right: 0px !important;' : '' ) . ' margin: ' . $J::str( $fm( 'top' ) ) . 'px ' . $J::str( $submit_margin_right ) . 'px ' . $J::str( $submit_margin_bottom ) . 'px ' . $J::str( $submit_margin_left ) . 'px;' ) . '">
      <div class="flex items-center relative transition-all duration-200 group border-transparent" style="' . $this->a( '
        padding: 0px;
        ' . $alignment_style . '
      ' ) . '">
        <button type="submit" class="wpvfb-submit-btn ' . ( $is_inherit_theme_style ? 'button button--primary btn btn-primary ' : '' ) . $button_width_class . ' rounded-md hover:opacity-90 transition focus:outline-none"
          style="' . $this->a( '
            ' . $button_style . '
            ' . $button_width_style . '
          ' ) . '">
          ' . ( 'left' === $icon_position ? $icon_html : '' ) . $this->t( $button_text ) . ( 'right' === $icon_position ? $icon_html : '' ) . '
        </button>
      </div>
    </div>
  ';
    }

}