<?php
add_action( 'admin_menu', 'gemstone_jewelry_getting_started' );
function gemstone_jewelry_getting_started() {
	add_theme_page( esc_html__('Get Started', 'gemstone-jewelry'), esc_html__('Get Started', 'gemstone-jewelry'), 'edit_theme_options', 'gemstone-jewelry-guide-page', 'gemstone_jewelry_test_guide');
}

// Add a Custom CSS file to WP Admin Area (kept global: also styles theme-activation admin notices).
function gemstone_jewelry_admin_theme_style() {
	wp_enqueue_style( 'custom-admin-style', esc_url( get_template_directory_uri() ) . '/inc/get-started/get-started.css', array(), wp_get_theme( 'gemstone-jewelry' )->get( 'Version' ) );
}
add_action( 'admin_enqueue_scripts', 'gemstone_jewelry_admin_theme_style' );

// Countdown + copy-to-clipboard script, only on the Get Started page itself.
function gemstone_jewelry_admin_theme_script( $hook ) {
	if ( 'appearance_page_gemstone-jewelry-guide-page' !== $hook ) {
		return;
	}
	$gemstone_jewelry_theme = wp_get_theme( 'gemstone-jewelry' );
	wp_enqueue_script( 'gemstone-jewelry-get-started', esc_url( get_template_directory_uri() ) . '/inc/get-started/js/get-started.js', array(), $gemstone_jewelry_theme->get( 'Version' ), true );
	wp_localize_script( 'gemstone-jewelry-get-started', 'gemstoneJewelryGetStarted', array(
		'countdownMinHours' => 48,
		'countdownMaxHours' => 72,
		'copiedText'        => esc_html__( 'Copied!', 'gemstone-jewelry' ),
		'copyText'          => esc_html__( 'Copy', 'gemstone-jewelry' ),
	) );
}
add_action( 'admin_enqueue_scripts', 'gemstone_jewelry_admin_theme_script' );

//guidline for about theme
function gemstone_jewelry_test_guide() {
	$gemstone_jewelry_theme        = wp_get_theme( 'gemstone-jewelry' );
	$gemstone_jewelry_theme_name   = $gemstone_jewelry_theme->get( 'Name' );
	$gemstone_jewelry_description  = $gemstone_jewelry_theme->get( 'Description' );
	$gemstone_jewelry_hero_tagline = wp_trim_words( $gemstone_jewelry_description, 25, '...' );
	$gemstone_jewelry_screenshot   = esc_url( get_template_directory_uri() ) . '/inc/get-started/images/screenshot.png';
	$gemstone_jewelry_premium_img  = esc_url( get_template_directory_uri() ) . '/inc/get-started/images/bundle.png';
?>
	<div class="pm-wrap">

		<div class="pm-quicklinks">
			<a href="<?php echo esc_url( home_url() ); ?>" target="_blank"><?php esc_html_e( 'Visit Site', 'gemstone-jewelry' ); ?></a>
			<span class="pm-sep">/</span>
			<a href="<?php echo esc_url( GEMSTONE_JEWELRY_THEME_DOC ); ?>" target="_blank"><?php esc_html_e( 'Free Setup Guide', 'gemstone-jewelry' ); ?></a>
			<span class="pm-sep">/</span>
			<a href="<?php echo esc_url( GEMSTONE_JEWELRY_PRO_THEME_DOC ); ?>" target="_blank"><?php esc_html_e( 'Pro Setup Guide', 'gemstone-jewelry' ); ?></a>
			<span class="pm-sep">/</span>
			<a href="<?php echo esc_url( GEMSTONE_JEWELRY_SUPPORT ); ?>" target="_blank"><?php esc_html_e( 'Support Forum', 'gemstone-jewelry' ); ?></a>
			<span class="pm-sep">/</span>
			<a href="<?php echo esc_url( GEMSTONE_JEWELRY_REVIEW ); ?>" target="_blank"><?php esc_html_e( 'Rate Us', 'gemstone-jewelry' ); ?> &#9733;</a>
		</div>

		<div class="pm-grid">
			<div class="pm-main">

				<div class="pm-hero">
					<div class="pm-hero-content">
						<span class="pm-pill"><?php esc_html_e( 'Premium WordPress Theme', 'gemstone-jewelry' ); ?></span>
						<p class="pm-hero-eyebrow"><?php esc_html_e( 'Welcome to', 'gemstone-jewelry' ); ?></p>
						<h1 class="pm-hero-title"><?php echo esc_html( $gemstone_jewelry_theme_name ); ?></h1>
						<p class="pm-hero-desc"><?php echo esc_html( $gemstone_jewelry_hero_tagline ); ?></p>
						<div class="pm-hero-actions">
							<a class="pm-btn pm-btn-primary" href="<?php echo esc_url( GEMSTONE_JEWELRY_BUY_NOW ); ?>" target="_blank">
								<span class="dashicons dashicons-awards"></span><?php esc_html_e( 'Upgrade To Pro', 'gemstone-jewelry' ); ?>
							</a>
							<a class="pm-btn pm-btn-outline" href="<?php echo esc_url( GEMSTONE_JEWELRY_PRO_DEMO ); ?>" target="_blank">
								<?php esc_html_e( 'Live Demo', 'gemstone-jewelry' ); ?><span class="dashicons dashicons-external"></span>
							</a>
							<a class="pm-btn pm-btn-outline" href="<?php echo esc_url( GEMSTONE_JEWELRY_PRO_THEME_BUNDLE ); ?>" target="_blank">
								<span class="dashicons dashicons-screenoptions"></span><?php esc_html_e( 'Get Theme Bundle', 'gemstone-jewelry' ); ?>
							</a>
						</div>
					</div>
					<div class="pm-hero-media">
						<img src="<?php echo esc_url( $gemstone_jewelry_screenshot ); ?>" alt="<?php echo esc_attr( $gemstone_jewelry_theme_name ); ?>" />
						<span class="pm-hero-badge"><?php esc_html_e( '100% Responsive', 'gemstone-jewelry' ); ?></span>
					</div>
				</div>

				<div class="pm-card pm-about">
					<div class="pm-about-icon"><span class="dashicons dashicons-info-outline"></span></div>
					<div class="pm-about-body">
						<h2><?php
							/* translators: %s: theme name */
							echo esc_html( sprintf( __( 'About %s', 'gemstone-jewelry' ), $gemstone_jewelry_theme_name ) );
						?></h2>
						<p><?php echo esc_html( $gemstone_jewelry_description ); ?></p>
						<div class="pm-feature-row">
							<div class="pm-feature">
								<span class="dashicons dashicons-smartphone"></span>
								<div>
									<strong><?php esc_html_e( 'Modern & Responsive', 'gemstone-jewelry' ); ?></strong>
									<p><?php esc_html_e( 'Looks perfect on all devices', 'gemstone-jewelry' ); ?></p>
								</div>
							</div>
							<div class="pm-feature">
								<span class="dashicons dashicons-search"></span>
								<div>
									<strong><?php esc_html_e( 'SEO Optimized', 'gemstone-jewelry' ); ?></strong>
									<p><?php esc_html_e( 'Built with best SEO practices', 'gemstone-jewelry' ); ?></p>
								</div>
							</div>
							<div class="pm-feature">
								<span class="dashicons dashicons-performance"></span>
								<div>
									<strong><?php esc_html_e( 'Fast & Lightweight', 'gemstone-jewelry' ); ?></strong>
									<p><?php esc_html_e( 'Optimized for speed & performance', 'gemstone-jewelry' ); ?></p>
								</div>
							</div>
							<div class="pm-feature">
								<span class="dashicons dashicons-admin-customizer"></span>
								<div>
									<strong><?php esc_html_e( 'Easy Customization', 'gemstone-jewelry' ); ?></strong>
									<p><?php esc_html_e( 'No coding skills required', 'gemstone-jewelry' ); ?></p>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="pm-card pm-quickstart">
					<h2><?php esc_html_e( 'Get Started Quickly', 'gemstone-jewelry' ); ?></h2>
					<div class="pm-quickstart-grid">
						<div class="pm-qs-box">
							<span class="pm-qs-icon pm-qs-purple dashicons dashicons-media-document"></span>
							<h4><?php esc_html_e( 'Theme Documentation', 'gemstone-jewelry' ); ?></h4>
							<p><?php esc_html_e( 'Learn how to set up and use all theme features.', 'gemstone-jewelry' ); ?></p>
							<a class="pm-qs-link pm-qs-link-purple" href="<?php echo esc_url( GEMSTONE_JEWELRY_THEME_DOC ); ?>" target="_blank"><?php esc_html_e( 'View Documentation', 'gemstone-jewelry' ); ?></a>
						</div>
						<div class="pm-qs-box">
							<span class="pm-qs-icon pm-qs-green dashicons dashicons-desktop"></span>
							<h4><?php esc_html_e( 'Theme Demo', 'gemstone-jewelry' ); ?></h4>
							<p><?php esc_html_e( 'Preview the theme in action before you start customizing.', 'gemstone-jewelry' ); ?></p>
							<a class="pm-qs-link pm-qs-link-green" href="<?php echo esc_url( GEMSTONE_JEWELRY_PRO_DEMO ); ?>" target="_blank"><?php esc_html_e( 'View Demo', 'gemstone-jewelry' ); ?></a>
						</div>
						<div class="pm-qs-box">
							<span class="pm-qs-icon pm-qs-orange dashicons dashicons-admin-appearance"></span>
							<h4><?php esc_html_e( 'Theme Editor', 'gemstone-jewelry' ); ?></h4>
							<p><?php esc_html_e( 'Edit your site appearance and layout.', 'gemstone-jewelry' ); ?></p>
							<a class="pm-qs-link pm-qs-link-orange" href="<?php echo esc_url( admin_url( 'site-editor.php' ) ); ?>" target="_blank"><?php esc_html_e( 'Edit Now', 'gemstone-jewelry' ); ?></a>
						</div>
						<div class="pm-qs-box">
							<span class="pm-qs-icon pm-qs-blue dashicons dashicons-sos"></span>
							<h4><?php esc_html_e( 'Quick Support', 'gemstone-jewelry' ); ?></h4>
							<p><?php esc_html_e( 'Get expert help from our dedicated support team.', 'gemstone-jewelry' ); ?></p>
							<a class="pm-qs-link pm-qs-link-blue" href="<?php echo esc_url( GEMSTONE_JEWELRY_SUPPORT ); ?>" target="_blank"><?php esc_html_e( 'Get Support', 'gemstone-jewelry' ); ?></a>
						</div>
					</div>
				</div>

				<div class="pm-premium-banner">
					<div class="pm-premium-left">
						<h3><span class="dashicons dashicons-star-filled"></span><?php esc_html_e( 'Why Go Premium?', 'gemstone-jewelry' ); ?></h3>
						<div class="pm-premium-list">
							<ul>
								<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'Advanced Customization Options', 'gemstone-jewelry' ); ?></li>
								<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'One-Click Demo Import', 'gemstone-jewelry' ); ?></li>
								<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'WooCommerce Integration & Enhanced Features', 'gemstone-jewelry' ); ?></li>
							</ul>
							<ul>
								<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'Performance Optimization & SEO-Ready', 'gemstone-jewelry' ); ?></li>
								<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'Premium Support & Regular Updates', 'gemstone-jewelry' ); ?></li>
							</ul>
						</div>
					</div>
					<div class="pm-premium-right">
						<p class="pm-premium-from"><?php esc_html_e( 'Starting From', 'gemstone-jewelry' ); ?></p>
						<p class="pm-premium-price"><?php esc_html_e( '$39', 'gemstone-jewelry' ); ?></p>
						<p class="pm-premium-note"><?php esc_html_e( 'One Time Payment', 'gemstone-jewelry' ); ?></p>
						<a class="pm-btn pm-btn-primary" href="<?php echo esc_url( GEMSTONE_JEWELRY_BUY_NOW ); ?>" target="_blank">
							<span class="dashicons dashicons-awards"></span><?php esc_html_e( 'Upgrade To Pro', 'gemstone-jewelry' ); ?>
						</a>
					</div>
				</div>

				<div class="pm-stats-row">
					<div class="pm-stat">
						<span class="dashicons dashicons-translation"></span>
						<strong><?php esc_html_e( 'Translation Ready', 'gemstone-jewelry' ); ?></strong>
					</div>
					<div class="pm-stat">
						<span class="dashicons dashicons-block-default"></span>
						<strong><?php esc_html_e( 'Full Site Editing', 'gemstone-jewelry' ); ?></strong>
					</div>
					<div class="pm-stat">
						<span class="dashicons dashicons-welcome-widgets-menus"></span>
						<strong><?php esc_html_e( 'Widget Ready', 'gemstone-jewelry' ); ?></strong>
					</div>
					<div class="pm-stat">
						<span class="dashicons dashicons-shield-alt"></span>
						<strong><?php esc_html_e( 'GPL Licensed', 'gemstone-jewelry' ); ?></strong>
					</div>
				</div>

			</div>

			<div class="pm-sidebar">

				<div class="pm-card pm-offer">
					<span class="pm-offer-badge"><?php esc_html_e( 'LIMITED TIME OFFER', 'gemstone-jewelry' ); ?></span>
					<h3><?php esc_html_e( 'Special Launch Offer!', 'gemstone-jewelry' ); ?></h3>
					<p><?php esc_html_e( 'Get 25% OFF on Our WordPress Theme', 'gemstone-jewelry' ); ?></p>

					<p class="pm-coupon-label"><?php esc_html_e( 'Use Coupon Code:', 'gemstone-jewelry' ); ?></p>
					<div class="pm-coupon">
						<span class="pm-coupon-code"><?php esc_html_e( 'SUMMER25', 'gemstone-jewelry' ); ?></span>
						<button type="button" class="pm-copy-btn" data-copy-text="SUMMER25">
							<span class="dashicons dashicons-clipboard"></span>
						</button>
					</div>

					<p class="pm-offer-price">
						<strong class="pm-price-cancel"><?php esc_html_e( '$39', 'gemstone-jewelry' ); ?></strong>
						<span class="pm-price-final"><?php esc_html_e( '$29.25', 'gemstone-jewelry' ); ?></span>
					</p>

					<div class="pm-countdown" data-countdown>
						<div class="pm-countdown-box"><span data-countdown-days>00</span><small><?php esc_html_e( 'Days', 'gemstone-jewelry' ); ?></small></div>
						<div class="pm-countdown-box"><span data-countdown-hours>00</span><small><?php esc_html_e( 'Hours', 'gemstone-jewelry' ); ?></small></div>
						<div class="pm-countdown-box"><span data-countdown-minutes>00</span><small><?php esc_html_e( 'Minutes', 'gemstone-jewelry' ); ?></small></div>
						<div class="pm-countdown-box"><span data-countdown-seconds>00</span><small><?php esc_html_e( 'Seconds', 'gemstone-jewelry' ); ?></small></div>
					</div>

					<a class="pm-btn pm-btn-primary pm-btn-block" href="<?php echo esc_url( GEMSTONE_JEWELRY_BUY_NOW ); ?>" target="_blank">
						<span class="dashicons dashicons-awards"></span><?php esc_html_e( 'GET PREMIUM', 'gemstone-jewelry' ); ?>
					</a>
					<p class="pm-offer-footnote"><?php esc_html_e( 'Offer valid for a limited time only!', 'gemstone-jewelry' ); ?></p>
				</div>

				<div class="pm-card pm-bundle">
					<h3><?php esc_html_e( 'Get Theme Bundle', 'gemstone-jewelry' ); ?></h3>
					<p><?php esc_html_e( '80+ Premium WordPress Themes in one bundle.', 'gemstone-jewelry' ); ?></p>
					<img src="<?php echo esc_url( $gemstone_jewelry_premium_img ); ?>" alt="<?php esc_attr_e( 'Theme bundle preview', 'gemstone-jewelry' ); ?>" />
					<p class="pm-offer-price">
						<strong class="pm-price-cancel"><?php esc_html_e( '$2340', 'gemstone-jewelry' ); ?></strong>
						<span class="pm-price-final"><?php esc_html_e( '$86', 'gemstone-jewelry' ); ?></span>
					</p>
					<a class="pm-btn pm-btn-primary pm-btn-block" href="<?php echo esc_url( GEMSTONE_JEWELRY_PRO_THEME_BUNDLE ); ?>" target="_blank">
						<span class="dashicons dashicons-awards"></span><?php esc_html_e( 'Get Theme Bundle', 'gemstone-jewelry' ); ?>
					</a>
				</div>

				<div class="pm-card pm-help">
					<h3><?php esc_html_e( 'Need Help?', 'gemstone-jewelry' ); ?></h3>
					<p><?php esc_html_e( 'Our support team is here to help you succeed. Get expert assistance whenever you need it.', 'gemstone-jewelry' ); ?></p>
					<ul class="pm-help-list">
						<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'Quick Response', 'gemstone-jewelry' ); ?></li>
						<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'Expert Support', 'gemstone-jewelry' ); ?></li>
						<li><span class="dashicons dashicons-yes-alt"></span><?php esc_html_e( 'Detailed Solutions', 'gemstone-jewelry' ); ?></li>
					</ul>
					<a class="pm-btn pm-btn-dark pm-btn-block" href="<?php echo esc_url( GEMSTONE_JEWELRY_SUPPORT ); ?>" target="_blank">
						<span class="dashicons dashicons-format-chat"></span><?php esc_html_e( 'Get Support Now', 'gemstone-jewelry' ); ?>
					</a>
				</div>

			</div>
		</div>
	</div>
<?php } ?>
