<?php
$gutenify_is_installed = file_exists(WP_PLUGIN_DIR . '/gutenify');
$gutenify_is_active = is_plugin_active('gutenify/gutenify.php');
$is_pro_active = class_exists('Gutenify_Pro');
$license_status = false;
if ($is_pro_active && function_exists('gutenify_pro_fs')) {
	$license_status = !gutenify_pro_fs()->is_free_plan();
}
global $wp_version;
$is_block_theme = wp_is_block_theme();

$gutenify_img_base = $gutenify_is_installed ? plugins_url('gutenify/core/assets/images/admin/') : '';
?>
<div class="gutenify-store-base--getting-started--wrapper">
	<div id="gutenify-store-base-admin-about-page">

		<!-- Redesigned Header Panel -->
		<div
			class="gutenify-store-base-about-container gutenify-store-base-admin-card gutenify-store-base-admin-card-header">
			<div class="gutenify-store-base-header-left admin-col">
				<div class="header-title-row">
					<h2><?php echo esc_html($theme->get('Name')); ?></h2>
					<span class="version-badge">v<?php echo esc_html($theme->get('Version')); ?></span>
				</div>
				<p class="header-subtitle">
					<?php esc_html_e('Gutenberg Fullsite Editing Advanced Blocks and Themes', 'gutenify-store-base'); ?>
				</p>
			</div>
			<div class="gutenify-store-base-card-header-button-group">
				<?php if (defined('GUTENIFY_VERSION') && class_exists('Gutenify_Pro')): ?>
					<a href="<?php echo esc_url(admin_url('admin.php?page=gutenify-demo-importer')); ?>"
						class="gutenify-store-base-admin-button primary-btn" rel="noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Browse Demos', 'gutenify-store-base'); ?></span>
					</a>
				<?php elseif (!$gutenify_is_installed && !$gutenify_is_active): ?>
					<a href="javascript:void(0);"
						class="gutenify-store-base-admin-button primary-btn gutenify-store-base-install-gutenify">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Import Site Demo', 'gutenify-store-base'); ?></span>
					</a>
				<?php elseif ($gutenify_is_installed && !$gutenify_is_active): ?>
					<a href="javascript:void(0);"
						class="gutenify-store-base-admin-button primary-btn gutenify-store-base-activate-gutenify">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Import Site Demo', 'gutenify-store-base'); ?></span>
					</a>
				<?php elseif ($gutenify_is_active && !class_exists('Gutenify_Pro')): ?>
					<a href="<?php echo esc_url(admin_url('admin.php?page=gutenify-demo-importer')); ?>"
						class="gutenify-store-base-admin-button primary-btn" rel="noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Browse Demos', 'gutenify-store-base'); ?></span>
					</a>
				<?php endif; ?>

				<a href="<?php echo esc_url('https://gutenify.com/documentations/'); ?>"
					class="gutenify-store-base-admin-button secondary-btn" target="_blank" rel="noreferrer">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
						stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
						<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
						<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
					</svg>
					<span><?php esc_html_e('Documentations', 'gutenify-store-base'); ?></span>
				</a>

				<?php if (!class_exists('Gutenify_Pro')): ?>
					<a href="<?php echo esc_url('https://gutenify.com/pricing'); ?>"
						class="gutenify-store-base-admin-button pro-btn" target="_blank" rel="noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon flame-icon">
							<path
								d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
						</svg>
						<span><?php esc_html_e('PRO Upgrade', 'gutenify-store-base'); ?></span>
					</a>
				<?php endif; ?>
			</div>
		</div>

		<!-- Tabs Navigation -->
		<div class="gutenify-admin-tabs-nav">
			<button type="button" class="gutenify-admin-tab-btn active" data-tab="getting-started">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
					stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
					<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
					<polyline points="9 22 9 12 15 12 15 22" />
				</svg>
				<span><?php esc_html_e('Getting Started', 'gutenify-store-base'); ?></span>
			</button>
			<button type="button" class="gutenify-admin-tab-btn" data-tab="marketplace">
				<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
					stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
					<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
					<line x1="3" y1="6" x2="21" y2="6" />
					<path d="M16 10a4 4 0 0 1-8 0" />
				</svg>
				<span><?php esc_html_e('Marketplace', 'gutenify-store-base'); ?></span>
			</button>
		</div>

		<div id="getting-started" class="gutenify-tab-content">

			<!-- Section: Quick Actions & System Status -->
			<div class="getting-started-quick-status-row admin-grid-3">
				<!-- Quick Site Actions -->
				<div class="gutenify-store-base-about-container quick-actions-panel">
					<div class="section-title-wrapper">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="gutenify-svg-icon shortcut-icon">
							<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
							<polyline points="15 3 21 3 21 9" />
							<line x1="10" y1="14" x2="21" y2="3" />
						</svg>
						<h3><?php esc_html_e('Quick Site Actions', 'gutenify-store-base'); ?></h3>
					</div>
					<p class="section-description">
						<?php esc_html_e('Jump straight into designing, creating pages, or reading documentation.', 'gutenify-store-base'); ?>
					</p>
					<div class="quick-actions-grid">
						<a href="<?php echo esc_url($is_block_theme ? admin_url('site-editor.php') : admin_url('customize.php')); ?>"
							class="action-card">
							<div class="action-card-icon-wrapper">
								<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon">
									<path
										d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
									<path
										d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
									<path
										d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
									<path
										d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
									<path
										d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
								</svg>
							</div>
							<div class="action-card-text">
								<h4><?php echo $is_block_theme ? esc_html__('Launch Site Editor', 'gutenify-store-base') : esc_html__('Open Customizer', 'gutenify-store-base'); ?>
								</h4>
								<p><?php echo $is_block_theme ? esc_html__('Customize templates visually', 'gutenify-store-base') : esc_html__('Configure theme styles', 'gutenify-store-base'); ?>
								</p>
							</div>
						</a>
						<a href="<?php echo esc_url(admin_url('post-new.php?post_type=page')); ?>" class="action-card">
							<div class="action-card-icon-wrapper">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon">
									<path d="M12 20h9" />
									<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
								</svg>
							</div>
							<div class="action-card-text">
								<h4><?php esc_html_e('Create New Page', 'gutenify-store-base'); ?></h4>
								<p><?php esc_html_e('Build a fresh canvas page', 'gutenify-store-base'); ?></p>
							</div>
						</a>
						<?php if ($gutenify_is_active): ?>
							<a href="<?php echo esc_url(admin_url('admin.php?page=gutenify-demo-importer')); ?>"
								class="action-card">
								<div class="action-card-icon-wrapper">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
										class="gutenify-svg-icon">
										<circle cx="11" cy="11" r="8" />
										<line x1="21" y1="21" x2="16.65" y2="16.65" />
									</svg>
								</div>
								<div class="action-card-text">
									<h4><?php esc_html_e('Browse Demo Library', 'gutenify-store-base'); ?></h4>
									<p><?php esc_html_e('Import full layouts & styles', 'gutenify-store-base'); ?></p>
								</div>
							</a>
						<?php elseif (!$gutenify_is_installed): ?>
							<a href="javascript:void(0);" class="action-card gutenify-store-base-install-gutenify">
								<div class="action-card-icon-wrapper">
									<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
										class="gutenify-svg-icon">
										<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
										<polyline points="7 10 12 15 17 10" />
										<line x1="12" y1="15" x2="12" y2="3" />
									</svg>
								</div>
								<div class="action-card-text">
									<h4><?php esc_html_e('Install Gutenify', 'gutenify-store-base'); ?></h4>
									<p><?php esc_html_e('Get the required blocks plugin', 'gutenify-store-base'); ?></p>
								</div>
							</a>
						<?php else: ?>
							<a href="javascript:void(0);" class="action-card gutenify-store-base-activate-gutenify">
								<div class="action-card-icon-wrapper">
									<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
										class="gutenify-svg-icon">
										<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
										<polyline points="22 4 12 14 9 11" />
									</svg>
								</div>
								<div class="action-card-text">
									<h4><?php esc_html_e('Activate Gutenify', 'gutenify-store-base'); ?></h4>
									<p><?php esc_html_e('Enable full block functionality', 'gutenify-store-base'); ?></p>
								</div>
							</a>
						<?php endif; ?>
						<a href="<?php echo esc_url('https://gutenify.com/documentations/'); ?>" target="_blank"
							rel="noreferrer" class="action-card">
							<div class="action-card-icon-wrapper">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon">
									<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
									<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
								</svg>
							</div>
							<div class="action-card-text">
								<h4><?php esc_html_e('Read Help Docs', 'gutenify-store-base'); ?></h4>
								<p><?php esc_html_e('Guides on blocks & templates', 'gutenify-store-base'); ?></p>
							</div>
						</a>
					</div>
				</div>

				<!-- Still Have Questions? / Support Panel -->
				<div class="quick-status-right-col">
					<div class="gutenify-store-base-about-container support-panel">
						<div class="section-title-wrapper">
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
								class="gutenify-svg-icon">
								<circle cx="12" cy="12" r="10" />
								<circle cx="12" cy="12" r="4" />
								<line x1="4.93" y1="4.93" x2="9.17" y2="9.17" />
								<line x1="19.07" y1="4.93" x2="14.83" y2="9.17" />
								<line x1="14.83" y1="14.83" x2="19.07" y2="19.07" />
								<line x1="9.17" y1="14.83" x2="4.93" y2="19.07" />
							</svg>
							<h3><?php esc_html_e('Need Help?', 'gutenify-store-base'); ?></h3>
						</div>
						<p class="section-description">
							<?php
							echo esc_html(
								sprintf(
									/* translators: %s: theme name */
									__("Having trouble with %s? Our support team responds quickly - open a ticket and we'll get you sorted.", 'gutenify-store-base'),
									$theme->get('Name')
								)
							);
							?>
						</p>
						<div class="support-action-wrapper">
							<a href="<?php echo esc_url('https://gutenify.com/contact/'); ?>" target="_blank"
								class="gutenify-store-base-admin-button primary-btn support-btn" rel="noreferrer">
								<span><?php esc_html_e('Open Support Ticket', 'gutenify-store-base'); ?></span>
							</a>
						</div>
					</div>

					<!-- Love our product? / Rating Panel -->
					<div class="gutenify-store-base-about-container rating-panel">
						<div class="stars-row">
							<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor"
								stroke-width="1" class="gutenify-svg-icon star-icon">
								<polygon
									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
							</svg>
							<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor"
								stroke-width="1" class="gutenify-svg-icon star-icon">
								<polygon
									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
							</svg>
							<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor"
								stroke-width="1" class="gutenify-svg-icon star-icon">
								<polygon
									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
							</svg>
							<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor"
								stroke-width="1" class="gutenify-svg-icon star-icon">
								<polygon
									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
							</svg>
							<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor"
								stroke-width="1" class="gutenify-svg-icon star-icon">
								<polygon
									points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
							</svg>
						</div>
						<h3><?php esc_html_e('Love our product?', 'gutenify-store-base'); ?></h3>
						<p class="panel-description">
							<?php esc_html_e('Motivate us by giving 5 stars on our profile.', 'gutenify-store-base'); ?>
						</p>
						<div class="rate-btn-wrapper">
							<a href="<?php echo esc_url('https://wordpress.org/support/theme/gutenify-store-base/reviews/?filter=5'); ?>"
								class="gutenify-store-base-admin-button rate-btn" target="__blank">
								<?php esc_html_e('Rate Us', 'gutenify-store-base'); ?>
							</a>
						</div>
					</div>
				</div>
			</div>

			<!-- Section: Themes and Demos Card -->
			<div class="gutenify-store-base-about-container intro-card admin-grid-2">
				<div class="admin-col text-col">
					<div class="gutenify-store-base-get-started-content">
						<span class="card-tag"><?php esc_html_e('Templates', 'gutenify-store-base'); ?></span>
						<h3><?php esc_html_e('Themes and Demos', 'gutenify-store-base'); ?></h3>
						<p>
							<?php esc_html_e('We have pre-built Themes and Demos for your site which will give your website a base structure.', 'gutenify-store-base'); ?>
						</p>

						<ul class="action-list">
							<li>
								<span class="list-icon-wrapper"><svg width="16" height="16" viewBox="0 0 24 24"
										fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
										stroke-linejoin="round" class="gutenify-svg-icon">
										<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
										<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
									</svg></span>
								<a href="<?php echo esc_url('https://gutenify.com/documentations/import-demo-templates/'); ?>"
									target="_blank" rel="noreferrer">
									<?php esc_html_e('Learn about Themes and Demos', 'gutenify-store-base'); ?>
								</a>
							</li>
							<li>
								<span class="list-icon-wrapper"><svg width="16" height="16" viewBox="0 0 24 24"
										fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
										stroke-linejoin="round" class="gutenify-svg-icon">
										<circle cx="11" cy="11" r="8" />
										<line x1="21" y1="21" x2="16.65" y2="16.65" />
									</svg></span>
								<a href="<?php echo esc_url(admin_url('admin.php?page=gutenify-demo-importer')); ?>"
									rel="noreferrer">
									<?php esc_html_e('Browse Themes Demos', 'gutenify-store-base'); ?>
								</a>
							</li>
						</ul>

						<div class="quick-action-link">
							<span
								class="action-label"><?php esc_html_e('How to import Themes?', 'gutenify-store-base'); ?></span>
							<a href="javascript:void(0);" class="text-link btn-play-overlay-kits">
								<span><?php esc_html_e('Click here', 'gutenify-store-base'); ?></span>
								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon arrow-right">
									<line x1="5" y1="12" x2="19" y2="12" />
									<polyline points="12 5 19 12 12 19" />
								</svg>
							</a>
						</div>
					</div>
				</div>
				<div class="admin-col media-col">
					<div class="mock-browser-frame">
						<div class="browser-header">
							<span class="dot dot-1"></span>
							<span class="dot dot-2"></span>
							<span class="dot dot-3"></span>
						</div>
						<div class="media-container">
							<button type="button" class="btn-play-overlay btn-play-overlay-kits">
								<div class="play-button-glow">
									<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"
										class="gutenify-svg-icon play-arrow">
										<polygon points="5 3 19 12 5 21 5 3" />
									</svg>
								</div>
							</button>
							<img class="preview-img"
								src="<?php echo esc_url($gutenify_img_base . 'gutenify-template-kits.png'); ?>"
								alt="<?php esc_attr_e('Themes and Demos', 'gutenify-store-base'); ?>" />
						</div>
					</div>
				</div>
			</div>

			<!-- Section: Import Gutenberg Patterns Card -->
			<div class="gutenify-store-base-about-container intro-card inverse admin-grid-2">
				<div class="admin-col media-col">
					<div class="mock-browser-frame">
						<div class="browser-header">
							<span class="dot dot-1"></span>
							<span class="dot dot-2"></span>
							<span class="dot dot-3"></span>
						</div>
						<div class="media-container">
							<button type="button" class="btn-play-overlay btn-play-overlay-patterns">
								<div class="play-button-glow">
									<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor"
										class="gutenify-svg-icon play-arrow">
										<polygon points="5 3 19 12 5 21 5 3" />
									</svg>
								</div>
							</button>
							<img class="preview-img"
								src="<?php echo esc_url($gutenify_img_base . 'gutenify-template.png'); ?>"
								alt="<?php esc_attr_e('Gutenberg Patterns', 'gutenify-store-base'); ?>" />
						</div>
					</div>
				</div>
				<div class="admin-col text-col">
					<div class="gutenify-store-base-get-started-content">
						<span class="card-tag"><?php esc_html_e('Patterns', 'gutenify-store-base'); ?></span>
						<h3><?php esc_html_e('Import Gutenberg Patterns', 'gutenify-store-base'); ?></h3>
						<p>
							<?php esc_html_e('From Edit screen of page/post, you can easily import Beautiful Patterns.', 'gutenify-store-base'); ?>
						</p>
						<ul class="action-list">
							<li>
								<span class="list-icon-wrapper"><svg width="16" height="16" viewBox="0 0 24 24"
										fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
										stroke-linejoin="round" class="gutenify-svg-icon">
										<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
										<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
									</svg></span>
								<a href="<?php echo esc_url('https://gutenify.com/documentations/what-are-templates-how-do-we-add-templates-in-our-page-posts/'); ?>"
									target="_blank" rel="noreferrer">
									<?php esc_html_e('Learn about Patterns', 'gutenify-store-base'); ?>
								</a>
							</li>
							<li>
								<span class="list-icon-wrapper"><svg width="16" height="16" viewBox="0 0 24 24"
										fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
										stroke-linejoin="round" class="gutenify-svg-icon">
										<path d="M12 20h9" />
										<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
									</svg></span>
								<a href="<?php echo esc_url(admin_url('post-new.php?post_type=page')); ?>"
									rel="noreferrer">
									<?php esc_html_e('Create page to add Gutenberg Patterns', 'gutenify-store-base'); ?>
								</a>
							</li>
						</ul>

						<div class="quick-action-link">
							<span
								class="action-label"><?php esc_html_e('Watch quick video or', 'gutenify-store-base'); ?></span>
							<a href="javascript:void(0);" class="text-link btn-play-overlay-patterns">
								<span><?php esc_html_e('Click here', 'gutenify-store-base'); ?></span>
								<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon arrow-right">
									<line x1="5" y1="12" x2="19" y2="12" />
									<polyline points="12 5 19 12 12 19" />
								</svg>
							</a>
						</div>
					</div>
				</div>
			</div>

			<!-- Section: 3-Step Setup Guide -->
			<div class="gutenify-store-base-about-container steps-panel">
				<div class="steps-header">
					<h3><?php esc_html_e('To add fresh block follow below steps', 'gutenify-store-base'); ?></h3>
					<p><?php esc_html_e('Get started with building your website in three simple steps.', 'gutenify-store-base'); ?>
					</p>
				</div>
				<div class="steps-grid">
					<div class="step-card">
						<div class="step-badge">01</div>
						<h4><?php esc_html_e('Open Block Inserter', 'gutenify-store-base'); ?></h4>
						<p><?php esc_html_e('At the top left corner of the page/post edit Screen, click on the plus (+) sign.', 'gutenify-store-base'); ?>
						</p>
					</div>
					<div class="step-card">
						<div class="step-badge">02</div>
						<h4><?php esc_html_e('Search Block', 'gutenify-store-base'); ?></h4>
						<p><?php esc_html_e('Type Block name in search bar, if you already know the block name.', 'gutenify-store-base'); ?>
						</p>
					</div>
					<div class="step-card">
						<div class="step-badge">03</div>
						<h4><?php esc_html_e('Add Gutenify Block', 'gutenify-store-base'); ?></h4>
						<p><?php echo esc_html(sprintf(__('Or scroll down and navigate to %s section and Add New Block.', 'gutenify-store-base'), $theme->get('Name'))); ?>
						</p>
					</div>
				</div>
			</div>

			<!-- Section: Feature Grid and Sidebar Feedback -->
			<div class="feature-list">
				<div class="gutenify-store-base-about-container gutenify-store-base-about-content features-panel">
					<div class="gutenify-store-base-admin-card features">
						<h4 class="gutenify-store-base-admin-card-title is-medium is-sub">
							<?php esc_html_e('Core Features', 'gutenify-store-base'); ?>
						</h4>
						<div class="features-grid">
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Global page settings', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Themes', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Predefined sections', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Fully Responsive', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Highly customizable rows/columns', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Color Options', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Device responsive controls', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Google fonts', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Classic &amp; gradient backgrounds', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Box-shadow controls', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Border controls', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('Advanced Typography', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('SVG / Icon picker', 'gutenify-store-base'); ?></span>
							</div>
							<div class="feature-badge">
								<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
									stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
									class="gutenify-svg-icon check-icon">
									<polyline points="20 6 9 17 4 12"></polyline>
								</svg>
								<span><?php esc_html_e('& More...', 'gutenify-store-base'); ?></span>
							</div>
						</div>
					</div>
				</div>


			</div>

			<!-- Section: Interactive FAQ Accordion -->
			<div class="gutenify-store-base-about-container faq-panel">
				<div class="faq-header">
					<div class="faq-title-row">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
							stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
							class="gutenify-svg-icon chevron-down">
							<polyline points="6 9 12 15 18 9" />
						</svg>
						<h3><?php esc_html_e('Frequently Asked Questions', 'gutenify-store-base'); ?></h3>
					</div>
					<p><?php esc_html_e('Find answers to common questions about Gutenify and Full Site Editing.', 'gutenify-store-base'); ?>
					</p>
				</div>
				<div class="faq-accordion-group">
					<details class="faq-item" name="gutenify-store-base-faq">
						<summary class="faq-question">
							<span><?php esc_html_e('What is Full Site Editing (FSE) and how does it work?', 'gutenify-store-base'); ?></span>
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
								class="gutenify-svg-icon chevron-down">
								<polyline points="6 9 12 15 18 9" />
							</svg>
						</summary>
						<div class="faq-answer">
							<p>
								<?php esc_html_e('Gutenberg Full Site Editing (FSE) allows you to build and customize your entire website using blocks, including headers, footers, sidebars, and page templates. Unlike classic themes, block themes give you visual control over every section of your site via the Site Editor (Appearance > Editor).', 'gutenify-store-base'); ?>
							</p>
						</div>
					</details>

					<details class="faq-item" name="gutenify-store-base-faq">
						<summary class="faq-question">
							<span><?php esc_html_e('Do I need Gutenify Pro to use the Demo Importer?', 'gutenify-store-base'); ?></span>
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
								class="gutenify-svg-icon chevron-down">
								<polyline points="6 9 12 15 18 9" />
							</svg>
						</summary>
						<div class="faq-answer">
							<p>
								<?php esc_html_e('No! Gutenify includes many free block theme templates and starter demos that you can import with a single click. Upgrading to Gutenify Pro unlocks additional premium themes, WooCommerce integrations, custom blocks, and priority developer support.', 'gutenify-store-base'); ?>
							</p>
						</div>
					</details>

					<details class="faq-item" name="gutenify-store-base-faq">
						<summary class="faq-question">
							<span><?php esc_html_e('Can I use Gutenify blocks with classic non-FSE themes?', 'gutenify-store-base'); ?></span>
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
								class="gutenify-svg-icon chevron-down">
								<polyline points="6 9 12 15 18 9" />
							</svg>
						</summary>
						<div class="faq-answer">
							<p>
								<?php esc_html_e('Absolutely! While Gutenify is optimized for modern Block Themes (FSE), all Gutenify blocks are fully compatible with any standard classic theme. You can use them inside the normal block editor for pages and posts.', 'gutenify-store-base'); ?>
							</p>
						</div>
					</details>

					<details class="faq-item" name="gutenify-store-base-faq">
						<summary class="faq-question">
							<span><?php esc_html_e('How do I customize the header and footer of my website?', 'gutenify-store-base'); ?></span>
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
								class="gutenify-svg-icon chevron-down">
								<polyline points="6 9 12 15 18 9" />
							</svg>
						</summary>
						<div class="faq-answer">
							<p>
								<?php esc_html_e('If you are using a block theme, navigate to Appearance > Editor (Site Editor). Click on Patterns or Template Parts, select Header or Footer, and customize them visually using Gutenberg blocks just like any other page.', 'gutenify-store-base'); ?>
							</p>
						</div>
					</details>

					<details class="faq-item" name="gutenify-store-base-faq">
						<summary class="faq-question">
							<span><?php esc_html_e('How can I resolve import errors or layout issues?', 'gutenify-store-base'); ?></span>
							<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
								stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
								class="gutenify-svg-icon chevron-down">
								<polyline points="6 9 12 15 18 9" />
							</svg>
						</summary>
						<div class="faq-answer">
							<p>
								<?php esc_html_e('Most import issues are caused by server resource limits (like maximum execution time or low memory). Please ensure your host supports PHP 7.4+, has max_execution_time set to at least 120s, and PHP memory_limit set to 256M. If issues persist, our support team is happy to assist you.', 'gutenify-store-base'); ?>
							</p>
						</div>
					</details>
				</div>
			</div>

			<!-- Redesigned Footer Action Area -->
			<div class="getting-started-footer-cta">
				<?php if (defined('GUTENIFY_VERSION') && class_exists('Gutenify_Pro')): ?>
					<a href="<?php echo esc_url(admin_url('admin.php?page=gutenify-demo-importer')); ?>"
						class="gutenify-store-base-admin-button primary-btn large" rel="noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Browse Demos', 'gutenify-store-base'); ?></span>
					</a>
				<?php elseif (!$gutenify_is_installed && !$gutenify_is_active): ?>
					<a href="javascript:void(0);"
						class="gutenify-store-base-admin-button primary-btn large gutenify-store-base-install-gutenify">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Import Site Demo', 'gutenify-store-base'); ?></span>
					</a>
				<?php elseif ($gutenify_is_installed && !$gutenify_is_active): ?>
					<a href="javascript:void(0);"
						class="gutenify-store-base-admin-button primary-btn large gutenify-store-base-activate-gutenify">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Import Site Demo', 'gutenify-store-base'); ?></span>
					</a>
				<?php elseif ($gutenify_is_active && !class_exists('Gutenify_Pro')): ?>
					<a href="<?php echo esc_url(admin_url('admin.php?page=gutenify-demo-importer')); ?>"
						class="gutenify-store-base-admin-button primary-btn large" rel="noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
							<path
								d="M7.5 10.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M11.5 7.5c.828 0 1.5-.672 1.5-1.5S12.328 4.5 11.5 4.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path
								d="M16.5 9.5c.828 0 1.5-.672 1.5-1.5s-.672-1.5-1.5-1.5-1.5.672-1.5 1.5.672 1.5 1.5 1.5z" />
							<path d="M6 14c0-2 2-3 4-3 2.5 0 3 1.5 4.5 2.5S17 14 18 16c1 2-2 3-5 3-4 0-7-1-7-5z" />
						</svg>
						<span><?php esc_html_e('Browse Demos', 'gutenify-store-base'); ?></span>
					</a>
				<?php endif; ?>

				<a href="<?php echo esc_url('https://gutenify.com/documentations/'); ?>"
					class="gutenify-store-base-admin-button secondary-btn large" target="_blank" rel="noreferrer">
					<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
						stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
						<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
						<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
					</svg>
					<span><?php esc_html_e('Documentations', 'gutenify-store-base'); ?></span>
				</a>

				<?php if (!class_exists('Gutenify_Pro')): ?>
					<a href="<?php echo esc_url('https://gutenify.com/pricing'); ?>"
						class="gutenify-store-base-admin-button pro-btn large" target="_blank" rel="noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
							stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon">
							<path
								d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" />
						</svg>
						<span><?php esc_html_e('Go PRO', 'gutenify-store-base'); ?></span>
					</a>
				<?php endif; ?>
			</div>

		</div>

		<!-- Section: Marketplace -->
		<div id="marketplace" class="gutenify-tab-content" style="display:none;">
			<div class="marketplace-header-row">
				<div class="marketplace-header">
					<h3><?php esc_html_e('Recommended Plugins & Extensions', 'gutenify-store-base'); ?></h3>
					<p><?php esc_html_e('Extend your website features with our recommended and fully compatible plugins.', 'gutenify-store-base'); ?></p>
				</div>
				<div class="marketplace-header-actions">
					<a href="<?php echo esc_url('https://gutenify.com/contact/'); ?>" class="gutenify-store-base-admin-button secondary-btn" target="_blank" rel="noreferrer">
						<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="gutenify-svg-icon"><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
						<span><?php esc_html_e('Get Your Plugin Featured', 'gutenify-store-base'); ?></span>
					</a>
				</div>
			</div>

			<?php
			$recommended_plugins = array(
				'gutenify' => array(
					'name' => __('Gutenify', 'gutenify-store-base'),
					'author' => __('Gutenify', 'gutenify-store-base'),
					'tag' => __('Featured', 'gutenify-store-base'),
					'description' => __('Ultimate Gutenberg Full Site Editing (FSE) block editor with beautiful starter templates, advanced blocks, and customizable styling options.', 'gutenify-store-base'),
					'icon' => '<img src="https://ps.w.org/gutenify/assets/icon-256x256.png" alt="' . esc_attr__('Gutenify', 'gutenify-store-base') . '" class="plugin-icon-img" />',
					'is_active' => is_plugin_active('gutenify/gutenify.php'),
					'settings_url' => admin_url('admin.php?page=gutenify'),
					'external_url' => 'https://gutenify.com/',
				),
				'gutenify-mega-menu' => array(
					'name' => __('Gutenify Mega Menu', 'gutenify-store-base'),
					'author' => __('Gutenify', 'gutenify-store-base'),
					'tag' => __('Popular', 'gutenify-store-base'),
					'description' => __('Build stunning, responsive, and complex multi-column navigation menus for your website easily inside the native Gutenberg Block Editor.', 'gutenify-store-base'),
					'icon' => '<img src="https://ps.w.org/gutenify-mega-menu/assets/icon-256x256.gif" alt="' . esc_attr__('Gutenify Mega Menu', 'gutenify-store-base') . '" class="plugin-icon-img" />',
					'is_active' => is_plugin_active('gutenify-mega-menu/gutenify-mega-menu.php'),
					'settings_url' => admin_url('admin.php?page=gutenify'),
					'external_url' => 'https://wordpress.org/plugins/gutenify-mega-menu/',
				),
				'gutenify-pro' => array(
					'name' => __('Gutenify Pro', 'gutenify-store-base'),
					'author' => __('Gutenify', 'gutenify-store-base'),
					'tag' => __('Featured', 'gutenify-store-base'),
					'description' => __('Unlock professional block features, premium pre-built starter demo libraries, advanced animation controls, WooCommerce add-ons, and dedicated expert support.', 'gutenify-store-base'),
					'icon' => '<img src="https://ps.w.org/gutenify/assets/icon-256x256.png" alt="' . esc_attr__('Gutenify Pro', 'gutenify-store-base') . '" class="plugin-icon-img" />',
					'is_active' => class_exists('Gutenify_Pro'),
					'settings_url' => admin_url('admin.php?page=gutenify-settings'),
					'external_url' => 'https://gutenify.com/pricing',
				),
			);
			?>

			<div class="marketplace-grid admin-grid-3">
				<?php foreach ($recommended_plugins as $plugin_slug => $plugin): ?>
					<div class="marketplace-card gutenify-store-base-about-container">
						<div class="plugin-card-header">
							<div class="plugin-icon-wrapper">
								<?php echo $plugin['icon']; ?>
							</div>
							<div class="plugin-status-badge <?php echo $plugin['is_active'] ? 'active' : 'inactive'; ?>">
								<?php if ($plugin['is_active']): ?>
									<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
										class="gutenify-svg-icon">
										<polyline points="20 6 9 17 4 12" />
									</svg>
									<span><?php esc_html_e('Active', 'gutenify-store-base'); ?></span>
								<?php else: ?>
									<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
										class="gutenify-svg-icon">
										<circle cx="12" cy="12" r="10" />
										<line x1="15" y1="9" x2="9" y2="15" />
										<line x1="9" y1="9" x2="15" y2="15" />
									</svg>
									<span><?php esc_html_e('Inactive', 'gutenify-store-base'); ?></span>
								<?php endif; ?>
							</div>
						</div>

						<div class="plugin-card-body">
							<?php if (!empty($plugin['tag'])): ?>
								<div class="plugin-meta-row">
									<span class="plugin-tag <?php echo sanitize_html_class(strtolower($plugin['tag'])); ?>"><?php echo esc_html($plugin['tag']); ?></span>
								</div>
							<?php endif; ?>
							<h4><?php echo esc_html($plugin['name']); ?></h4>
							<?php if (!empty($plugin['author'])): ?>
								<span class="plugin-author"><?php echo esc_html(sprintf(__('by %s', 'gutenify-store-base'), $plugin['author'])); ?></span>
							<?php endif; ?>
							<p class="plugin-desc"><?php echo esc_html($plugin['description']); ?></p>
						</div>

						<div class="plugin-card-footer">
							<?php if ($plugin['is_active']): ?>
								<a href="<?php echo esc_url($plugin['settings_url']); ?>"
									class="gutenify-store-base-admin-button secondary-btn full-width">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
										class="gutenify-svg-icon">
										<circle cx="12" cy="12" r="3" />
										<path
											d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
									</svg>
									<span><?php esc_html_e('Configure Plugin', 'gutenify-store-base'); ?></span>
								</a>
							<?php else: ?>
								<a href="<?php echo esc_url($plugin['external_url']); ?>" target="_blank" rel="noreferrer"
									class="gutenify-store-base-admin-button primary-btn full-width">
									<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
										stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
										class="gutenify-svg-icon">
										<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
										<polyline points="15 3 21 3 21 9" />
										<line x1="10" y1="14" x2="21" y2="3" />
									</svg>
									<span><?php esc_html_e('Get Plugin', 'gutenify-store-base'); ?></span>
								</a>
							<?php endif; ?>
						</div>
					</div>
				<?php endforeach; ?>
			</div>
		</div>

	</div>
</div>

<!-- Educational Video Modal 1: How to import Themes? -->
<div id="gutenify-theme-modal-1" class="gutenify-video-modal-overlay" style="display:none;">
	<div class="gutenify-video-modal-content-wrapper">
		<div class="gutenify-video-modal-header">
			<h3><?php esc_html_e('How to import Themes?', 'gutenify-store-base'); ?></h3>
			<button class="gutenify-video-modal-close">&times;</button>
		</div>
		<div class="gutenify-video-modal-body">
			<iframe width="560" height="315" src="" data-src="https://www.youtube.com/embed/O_yzjL79oq0"
				title="<?php esc_attr_e('YouTube video player', 'gutenify-store-base'); ?>" frameborder="0"
				allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
				allowfullscreen></iframe>
		</div>
	</div>
</div>

<!-- Educational Video Modal 2: How to import Gutenberg Patterns? -->
<div id="gutenify-theme-modal-2" class="gutenify-video-modal-overlay" style="display:none;">
	<div class="gutenify-video-modal-content-wrapper">
		<div class="gutenify-video-modal-header">
			<h3><?php esc_html_e('How to import Gutenberg Patterns?', 'gutenify-store-base'); ?></h3>
			<button class="gutenify-video-modal-close">&times;</button>
		</div>
		<div class="gutenify-video-modal-body">
			<video width="320" height="240" controls>
				<source src=""
					data-src="https://gutenify-com.s3.amazonaws.com/wp-content/uploads/2022/03/16155705/template-add-gutenify.mp4"
					type="video/mp4" />
				<?php esc_html_e('Your browser does not support the video tag.', 'gutenify-store-base'); ?>
			</video>
		</div>
	</div>
</div>