<?php
/**
 * Theme help page.
 *
 * @package wuppi
 */

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

/**
 * Register the Wuppi help page under Appearance.
 */
function wuppi_add_help_page() {
	add_theme_page(
		esc_html__( 'Wuppi Help', 'wuppi' ),
		esc_html__( 'Wuppi Help', 'wuppi' ),
		wuppi_get_settings_page_capability(),
		'wuppi-help',
		'wuppi_render_help_page'
	);
}
add_action( 'admin_menu', 'wuppi_add_help_page' );

/**
 * Render the Wuppi help page.
 */
function wuppi_render_help_page() {
	if ( ! current_user_can( wuppi_get_settings_page_capability() ) ) {
		return;
	}

	$settings_url   = admin_url( 'themes.php?page=wuppi-settings' );
	$editor_url     = admin_url( 'site-editor.php' );
	$navigation_url = admin_url( 'site-editor.php?path=%2Fnavigation' );
	?>
	<div class="wrap">
		<h1 class="wp-heading-inline"><?php echo esc_html__( 'Wuppi Help', 'wuppi' ); ?></h1>
		<a class="page-title-action" href="<?php echo esc_url( $settings_url ); ?>"><?php echo esc_html__( 'Wuppi Settings', 'wuppi' ); ?></a>
		<hr class="wp-header-end">

		<p><?php echo esc_html__( 'Use this page as a quick reference while setting up Wuppi in the Site Editor, configuring header behavior, and working with common plugin integrations.', 'wuppi' ); ?></p>

		<div class="card">
			<h2><?php echo esc_html__( 'Quick links', 'wuppi' ); ?></h2>
			<p><?php echo esc_html__( 'Jump directly to the admin screens you will use most often while configuring the theme.', 'wuppi' ); ?></p>
			<p>
				<a class="button button-secondary" href="<?php echo esc_url( $editor_url ); ?>"><?php echo esc_html__( 'Open Site Editor', 'wuppi' ); ?></a>
				<a class="button button-secondary" href="<?php echo esc_url( $settings_url ); ?>"><?php echo esc_html__( 'Open Wuppi Settings', 'wuppi' ); ?></a>
				<a class="button button-secondary" href="<?php echo esc_url( $navigation_url ); ?>"><?php echo esc_html__( 'Open Navigation', 'wuppi' ); ?></a>
			</p>
		</div>

		<div class="card">
			<h2><?php echo esc_html__( 'Getting started', 'wuppi' ); ?></h2>
			<ol>
				<li><?php echo esc_html__( 'Open the Site Editor to customize templates, template parts, patterns, and global styles.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Choose a style variation that matches the site direction, then adjust content and layout in the editor.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Create your main pages and review the header, footer, and navigation structure early in the setup process.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Use Wuppi Settings only for theme behavior such as header sizing, spacing, and desktop or mobile header modes.', 'wuppi' ); ?></li>
			</ol>
		</div>

		<div class="card">
			<h2><?php echo esc_html__( 'Wuppi Settings', 'wuppi' ); ?></h2>
			<ul>
				<li><?php echo esc_html__( 'Header height and navigation spacing control the overall proportions of the header.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Desktop header behavior controls whether the header scrolls normally, stays fixed with a glass effect, or uses auto-hide.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Mobile header behavior lets you choose between the sticky glass header and a static mobile header.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Auto-hide reveal delay only affects the fixed auto-hide desktop mode.', 'wuppi' ); ?></li>
				<li><?php echo esc_html__( 'Back to top button shows a fixed scroll-to-top button on the front end. It appears after scrolling down 300 px and can be disabled here if your design does not need it.', 'wuppi' ); ?></li>
			</ul>
		</div>

			<div class="card">
				<h2><?php echo esc_html__( 'WooCommerce support', 'wuppi' ); ?></h2>
				<p><?php echo esc_html__( 'If WooCommerce is active, Wuppi provides archive and single-product templates that can be customized in the Site Editor like the rest of the theme.', 'wuppi' ); ?></p>
			<p><?php echo esc_html__( 'Use WooCommerce settings for catalog and checkout behavior, and use the Site Editor for the visual layout of product templates.', 'wuppi' ); ?></p>
		</div>

		<div class="card">
			<h2><?php echo esc_html__( 'FAQ and troubleshooting', 'wuppi' ); ?></h2>

			<h3><?php echo esc_html__( 'Where do I change colors, typography, and templates?', 'wuppi' ); ?></h3>
			<p><?php echo esc_html__( 'Use Appearance > Editor. Wuppi Settings is intentionally limited to theme behavior and does not replace the Site Editor.', 'wuppi' ); ?></p>

				<h3><?php echo esc_html__( 'When should I use Wuppi Settings instead of the editor?', 'wuppi' ); ?></h3>
				<p><?php echo esc_html__( 'Use Wuppi Settings for behavior-level controls such as header modes and spacing. Use the editor for content, layout, styles, patterns, and template structure.', 'wuppi' ); ?></p>
		</div>
	</div>
	<?php
}
