<?php
/**
 * PRO Labels Customization mock tab (disabled preview).
 *
 * @package    ultimate-pregnancy-ovulation-calculator
 * @subpackage ULPC/admin/partials
 */

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

<section id="pro-labels-settings" class="ulpc-settings-section block-disabled">

	<h2 class="ulpc-settings-section-title">
		<?php esc_html_e( 'Labels Customization', 'ultimate-pregnancy-ovulation-calculator' ); ?>
		<span class="ulpc-settings-pro">PRO</span>
	</h2>

	<div class="ulpc-pro-upgrade-cta">
		<span class="ulpc-pro-upgrade-cta-text"><?php echo wp_kses_post( __( 'Unlock <strong>label customization</strong> with the PRO version', 'ultimate-pregnancy-ovulation-calculator' ) ); ?></span>
		<a href="https://wp-pregnancy.com/?utm_source=free-plugin&utm_medium=labels-tab&utm_campaign=upgrade" target="_blank" class="ulpc-pro-upgrade-cta-button"><?php esc_html_e( 'Upgrade to PRO', 'ultimate-pregnancy-ovulation-calculator' ); ?></a>
	</div>

	<div class="ulpc-settings-group">
		<div class="ulpc-settings-group-title">
			<h3><?php esc_html_e( 'Calculator Fields Labels', 'ultimate-pregnancy-ovulation-calculator' ); ?></h3>
		</div>
		<div class="ulpc-settings-group-content">
			<p class="ulpc-settings-description"><?php esc_html_e( 'Customize all field labels shown in the calculator form.', 'ultimate-pregnancy-ovulation-calculator' ); ?></p>
			<div style="display:flex;gap:10px;flex-direction:column;max-width:500px;">
				<input type="text" disabled placeholder="Last Menstrual Period" value="Last Menstrual Period">
				<input type="text" disabled placeholder="Due Date" value="Due Date">
				<input type="text" disabled placeholder="Cycle Length" value="Average Cycle Length">
			</div>
		</div>
	</div>

	<div class="ulpc-settings-group">
		<div class="ulpc-settings-group-title">
			<h3><?php esc_html_e( 'Baby Sizes Labels', 'ultimate-pregnancy-ovulation-calculator' ); ?></h3>
		</div>
		<div class="ulpc-settings-group-content">
			<p class="ulpc-settings-description"><?php esc_html_e( 'Customize baby size comparisons for each week of pregnancy.', 'ultimate-pregnancy-ovulation-calculator' ); ?></p>
			<div style="display:flex;gap:10px;flex-direction:column;max-width:500px;">
				<input type="text" disabled placeholder="Week 8 — Raspberry" value="Week 8 — Raspberry">
				<input type="text" disabled placeholder="Week 12 — Lime" value="Week 12 — Lime">
				<input type="text" disabled placeholder="Week 20 — Banana" value="Week 20 — Banana">
			</div>
		</div>
	</div>

	<div class="ulpc-settings-group">
		<div class="ulpc-settings-group-title">
			<h3><?php esc_html_e( 'Datepicker Labels', 'ultimate-pregnancy-ovulation-calculator' ); ?></h3>
		</div>
		<div class="ulpc-settings-group-content">
			<p class="ulpc-settings-description"><?php esc_html_e( 'Translate or customize day and month names in the datepicker.', 'ultimate-pregnancy-ovulation-calculator' ); ?></p>
			<div style="display:flex;gap:10px;flex-direction:column;max-width:500px;">
				<input type="text" disabled placeholder="January" value="January">
				<input type="text" disabled placeholder="February" value="February">
			</div>
		</div>
	</div>

	<div class="ulpc-settings-group">
		<div class="ulpc-settings-group-title">
			<h3><?php esc_html_e( 'Messages Labels', 'ultimate-pregnancy-ovulation-calculator' ); ?></h3>
		</div>
		<div class="ulpc-settings-group-content">
			<p class="ulpc-settings-description"><?php esc_html_e( 'Customize success, error, and informational messages shown to users.', 'ultimate-pregnancy-ovulation-calculator' ); ?></p>
			<div style="display:flex;gap:10px;flex-direction:column;max-width:500px;">
				<input type="text" disabled placeholder="Please select a date" value="Please select a date">
				<input type="text" disabled placeholder="Your results" value="Your results">
			</div>
		</div>
	</div>

</section>
