<?php
/**
 * Widget Settings admin view
 *
 * Shortcode-only widget placement. Per-section AJAX save (no page reload).
 *
 * @link       https://github.com/sitestaffr/sitestaffr-plugin
 * @since      0.11.96
 *
 * @package    SiteStaffr
 * @subpackage SiteStaffr/admin/views
 */

// If this file is called directly, abort.
if ( ! defined( 'WPINC' ) ) {
	die;
}

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound

// Get current settings
$settings = get_option( 'sitestaffr_widget_settings', array() );

$legacy_fixed_radius  = isset( $settings['fixed_border_radius'] ) ? intval( $settings['fixed_border_radius'] ) : null;
$legacy_button_radius = isset( $settings['button_border_radius'] ) ? intval( $settings['button_border_radius'] ) : null;

$fixed_radius_top = isset( $settings['fixed_border_radius_top'] )
	? intval( $settings['fixed_border_radius_top'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 20 );
$fixed_radius_right = isset( $settings['fixed_border_radius_right'] )
	? intval( $settings['fixed_border_radius_right'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 20 );
$fixed_radius_bottom = isset( $settings['fixed_border_radius_bottom'] )
	? intval( $settings['fixed_border_radius_bottom'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 20 );
$fixed_radius_left = isset( $settings['fixed_border_radius_left'] )
	? intval( $settings['fixed_border_radius_left'] )
	: ( null !== $legacy_fixed_radius ? $legacy_fixed_radius : 0 );
$fixed_radius_locked = isset( $settings['fixed_border_radius_locked'] ) ? (bool) $settings['fixed_border_radius_locked'] : false;

$button_radius_top = isset( $settings['button_border_radius_top'] )
	? intval( $settings['button_border_radius_top'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_right = isset( $settings['button_border_radius_right'] )
	? intval( $settings['button_border_radius_right'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_bottom = isset( $settings['button_border_radius_bottom'] )
	? intval( $settings['button_border_radius_bottom'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_left = isset( $settings['button_border_radius_left'] )
	? intval( $settings['button_border_radius_left'] )
	: ( null !== $legacy_button_radius ? $legacy_button_radius : 80 );
$button_radius_locked = isset( $settings['button_border_radius_locked'] ) ? (bool) $settings['button_border_radius_locked'] : false;
?>

<div class="wrap sitestaffr-wrap sitestaffr-widget-settings-wrap">
	<?php
	$sitestaffr_page_title = __( 'Widget & Button', 'sitestaffr' );
	include SITESTAFFR_PLUGIN_DIR . 'admin/partials/sitestaffr-header.php';
	?>

	<?php wp_nonce_field( 'sitestaffr_save_widget_settings', 'sitestaffr_widget_nonce' ); ?>

	<!-- Top-level page tabs: one surface per concern -->
	<div class="sitestaffr-agent-tabs" role="tablist" data-tab-storage="sitestaffr_ws_page_tab" aria-label="<?php esc_attr_e( 'Widget settings sections', 'sitestaffr' ); ?>">
		<button type="button" role="tab" class="sitestaffr-agent-tab is-active" aria-selected="true" aria-controls="ws-tab-fixed" id="ws-tab-btn-fixed"><?php esc_html_e( 'Fixed Widget', 'sitestaffr' ); ?></button>
		<button type="button" role="tab" class="sitestaffr-agent-tab" aria-selected="false" aria-controls="ws-tab-button" id="ws-tab-btn-button" tabindex="-1"><?php esc_html_e( 'Button', 'sitestaffr' ); ?></button>
		<button type="button" role="tab" class="sitestaffr-agent-tab" aria-selected="false" aria-controls="ws-tab-analytics" id="ws-tab-btn-analytics" tabindex="-1"><?php esc_html_e( 'Analytics', 'sitestaffr' ); ?></button>
	</div>

	<div id="ws-tab-fixed" role="tabpanel" class="sitestaffr-agent-tabpanel" aria-labelledby="ws-tab-btn-fixed">

	<!-- ================================================================
	     Fixed Widget
	     ================================================================ -->
	<div class="sitestaffr-ws-section" data-section="fixed">
		<div class="sitestaffr-ws-section-header">
			<div class="sitestaffr-ws-section-title">
				<h3><?php esc_html_e( 'Fixed Widget', 'sitestaffr' ); ?></h3>
				<span class="sitestaffr-tooltip-trigger" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Help', 'sitestaffr' ); ?>" data-tooltip="<?php esc_attr_e( 'A floating button fixed to the bottom-right corner of every page. Visitors click it to start a voice conversation. Use the shortcode for manual placement on specific pages.', 'sitestaffr' ); ?>"><span class="dashicons dashicons-info" aria-hidden="true"></span></span>
			</div>
			<span class="sitestaffr-ws-shortcode-label"><?php esc_html_e( 'Shortcode:', 'sitestaffr' ); ?></span>
			<code class="sitestaffr-ws-shortcode-click" data-shortcode="[sitestaffr_widget]" title="<?php esc_attr_e( 'Click to copy shortcode', 'sitestaffr' ); ?>">[sitestaffr_widget]</code>
		</div>
		<?php
		$auto_display = ! isset( $settings['fixed_auto_display'] ) || $settings['fixed_auto_display'];
		?>
		<div class="sitestaffr-ws-auto-display-row">
			<label class="sitestaffr-ws-toggle-label">
				<input type="checkbox"
					id="fixed_auto_display"
					name="sitestaffr_widget_settings[fixed_auto_display]"
					value="1"
					<?php checked( $auto_display ); ?> />
				<span class="sitestaffr-ws-toggle-switch"></span>
				<span class="sitestaffr-ws-toggle-text"><?php esc_html_e( 'Show on all pages', 'sitestaffr' ); ?></span>
			</label>
			<span class="sitestaffr-ws-toggle-description"><?php esc_html_e( 'Automatically display the floating widget on every page of your site. Turn off to use shortcode placement only.', 'sitestaffr' ); ?></span>
		</div>

		<?php $fixed_mode = isset( $settings['mode'] ) ? sanitize_key( $settings['mode'] ) : 'both'; ?>
		<?php
		$fixed_border_style = isset( $settings['fixed_border_style'] ) ? sanitize_key( $settings['fixed_border_style'] ) : 'none';
		$fixed_preset       = isset( $settings['fixed_preset'] ) ? sanitize_key( $settings['fixed_preset'] ) : '';
		?>
		<div class="sitestaffr-ws-section-body sitestaffr-ws-two-col">
			<div class="sitestaffr-ws-preview-col sitestaffr-ws-preview-col--sticky">
				<div class="sitestaffr-ws-preview-toolbar" role="group" aria-label="<?php esc_attr_e( 'Preview background', 'sitestaffr' ); ?>">
					<button type="button" class="sitestaffr-ws-backdrop-btn is-active" data-backdrop="light"><?php esc_html_e( 'Light', 'sitestaffr' ); ?></button>
					<button type="button" class="sitestaffr-ws-backdrop-btn" data-backdrop="dark"><?php esc_html_e( 'Dark', 'sitestaffr' ); ?></button>
					<label class="sitestaffr-ws-backdrop-custom" title="<?php esc_attr_e( 'Custom background — preview the widget on your site\'s color', 'sitestaffr' ); ?>">
						<input type="color" class="sitestaffr-ws-backdrop-color" value="#f5f2ec" />
						<span class="screen-reader-text"><?php esc_html_e( 'Custom preview background color', 'sitestaffr' ); ?></span>
					</label>
				</div>
				<div id="sitestaffr-fixed-widget-preview"></div>
			</div>
			<div class="sitestaffr-ws-fields-col">

				<!-- Presets: the default experience — one click + brand color -->
				<div class="sitestaffr-ws-presets" data-preset-section="fixed">
					<h4 class="sitestaffr-ws-presets-title"><?php esc_html_e( 'Style presets', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-presets-cards" role="group" aria-label="<?php esc_attr_e( 'Visual presets', 'sitestaffr' ); ?>">
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'round' === $fixed_preset ? ' is-active' : ''; ?>" data-preset="round"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--round" aria-hidden="true"></span><?php esc_html_e( 'Round', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'soft' === $fixed_preset ? ' is-active' : ''; ?>" data-preset="soft"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--soft" aria-hidden="true"></span><?php esc_html_e( 'Soft', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'rounded' === $fixed_preset ? ' is-active' : ''; ?>" data-preset="rounded"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--rounded" aria-hidden="true"></span><?php esc_html_e( 'Rounded', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'square' === $fixed_preset ? ' is-active' : ''; ?>" data-preset="square"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--square" aria-hidden="true"></span><?php esc_html_e( 'Square', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'outline' === $fixed_preset ? ' is-active' : ''; ?>" data-preset="outline"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--outline" aria-hidden="true"></span><?php esc_html_e( 'Outline', 'sitestaffr' ); ?></button>
					</div>
					<div class="sitestaffr-ws-presets-side">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_brand_color"><?php esc_html_e( 'Brand color', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_brand_color" class="sitestaffr-color-field sitestaffr-ws-brand-color" data-brand-section="fixed" data-default-color="#1FB6CC" value="<?php echo esc_attr( isset( $settings['fixed_background_color'] ) ? $settings['fixed_background_color'] : '#1FB6CC' ); ?>" />
						</div>
						<button type="button" class="button sitestaffr-ws-reset-preset" data-preset-section="fixed" title="<?php esc_attr_e( 'Restore this preset\'s stock look — shape, style and the default brand color', 'sitestaffr' ); ?>" <?php disabled( '' === $fixed_preset ); ?>><?php esc_html_e( 'Reset to preset', 'sitestaffr' ); ?></button>
					</div>

					<!-- Essentials: the controls owners actually change, always visible -->
					<div class="sitestaffr-ws-essentials">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_size"><?php esc_html_e( 'Size', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="fixed_size" name="sitestaffr_widget_settings[fixed_size]" value="<?php echo esc_attr( isset( $settings['fixed_size'] ) ? intval( $settings['fixed_size'] ) : '60' ); ?>" min="1" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
					<input type="hidden" id="fixed_preset" name="sitestaffr_widget_settings[fixed_preset]" value="<?php echo esc_attr( $fixed_preset ); ?>" />
				</div>

				<details class="sitestaffr-ws-advanced">
					<summary>
						<span class="dashicons dashicons-admin-generic" aria-hidden="true"></span>
						<?php esc_html_e( 'Advanced customization', 'sitestaffr' ); ?>
						<span class="sitestaffr-ws-advanced-hint"><?php esc_html_e( 'Every control — presets pre-fill these values', 'sitestaffr' ); ?></span>
					</summary>
					<div class="sitestaffr-ws-advanced-body">

				<h4 class="sitestaffr-ws-intent-title"><?php esc_html_e( 'Style', 'sitestaffr' ); ?></h4>

				<!-- Icon -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Icon', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_icon"><?php esc_html_e( 'Type', 'sitestaffr' ); ?></label>
							<select id="fixed_icon" name="sitestaffr_widget_settings[fixed_icon]">
								<option value="sitestaffr" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'sitestaffr' ); ?>><?php esc_html_e( 'SiteStaffr', 'sitestaffr' ); ?></option>
								<option value="phone" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'phone' ); ?>><?php esc_html_e( 'Phone', 'sitestaffr' ); ?></option>
								<option value="microphone" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'microphone' ); ?>><?php esc_html_e( 'Microphone', 'sitestaffr' ); ?></option>
								<option value="chat" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'chat' ); ?>><?php esc_html_e( 'Chat', 'sitestaffr' ); ?></option>
								<option value="headset" <?php selected( isset( $settings['fixed_icon'] ) ? $settings['fixed_icon'] : 'sitestaffr', 'headset' ); ?>><?php esc_html_e( 'Headset', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_icon_size"><?php esc_html_e( 'Size', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="fixed_icon_size" name="sitestaffr_widget_settings[fixed_icon_size]" value="<?php echo esc_attr( isset( $settings['fixed_icon_size'] ) ? intval( $settings['fixed_icon_size'] ) : '24' ); ?>" min="12" max="80" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_icon_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_icon_color" name="sitestaffr_widget_settings[fixed_icon_color]" value="<?php echo esc_attr( isset( $settings['fixed_icon_color'] ) ? $settings['fixed_icon_color'] : '#ffffff' ); ?>" class="sitestaffr-color-field" data-default-color="#ffffff" />
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_hover_icon_color"><?php esc_html_e( 'Hover Color', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_hover_icon_color" name="sitestaffr_widget_settings[fixed_hover_icon_color]" value="<?php echo esc_attr( isset( $settings['fixed_hover_icon_color'] ) ? $settings['fixed_hover_icon_color'] : '' ); ?>" class="sitestaffr-color-field" data-default-color="" />
						</div>
					</div>
				</div>

				<!-- Colors -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Colors', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_background_color"><?php esc_html_e( 'Background', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_background_color" name="sitestaffr_widget_settings[fixed_background_color]" value="<?php echo esc_attr( isset( $settings['fixed_background_color'] ) ? $settings['fixed_background_color'] : '#1FB6CC' ); ?>" class="sitestaffr-color-field" data-default-color="#1FB6CC" />
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_hover_background_color"><?php esc_html_e( 'Hover', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_hover_background_color" name="sitestaffr_widget_settings[fixed_hover_background_color]" value="<?php echo esc_attr( isset( $settings['fixed_hover_background_color'] ) ? $settings['fixed_hover_background_color'] : '#1AA5BA' ); ?>" class="sitestaffr-color-field" data-default-color="#1AA5BA" />
						</div>
					</div>
				</div>

				<!-- Border -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Border', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_border_style"><?php esc_html_e( 'Style', 'sitestaffr' ); ?></label>
							<select id="fixed_border_style" name="sitestaffr_widget_settings[fixed_border_style]">
								<option value="none" <?php selected( $fixed_border_style, 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
								<option value="solid" <?php selected( $fixed_border_style, 'solid' ); ?>><?php esc_html_e( 'Solid', 'sitestaffr' ); ?></option>
								<option value="dashed" <?php selected( $fixed_border_style, 'dashed' ); ?>><?php esc_html_e( 'Dashed', 'sitestaffr' ); ?></option>
								<option value="dotted" <?php selected( $fixed_border_style, 'dotted' ); ?>><?php esc_html_e( 'Dotted', 'sitestaffr' ); ?></option>
								<option value="double" <?php selected( $fixed_border_style, 'double' ); ?>><?php esc_html_e( 'Double', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact sitestaffr-ws-border-dependent" data-border-section="fixed">
							<label for="fixed_border_width"><?php esc_html_e( 'Width', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="fixed_border_width" name="sitestaffr_widget_settings[fixed_border_width]" value="<?php echo esc_attr( isset( $settings['fixed_border_width'] ) ? intval( $settings['fixed_border_width'] ) : '0' ); ?>" min="0" max="10" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact sitestaffr-ws-border-dependent" data-border-section="fixed">
							<label for="fixed_border_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_border_color" name="sitestaffr_widget_settings[fixed_border_color]" value="<?php echo esc_attr( isset( $settings['fixed_border_color'] ) ? $settings['fixed_border_color'] : '#cccccc' ); ?>" class="sitestaffr-color-field" data-default-color="#cccccc" />
						</div>
					</div>
				</div>

				<h4 class="sitestaffr-ws-intent-title"><?php esc_html_e( 'Shape', 'sitestaffr' ); ?></h4>

				<!-- Border Radius -->
				<div class="sitestaffr-ws-group">
					<div class="sitestaffr-ws-radius-heading">
						<span class="sitestaffr-ws-radius-heading-label"><?php esc_html_e( 'Border Radius', 'sitestaffr' ); ?></span>
						<label class="sitestaffr-ws-radius-lock-toggle<?php echo $fixed_radius_locked ? ' is-locked' : ''; ?>" data-radius-lock-toggle="fixed" title="<?php esc_attr_e( 'Toggle corner lock', 'sitestaffr' ); ?>">
							<input type="checkbox" id="fixed_border_radius_locked" name="sitestaffr_widget_settings[fixed_border_radius_locked]" value="1" <?php checked( $fixed_radius_locked ); ?> />
							<span class="dashicons <?php echo esc_attr( $fixed_radius_locked ? 'dashicons-lock' : 'dashicons-unlock' ); ?>" data-radius-lock-icon="fixed" aria-hidden="true"></span>
							<span class="screen-reader-text"><?php esc_html_e( 'Lock all border radius corners', 'sitestaffr' ); ?></span>
						</label>
					</div>
					<div class="sitestaffr-ws-field-row sitestaffr-ws-radius-group" data-radius-group="fixed">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_border_radius_top"><?php esc_html_e( 'Top', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="fixed_border_radius_top" class="sitestaffr-ws-radius-input" data-radius-role="primary" name="sitestaffr_widget_settings[fixed_border_radius_top]" value="<?php echo esc_attr( $fixed_radius_top ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_border_radius_right"><?php esc_html_e( 'Right', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="fixed_border_radius_right" class="sitestaffr-ws-radius-input" data-radius-role="linked" name="sitestaffr_widget_settings[fixed_border_radius_right]" value="<?php echo esc_attr( $fixed_radius_right ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_border_radius_bottom"><?php esc_html_e( 'Bottom', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="fixed_border_radius_bottom" class="sitestaffr-ws-radius-input" data-radius-role="linked" name="sitestaffr_widget_settings[fixed_border_radius_bottom]" value="<?php echo esc_attr( $fixed_radius_bottom ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="fixed_border_radius_left"><?php esc_html_e( 'Left', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="fixed_border_radius_left" class="sitestaffr-ws-radius-input" data-radius-role="linked" name="sitestaffr_widget_settings[fixed_border_radius_left]" value="<?php echo esc_attr( $fixed_radius_left ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<h4 class="sitestaffr-ws-intent-title"><?php esc_html_e( 'Placement & Behavior', 'sitestaffr' ); ?></h4>

				<!-- Mode -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Mode', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field">
						<label for="fixed_mode"><?php esc_html_e( 'Widget Mode', 'sitestaffr' ); ?></label>
						<select id="fixed_mode" name="sitestaffr_widget_settings[mode]">
							<option value="both" <?php selected( $fixed_mode, 'both' ); ?>><?php esc_html_e( 'Voice & Text (visitor chooses)', 'sitestaffr' ); ?></option>
							<option value="voice" <?php selected( $fixed_mode, 'voice' ); ?>><?php esc_html_e( 'Voice Only', 'sitestaffr' ); ?></option>
							<option value="text" <?php selected( $fixed_mode, 'text' ); ?>><?php esc_html_e( 'Text Chat Only', 'sitestaffr' ); ?></option>
						</select>
						<p class="description"><?php esc_html_e( 'Choose which conversation modes visitors can use. Override per page with the shortcode mode attribute.', 'sitestaffr' ); ?></p>
					</div>
				</div>

				<!-- Tooltip -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Tooltip', 'sitestaffr' ); ?></h4>
					<?php
					$tooltip_behavior = isset( $settings['fixed_tooltip_behavior'] ) ? sanitize_key( $settings['fixed_tooltip_behavior'] ) : '';
					if ( '' === $tooltip_behavior ) {
						$tooltip_behavior = ! empty( $settings['fixed_tooltip_always_show'] ) ? 'always' : 'auto';
					}
					?>
					<div class="sitestaffr-ws-field">
						<label for="fixed_tooltip_behavior"><?php esc_html_e( 'Tooltip Behavior', 'sitestaffr' ); ?></label>
						<select id="fixed_tooltip_behavior" name="sitestaffr_widget_settings[fixed_tooltip_behavior]">
							<option value="off" <?php selected( $tooltip_behavior, 'off' ); ?>><?php esc_html_e( 'Off', 'sitestaffr' ); ?></option>
							<option value="auto" <?php selected( $tooltip_behavior, 'auto' ); ?>><?php esc_html_e( 'Auto-dismiss', 'sitestaffr' ); ?></option>
							<option value="hover" <?php selected( $tooltip_behavior, 'hover' ); ?>><?php esc_html_e( 'Show on hover only', 'sitestaffr' ); ?></option>
							<option value="always" <?php selected( $tooltip_behavior, 'always' ); ?>><?php esc_html_e( 'Always visible', 'sitestaffr' ); ?></option>
						</select>
					</div>
					<div id="sitestaffr-ws-tooltip-fields" <?php echo 'off' === $tooltip_behavior ? 'style="display:none;"' : ''; ?>>
						<div class="sitestaffr-ws-field" style="margin-top: 8px;">
							<label for="fixed_tooltip_text"><?php esc_html_e( 'Tooltip Text', 'sitestaffr' ); ?></label>
							<input type="text" id="fixed_tooltip_text" name="sitestaffr_widget_settings[fixed_tooltip_text]" value="<?php echo esc_attr( isset( $settings['fixed_tooltip_text'] ) ? $settings['fixed_tooltip_text'] : '' ); ?>" class="regular-text" placeholder="<?php esc_attr_e( 'Talk to AI Assistant', 'sitestaffr' ); ?>" />
						</div>
						<?php $tooltip_position = isset( $settings['fixed_tooltip_position'] ) ? sanitize_key( $settings['fixed_tooltip_position'] ) : 'top'; ?>
						<div class="sitestaffr-ws-field" style="margin-top: 8px;">
							<label for="fixed_tooltip_position"><?php esc_html_e( 'Position', 'sitestaffr' ); ?></label>
							<select id="fixed_tooltip_position" name="sitestaffr_widget_settings[fixed_tooltip_position]">
								<option value="top" <?php selected( $tooltip_position, 'top' ); ?>><?php esc_html_e( 'Above widget', 'sitestaffr' ); ?></option>
								<option value="bottom" <?php selected( $tooltip_position, 'bottom' ); ?>><?php esc_html_e( 'Below widget', 'sitestaffr' ); ?></option>
							</select>
						</div>
					</div>
				</div>

					</div><!-- /.sitestaffr-ws-advanced-body -->
				</details>

			</div>
		</div>
		<div class="sitestaffr-ws-section-footer">
			<button type="button" class="button button-primary sitestaffr-ws-save-btn" data-section="fixed"><?php esc_html_e( 'Save Widget Settings', 'sitestaffr' ); ?></button>
			<span class="sitestaffr-ws-save-status"></span>
		</div>
	</div>

	</div><!-- /ws-tab-fixed -->

	<div id="ws-tab-button" role="tabpanel" class="sitestaffr-agent-tabpanel" aria-labelledby="ws-tab-btn-button" hidden>

	<!-- ================================================================
	     Button Widget
	     ================================================================ -->
	<div class="sitestaffr-ws-section" data-section="button">
		<div class="sitestaffr-ws-section-header">
			<div class="sitestaffr-ws-section-title">
				<h3><?php esc_html_e( 'Button Widget', 'sitestaffr' ); ?></h3>
				<span class="sitestaffr-tooltip-trigger" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Help', 'sitestaffr' ); ?>" data-tooltip="<?php esc_attr_e( 'An inline button you can place anywhere in your content using the shortcode. Fully customizable text, colors, icons, and styling. Ideal for embedding within pages or posts.', 'sitestaffr' ); ?>"><span class="dashicons dashicons-info" aria-hidden="true"></span></span>
			</div>
			<span class="sitestaffr-ws-shortcode-label"><?php esc_html_e( 'Shortcode:', 'sitestaffr' ); ?></span>
			<code class="sitestaffr-ws-shortcode-click" data-shortcode="[sitestaffr_button]" title="<?php esc_attr_e( 'Click to copy shortcode', 'sitestaffr' ); ?>">[sitestaffr_button]</code>
		</div>
		<div class="sitestaffr-ws-section-body sitestaffr-ws-two-col">
			<div class="sitestaffr-ws-preview-col sitestaffr-ws-preview-col--sticky">
				<div class="sitestaffr-ws-preview-toolbar" role="group" aria-label="<?php esc_attr_e( 'Preview background', 'sitestaffr' ); ?>">
					<button type="button" class="sitestaffr-ws-backdrop-btn is-active" data-backdrop="light"><?php esc_html_e( 'Light', 'sitestaffr' ); ?></button>
					<button type="button" class="sitestaffr-ws-backdrop-btn" data-backdrop="dark"><?php esc_html_e( 'Dark', 'sitestaffr' ); ?></button>
					<label class="sitestaffr-ws-backdrop-custom" title="<?php esc_attr_e( 'Custom background — preview the button on your site\'s color', 'sitestaffr' ); ?>">
						<input type="color" class="sitestaffr-ws-backdrop-color" value="#f5f2ec" />
						<span class="screen-reader-text"><?php esc_html_e( 'Custom preview background color', 'sitestaffr' ); ?></span>
					</label>
				</div>
				<div id="sitestaffr-button-widget-preview"></div>
			</div>

			<?php $button_border_style = isset( $settings['button_border_style'] ) ? sanitize_key( $settings['button_border_style'] ) : 'solid'; ?>
			<?php $button_mode = isset( $settings['button_mode'] ) ? sanitize_key( $settings['button_mode'] ) : 'both'; ?>
			<?php $button_preset = isset( $settings['button_preset'] ) ? sanitize_key( $settings['button_preset'] ) : ''; ?>
			<div class="sitestaffr-ws-fields-col">

				<!-- Presets: the default experience — one click + brand color -->
				<div class="sitestaffr-ws-presets" data-preset-section="button">
					<h4 class="sitestaffr-ws-presets-title"><?php esc_html_e( 'Style presets', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-presets-cards" role="group" aria-label="<?php esc_attr_e( 'Visual presets', 'sitestaffr' ); ?>">
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'pill' === $button_preset ? ' is-active' : ''; ?>" data-preset="pill"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--pill" aria-hidden="true"></span><?php esc_html_e( 'Pill', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'gradient' === $button_preset ? ' is-active' : ''; ?>" data-preset="gradient"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--gradient" aria-hidden="true"></span><?php esc_html_e( 'Gradient', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'rounded' === $button_preset ? ' is-active' : ''; ?>" data-preset="rounded"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--rounded" aria-hidden="true"></span><?php esc_html_e( 'Rounded', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'square' === $button_preset ? ' is-active' : ''; ?>" data-preset="square"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--square" aria-hidden="true"></span><?php esc_html_e( 'Square', 'sitestaffr' ); ?></button>
						<button type="button" class="sitestaffr-ws-preset-card<?php echo 'outline' === $button_preset ? ' is-active' : ''; ?>" data-preset="outline"><span class="sitestaffr-ws-preset-swatch sitestaffr-ws-preset-swatch--outline" aria-hidden="true"></span><?php esc_html_e( 'Outline', 'sitestaffr' ); ?></button>
					</div>
					<div class="sitestaffr-ws-presets-side">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_brand_color"><?php esc_html_e( 'Brand color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_brand_color" class="sitestaffr-color-field sitestaffr-ws-brand-color" data-brand-section="button" data-default-color="#1FB6CC" value="<?php echo esc_attr( isset( $settings['button_background_color'] ) ? $settings['button_background_color'] : '#1FB6CC' ); ?>" />
						</div>
						<button type="button" class="button sitestaffr-ws-reset-preset" data-preset-section="button" title="<?php esc_attr_e( 'Restore this preset\'s stock look — shape, style and the default brand color', 'sitestaffr' ); ?>" <?php disabled( '' === $button_preset ); ?>><?php esc_html_e( 'Reset to preset', 'sitestaffr' ); ?></button>
					</div>

					<!-- Essentials: the controls owners actually change, always visible -->
					<div class="sitestaffr-ws-essentials">
						<div class="sitestaffr-ws-field sitestaffr-ws-essentials-label">
							<label for="button_text"><?php esc_html_e( 'Label', 'sitestaffr' ); ?></label>
							<input type="text" id="button_text" name="sitestaffr_widget_settings[button_text]" value="<?php echo esc_attr( isset( $settings['button_text'] ) ? $settings['button_text'] : 'Contact Us' ); ?>" />
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_font_size"><?php esc_html_e( 'Size', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_font_size" name="sitestaffr_widget_settings[button_font_size]" value="<?php echo esc_attr( isset( $settings['button_font_size'] ) ? intval( $settings['button_font_size'] ) : '16' ); ?>" min="1" max="100" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
					<input type="hidden" id="button_preset" name="sitestaffr_widget_settings[button_preset]" value="<?php echo esc_attr( $button_preset ); ?>" />
				</div>

				<details class="sitestaffr-ws-advanced">
					<summary>
						<span class="dashicons dashicons-admin-generic" aria-hidden="true"></span>
						<?php esc_html_e( 'Advanced customization', 'sitestaffr' ); ?>
						<span class="sitestaffr-ws-advanced-hint"><?php esc_html_e( 'Every control — presets pre-fill these values', 'sitestaffr' ); ?></span>
					</summary>
					<div class="sitestaffr-ws-advanced-body">

				<h4 class="sitestaffr-ws-intent-title"><?php esc_html_e( 'Label', 'sitestaffr' ); ?></h4>

				<!-- Text & Label -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Text & Label', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_font_weight"><?php esc_html_e( 'Weight', 'sitestaffr' ); ?></label>
							<select id="button_font_weight" name="sitestaffr_widget_settings[button_font_weight]">
								<option value="400" <?php selected( isset( $settings['button_font_weight'] ) ? $settings['button_font_weight'] : '600', '400' ); ?>><?php esc_html_e( 'Normal', 'sitestaffr' ); ?></option>
								<option value="600" <?php selected( isset( $settings['button_font_weight'] ) ? $settings['button_font_weight'] : '600', '600' ); ?>><?php esc_html_e( 'Semi-Bold', 'sitestaffr' ); ?></option>
								<option value="700" <?php selected( isset( $settings['button_font_weight'] ) ? $settings['button_font_weight'] : '600', '700' ); ?>><?php esc_html_e( 'Bold', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_text_transform"><?php esc_html_e( 'Transform', 'sitestaffr' ); ?></label>
							<select id="button_text_transform" name="sitestaffr_widget_settings[button_text_transform]">
								<option value="none" <?php selected( isset( $settings['button_text_transform'] ) ? $settings['button_text_transform'] : 'none', 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
								<option value="uppercase" <?php selected( isset( $settings['button_text_transform'] ) ? $settings['button_text_transform'] : 'none', 'uppercase' ); ?>><?php esc_html_e( 'UPPERCASE', 'sitestaffr' ); ?></option>
								<option value="capitalize" <?php selected( isset( $settings['button_text_transform'] ) ? $settings['button_text_transform'] : 'none', 'capitalize' ); ?>><?php esc_html_e( 'Capitalize', 'sitestaffr' ); ?></option>
							</select>
						</div>
					</div>
				</div>

				<h4 class="sitestaffr-ws-intent-title"><?php esc_html_e( 'Style', 'sitestaffr' ); ?></h4>

				<!-- Colors -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Colors', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_text_color"><?php esc_html_e( 'Text', 'sitestaffr' ); ?></label>
							<input type="text" id="button_text_color" name="sitestaffr_widget_settings[button_text_color]" value="<?php echo esc_attr( isset( $settings['button_text_color'] ) ? $settings['button_text_color'] : '#ffffff' ); ?>" class="sitestaffr-color-field" data-default-color="#ffffff" />
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_background_color"><?php esc_html_e( 'Background', 'sitestaffr' ); ?></label>
							<input type="text" id="button_background_color" name="sitestaffr_widget_settings[button_background_color]" value="<?php echo esc_attr( isset( $settings['button_background_color'] ) ? $settings['button_background_color'] : '#1FB6CC' ); ?>" class="sitestaffr-color-field" data-default-color="#1FB6CC" />
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_hover_background"><?php esc_html_e( 'Hover', 'sitestaffr' ); ?></label>
							<input type="text" id="button_hover_background" name="sitestaffr_widget_settings[button_hover_background]" value="<?php echo esc_attr( isset( $settings['button_hover_background'] ) ? $settings['button_hover_background'] : '#17A2B8' ); ?>" class="sitestaffr-color-field" data-default-color="#17A2B8" />
						</div>
					</div>
				</div>

				<!-- Icon -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Icon', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_icon"><?php esc_html_e( 'Type', 'sitestaffr' ); ?></label>
							<select id="button_icon" name="sitestaffr_widget_settings[button_icon]">
								<option value="sitestaffr" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'sitestaffr' ); ?>><?php esc_html_e( 'SiteStaffr', 'sitestaffr' ); ?></option>
								<option value="microphone" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'microphone' ); ?>><?php esc_html_e( 'Microphone', 'sitestaffr' ); ?></option>
								<option value="phone" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'phone' ); ?>><?php esc_html_e( 'Phone', 'sitestaffr' ); ?></option>
								<option value="chat" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'chat' ); ?>><?php esc_html_e( 'Chat', 'sitestaffr' ); ?></option>
								<option value="headset" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'headset' ); ?>><?php esc_html_e( 'Headset', 'sitestaffr' ); ?></option>
								<option value="none" <?php selected( isset( $settings['button_icon'] ) ? $settings['button_icon'] : 'sitestaffr', 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_icon_position"><?php esc_html_e( 'Position', 'sitestaffr' ); ?></label>
							<select id="button_icon_position" name="sitestaffr_widget_settings[button_icon_position]">
								<option value="left" <?php selected( isset( $settings['button_icon_position'] ) ? $settings['button_icon_position'] : 'left', 'left' ); ?>><?php esc_html_e( 'Left', 'sitestaffr' ); ?></option>
								<option value="right" <?php selected( isset( $settings['button_icon_position'] ) ? $settings['button_icon_position'] : 'left', 'right' ); ?>><?php esc_html_e( 'Right', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_icon_size"><?php esc_html_e( 'Size', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
							<input type="number" id="button_icon_size" name="sitestaffr_widget_settings[button_icon_size]" value="<?php echo esc_attr( isset( $settings['button_icon_size'] ) ? intval( $settings['button_icon_size'] ) : '18' ); ?>" min="1" max="100" />
							<span class="sitestaffr-ws-px-suffix">px</span>
						</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_icon_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_icon_color" name="sitestaffr_widget_settings[button_icon_color]" value="<?php echo esc_attr( isset( $settings['button_icon_color'] ) ? $settings['button_icon_color'] : '#ffffff' ); ?>" class="sitestaffr-color-field" data-default-color="#ffffff" />
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_hover_icon_color"><?php esc_html_e( 'Hover Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_hover_icon_color" name="sitestaffr_widget_settings[button_hover_icon_color]" value="<?php echo esc_attr( isset( $settings['button_hover_icon_color'] ) ? $settings['button_hover_icon_color'] : '' ); ?>" class="sitestaffr-color-field" data-default-color="" />
						</div>
					</div>
				</div>

				<!-- Gradient -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Gradient', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label>
								<input type="checkbox" id="button_gradient" name="sitestaffr_widget_settings[button_gradient]" value="1" <?php checked( isset( $settings['button_gradient'] ) ? $settings['button_gradient'] : true, true ); ?> />
								<?php esc_html_e( 'Enable', 'sitestaffr' ); ?>
							</label>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_gradient_end"><?php esc_html_e( 'End Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_gradient_end" name="sitestaffr_widget_settings[button_gradient_end]" value="<?php echo esc_attr( isset( $settings['button_gradient_end'] ) ? $settings['button_gradient_end'] : '#10b981' ); ?>" class="sitestaffr-color-field" data-default-color="#10b981" />
						</div>
					</div>
				</div>

				<!-- Border -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Border', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_border_style"><?php esc_html_e( 'Style', 'sitestaffr' ); ?></label>
							<select id="button_border_style" name="sitestaffr_widget_settings[button_border_style]">
								<option value="none" <?php selected( $button_border_style, 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
								<option value="solid" <?php selected( $button_border_style, 'solid' ); ?>><?php esc_html_e( 'Solid', 'sitestaffr' ); ?></option>
								<option value="dashed" <?php selected( $button_border_style, 'dashed' ); ?>><?php esc_html_e( 'Dashed', 'sitestaffr' ); ?></option>
								<option value="dotted" <?php selected( $button_border_style, 'dotted' ); ?>><?php esc_html_e( 'Dotted', 'sitestaffr' ); ?></option>
								<option value="double" <?php selected( $button_border_style, 'double' ); ?>><?php esc_html_e( 'Double', 'sitestaffr' ); ?></option>
							</select>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact sitestaffr-ws-border-dependent" data-border-section="button">
							<label for="button_border_width"><?php esc_html_e( 'Width', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_border_width" name="sitestaffr_widget_settings[button_border_width]" value="<?php echo esc_attr( isset( $settings['button_border_width'] ) ? intval( $settings['button_border_width'] ) : '0' ); ?>" min="0" max="10" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact sitestaffr-ws-border-dependent" data-border-section="button">
							<label for="button_border_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_border_color" name="sitestaffr_widget_settings[button_border_color]" value="<?php echo esc_attr( isset( $settings['button_border_color'] ) ? $settings['button_border_color'] : '#1FB6CC' ); ?>" class="sitestaffr-color-field" data-default-color="#1FB6CC" />
						</div>
					</div>
				</div>

				<!-- Shadow -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Shadow', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label>
								<input type="checkbox" id="button_box_shadow" name="sitestaffr_widget_settings[button_box_shadow]" value="1" <?php checked( isset( $settings['button_box_shadow'] ) ? $settings['button_box_shadow'] : true, true ); ?> />
								<?php esc_html_e( 'Enable', 'sitestaffr' ); ?>
							</label>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_shadow_color"><?php esc_html_e( 'Color', 'sitestaffr' ); ?></label>
							<input type="text" id="button_shadow_color" name="sitestaffr_widget_settings[button_shadow_color]" value="<?php echo esc_attr( isset( $settings['button_shadow_color'] ) ? $settings['button_shadow_color'] : 'rgba(0,0,0,0.2)' ); ?>" class="sitestaffr-color-field" data-default-color="rgba(0,0,0,0.2)" />
						</div>
					</div>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_shadow_blur"><?php esc_html_e( 'Blur', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_shadow_blur" name="sitestaffr_widget_settings[button_shadow_blur]" value="<?php echo esc_attr( isset( $settings['button_shadow_blur'] ) ? intval( $settings['button_shadow_blur'] ) : '10' ); ?>" min="0" max="100" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_shadow_offset"><?php esc_html_e( 'Offset', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_shadow_offset" name="sitestaffr_widget_settings[button_shadow_offset]" value="<?php echo esc_attr( isset( $settings['button_shadow_offset'] ) ? intval( $settings['button_shadow_offset'] ) : '4' ); ?>" min="0" max="50" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<h4 class="sitestaffr-ws-intent-title"><?php esc_html_e( 'Shape', 'sitestaffr' ); ?></h4>

				<!-- Border Radius -->
				<div class="sitestaffr-ws-group">
					<div class="sitestaffr-ws-radius-heading">
						<span class="sitestaffr-ws-radius-heading-label"><?php esc_html_e( 'Border Radius', 'sitestaffr' ); ?></span>
						<label class="sitestaffr-ws-radius-lock-toggle<?php echo $button_radius_locked ? ' is-locked' : ''; ?>" data-radius-lock-toggle="button" title="<?php esc_attr_e( 'Toggle corner lock', 'sitestaffr' ); ?>">
							<input type="checkbox" id="button_border_radius_locked" name="sitestaffr_widget_settings[button_border_radius_locked]" value="1" <?php checked( $button_radius_locked ); ?> />
							<span class="dashicons <?php echo esc_attr( $button_radius_locked ? 'dashicons-lock' : 'dashicons-unlock' ); ?>" data-radius-lock-icon="button" aria-hidden="true"></span>
							<span class="screen-reader-text"><?php esc_html_e( 'Lock all border radius corners', 'sitestaffr' ); ?></span>
						</label>
					</div>
					<div class="sitestaffr-ws-field-row sitestaffr-ws-radius-group" data-radius-group="button">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_border_radius_top"><?php esc_html_e( 'Top', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_border_radius_top" class="sitestaffr-ws-radius-input" data-radius-role="primary" name="sitestaffr_widget_settings[button_border_radius_top]" value="<?php echo esc_attr( $button_radius_top ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_border_radius_right"><?php esc_html_e( 'Right', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_border_radius_right" class="sitestaffr-ws-radius-input" data-radius-role="linked" name="sitestaffr_widget_settings[button_border_radius_right]" value="<?php echo esc_attr( $button_radius_right ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_border_radius_bottom"><?php esc_html_e( 'Bottom', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_border_radius_bottom" class="sitestaffr-ws-radius-input" data-radius-role="linked" name="sitestaffr_widget_settings[button_border_radius_bottom]" value="<?php echo esc_attr( $button_radius_bottom ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_border_radius_left"><?php esc_html_e( 'Left', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_border_radius_left" class="sitestaffr-ws-radius-input" data-radius-role="linked" name="sitestaffr_widget_settings[button_border_radius_left]" value="<?php echo esc_attr( $button_radius_left ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Padding -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Padding', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field-row">
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_padding_x"><?php esc_html_e( 'Horizontal', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_padding_x" name="sitestaffr_widget_settings[button_padding_x]" value="<?php echo esc_attr( isset( $settings['button_padding_x'] ) ? intval( $settings['button_padding_x'] ) : '24' ); ?>" min="0" max="200" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
						<div class="sitestaffr-ws-field sitestaffr-ws-field--compact">
							<label for="button_padding_y"><?php esc_html_e( 'Vertical', 'sitestaffr' ); ?></label>
							<div class="sitestaffr-ws-input-px">
								<input type="number" id="button_padding_y" name="sitestaffr_widget_settings[button_padding_y]" value="<?php echo esc_attr( isset( $settings['button_padding_y'] ) ? intval( $settings['button_padding_y'] ) : '12' ); ?>" min="0" max="100" />
								<span class="sitestaffr-ws-px-suffix">px</span>
							</div>
						</div>
					</div>
				</div>

				<!-- Display -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Display', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field">
						<label>
							<input type="checkbox" id="button_full_width" name="sitestaffr_widget_settings[button_full_width]" value="1" <?php checked( isset( $settings['button_full_width'] ) ? $settings['button_full_width'] : false, true ); ?> />
							<?php esc_html_e( 'Full Width', 'sitestaffr' ); ?>
						</label>
					</div>
				</div>

				<h4 class="sitestaffr-ws-intent-title"><?php esc_html_e( 'Behavior', 'sitestaffr' ); ?></h4>

				<!-- Mode -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Mode', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field">
						<label for="button_mode"><?php esc_html_e( 'Button Mode', 'sitestaffr' ); ?></label>
						<select id="button_mode" name="sitestaffr_widget_settings[button_mode]">
							<option value="both" <?php selected( $button_mode, 'both' ); ?>><?php esc_html_e( 'Voice & Text (visitor chooses)', 'sitestaffr' ); ?></option>
							<option value="voice" <?php selected( $button_mode, 'voice' ); ?>><?php esc_html_e( 'Voice Only', 'sitestaffr' ); ?></option>
							<option value="text" <?php selected( $button_mode, 'text' ); ?>><?php esc_html_e( 'Text Chat Only', 'sitestaffr' ); ?></option>
						</select>
						<p class="description"><?php esc_html_e( 'Choose which conversation modes visitors can use. Override per instance with the shortcode mode attribute.', 'sitestaffr' ); ?></p>
					</div>
				</div>

				<!-- Hover Animation -->
				<div class="sitestaffr-ws-group">
					<h4><?php esc_html_e( 'Hover Animation', 'sitestaffr' ); ?></h4>
					<div class="sitestaffr-ws-field">
						<label for="button_hover_animation"><?php esc_html_e( 'Animation', 'sitestaffr' ); ?></label>
						<select id="button_hover_animation" name="sitestaffr_widget_settings[button_hover_animation]">
							<option value="none" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'none' ); ?>><?php esc_html_e( 'None', 'sitestaffr' ); ?></option>
							<option value="scale" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'scale' ); ?>><?php esc_html_e( 'Scale', 'sitestaffr' ); ?></option>
							<option value="glow" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'glow' ); ?>><?php esc_html_e( 'Glow', 'sitestaffr' ); ?></option>
							<option value="pulse" <?php selected( isset( $settings['button_hover_animation'] ) ? $settings['button_hover_animation'] : 'none', 'pulse' ); ?>><?php esc_html_e( 'Pulse', 'sitestaffr' ); ?></option>
						</select>
					</div>
				</div>

					</div><!-- /.sitestaffr-ws-advanced-body -->
				</details>

			</div>
		</div>
		<div class="sitestaffr-ws-section-footer">
			<button type="button" class="button button-primary sitestaffr-ws-save-btn" data-section="button"><?php esc_html_e( 'Save Button Settings', 'sitestaffr' ); ?></button>
			<span class="sitestaffr-ws-save-status"></span>
		</div>
	</div>

	</div><!-- /ws-tab-button -->

	<div id="ws-tab-analytics" role="tabpanel" class="sitestaffr-agent-tabpanel" aria-labelledby="ws-tab-btn-analytics" hidden>

	<!-- Analytics Integration (Google Tag Manager) -->
	<div class="sitestaffr-ws-section sitestaffr-ws-gtm-section" data-section="analytics">
		<div class="sitestaffr-ws-section-header">
			<div class="sitestaffr-ws-section-title">
				<h3><span class="dashicons dashicons-chart-bar"></span><?php esc_html_e( 'Analytics Integration', 'sitestaffr' ); ?></h3>
			</div>
			<span class="sitestaffr-ws-gtm-badge"><?php esc_html_e( 'Google Tag Manager', 'sitestaffr' ); ?></span>
		</div>
		<div class="sitestaffr-ws-section-body">
			<p class="sitestaffr-ws-gtm-intro"><?php esc_html_e( 'SiteStaffr automatically pushes two conversion events to the Google Tag Manager dataLayer as visitors use your widget — nothing to configure on our end. Use Google Tag Manager to forward them to Google Analytics 4, Google Ads, Meta, or any other platform.', 'sitestaffr' ); ?></p>

			<table class="sitestaffr-ws-gtm-table">
				<thead>
					<tr>
						<th><?php esc_html_e( 'Event', 'sitestaffr' ); ?></th>
						<th><?php esc_html_e( 'Fires when', 'sitestaffr' ); ?></th>
						<th><?php esc_html_e( 'Data included', 'sitestaffr' ); ?></th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<code class="sitestaffr-ws-gtm-event-name">sitestaffr_widget_open</code>
							<span class="sitestaffr-ws-gtm-tag"><?php esc_html_e( 'Engagement', 'sitestaffr' ); ?></span>
						</td>
						<td><?php esc_html_e( 'A visitor clicks the chat widget button to start.', 'sitestaffr' ); ?></td>
						<td class="sitestaffr-ws-gtm-data"><code>sitestaffr_mode</code><code>sitestaffr_widget_type</code><code>sitestaffr_page_title</code></td>
					</tr>
					<tr>
						<td>
							<code class="sitestaffr-ws-gtm-event-name">sitestaffr_qualified_lead</code>
							<span class="sitestaffr-ws-gtm-tag sitestaffr-ws-gtm-tag--conversion"><?php esc_html_e( 'Conversion', 'sitestaffr' ); ?></span>
						</td>
						<td><?php esc_html_e( 'A visitor shares their name plus a phone number or email. Fires once per conversation.', 'sitestaffr' ); ?></td>
						<td class="sitestaffr-ws-gtm-data"><code>sitestaffr_mode</code><code>sitestaffr_service_interest</code></td>
					</tr>
				</tbody>
			</table>

			<details class="sitestaffr-ws-gtm-setup">
				<summary class="sitestaffr-ws-gtm-setup-summary">
					<span class="sitestaffr-ws-gtm-setup-summary-text"><?php esc_html_e( 'Connect to Google Analytics 4 with Google Tag Manager', 'sitestaffr' ); ?></span>
					<span class="sitestaffr-ws-gtm-setup-summary-hint"><?php esc_html_e( 'Step-by-step guide', 'sitestaffr' ); ?></span>
					<span class="dashicons dashicons-arrow-down-alt2 sitestaffr-ws-gtm-chevron" aria-hidden="true"></span>
				</summary>
				<div class="sitestaffr-ws-gtm-setup-content">

				<p class="sitestaffr-ws-gtm-prereq-label"><?php esc_html_e( 'Before you start', 'sitestaffr' ); ?></p>
				<ul class="sitestaffr-ws-gtm-prereq">
					<li><?php
						printf(
							/* translators: %s: GA4 Measurement ID prefix, wrapped in a code tag. */
							esc_html__( 'A Google Analytics 4 property — you will need its Measurement ID (it starts with %s).', 'sitestaffr' ),
							'<code>G-</code>'
						);
					?></li>
					<li><?php
						printf(
							/* translators: %1$s: the <head> tag, %2$s: the <body> tag, both wrapped in code tags. */
							esc_html__( 'Google Tag Manager installed on your site — both snippets, one in %1$s and one immediately after the opening %2$s tag.', 'sitestaffr' ),
							'<code>&lt;head&gt;</code>',
							'<code>&lt;body&gt;</code>'
						);
					?></li>
				</ul>

				<ol class="sitestaffr-ws-gtm-steps">
					<li class="sitestaffr-ws-gtm-step">
						<h5 class="sitestaffr-ws-gtm-step-title"><?php esc_html_e( 'Create Data Layer Variables', 'sitestaffr' ); ?></h5>
						<p><?php
							printf(
								/* translators: %1$s: GTM menu path, %2$s: variable type name, both wrapped in styled markup. */
								esc_html__( 'In GTM, open %1$s and add these four, each of type %2$s (Version 2):', 'sitestaffr' ),
								'<span class="sitestaffr-ws-gtm-path">' . esc_html__( 'Variables → User-Defined → New', 'sitestaffr' ) . '</span>',
								'<strong>' . esc_html__( 'Data Layer Variable', 'sitestaffr' ) . '</strong>'
							);
						?></p>
						<table class="sitestaffr-ws-gtm-subtable">
							<thead>
								<tr>
									<th><?php esc_html_e( 'Variable name (suggested)', 'sitestaffr' ); ?></th>
									<th><?php esc_html_e( 'Data Layer Variable Name', 'sitestaffr' ); ?></th>
								</tr>
							</thead>
							<tbody>
								<tr><td>DLV - sitestaffr_mode</td><td><code>sitestaffr_mode</code></td></tr>
								<tr><td>DLV - sitestaffr_widget_type</td><td><code>sitestaffr_widget_type</code></td></tr>
								<tr><td>DLV - sitestaffr_page_title</td><td><code>sitestaffr_page_title</code></td></tr>
								<tr><td>DLV - sitestaffr_service_interest</td><td><code>sitestaffr_service_interest</code></td></tr>
							</tbody>
						</table>
					</li>
					<li class="sitestaffr-ws-gtm-step">
						<h5 class="sitestaffr-ws-gtm-step-title"><?php esc_html_e( 'Create Triggers', 'sitestaffr' ); ?></h5>
						<p><?php
							printf(
								/* translators: %1$s: GTM menu path, %2$s: trigger type name, both wrapped in styled markup. */
								esc_html__( 'Open %1$s and create two %2$s triggers (choose “Some Custom Events”, then set Event equals the value below):', 'sitestaffr' ),
								'<span class="sitestaffr-ws-gtm-path">' . esc_html__( 'Triggers → New', 'sitestaffr' ) . '</span>',
								'<strong>' . esc_html__( 'Custom Event', 'sitestaffr' ) . '</strong>'
							);
						?></p>
						<table class="sitestaffr-ws-gtm-subtable">
							<thead>
								<tr>
									<th><?php esc_html_e( 'Trigger name (suggested)', 'sitestaffr' ); ?></th>
									<th><?php esc_html_e( 'Event name', 'sitestaffr' ); ?></th>
								</tr>
							</thead>
							<tbody>
								<tr><td>SiteStaffr - Widget Opened</td><td><code>sitestaffr_widget_open</code></td></tr>
								<tr><td>SiteStaffr - Qualified Lead</td><td><code>sitestaffr_qualified_lead</code></td></tr>
							</tbody>
						</table>
					</li>
					<li class="sitestaffr-ws-gtm-step">
						<h5 class="sitestaffr-ws-gtm-step-title"><?php esc_html_e( 'Create Tags', 'sitestaffr' ); ?></h5>
						<p><?php
							printf(
								/* translators: %s: GTM menu path, wrapped in styled markup. */
								esc_html__( 'Open %s and create three tags:', 'sitestaffr' ),
								'<span class="sitestaffr-ws-gtm-path">' . esc_html__( 'Tags → New', 'sitestaffr' ) . '</span>'
							);
						?></p>
						<div class="sitestaffr-ws-gtm-tagcard">
							<span class="sitestaffr-ws-gtm-tagcard-title"><?php esc_html_e( 'Tag 1 — GA4 Configuration', 'sitestaffr' ); ?></span>
							<ul>
								<li><strong><?php esc_html_e( 'Type', 'sitestaffr' ); ?>:</strong> <?php esc_html_e( 'Google Tag', 'sitestaffr' ); ?></li>
								<li><strong><?php esc_html_e( 'Tag ID', 'sitestaffr' ); ?>:</strong> <code>G-XXXXXXX</code></li>
								<li><strong><?php esc_html_e( 'Trigger', 'sitestaffr' ); ?>:</strong> <?php esc_html_e( 'All Pages', 'sitestaffr' ); ?></li>
							</ul>
						</div>
						<div class="sitestaffr-ws-gtm-tagcard">
							<span class="sitestaffr-ws-gtm-tagcard-title"><?php esc_html_e( 'Tag 2 — Widget Opened', 'sitestaffr' ); ?></span>
							<ul>
								<li><strong><?php esc_html_e( 'Type', 'sitestaffr' ); ?>:</strong> <?php esc_html_e( 'Google Analytics: GA4 Event', 'sitestaffr' ); ?></li>
								<li><strong><?php esc_html_e( 'Measurement ID', 'sitestaffr' ); ?>:</strong> <code>G-XXXXXXX</code></li>
								<li><strong><?php esc_html_e( 'Event name', 'sitestaffr' ); ?>:</strong> <code>sitestaffr_widget_open</code></li>
								<li><strong><?php esc_html_e( 'Event parameters', 'sitestaffr' ); ?>:</strong>
									<span class="sitestaffr-ws-gtm-params"><code>mode</code> = <code>{{DLV - sitestaffr_mode}}</code>, <code>widget_type</code> = <code>{{DLV - sitestaffr_widget_type}}</code>, <code>page_title</code> = <code>{{DLV - sitestaffr_page_title}}</code></span>
								</li>
								<li><strong><?php esc_html_e( 'Trigger', 'sitestaffr' ); ?>:</strong> SiteStaffr - Widget Opened</li>
							</ul>
						</div>
						<div class="sitestaffr-ws-gtm-tagcard">
							<span class="sitestaffr-ws-gtm-tagcard-title"><?php esc_html_e( 'Tag 3 — Qualified Lead (the conversion)', 'sitestaffr' ); ?></span>
							<ul>
								<li><strong><?php esc_html_e( 'Type', 'sitestaffr' ); ?>:</strong> <?php esc_html_e( 'Google Analytics: GA4 Event', 'sitestaffr' ); ?></li>
								<li><strong><?php esc_html_e( 'Measurement ID', 'sitestaffr' ); ?>:</strong> <code>G-XXXXXXX</code></li>
								<li><strong><?php esc_html_e( 'Event name', 'sitestaffr' ); ?>:</strong> <code>sitestaffr_qualified_lead</code></li>
								<li><strong><?php esc_html_e( 'Event parameters', 'sitestaffr' ); ?>:</strong>
									<span class="sitestaffr-ws-gtm-params"><code>mode</code> = <code>{{DLV - sitestaffr_mode}}</code>, <code>service_interest</code> = <code>{{DLV - sitestaffr_service_interest}}</code></span>
								</li>
								<li><strong><?php esc_html_e( 'Trigger', 'sitestaffr' ); ?>:</strong> SiteStaffr - Qualified Lead</li>
							</ul>
						</div>
					</li>
					<li class="sitestaffr-ws-gtm-step">
						<h5 class="sitestaffr-ws-gtm-step-title"><?php esc_html_e( 'Publish & verify', 'sitestaffr' ); ?></h5>
						<p><?php
							printf(
								/* translators: %1$s: GTM Submit button label, %2$s: GA4 realtime report path, both wrapped in styled markup. */
								esc_html__( 'Click %1$s to publish, then open your site, interact with the widget, and check %2$s to confirm the events appear.', 'sitestaffr' ),
								'<span class="sitestaffr-ws-gtm-path">' . esc_html__( 'Submit', 'sitestaffr' ) . '</span>',
								'<span class="sitestaffr-ws-gtm-path">' . esc_html__( 'GA4 → Reports → Realtime', 'sitestaffr' ) . '</span>'
							);
						?></p>
					</li>
					<li class="sitestaffr-ws-gtm-step">
						<h5 class="sitestaffr-ws-gtm-step-title"><?php esc_html_e( 'Mark the conversion in GA4', 'sitestaffr' ); ?></h5>
						<p><?php
							printf(
								/* translators: %1$s: GA4 menu path, %2$s: event name code, %3$s: Key Event label, all wrapped in markup. */
								esc_html__( 'In GA4, open %1$s. Once %2$s appears (it can take up to 24 hours), toggle it as a %3$s to count it as a conversion.', 'sitestaffr' ),
								'<span class="sitestaffr-ws-gtm-path">' . esc_html__( 'Admin → Events', 'sitestaffr' ) . '</span>',
								'<code>sitestaffr_qualified_lead</code>',
								'<strong>' . esc_html__( 'Key Event', 'sitestaffr' ) . '</strong>'
							);
						?></p>
					</li>
				</ol>

				<p class="sitestaffr-ws-gtm-note">
					<span class="dashicons dashicons-info-outline"></span>
					<?php esc_html_e( 'The data fields above are passed as event parameters, so you can segment conversions in GA4 by mode (voice or text) and service interest.', 'sitestaffr' ); ?>
				</p>
				</div><!-- /.sitestaffr-ws-gtm-setup-content -->
			</details>
		</div>
	</div>

	</div><!-- /ws-tab-analytics -->
</div>
<?php // phpcs:enable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound ?>
