<?php
/**
 * Frontend display settings tab.
 *
 * @package Lucrativeit_Subscription_Recurring_Billing
 *
 * @var LUCRSURE_Settings $settings Settings.
 */

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

// phpcs:disable WordPress.NamingConventions.PrefixAllGlobals.NonPrefixedVariableFound -- Included template; variables are local to the including scope.

$frontend    = lucrsure_frontend_settings( $settings->all() );
$appearance  = lucrsure_frontend_appearance( $frontend );
$branches    = ( new LUCRSURE_Branch_Repository() )->active();
$selected    = array_map( 'absint', (array) $frontend['locations_branch_ids'] );
$faq_items   = lucrsure_normalize_faq_items( $frontend['faq_items'] );
$hero_image  = lucrsure_hero_image_url( (int) $frontend['hero_image_id'] );
$post_url    = admin_url( 'admin-post.php' );

if ( empty( $faq_items ) ) {
	$faq_items = array(
		array( 'question' => '', 'answer' => '' ),
	);
}

$frontend_tabs       = array(
	'hero'           => __( 'Hero', 'lucrativeit-subscription-recurring-billing' ),
	'locations'      => __( 'Locations', 'lucrativeit-subscription-recurring-billing' ),
	'plans'          => __( 'Plans', 'lucrativeit-subscription-recurring-billing' ),
	'faq'            => __( 'FAQ', 'lucrativeit-subscription-recurring-billing' ),
	'appearance'     => __( 'Appearance', 'lucrativeit-subscription-recurring-billing' ),
	'shortcode_menu' => __( 'Shortcode & Menu', 'lucrativeit-subscription-recurring-billing' ),
);
$default_frontend_tab = 'hero';
$section_anchors      = lucrsure_frontend_section_anchors();
$sample_page_url      = '';
$sample_page_id       = 0;
$plan_pages           = LUCRSURE_Plan_Pages::get_map();
if ( ! empty( $plan_pages ) ) {
	foreach ( $plan_pages as $slug => $page_id ) {
		if ( '__hub__' === $slug ) {
			continue;
		}
		$sample_page_id  = (int) $page_id;
		$sample_page_url = get_permalink( $sample_page_id );
		if ( $sample_page_url ) {
			break;
		}
	}
}
if ( ! $sample_page_url ) {
	$sample_page_url = home_url( '/' );
}
$sample_is_homepage = $sample_page_id > 0 && (int) get_option( 'page_on_front' ) === $sample_page_id;
?>

<div class="lucrsure-card lucrsure-form-card">
	<form method="post" action="<?php echo esc_url( $post_url ); ?>" class="lucrsure-frontend-settings-form">
		<?php wp_nonce_field( 'lucrsure_save_settings' ); ?>
		<input type="hidden" name="action" value="lucrsure_save_settings" />
		<input type="hidden" name="tab" value="frontend" />

		<nav class="lucrsure-frontend-tabs" role="tablist" aria-label="<?php esc_attr_e( 'Frontend settings sections', 'lucrativeit-subscription-recurring-billing' ); ?>">
			<?php foreach ( $frontend_tabs as $key => $label ) : ?>
				<button
					type="button"
					class="lucrsure-frontend-tab<?php echo $default_frontend_tab === $key ? ' is-active' : ''; ?>"
					role="tab"
					data-tab="<?php echo esc_attr( $key ); ?>"
					id="lucrsure-frontend-tab-<?php echo esc_attr( $key ); ?>"
					aria-controls="lucrsure-frontend-panel-<?php echo esc_attr( $key ); ?>"
					aria-selected="<?php echo $default_frontend_tab === $key ? 'true' : 'false'; ?>"
				><?php echo esc_html( $label ); ?></button>
			<?php endforeach; ?>
		</nav>

		<div
			class="lucrsure-frontend-tab-panel<?php echo 'hero' === $default_frontend_tab ? ' is-active' : ''; ?>"
			role="tabpanel"
			id="lucrsure-frontend-panel-hero"
			data-panel="hero"
			aria-labelledby="lucrsure-frontend-tab-hero"
		>
			<h2><?php esc_html_e( 'Hero Section', 'lucrativeit-subscription-recurring-billing' ); ?></h2>
			<p class="lucrsure-section-anchor-hint">
				<?php esc_html_e( 'Menu anchor ID:', 'lucrativeit-subscription-recurring-billing' ); ?>
				<code>#<?php echo esc_html( lucrsure_frontend_section_id( 'hero' ) ); ?></code>
			</p>
			<p class="lucrsure-muted"><?php esc_html_e( 'Large banner shown at the top of [lucrsure_locations_plans] pages.', 'lucrativeit-subscription-recurring-billing' ); ?></p>

			<div class="lucrsure-form-inline lucrsure-mt-16">
				<label class="lucrsure-check">
					<input type="checkbox" name="hero_enabled" value="1" <?php checked( ! empty( $frontend['hero_enabled'] ) ); ?> />
					<?php esc_html_e( 'Show hero section', 'lucrativeit-subscription-recurring-billing' ); ?>
				</label>
			</div>

			<div class="lucrsure-form-row">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Hero Heading', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="text" name="hero_heading" value="<?php echo esc_attr( $frontend['hero_heading'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Button Text', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="text" name="hero_button_text" value="<?php echo esc_attr( $frontend['hero_button_text'] ); ?>" />
				</div>
			</div>

			<div class="lucrsure-field">
				<label><?php esc_html_e( 'Hero Subtitle', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<textarea name="hero_subtitle" rows="3"><?php echo esc_textarea( $frontend['hero_subtitle'] ); ?></textarea>
			</div>

			<div class="lucrsure-form-row">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Button URL', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="url" name="hero_button_url" value="<?php echo esc_attr( $frontend['hero_button_url'] ); ?>" placeholder="#lucrsure-plans" />
					<p class="lucrsure-muted"><?php esc_html_e( 'Leave empty to scroll to the plans section.', 'lucrativeit-subscription-recurring-billing' ); ?></p>
				</div>
			</div>

			<div class="lucrsure-branding-logo-field">
				<label><?php esc_html_e( 'Hero Image', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<div class="lucrsure-branding-logo-row">
					<div class="lucrsure-branding-logo-preview lucrsure-hero-image-preview">
						<?php if ( $hero_image ) : ?>
							<img src="<?php echo esc_url( $hero_image ); ?>" alt="" />
						<?php else : ?>
							<span class="lucrsure-muted"><?php esc_html_e( 'No image selected', 'lucrativeit-subscription-recurring-billing' ); ?></span>
						<?php endif; ?>
					</div>
					<div class="lucrsure-branding-logo-actions">
						<input type="hidden" name="hero_image_id" id="lucrsure-hero-image-id" value="<?php echo esc_attr( (string) (int) $frontend['hero_image_id'] ); ?>" />
						<button type="button" class="lucrsure-btn lucrsure-btn-light lucrsure-hero-image-upload"><?php esc_html_e( 'Select Image', 'lucrativeit-subscription-recurring-billing' ); ?></button>
						<button type="button" class="lucrsure-btn lucrsure-btn-light lucrsure-hero-image-remove<?php echo $hero_image ? '' : ' is-hidden'; ?>"><?php esc_html_e( 'Remove', 'lucrativeit-subscription-recurring-billing' ); ?></button>
					</div>
				</div>
			</div>
		</div>

		<div
			class="lucrsure-frontend-tab-panel"
			role="tabpanel"
			id="lucrsure-frontend-panel-locations"
			data-panel="locations"
			aria-labelledby="lucrsure-frontend-tab-locations"
		>
			<h2><?php esc_html_e( 'Locations Section', 'lucrativeit-subscription-recurring-billing' ); ?></h2>
			<p class="lucrsure-section-anchor-hint">
				<?php esc_html_e( 'Menu anchor ID:', 'lucrativeit-subscription-recurring-billing' ); ?>
				<code>#<?php echo esc_html( lucrsure_frontend_section_id( 'locations' ) ); ?></code>
			</p>
			<p class="lucrsure-muted"><?php esc_html_e( 'Branch cards shown between the hero and subscription packages.', 'lucrativeit-subscription-recurring-billing' ); ?></p>

			<div class="lucrsure-form-inline lucrsure-mt-16">
				<label class="lucrsure-check">
					<input type="checkbox" name="locations_enabled" value="1" <?php checked( ! empty( $frontend['locations_enabled'] ) ); ?> />
					<?php esc_html_e( 'Show locations section', 'lucrativeit-subscription-recurring-billing' ); ?>
				</label>
			</div>

			<div class="lucrsure-form-row">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Section Heading', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="text" name="locations_heading" value="<?php echo esc_attr( $frontend['locations_heading'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Section Subtitle', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="text" name="locations_subtitle" value="<?php echo esc_attr( $frontend['locations_subtitle'] ); ?>" />
				</div>
			</div>

			<div class="lucrsure-field">
				<label><?php esc_html_e( 'Branches to Display', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<p class="lucrsure-muted"><?php esc_html_e( 'Leave all unchecked to show every active branch.', 'lucrativeit-subscription-recurring-billing' ); ?></p>
				<?php if ( empty( $branches ) ) : ?>
					<p class="lucrsure-muted"><?php esc_html_e( 'No active branches yet. Add branches first.', 'lucrativeit-subscription-recurring-billing' ); ?></p>
				<?php else : ?>
					<div class="lucrsure-toggle-grid">
						<?php foreach ( $branches as $branch ) : ?>
							<label class="lucrsure-toggle-box">
								<input type="checkbox" name="locations_branch_ids[]" value="<?php echo esc_attr( (string) $branch['id'] ); ?>" <?php checked( in_array( (int) $branch['id'], $selected, true ) ); ?> />
								<?php echo esc_html( $branch['name'] ); ?>
								<?php if ( ! empty( $branch['region'] ) ) : ?>
									<span class="lucrsure-muted"> — <?php echo esc_html( $branch['region'] ); ?></span>
								<?php endif; ?>
							</label>
						<?php endforeach; ?>
					</div>
				<?php endif; ?>
			</div>
		</div>

		<div
			class="lucrsure-frontend-tab-panel"
			role="tabpanel"
			id="lucrsure-frontend-panel-plans"
			data-panel="plans"
			aria-labelledby="lucrsure-frontend-tab-plans"
		>
			<h2><?php esc_html_e( 'Plans Section', 'lucrativeit-subscription-recurring-billing' ); ?></h2>
			<p class="lucrsure-section-anchor-hint">
				<?php esc_html_e( 'Menu anchor ID:', 'lucrativeit-subscription-recurring-billing' ); ?>
				<code>#<?php echo esc_html( lucrsure_frontend_section_id( 'plans' ) ); ?></code>
			</p>
			<p class="lucrsure-muted"><?php esc_html_e( 'Click a layout preview to choose how plans appear on [lucrsure_plans] and [lucrsure_locations_plans] pages.', 'lucrativeit-subscription-recurring-billing' ); ?></p>

			<div class="lucrsure-field lucrsure-mt-16">
				<label><?php esc_html_e( 'Plans Template', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<div class="lucrsure-template-picker" role="radiogroup" aria-label="<?php esc_attr_e( 'Plans template', 'lucrativeit-subscription-recurring-billing' ); ?>">
					<label class="lucrsure-template-option<?php echo ( 'list' === $frontend['plans_template'] ) ? ' is-selected' : ''; ?>">
						<input type="radio" name="plans_template" value="list" <?php checked( $frontend['plans_template'], 'list' ); ?> />
						<span class="lucrsure-template-preview lucrsure-template-preview--list" aria-hidden="true">
							<span class="lucrsure-template-preview-tabs">
								<span class="is-on"></span>
								<span></span>
							</span>
							<span class="lucrsure-template-preview-row">
								<span class="lucrsure-template-preview-copy">
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
								</span>
								<span class="lucrsure-template-preview-cta"></span>
							</span>
							<span class="lucrsure-template-preview-row is-featured">
								<span class="lucrsure-template-preview-copy">
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
								</span>
								<span class="lucrsure-template-preview-cta"></span>
							</span>
							<span class="lucrsure-template-preview-row">
								<span class="lucrsure-template-preview-copy">
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
								</span>
								<span class="lucrsure-template-preview-cta"></span>
							</span>
						</span>
						<span class="lucrsure-template-option-meta">
							<span class="lucrsure-template-option-label" data-selected-label="<?php echo esc_attr__( 'Selected', 'lucrativeit-subscription-recurring-billing' ); ?>"><?php esc_html_e( 'List', 'lucrativeit-subscription-recurring-billing' ); ?></span>
							<span class="lucrsure-muted"><?php esc_html_e( 'Stacked plan rows with billing period tabs.', 'lucrativeit-subscription-recurring-billing' ); ?></span>
						</span>
					</label>
					<label class="lucrsure-template-option<?php echo ( 'cards' === $frontend['plans_template'] ) ? ' is-selected' : ''; ?>">
						<input type="radio" name="plans_template" value="cards" <?php checked( $frontend['plans_template'], 'cards' ); ?> />
						<span class="lucrsure-template-preview lucrsure-template-preview--cards" aria-hidden="true">
							<span class="lucrsure-template-preview-tabs">
								<span class="is-on"></span>
								<span></span>
							</span>
							<span class="lucrsure-template-preview-cards-row">
								<span class="lucrsure-template-preview-card-col">
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line"></span>
									<span class="lucrsure-template-preview-cta lucrsure-template-preview-cta--block"></span>
								</span>
								<span class="lucrsure-template-preview-card-col is-featured">
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line"></span>
									<span class="lucrsure-template-preview-cta lucrsure-template-preview-cta--block"></span>
								</span>
								<span class="lucrsure-template-preview-card-col">
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
									<span class="lucrsure-template-preview-cta lucrsure-template-preview-cta--block"></span>
								</span>
							</span>
						</span>
						<span class="lucrsure-template-option-meta">
							<span class="lucrsure-template-option-label" data-selected-label="<?php echo esc_attr__( 'Selected', 'lucrativeit-subscription-recurring-billing' ); ?>"><?php esc_html_e( 'Cards', 'lucrativeit-subscription-recurring-billing' ); ?></span>
							<span class="lucrsure-muted"><?php esc_html_e( 'Pricing cards in a row with billing period tabs.', 'lucrativeit-subscription-recurring-billing' ); ?></span>
						</span>
					</label>
					<label class="lucrsure-template-option<?php echo ( 'grid' === $frontend['plans_template'] ) ? ' is-selected' : ''; ?>">
						<input type="radio" name="plans_template" value="grid" <?php checked( $frontend['plans_template'], 'grid' ); ?> />
						<span class="lucrsure-template-preview lucrsure-template-preview--grid" aria-hidden="true">
							<span class="lucrsure-template-preview-toolbar">
								<span class="lucrsure-template-preview-count"></span>
								<span class="lucrsure-template-preview-select"></span>
								<span class="lucrsure-template-preview-select"></span>
							</span>
							<span class="lucrsure-template-preview-cards">
								<span class="lucrsure-template-preview-card">
									<span class="lucrsure-template-preview-photo"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
								</span>
								<span class="lucrsure-template-preview-card">
									<span class="lucrsure-template-preview-photo"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
								</span>
								<span class="lucrsure-template-preview-card">
									<span class="lucrsure-template-preview-photo"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
								</span>
								<span class="lucrsure-template-preview-card">
									<span class="lucrsure-template-preview-photo"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--title"></span>
									<span class="lucrsure-template-preview-line lucrsure-template-preview-line--short"></span>
								</span>
							</span>
						</span>
						<span class="lucrsure-template-option-meta">
							<span class="lucrsure-template-option-label" data-selected-label="<?php echo esc_attr__( 'Selected', 'lucrativeit-subscription-recurring-billing' ); ?>"><?php esc_html_e( 'Grid', 'lucrativeit-subscription-recurring-billing' ); ?></span>
							<span class="lucrsure-muted"><?php esc_html_e( 'Product-style cards with images and branch / type filters.', 'lucrativeit-subscription-recurring-billing' ); ?></span>
						</span>
					</label>
				</div>
			</div>

			<div class="lucrsure-form-row">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Plans Title', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="text" name="plans_heading" value="<?php echo esc_attr( $frontend['plans_heading'] ); ?>" />
				</div>
			</div>

			<div class="lucrsure-field">
				<label><?php esc_html_e( 'Plans Subtitle', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<textarea name="plans_subtitle" rows="3"><?php echo esc_textarea( $frontend['plans_subtitle'] ); ?></textarea>
			</div>
		</div>

		<div
			class="lucrsure-frontend-tab-panel"
			role="tabpanel"
			id="lucrsure-frontend-panel-faq"
			data-panel="faq"
			aria-labelledby="lucrsure-frontend-tab-faq"
		>
			<h2><?php esc_html_e( 'FAQ Section', 'lucrativeit-subscription-recurring-billing' ); ?></h2>
			<p class="lucrsure-section-anchor-hint">
				<?php esc_html_e( 'Menu anchor ID:', 'lucrativeit-subscription-recurring-billing' ); ?>
				<code>#<?php echo esc_html( lucrsure_frontend_section_id( 'faq' ) ); ?></code>
			</p>
			<p class="lucrsure-muted"><?php esc_html_e( 'Accordion FAQ shown at the bottom of [lucrsure_locations_plans] pages.', 'lucrativeit-subscription-recurring-billing' ); ?></p>

			<div class="lucrsure-form-inline lucrsure-mt-16">
				<label class="lucrsure-check">
					<input type="checkbox" name="faq_enabled" value="1" <?php checked( ! empty( $frontend['faq_enabled'] ) ); ?> />
					<?php esc_html_e( 'Show FAQ section', 'lucrativeit-subscription-recurring-billing' ); ?>
				</label>
			</div>

			<div class="lucrsure-form-row">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'FAQ Heading', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="text" name="faq_heading" value="<?php echo esc_attr( $frontend['faq_heading'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'FAQ Subtitle', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="text" name="faq_subtitle" value="<?php echo esc_attr( $frontend['faq_subtitle'] ); ?>" />
				</div>
			</div>

			<div class="lucrsure-field">
				<label><?php esc_html_e( 'Questions & Answers', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<div class="lucrsure-faq-repeater" id="lucrsure-faq-repeater">
					<?php foreach ( $faq_items as $index => $item ) : ?>
						<?php
						$faq_row_label = '' !== $item['question']
							? $item['question']
							: sprintf(
								/* translators: %d: FAQ item number */
								__( 'FAQ Item %d', 'lucrativeit-subscription-recurring-billing' ),
								$index + 1
							);
						$is_open = 0 === $index;
						?>
						<div class="lucrsure-faq-row<?php echo $is_open ? ' is-open' : ''; ?>">
							<button type="button" class="lucrsure-faq-row-toggle" aria-expanded="<?php echo $is_open ? 'true' : 'false'; ?>">
								<span class="lucrsure-faq-row-title"><?php echo esc_html( $faq_row_label ); ?></span>
								<span class="lucrsure-faq-row-chevron" aria-hidden="true"></span>
							</button>
							<div class="lucrsure-faq-row-body"<?php echo $is_open ? '' : ' hidden'; ?>>
								<div class="lucrsure-field">
									<label><?php esc_html_e( 'Question', 'lucrativeit-subscription-recurring-billing' ); ?></label>
									<input type="text" name="faq_question[]" value="<?php echo esc_attr( $item['question'] ); ?>" />
								</div>
								<div class="lucrsure-field">
									<label><?php esc_html_e( 'Answer', 'lucrativeit-subscription-recurring-billing' ); ?></label>
									<textarea name="faq_answer[]" rows="3"><?php echo esc_textarea( $item['answer'] ); ?></textarea>
								</div>
								<button type="button" class="lucrsure-btn lucrsure-btn-light lucrsure-faq-remove"><?php esc_html_e( 'Remove', 'lucrativeit-subscription-recurring-billing' ); ?></button>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
				<button type="button" class="lucrsure-btn lucrsure-btn-light" id="lucrsure-faq-add"><?php esc_html_e( 'Add FAQ Item', 'lucrativeit-subscription-recurring-billing' ); ?></button>
			</div>
		</div>

		<div
			class="lucrsure-frontend-tab-panel"
			role="tabpanel"
			id="lucrsure-frontend-panel-appearance"
			data-panel="appearance"
			aria-labelledby="lucrsure-frontend-tab-appearance"
		>
			<h2><?php esc_html_e( 'Appearance & Colors', 'lucrativeit-subscription-recurring-billing' ); ?></h2>
			<p class="lucrsure-muted"><?php esc_html_e( 'Customize fonts and colors for hero, plans, buttons, and badges on the frontend.', 'lucrativeit-subscription-recurring-billing' ); ?></p>

			<div class="lucrsure-field lucrsure-mt-16">
				<label><?php esc_html_e( 'Font Family', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<input type="text" name="appearance_font_family" value="<?php echo esc_attr( $appearance['font_family'] ); ?>" placeholder="Inter, -apple-system, BlinkMacSystemFont, sans-serif" />
				<p class="lucrsure-muted"><?php esc_html_e( 'Leave empty to use the theme default system font stack.', 'lucrativeit-subscription-recurring-billing' ); ?></p>
			</div>

			<div class="lucrsure-form-row lucrsure-branding-colors">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Text Color', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_text_color" value="<?php echo esc_attr( $appearance['text_color'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Muted Text', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_muted_color" value="<?php echo esc_attr( $appearance['muted_color'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Border Color', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_border_color" value="<?php echo esc_attr( $appearance['border_color'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Checkmark Color', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_check_color" value="<?php echo esc_attr( $appearance['check_color'] ); ?>" />
				</div>
			</div>

			<h3 class="lucrsure-frontend-subheading"><?php esc_html_e( 'Buttons & Popular Plan', 'lucrativeit-subscription-recurring-billing' ); ?></h3>
			<div class="lucrsure-form-row lucrsure-branding-colors">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Button / Accent Color', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_accent_color" value="<?php echo esc_attr( $appearance['accent_color'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Button Text Color', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_accent_text_color" value="<?php echo esc_attr( $appearance['accent_text_color'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Popular Label Background', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_popular_badge_bg" value="<?php echo esc_attr( $appearance['popular_badge_bg'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Popular Label Text', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_popular_badge_text" value="<?php echo esc_attr( $appearance['popular_badge_text'] ); ?>" />
				</div>
			</div>

			<h3 class="lucrsure-frontend-subheading"><?php esc_html_e( 'Hero Section Colors', 'lucrativeit-subscription-recurring-billing' ); ?></h3>
			<div class="lucrsure-form-row lucrsure-branding-colors">
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Hero Title Color', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_hero_title_color" value="<?php echo esc_attr( $appearance['hero_title_color'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Hero Subtitle Color', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_hero_subtitle_color" value="<?php echo esc_attr( $appearance['hero_subtitle_color'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Hero Button Background', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_hero_button_bg" value="<?php echo esc_attr( $appearance['hero_button_bg'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Hero Button Text', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_hero_button_text" value="<?php echo esc_attr( $appearance['hero_button_text'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Hero Gradient Start', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_hero_gradient_start" value="<?php echo esc_attr( $appearance['hero_gradient_start'] ); ?>" />
				</div>
				<div class="lucrsure-field">
					<label><?php esc_html_e( 'Hero Gradient End', 'lucrativeit-subscription-recurring-billing' ); ?></label>
					<input type="color" name="appearance_hero_gradient_end" value="<?php echo esc_attr( $appearance['hero_gradient_end'] ); ?>" />
				</div>
			</div>
		</div>

		<div
			class="lucrsure-frontend-tab-panel"
			role="tabpanel"
			id="lucrsure-frontend-panel-shortcode_menu"
			data-panel="shortcode_menu"
			aria-labelledby="lucrsure-frontend-tab-shortcode_menu"
		>
			<h2><?php esc_html_e( 'Shortcode & Menu', 'lucrativeit-subscription-recurring-billing' ); ?></h2>
			<p class="lucrsure-muted"><?php esc_html_e( 'Reference shortcodes for displaying frontend sections, and anchor links for building a menu.', 'lucrativeit-subscription-recurring-billing' ); ?></p>

			<div class="lucrsure-info-bar">
				<strong><?php esc_html_e( 'Shortcodes', 'lucrativeit-subscription-recurring-billing' ); ?></strong>
				<?php
				$lucrsure_shortcode_list = array(
					array(
						'code'        => '[lucrsure_locations_plans category="your-category"]',
						'description' => __( 'Hero + locations + packages + FAQ. Uses the Plans template from settings.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_locations_plans category="your-category" template="grid"]',
						'description' => __( 'Same page as above, forcing the product-grid layout.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_locations_plans category="your-category" template="cards"]',
						'description' => __( 'Same page as above, forcing the pricing-card layout.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_locations_plans category="your-category" template="list"]',
						'description' => __( 'Same page as above, forcing the stacked plan list.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_plans category="your-category"]',
						'description' => __( 'Packages and checkout only. Uses the Plans template from settings.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_plans category="your-category" template="grid"]',
						'description' => __( 'Packages and checkout, forcing the product-grid layout.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_plans category="your-category" template="cards"]',
						'description' => __( 'Packages and checkout, forcing the pricing-card layout.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_plans category="your-category" template="list"]',
						'description' => __( 'Packages and checkout, forcing the stacked plan list.', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_hero title="Your headline" image_path="https://example.com/hero.jpg"]',
						'description' => __( 'Hero only — title and image_path are optional', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_locations]',
						'description' => __( 'Locations only', 'lucrativeit-subscription-recurring-billing' ),
					),
					array(
						'code'        => '[lucrsure_faq]',
						'description' => __( 'FAQ only', 'lucrativeit-subscription-recurring-billing' ),
					),
				);
				?>
				<ul class="lucrsure-shortcode-list">
					<?php foreach ( $lucrsure_shortcode_list as $lucrsure_shortcode ) : ?>
						<li class="lucrsure-shortcode-row">
							<code><?php echo esc_html( $lucrsure_shortcode['code'] ); ?></code>
							<span class="lucrsure-muted">— <?php echo esc_html( $lucrsure_shortcode['description'] ); ?></span>
							<button type="button" class="lucrsure-btn lucrsure-btn-light lucrsure-btn-xs lucrsure-copy-shortcode" data-shortcode="<?php echo esc_attr( $lucrsure_shortcode['code'] ); ?>">
								<?php esc_html_e( 'Copy', 'lucrativeit-subscription-recurring-billing' ); ?>
							</button>
						</li>
					<?php endforeach; ?>
				</ul>
			</div>

			<div class="lucrsure-info-bar lucrsure-info-bar-secondary">
				<strong><?php esc_html_e( 'Menu anchor IDs', 'lucrativeit-subscription-recurring-billing' ); ?></strong>
				<p class="lucrsure-muted lucrsure-my-8-12">
					<?php if ( $sample_is_homepage ) : ?>
						<?php esc_html_e( 'This page is set as your site homepage — use only the hash in Appearance → Menus → Custom Link, for example:', 'lucrativeit-subscription-recurring-billing' ); ?>
						<code><?php echo esc_html( lucrsure_frontend_menu_anchor_link( 'plans', $sample_page_url ) ); ?></code>
					<?php else : ?>
						<?php esc_html_e( 'Add these as Custom Links in Appearance → Menus. On the homepage, use only the hash (e.g. #lucrsure-plans). On other pages, use the full URL plus hash, for example:', 'lucrativeit-subscription-recurring-billing' ); ?>
						<code><?php echo esc_html( lucrsure_frontend_menu_anchor_link( 'plans', $sample_page_url ) ); ?></code>
					<?php endif; ?>
				</p>
				<table class="lucrsure-anchor-id-table">
					<thead>
						<tr>
							<th scope="col"><?php esc_html_e( 'Section', 'lucrativeit-subscription-recurring-billing' ); ?></th>
							<th scope="col"><?php esc_html_e( 'Anchor ID', 'lucrativeit-subscription-recurring-billing' ); ?></th>
							<th scope="col"><?php esc_html_e( 'Menu link example', 'lucrativeit-subscription-recurring-billing' ); ?></th>
						</tr>
					</thead>
					<tbody>
						<?php foreach ( $section_anchors as $section_key => $anchor ) : ?>
							<?php
							$hash      = '#' . $anchor['id'];
							$menu_link = lucrsure_frontend_menu_anchor_link( $section_key, $sample_page_url );
							?>
							<tr>
								<td>
									<strong><?php echo esc_html( $anchor['label'] ); ?></strong>
									<span class="lucrsure-muted"><?php echo esc_html( $anchor['description'] ); ?></span>
								</td>
								<td><code><?php echo esc_html( $hash ); ?></code></td>
								<td><code class="lucrsure-anchor-link-example"><?php echo esc_html( $menu_link ); ?></code></td>
							</tr>
						<?php endforeach; ?>
					</tbody>
				</table>
				<?php if ( ! $sample_is_homepage ) : ?>
					<p class="lucrsure-muted lucrsure-mt-12">
						<?php esc_html_e( 'Homepage shortcut: if you move this page to Settings → Reading → Homepage, menu links become hash-only (e.g. #lucrsure-plans) — no page slug needed.', 'lucrativeit-subscription-recurring-billing' ); ?>
					</p>
				<?php endif; ?>
			</div>
		</div>

		<div class="lucrsure-form-actions lucrsure-right">
			<button type="submit" class="lucrsure-btn lucrsure-btn-primary"><?php esc_html_e( 'Save Frontend Settings', 'lucrativeit-subscription-recurring-billing' ); ?></button>
		</div>
	</form>
</div>

<template id="lucrsure-faq-row-template">
	<div class="lucrsure-faq-row is-open">
		<button type="button" class="lucrsure-faq-row-toggle" aria-expanded="true">
			<span class="lucrsure-faq-row-title"><?php esc_html_e( 'New FAQ Item', 'lucrativeit-subscription-recurring-billing' ); ?></span>
			<span class="lucrsure-faq-row-chevron" aria-hidden="true"></span>
		</button>
		<div class="lucrsure-faq-row-body">
			<div class="lucrsure-field">
				<label><?php esc_html_e( 'Question', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<input type="text" name="faq_question[]" value="" />
			</div>
			<div class="lucrsure-field">
				<label><?php esc_html_e( 'Answer', 'lucrativeit-subscription-recurring-billing' ); ?></label>
				<textarea name="faq_answer[]" rows="3"></textarea>
			</div>
			<button type="button" class="lucrsure-btn lucrsure-btn-light lucrsure-faq-remove"><?php esc_html_e( 'Remove', 'lucrativeit-subscription-recurring-billing' ); ?></button>
		</div>
	</div>
</template>
