<?php
/**
 * Settings Render for Vareon Calculator Suite Lite
 *
 * Handles the HTML output for the settings page.
 *
 * @package Vareon_Calculator_Suite_Lite
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Render the plugin settings page
 *
 * @return void
 */
function vareoncalc_render_settings() {
	if ( ! current_user_can( 'manage_options' ) ) {
		return;
	}

	$opts = get_option( 'vareoncalc_lite_options', vareoncalc_default_options() );

	$show_settings_tip_notice = true;
	if ( $show_settings_tip_notice && function_exists( 'vareoncalc_is_settings_tip_notice_dismissed' ) ) {
		$show_settings_tip_notice = ! vareoncalc_is_settings_tip_notice_dismissed();
	}
	// phpcs:ignore WordPress.Security.NonceVerification.Recommended -- Query arg controls view state only.
	$requested_tab = isset( $_GET['tab'] ) ? sanitize_key( wp_unslash( $_GET['tab'] ) ) : 'general';
	$active_tab    = function_exists( 'vareoncalc_normalize_settings_tab' )
		? vareoncalc_normalize_settings_tab( $requested_tab, false )
		: $requested_tab;

	if ( function_exists( 'vareoncalc_track_review_cta_settings_visit' ) ) {
		vareoncalc_track_review_cta_settings_visit( $active_tab );
	}

	if ( 'welcome' === $active_tab ) {
		echo '<div class="wrap">';
		echo '<h1>' . esc_html( get_admin_page_title() ) . '</h1>';
		vareoncalc_render_onboarding();
		echo '</div>';
		return;
	}

	$allowed_icon_html = array(
		'span' => array(
			'class'       => true,
			'style'       => true,
			'role'        => true,
			'aria-label'  => true,
			'aria-hidden' => true,
		),
	);

	$render_settings_icon = static function ( $icon, array $args = array() ) use ( $allowed_icon_html ) {
		return wp_kses(
			vareoncalc_render_dashicon( $icon, $args ),
			$allowed_icon_html
		);
	};

	require_once __DIR__ . '/settings-docs.php';

	$preview_calculators = array();
	if ( function_exists( 'vareoncalc_settings_get_calculator_library' ) ) {
		$preview_calculators = vareoncalc_settings_get_calculator_library();
	}

	if ( empty( $preview_calculators ) || ! is_array( $preview_calculators ) ) {
		$preview_calculators = array(
			'loan' => array(
				'title' => __( 'Loan Calculator', 'vareon-calculator-suite-lite' ),
			),
		);
	}

	$initial_preview_calculator = reset( $preview_calculators );
	$initial_preview_label      = __( 'Calculator', 'vareon-calculator-suite-lite' );
	if ( is_array( $initial_preview_calculator ) && ! empty( $initial_preview_calculator['title'] ) ) {
		$initial_preview_label = (string) $initial_preview_calculator['title'];
	}

	ob_start();
	?>
	<div class="wrap vareoncalc-settings-wrap">
		<h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
		<p>
			<?php
			printf(
				/* translators: %s: "Vareon Calculator Suite Lite" wrapped in strong tags */
				esc_html__( "You're using %s with the core calculators.", 'vareon-calculator-suite-lite' ),
				'<strong>' . esc_html__( 'Vareon Calculator Suite Lite', 'vareon-calculator-suite-lite' ) . '</strong>'
			);
			?>
		</p>

		<?php if ( $show_settings_tip_notice ) : ?>
			<div class="notice notice-info vareoncalc-tip-notice">
				<div class="vareoncalc-tip-notice__text">
					<p>
						<span class="dashicons dashicons-lightbulb vareoncalc-tip-notice__icon" aria-hidden="true"></span>
						<?php esc_html_e( 'Tip: Use shortcodes like [vareon type="loan"] or the Gutenberg block to embed calculators anywhere on your site.', 'vareon-calculator-suite-lite' ); ?>
					</p>
				</div>
				<button type="button" class="vareoncalc-tip-notice-close vareoncalc-tip-notice__close" aria-label="<?php esc_attr_e( 'Dismiss', 'vareon-calculator-suite-lite' ); ?>" title="<?php esc_attr_e( 'Dismiss', 'vareon-calculator-suite-lite' ); ?>">
					<span class="dashicons dashicons-no-alt vareoncalc-tip-notice__close-icon" aria-hidden="true"></span>
				</button>
			</div>
		<?php endif; ?>

		<div class="vareoncalc-settings-layout <?php echo esc_attr( 'docs' === $active_tab ? 'is-docs-tab' : '' ); ?>">
			<div class="vareoncalc-settings-main">
				<form method="post" action="options.php" id="vareoncalc-settings-form">
					<?php settings_fields( 'vareoncalc_lite_options' ); ?>

					<div class="vareoncalc-tabs">
						<button type="button" class="<?php echo esc_attr( 'general' === $active_tab ? 'active' : '' ); ?>" data-tab="tab-general">
							<?php
							// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
							echo $render_settings_icon(
								'admin-generic',
								array(
									'size'  => '18px',
									'class' => 'vareoncalc-tab-icon',
									'style' => 'margin-right: 6px;',
								)
							);
							?>
							<span><?php esc_html_e( 'General', 'vareon-calculator-suite-lite' ); ?></span>
						</button>
						<button type="button" class="<?php echo esc_attr( 'docs' === $active_tab ? 'active' : '' ); ?>" data-tab="tab-docs">
							<?php
							// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
							echo $render_settings_icon(
								'book-alt',
								array(
									'size'  => '18px',
									'class' => 'vareoncalc-tab-icon',
									'style' => 'margin-right: 6px;',
								)
							);
							?>
							<span><?php esc_html_e( 'Docs', 'vareon-calculator-suite-lite' ); ?></span>
						</button>
						<button type="button" class="<?php echo esc_attr( 'pro-waitlist' === $active_tab ? 'active' : '' ); ?>" data-tab="tab-pro-waitlist">
							<?php
							// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
							echo $render_settings_icon(
								'star-filled',
								array(
									'size'  => '18px',
									'class' => 'vareoncalc-tab-icon',
									'style' => 'margin-right: 6px;',
								)
							);
							?>
							<span><?php esc_html_e( 'Pro Waitlist', 'vareon-calculator-suite-lite' ); ?></span>
						</button>
					</div>

					<div id="tab-general" class="vareoncalc-tab-content <?php echo esc_attr( 'general' === $active_tab ? 'active' : '' ); ?>">
						<div id="vareoncalc-settings-split" class="vareoncalc-settings-split">
							<div id="vareoncalc-settings-split-main" class="vareoncalc-settings-split__main">
								<div class="vareoncalc-settings-col">
									<div class="vareoncalc-hero">
										<div class="vareoncalc-hero-icon">
											<?php
											// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
											echo $render_settings_icon(
												'admin-tools',
												array(
													'size' => '28px',
													'class' => 'vareoncalc-hero-icon__glyph',
												)
											);
											?>
										</div>
										<div class="vareoncalc-hero-content">
											<h2><?php esc_html_e( 'Configure Your Calculators', 'vareon-calculator-suite-lite' ); ?></h2>
											<p><?php esc_html_e( 'Customize appearance and settings for your calculators', 'vareon-calculator-suite-lite' ); ?></p>
										</div>
									</div>

									<?php
									if ( function_exists( 'vareoncalc_render_main_review_cta' ) ) {
										// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Internal review CTA markup is fully escaped within the renderer.
										echo vareoncalc_render_main_review_cta();
									}
									?>

								<?php
								$currency_catalog      = vareoncalc_get_currency_catalog();
								$current_currency_code = $opts['currency_code'] ?? 'USD';
								$current_currency_sym  = $opts['currency_symbol'] ?? '$';

								$format_presets = array(
									'us' => array(
										'label'         => __( 'US / International — $1,234.56 · Imperial', 'vareon-calculator-suite-lite' ),
										'currency_code' => 'USD',
										'currency_position' => 'before',
										'thousand_separator' => 'comma',
										'decimal_separator' => 'dot',
										'measurement_system' => 'imperial',
									),
									'eu' => array(
										'label'         => __( 'European (EU) — 1.234,56 € · Metric', 'vareon-calculator-suite-lite' ),
										'currency_code' => 'EUR',
										'currency_position' => 'after',
										'thousand_separator' => 'dot',
										'decimal_separator' => 'comma',
										'measurement_system' => 'metric',
									),
									'uk' => array(
										'label'         => __( 'UK / Commonwealth — £1,234.56 · Mixed', 'vareon-calculator-suite-lite' ),
										'currency_code' => 'GBP',
										'currency_position' => 'before',
										'thousand_separator' => 'comma',
										'decimal_separator' => 'dot',
										'measurement_system' => 'mixed',
									),
								);

								$active_preset = 'custom';
								foreach ( $format_presets as $preset_key => $preset ) {
									if (
										( $opts['currency_code'] ?? 'USD' ) === $preset['currency_code'] &&
										( $opts['currency_position'] ?? 'before' ) === $preset['currency_position'] &&
										( $opts['thousand_separator'] ?? 'comma' ) === $preset['thousand_separator'] &&
										( $opts['decimal_separator'] ?? 'dot' ) === $preset['decimal_separator'] &&
										( $opts['measurement_system'] ?? 'mixed' ) === $preset['measurement_system']
									) {
										$active_preset = $preset_key;
										break;
									}
								}
								?>

								<div class="vareoncalc-card">
									<div class="vareoncalc-card-header">
										<h3 class="vareoncalc-card-title">
											<?php
											// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
											echo $render_settings_icon(
												'admin-site-alt3',
												array(
													'size' => '18px',
													'class' => 'vareoncalc-card-title__icon',
												)
											);
											?>
											<?php esc_html_e( 'Region Preset', 'vareon-calculator-suite-lite' ); ?>
										</h3>
									</div>

									<div class="vareoncalc-form-group">
										<label for="vareoncalc-format-preset" class="vareoncalc-label"><?php esc_html_e( 'Quick Setup', 'vareon-calculator-suite-lite' ); ?></label>
										<select id="vareoncalc-format-preset" class="vareoncalc-select">
											<?php foreach ( $format_presets as $preset_key => $preset ) : ?>
												<option value="<?php echo esc_attr( $preset_key ); ?>" <?php selected( $active_preset, $preset_key ); ?>>
													<?php echo esc_html( $preset['label'] ); ?>
												</option>
											<?php endforeach; ?>
											<option value="custom" <?php selected( $active_preset, 'custom' ); ?>><?php esc_html_e( 'Custom', 'vareon-calculator-suite-lite' ); ?></option>
										</select>
										<p class="vareoncalc-help-text">
											<?php esc_html_e( 'Sets currency, number formatting, and measurement units in one step. Individual settings below can still be adjusted.', 'vareon-calculator-suite-lite' ); ?>
										</p>
									</div>
								</div>

								<div class="vareoncalc-card">
									<div class="vareoncalc-card-header">
										<h3 class="vareoncalc-card-title">
											<?php
											// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
											echo $render_settings_icon(
												'editor-expand',
												array(
													'size' => '18px',
													'class' => 'vareoncalc-card-title__icon',
												)
											);
											?>
											<?php esc_html_e( 'Measurement Units', 'vareon-calculator-suite-lite' ); ?>
										</h3>
									</div>

									<div class="vareoncalc-form-group">
										<label class="vareoncalc-label"><?php esc_html_e( 'System Preference', 'vareon-calculator-suite-lite' ); ?></label>
										<select name="vareoncalc_lite_options[measurement_system]" class="vareoncalc-select">
											<option value="mixed" <?php selected( $opts['measurement_system'] ?? 'mixed', 'mixed' ); ?>><?php esc_html_e( 'Mixed (Calculator Default)', 'vareon-calculator-suite-lite' ); ?></option>
											<option value="metric" <?php selected( $opts['measurement_system'] ?? 'mixed', 'metric' ); ?>><?php esc_html_e( 'Metric (kg, cm, km, L)', 'vareon-calculator-suite-lite' ); ?></option>
											<option value="imperial" <?php selected( $opts['measurement_system'] ?? 'mixed', 'imperial' ); ?>><?php esc_html_e( 'Imperial (lbs, ft/in, mi, gal)', 'vareon-calculator-suite-lite' ); ?></option>
										</select>
										<p class="vareoncalc-help-text">
											<?php esc_html_e( 'Choose the default unit system for calculators like BMI, Fuel Cost, and Unit Converter.', 'vareon-calculator-suite-lite' ); ?>
										</p>
									</div>
								</div>

								<div class="vareoncalc-card">
									<div class="vareoncalc-card-header">
										<h3 class="vareoncalc-card-title">
											<?php
											// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
											echo $render_settings_icon(
												'money-alt',
												array(
													'size' => '18px',
													'class' => 'vareoncalc-card-title__icon',
												)
											);
											?>
											<?php esc_html_e( 'Currency & Numbers', 'vareon-calculator-suite-lite' ); ?>
										</h3>
									</div>

									<div class="vareoncalc-form-group">
											<label for="currency_symbol_select" class="vareoncalc-label"><?php esc_html_e( 'Currency', 'vareon-calculator-suite-lite' ); ?></label>
											<select id="currency_symbol_select" class="vareoncalc-select">
												<?php foreach ( $currency_catalog as $code => $data ) : ?>
													<option value="<?php echo esc_attr( $code ); ?>" data-symbol="<?php echo esc_attr( $data['symbol'] ); ?>" <?php selected( $current_currency_code, $code ); ?>>
														<?php echo esc_html( $data['symbol'] . ' - ' . $data['label'] ); ?>
													</option>
												<?php endforeach; ?>
												<option value="custom" <?php selected( $current_currency_code, 'CUSTOM' ); ?>><?php esc_html_e( 'Custom Symbol...', 'vareon-calculator-suite-lite' ); ?></option>
											</select>

											<div id="currency_symbol_custom_wrapper" class="vareoncalc-currency-custom <?php echo 'CUSTOM' !== $current_currency_code ? 'vareoncalc-is-hidden' : ''; ?>">
												<label for="currency_symbol_custom" class="vareoncalc-label vareoncalc-label--sm"><?php esc_html_e( 'Custom Symbol', 'vareon-calculator-suite-lite' ); ?></label>
												<input type="text" id="currency_symbol_custom" class="vareoncalc-input vareoncalc-input--xs" maxlength="4" placeholder="<?php esc_attr_e( 'e.g. $', 'vareon-calculator-suite-lite' ); ?>" value="<?php echo 'CUSTOM' === $current_currency_code ? esc_attr( $current_currency_sym ) : ''; ?>">
												<p class="vareoncalc-help-text"><?php esc_html_e( 'Up to 4 characters (letters/symbols). Numbers and spaces are ignored.', 'vareon-calculator-suite-lite' ); ?></p>
											</div>

											<input type="hidden" name="vareoncalc_lite_options[currency_code]" id="currency_code" value="<?php echo esc_attr( $current_currency_code ); ?>">
											<input type="hidden" name="vareoncalc_lite_options[currency_symbol]" id="currency_symbol" value="<?php echo esc_attr( $current_currency_sym ); ?>">
										</div>

										<div class="vareoncalc-form-group">
											<label class="vareoncalc-label"><?php esc_html_e( 'Currency Position', 'vareon-calculator-suite-lite' ); ?></label>
											<select name="vareoncalc_lite_options[currency_position]" class="vareoncalc-select">
												<option value="before" <?php selected( $opts['currency_position'] ?? 'before', 'before' ); ?>><?php esc_html_e( 'Before amount ($100)', 'vareon-calculator-suite-lite' ); ?></option>
												<option value="after" <?php selected( $opts['currency_position'] ?? 'before', 'after' ); ?>><?php esc_html_e( 'After amount (100$)', 'vareon-calculator-suite-lite' ); ?></option>
											</select>
										</div>

										<div class="vareoncalc-form-group">
											<label class="vareoncalc-label"><?php esc_html_e( 'Thousand Separator', 'vareon-calculator-suite-lite' ); ?></label>
											<select name="vareoncalc_lite_options[thousand_separator]" class="vareoncalc-select">
												<option value="comma" <?php selected( $opts['thousand_separator'] ?? 'comma', 'comma' ); ?>><?php esc_html_e( 'Comma (1,000,000)', 'vareon-calculator-suite-lite' ); ?></option>
												<option value="dot" <?php selected( $opts['thousand_separator'] ?? 'comma', 'dot' ); ?>><?php esc_html_e( 'Dot (1.000.000)', 'vareon-calculator-suite-lite' ); ?></option>
												<option value="space" <?php selected( $opts['thousand_separator'] ?? 'comma', 'space' ); ?>><?php esc_html_e( 'Space (1 000 000)', 'vareon-calculator-suite-lite' ); ?></option>
												<option value="none" <?php selected( $opts['thousand_separator'] ?? 'comma', 'none' ); ?>><?php esc_html_e( 'None (1000000)', 'vareon-calculator-suite-lite' ); ?></option>
											</select>
										</div>

										<div class="vareoncalc-form-group">
											<label class="vareoncalc-label"><?php esc_html_e( 'Decimal Separator', 'vareon-calculator-suite-lite' ); ?></label>
											<select name="vareoncalc_lite_options[decimal_separator]" class="vareoncalc-select">
												<option value="dot" <?php selected( $opts['decimal_separator'] ?? 'dot', 'dot' ); ?>><?php esc_html_e( 'Dot (100.50)', 'vareon-calculator-suite-lite' ); ?></option>
												<option value="comma" <?php selected( $opts['decimal_separator'] ?? 'dot', 'comma' ); ?>><?php esc_html_e( 'Comma (100,50)', 'vareon-calculator-suite-lite' ); ?></option>
											</select>
										</div>
									</div>

									<div class="vareoncalc-card">
										<div class="vareoncalc-card-header">
											<h3 class="vareoncalc-card-title">
												<?php
												// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
												echo $render_settings_icon(
													'admin-appearance',
													array(
														'size'  => '18px',
														'class' => 'vareoncalc-card-title__icon',
													)
												);
												?>
												<?php esc_html_e( 'Appearance', 'vareon-calculator-suite-lite' ); ?>
											</h3>
										</div>

										<div class="vareoncalc-form-group">
											<label class="vareoncalc-label"><?php esc_html_e( 'Theme Preset', 'vareon-calculator-suite-lite' ); ?></label>
											<select name="vareoncalc_lite_options[theme_preset]" class="vareoncalc-select">
												<option value="light" <?php selected( $opts['theme_preset'] ?? 'light', 'light' ); ?>><?php esc_html_e( 'Light (Blue)', 'vareon-calculator-suite-lite' ); ?></option>
												<option value="dark" <?php selected( $opts['theme_preset'] ?? 'light', 'dark' ); ?>><?php esc_html_e( 'Dark', 'vareon-calculator-suite-lite' ); ?></option>
											<option value="modern" <?php selected( $opts['theme_preset'] ?? 'light', 'modern' ); ?>><?php esc_html_e( 'Modern (Slate)', 'vareon-calculator-suite-lite' ); ?></option>
											</select>
										</div>

									</div>

									<div class="vareoncalc-card">
										<div class="vareoncalc-card-header">
											<h3 class="vareoncalc-card-title">
												<?php
												// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Icon HTML is sanitized in the local helper.
												echo $render_settings_icon(
													'tag',
													array(
														'size'  => '18px',
														'class' => 'vareoncalc-card-title__icon',
													)
												);
												?>
												<?php esc_html_e( 'Branding', 'vareon-calculator-suite-lite' ); ?>
											</h3>
										</div>

										<div class="vareoncalc-form-group">
											<label class="vareoncalc-checkbox-label">
												<input type="checkbox" name="vareoncalc_lite_options[branding]" value="1" <?php checked( ! empty( $opts['branding'] ) ); ?>>
												<span><?php esc_html_e( 'Show "Powered by Vareon" link under calculators', 'vareon-calculator-suite-lite' ); ?></span>
											</label>
											<p class="vareoncalc-help-text vareoncalc-help-text--indent">
												<?php esc_html_e( 'We keep Vareon Calculator Suite Lite free thanks to this tiny credit. Please leave it on if you can - it really helps us keep building more calculators for everyone.', 'vareon-calculator-suite-lite' ); ?>
											</p>
										</div>
									</div>

								</div>
							</div>

							<div class="vareoncalc-settings-split__preview">
								<div id="vareoncalc-preview-v2" class="vareoncalc-preview-v2">
									<div id="vareoncalc-preview-v2-canvas" class="vareoncalc-preview-v2__canvas">
										<div class="vareoncalc-preview-v2__toolbar-top" id="vareoncalc-preview-v2-toolbar-top">
											<div class="vareoncalc-preview-v2__topbar" role="toolbar" aria-label="<?php esc_attr_e( 'Live preview controls', 'vareon-calculator-suite-lite' ); ?>">
												<div class="vareoncalc-preview-v2__topbar-group vareoncalc-preview-v2__topbar-group--calc">
													<div class="vareoncalc-preview-v2__topbar-calc" id="vareoncalc-preview-v2-panel-calculator">
														<select id="vareoncalc-preview-v2-type" class="vareoncalc-preview-v2__topbar-select">
															<?php foreach ( $preview_calculators as $calc_type => $calc_data ) : ?>
																<option value="<?php echo esc_attr( $calc_type ); ?>">
																	<?php echo esc_html( $calc_data['title'] ?? $calc_type ); ?>
																</option>
															<?php endforeach; ?>
														</select>
													</div>
												</div>
												<div class="vareoncalc-preview-v2__topbar-group vareoncalc-preview-v2__topbar-group--width">
													<div class="vareoncalc-preview-v2__topbar-width" id="vareoncalc-preview-v2-panel-width">
														<div class="vareoncalc-preview-v2__width-pills" id="vareoncalc-preview-v2-width-group" role="group" aria-label="<?php esc_attr_e( 'Preview width', 'vareon-calculator-suite-lite' ); ?>">
														<button type="button" class="vareoncalc-preview-v2__width-pill vareoncalc-preview-v2__width-btn" data-width-preset="720px" aria-label="<?php esc_attr_e( 'Big (720 px)', 'vareon-calculator-suite-lite' ); ?>" title="<?php esc_attr_e( 'Big (720 px)', 'vareon-calculator-suite-lite' ); ?>"><?php esc_html_e( 'Big', 'vareon-calculator-suite-lite' ); ?></button>
														<button type="button" class="vareoncalc-preview-v2__width-pill vareoncalc-preview-v2__width-btn" data-width-preset="645px" aria-label="<?php esc_attr_e( 'Medium (645 px)', 'vareon-calculator-suite-lite' ); ?>" title="<?php esc_attr_e( 'Medium (645 px)', 'vareon-calculator-suite-lite' ); ?>"><?php esc_html_e( 'Medium', 'vareon-calculator-suite-lite' ); ?></button>
														<button type="button" class="vareoncalc-preview-v2__width-pill vareoncalc-preview-v2__width-btn" data-width-preset="520px" aria-label="<?php esc_attr_e( 'Small (520 px)', 'vareon-calculator-suite-lite' ); ?>" title="<?php esc_attr_e( 'Small (520 px)', 'vareon-calculator-suite-lite' ); ?>"><?php esc_html_e( 'Small', 'vareon-calculator-suite-lite' ); ?></button>
														<button type="button" class="vareoncalc-preview-v2__width-pill vareoncalc-preview-v2__width-pill--icon vareoncalc-preview-v2__width-btn" id="vareoncalc-preview-v2-width-custom-toggle" aria-label="<?php esc_attr_e( 'Custom width', 'vareon-calculator-suite-lite' ); ?>" title="<?php esc_attr_e( 'Custom width', 'vareon-calculator-suite-lite' ); ?>" aria-expanded="false" aria-controls="vareoncalc-preview-v2-width-custom-panel">
															<span class="vareoncalc-preview-v2__width-pill-label"><?php esc_html_e( 'Custom', 'vareon-calculator-suite-lite' ); ?></span>
														</button>
														</div>
														<div id="vareoncalc-preview-v2-width-custom-panel" class="vareoncalc-preview-v2__custom-popover vareoncalc-is-hidden" role="dialog" aria-label="<?php esc_attr_e( 'Custom preview width', 'vareon-calculator-suite-lite' ); ?>" aria-hidden="true" hidden>
															<label class="vareoncalc-preview-v2__custom-popover-field" for="vareoncalc-preview-v2-width-custom-input">
																<span class="vareoncalc-preview-v2__custom-popover-label"><?php esc_html_e( 'Width', 'vareon-calculator-suite-lite' ); ?></span>
																<span class="vareoncalc-preview-v2__custom-popover-input-wrap">
																	<input type="number" id="vareoncalc-preview-v2-width-custom-input" class="vareoncalc-preview-v2__custom-popover-input" min="300" max="2000" step="1" value="645">
																	<span class="vareoncalc-preview-v2__custom-popover-unit">px</span>
																</span>
															</label>
															<button type="button" class="vareoncalc-preview-v2__custom-popover-apply" id="vareoncalc-preview-v2-width-custom-apply"><?php esc_html_e( 'Apply', 'vareon-calculator-suite-lite' ); ?></button>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="vareoncalc-preview-v2__stage">
											<div class="vareoncalc-preview-v2__stage-overlay">
												<div class="vareoncalc-preview-v2__stage-status-wrap">
													<div class="vareoncalc-preview-v2__topbar-status vareoncalc-preview-v2__stage-status" id="vareoncalc-preview-v2-status" aria-live="polite" aria-label="<?php esc_attr_e( 'Preview width and zoom', 'vareon-calculator-suite-lite' ); ?>">
														<span class="vareoncalc-preview-v2__topbar-status-value" id="vareoncalc-preview-v2-status-width">645px</span>
														<span class="vareoncalc-preview-v2__topbar-status-separator" aria-hidden="true">&bull;</span>
														<span class="vareoncalc-preview-v2__topbar-status-value" id="vareoncalc-preview-v2-status-zoom">100%</span>
													</div>
												</div>
												<div id="vareoncalc-preview-v2-help" class="vareoncalc-preview-v2__help">
													<button type="button" id="vareoncalc-preview-v2-help-toggle" class="vareoncalc-preview-v2__help-toggle" aria-label="<?php esc_attr_e( 'Preview shortcuts and tips', 'vareon-calculator-suite-lite' ); ?>" aria-expanded="false" aria-controls="vareoncalc-preview-v2-help-popover" title="<?php esc_attr_e( 'Preview shortcuts and tips', 'vareon-calculator-suite-lite' ); ?>">
														<span class="vareoncalc-preview-v2__help-toggle-mark" aria-hidden="true">?</span>
													</button>
													<div id="vareoncalc-preview-v2-help-popover" class="vareoncalc-preview-v2__help-popover" role="note" aria-hidden="true" hidden>
														<p class="vareoncalc-preview-v2__help-title"><?php esc_html_e( 'Preview tips', 'vareon-calculator-suite-lite' ); ?></p>
														<ul class="vareoncalc-preview-v2__help-list">
															<li><strong><?php esc_html_e( 'Zoom:', 'vareon-calculator-suite-lite' ); ?></strong> <?php esc_html_e( 'Hold Ctrl on Windows or Command on Mac, then scroll.', 'vareon-calculator-suite-lite' ); ?></li>
															<li><strong><?php esc_html_e( 'Move:', 'vareon-calculator-suite-lite' ); ?></strong> <?php esc_html_e( 'Drag anywhere in the preview to pan around.', 'vareon-calculator-suite-lite' ); ?></li>
															<li><strong><?php esc_html_e( 'Close panels:', 'vareon-calculator-suite-lite' ); ?></strong> <kbd>Esc</kbd></li>
															<li><strong><?php esc_html_e( 'Lost it?', 'vareon-calculator-suite-lite' ); ?></strong> <?php esc_html_e( 'Use Reset to bring the calculator back into view.', 'vareon-calculator-suite-lite' ); ?></li>
														</ul>
													</div>
												</div>
											</div>
											<div class="vareoncalc-preview-v2__stage-dock" id="vareoncalc-preview-v2-stage-dock">
												<span class="vareoncalc-preview-v2__stage-dock-hotzone" id="vareoncalc-preview-v2-stage-dock-hotzone" aria-hidden="true"></span>
												<button type="button" class="vareoncalc-preview-v2__stage-dock-toggle" id="vareoncalc-preview-v2-stage-dock-toggle" aria-expanded="false" aria-controls="vareoncalc-preview-v2-stage-dock-panel" aria-label="<?php esc_attr_e( 'Preview tools', 'vareon-calculator-suite-lite' ); ?>">
													<span class="vareoncalc-preview-v2__stage-dock-toggle-icon" aria-hidden="true">
														<svg viewBox="0 0 24 24" focusable="false" aria-hidden="true">
															<path d="M16.5 16.5 7.5 7.5"></path>
															<path d="M15.75 7.5H7.5v8.25"></path>
														</svg>
													</span>
												</button>
												<div class="vareoncalc-preview-v2__stage-dock-panel" id="vareoncalc-preview-v2-stage-dock-panel" role="group" aria-label="<?php esc_attr_e( 'Preview tools', 'vareon-calculator-suite-lite' ); ?>" aria-hidden="true">
													<div class="vareoncalc-preview-v2__stage-dock-section vareoncalc-preview-v2__stage-dock-section--zoom" role="group" aria-label="<?php esc_attr_e( 'Preview zoom', 'vareon-calculator-suite-lite' ); ?>">
														<span class="vareoncalc-preview-v2__stage-dock-section-label"><?php esc_html_e( 'Zoom', 'vareon-calculator-suite-lite' ); ?></span>
														<div class="vareoncalc-preview-v2__zoom-controls" role="group" aria-label="<?php esc_attr_e( 'Preview zoom', 'vareon-calculator-suite-lite' ); ?>">
															<button type="button" class="vareoncalc-preview-v2__dock-btn vareoncalc-preview-v2__dock-btn--sq" id="vareoncalc-preview-v2-zoom-out" aria-label="<?php esc_attr_e( 'Zoom out', 'vareon-calculator-suite-lite' ); ?>">
																<span class="dashicons dashicons-minus" aria-hidden="true"></span>
															</button>
															<span class="vareoncalc-preview-v2__dock-zoom-readout" id="vareoncalc-preview-v2-zoom-value">100%</span>
															<button type="button" class="vareoncalc-preview-v2__dock-btn vareoncalc-preview-v2__dock-btn--sq" id="vareoncalc-preview-v2-zoom-in" aria-label="<?php esc_attr_e( 'Zoom in', 'vareon-calculator-suite-lite' ); ?>">
																<span class="dashicons dashicons-plus-alt2" aria-hidden="true"></span>
															</button>
														</div>
													</div>
													<div class="vareoncalc-preview-v2__stage-dock-section vareoncalc-preview-v2__stage-dock-section--actions" role="group" aria-label="<?php esc_attr_e( 'Preview actions', 'vareon-calculator-suite-lite' ); ?>">
														<span class="vareoncalc-preview-v2__stage-dock-section-label"><?php esc_html_e( 'Actions', 'vareon-calculator-suite-lite' ); ?></span>
														<div class="vareoncalc-preview-v2__action-buttons" role="group" aria-label="<?php esc_attr_e( 'Preview actions', 'vareon-calculator-suite-lite' ); ?>">
															<button type="button" class="vareoncalc-preview-v2__dock-btn" id="vareoncalc-preview-v2-reset" aria-label="<?php esc_attr_e( 'Reset view', 'vareon-calculator-suite-lite' ); ?>" title="<?php esc_attr_e( 'Reset view', 'vareon-calculator-suite-lite' ); ?>">
																<span class="dashicons dashicons-image-rotate" aria-hidden="true"></span>
																<span class="vareoncalc-preview-v2__dock-label"><?php esc_html_e( 'Reset', 'vareon-calculator-suite-lite' ); ?></span>
															</button>
															<button type="button" class="vareoncalc-preview-v2__dock-btn" id="vareoncalc-preview-v2-retry" aria-label="<?php esc_attr_e( 'Retry preview', 'vareon-calculator-suite-lite' ); ?>" title="<?php esc_attr_e( 'Retry preview', 'vareon-calculator-suite-lite' ); ?>">
																<span class="dashicons dashicons-update" aria-hidden="true"></span>
																<span class="vareoncalc-preview-v2__dock-label"><?php esc_html_e( 'Retry', 'vareon-calculator-suite-lite' ); ?></span>
															</button>
														</div>
													</div>
												</div>
											</div>
											<div id="vareoncalc-preview-v2-viewport" class="vareoncalc-preview-v2__viewport">
												<div class="vareoncalc-preview-v2__frame-guide" aria-hidden="true"></div>
												<div id="vareoncalc-preview-v2-frame-shell" class="vareoncalc-preview-v2__frame-shell">
													<div id="vareoncalc-preview-v2-frame-host" class="vareoncalc-preview-v2__frame-host"></div>
												</div>
												<div id="vareoncalc-preview-v2-loading" class="vareoncalc-preview-v2__loading vareoncalc-is-hidden" aria-live="polite" aria-busy="false" hidden>
													<div class="vareoncalc-preview-v2__loading-spinner" aria-hidden="true"></div>
													<div class="vareoncalc-preview-v2__loading-skeleton" aria-hidden="true">
														<span class="vareoncalc-preview-v2__loading-line vareoncalc-preview-v2__loading-line--lg"></span>
														<span class="vareoncalc-preview-v2__loading-line vareoncalc-preview-v2__loading-line--md"></span>
														<span class="vareoncalc-preview-v2__loading-line vareoncalc-preview-v2__loading-line--sm"></span>
														<span class="vareoncalc-preview-v2__loading-line vareoncalc-preview-v2__loading-line--md"></span>
													</div>
													<span class="vareoncalc-preview-v2__loading-text"><?php esc_html_e( 'Loading preview...', 'vareon-calculator-suite-lite' ); ?></span>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				<div id="tab-docs" class="vareoncalc-tab-content <?php echo esc_attr( 'docs' === $active_tab ? 'active' : '' ); ?>">
						<?php vareoncalc_render_docs_tab_lite(); ?>
					</div>

					<div id="vareoncalc-settings-submit" class="vareoncalc-settings-submit <?php echo esc_attr( in_array( $active_tab, array( 'docs', 'pro-waitlist' ), true ) ? 'vareoncalc-is-hidden' : '' ); ?>">
						<?php submit_button( __( 'Save All Settings', 'vareon-calculator-suite-lite' ) ); ?>
					</div>
				</form>

				<div id="tab-pro-waitlist" class="vareoncalc-tab-content <?php echo esc_attr( 'pro-waitlist' === $active_tab ? 'active' : '' ); ?>">
					<?php
					if ( function_exists( 'vareoncalc_render_pro_waitlist_tab' ) ) {
						vareoncalc_render_pro_waitlist_tab();
					}
					?>
				</div>

				<div id="vareoncalc-settings-secondary" class="vareoncalc-settings-secondary <?php echo esc_attr( 'pro-waitlist' === $active_tab ? 'vareoncalc-is-hidden' : '' ); ?>">
					<div class="docs-reset-section">
						<h3><?php esc_html_e( 'Reset to Defaults', 'vareon-calculator-suite-lite' ); ?></h3>
						<p><?php esc_html_e( 'This will restore all settings to their default values.', 'vareon-calculator-suite-lite' ); ?></p>
						<form method="post" action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>">
							<input type="hidden" name="action" value="vareoncalc_reset_settings">
							<?php wp_nonce_field( 'vareoncalc_reset', 'vareoncalc_reset_nonce' ); ?>
							<button type="submit" class="button" onclick="return confirm('<?php echo esc_js( __( 'Are you sure you want to reset all settings to defaults? This cannot be undone.', 'vareon-calculator-suite-lite' ) ); ?>');"><?php esc_html_e( 'Reset All Settings', 'vareon-calculator-suite-lite' ); ?></button>
						</form>
					</div>

					<?php
					if ( function_exists( 'vareoncalc_render_footer_review_cta' ) ) {
						// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Internal review CTA markup is fully escaped within the renderer.
						echo vareoncalc_render_footer_review_cta();
					}
					?>

					<div class="docs-footer">
						<div class="docs-footer-links">
							<a href="<?php echo esc_url( 'https://vareon.dev/docs' ); ?>" target="_blank" rel="noopener noreferrer" class="docs-footer-link">
								<span class="dashicons dashicons-book-alt"></span>
								<span><?php esc_html_e( 'Documentation', 'vareon-calculator-suite-lite' ); ?></span>
							</a>
							<a href="<?php echo esc_url( 'https://wordpress.org/support/plugin/vareon-calculator-suite-lite/' ); ?>" target="_blank" rel="noopener noreferrer" class="docs-footer-link">
								<span class="dashicons dashicons-email-alt"></span>
								<span><?php esc_html_e( 'Contact Support', 'vareon-calculator-suite-lite' ); ?></span>
							</a>
							<?php
							// Restart onboarding button.
							if ( function_exists( 'vareoncalc_render_restart_onboarding_button' ) ) {
								echo wp_kses_post( vareoncalc_render_restart_onboarding_button() );
							}
							?>
						</div>
						<div class="docs-footer-version">
							<?php
							printf(
								/* translators: %s: plugin version */
								esc_html__( 'Vareon Calculator Suite Lite v%s', 'vareon-calculator-suite-lite' ),
								esc_html( VAREONCALC_VER )
							);
							?>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<?php
	$content = ob_get_clean();

	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Settings page markup is escaped inline before buffering.
	echo $content;
}
