<?php
/**
 * Overview page template.
 *
 * @package LoginPageCustomizerAndDesigner
 */

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

$lpcd_version    = defined( 'LPCD_VERSION' ) ? LPCD_VERSION : '1.0.0';
$lpcd_is_enabled = (bool) LPCD_Settings_Manager::get( 'pluginEnabled', true );
$lpcd_login_url  = wp_login_url();
$lpcd_editor_url = admin_url( 'admin.php?page=lpcd-editor' );
$lpcd_settings_url = admin_url( 'admin.php?page=lpcd-settings' );
?>
<div class="lpcd-overview-wrap">

	<!-- Header -->
	<header class="lpcd-ov-header">
		<div class="lpcd-ov-header-inner">
			<div class="lpcd-ov-brand">
				<div class="lpcd-ov-brand-icon">
					<span class="dashicons dashicons-admin-customizer"></span>
				</div>
				<h1><?php esc_html_e( 'LoginCraft', 'login-page-customizer-and-designer' ); ?></h1>
			</div>
			<div class="lpcd-ov-header-actions">
				<span class="lpcd-ov-version-badge">
					<?php
					printf(
						/* translators: %s: Plugin version. */
						esc_html__( 'v%s', 'login-page-customizer-and-designer' ),
						esc_html( $lpcd_version )
					);
					?>
				</span>
			</div>
		</div>
	</header>

	<!-- Main -->
	<div class="lpcd-ov-main">
		<div class="lpcd-ov-layout">

			<!-- Content -->
			<div class="lpcd-ov-content">

				<!-- Welcome Banner -->
				<section class="lpcd-ov-welcome">
					<div class="lpcd-ov-welcome-inner">
						<h2><?php esc_html_e( 'Welcome to LoginCraft Customizer', 'login-page-customizer-and-designer' ); ?></h2>
						<p><?php esc_html_e( 'Transform your WordPress login page into a professional, branded experience in just a few clicks. Start with our quick guide below.', 'login-page-customizer-and-designer' ); ?></p>
					</div>
				</section>

				<!-- Quick Start Guide -->
				<section>
					<h3 class="lpcd-ov-section-title">
						<span class="dashicons dashicons-admin-tools"></span>
						<?php esc_html_e( 'Quick Start Guide', 'login-page-customizer-and-designer' ); ?>
					</h3>

					<div class="lpcd-ov-steps">

						<!-- Step 1: Enable -->
						<div class="lpcd-ov-step">
							<div class="lpcd-ov-step-left">
								<div class="lpcd-ov-step-icon">
									<span class="dashicons dashicons-admin-plugins"></span>
								</div>
								<div class="lpcd-ov-step-text">
									<h4><?php esc_html_e( '1. Enable Plugin', 'login-page-customizer-and-designer' ); ?></h4>
									<p><?php esc_html_e( 'Activate LoginCraft to begin customizing your login portal.', 'login-page-customizer-and-designer' ); ?></p>
								</div>
							</div>
							<label class="lpcd-ov-toggle" id="lpcd-ov-enable-toggle">
								<input type="checkbox" <?php checked( $lpcd_is_enabled ); ?> id="lpcd-ov-enable-cb" />
								<span class="lpcd-ov-toggle-track"></span>
							</label>
						</div>

						<!-- Step 2: Customize -->
						<div class="lpcd-ov-step">
							<div class="lpcd-ov-step-left">
								<div class="lpcd-ov-step-icon">
									<span class="dashicons dashicons-art"></span>
								</div>
								<div class="lpcd-ov-step-text">
									<h4><?php esc_html_e( '2. Choose a Template or Customize', 'login-page-customizer-and-designer' ); ?></h4>
									<p><?php esc_html_e( 'Select a pre-designed layout or build your own from scratch.', 'login-page-customizer-and-designer' ); ?></p>
								</div>
							</div>
							<a href="<?php echo esc_url( $lpcd_editor_url ); ?>" class="lpcd-ov-btn-text"><?php esc_html_e( 'Go to Editor', 'login-page-customizer-and-designer' ); ?></a>
						</div>

						<!-- Step 3: View -->
						<div class="lpcd-ov-step">
							<div class="lpcd-ov-step-left">
								<div class="lpcd-ov-step-icon">
									<span class="dashicons dashicons-visibility"></span>
								</div>
								<div class="lpcd-ov-step-text">
									<h4><?php esc_html_e( '3. Publish and View', 'login-page-customizer-and-designer' ); ?></h4>
									<p><?php esc_html_e( 'Once you\'re happy, hit publish to go live instantly.', 'login-page-customizer-and-designer' ); ?></p>
								</div>
							</div>
							<a href="<?php echo esc_url( $lpcd_login_url ); ?>" target="_blank" rel="noopener" class="lpcd-ov-btn-dark"><?php esc_html_e( 'View Page', 'login-page-customizer-and-designer' ); ?></a>
						</div>

					</div>
				</section>

				<!-- Pro CTA -->
				<section class="lpcd-ov-pro-cta">
					<div class="lpcd-ov-pro-inner">
						<div class="lpcd-ov-pro-info">
							<h3><?php esc_html_e( 'Get LoginCraft Pro', 'login-page-customizer-and-designer' ); ?></h3>
							<p><?php esc_html_e( 'Unlock powerful features to create the ultimate user entry experience.', 'login-page-customizer-and-designer' ); ?></p>
							<div class="lpcd-ov-pro-features">
								<div class="lpcd-ov-pro-feature">
									<span class="dashicons dashicons-yes-alt"></span>
									<span><?php esc_html_e( '19+ Premium Templates — Glassmorphism, Cyberpunk & more', 'login-page-customizer-and-designer' ); ?></span>
								</div>
								<div class="lpcd-ov-pro-feature">
									<span class="dashicons dashicons-yes-alt"></span>
									<span><?php esc_html_e( 'CAPTCHA Protection — Block bots & brute-force attacks', 'login-page-customizer-and-designer' ); ?></span>
								</div>
								<div class="lpcd-ov-pro-feature">
									<span class="dashicons dashicons-yes-alt"></span>
									<span><?php esc_html_e( 'Custom Login URL — Hide wp-login.php from attackers', 'login-page-customizer-and-designer' ); ?></span>
								</div>
								<div class="lpcd-ov-pro-feature">
									<span class="dashicons dashicons-yes-alt"></span>
									<span><?php esc_html_e( 'Video & Animated Backgrounds — Next-level visual experience', 'login-page-customizer-and-designer' ); ?></span>
								</div>
							</div>
						</div>
						<div>
							<a href="#" class="lpcd-ov-btn-primary"><?php esc_html_e( 'Upgrade Now', 'login-page-customizer-and-designer' ); ?></a>
						</div>
					</div>
				</section>

			</div>

			<!-- Sidebar -->
			<aside class="lpcd-ov-sidebar">

				<!-- More From Us -->
				<div class="lpcd-ov-card">
					<div class="lpcd-ov-card-header">
						<span class="dashicons dashicons-screenoptions"></span>
						<h4><?php esc_html_e( 'More from Us', 'login-page-customizer-and-designer' ); ?></h4>
					</div>
					<div class="lpcd-ov-card-body">
						<?php
						$lpcd_recommended_plugins = array(
							array(
								'name'        => 'Uply - Scroll to Top',
								'slug'        => 'uply-scroll-to-top-and-progress-bar',
								'description' => __( 'Scroll to top & progress bar', 'login-page-customizer-and-designer' ),
								'icon'        => 'dashicons-arrow-up-alt',
								'color'       => 'blue',
								'file'        => 'uply-scroll-to-top-and-progress-bar/uply-scroll-to-top-and-progress-bar.php',
							),
							array(
								'name'        => 'SmartWait Preloader',
								'slug'        => 'smartwait-animated-preloader',
								'description' => __( 'Animated preloader', 'login-page-customizer-and-designer' ),
								'icon'        => 'dashicons-update',
								'color'       => 'purple',
								'file'        => 'smartwait-animated-preloader/smartwait-animated-preloader.php',
							),
						);

						foreach ( $lpcd_recommended_plugins as $lpcd_rec_plugin ) :
							$lpcd_rec_installed = file_exists( WP_PLUGIN_DIR . '/' . $lpcd_rec_plugin['file'] );
							$lpcd_rec_active    = is_plugin_active( $lpcd_rec_plugin['file'] );

							if ( $lpcd_rec_active ) {
								$lpcd_rec_btn_text  = __( 'Active', 'login-page-customizer-and-designer' );
								$lpcd_rec_btn_class = 'lpcd-ov-btn-text lpcd-ov-btn-active';
								$lpcd_rec_action    = 'active';
							} elseif ( $lpcd_rec_installed ) {
								$lpcd_rec_btn_text  = __( 'Activate', 'login-page-customizer-and-designer' );
								$lpcd_rec_btn_class = 'lpcd-ov-btn-text';
								$lpcd_rec_action    = 'activate';
							} else {
								$lpcd_rec_btn_text  = __( 'Install', 'login-page-customizer-and-designer' );
								$lpcd_rec_btn_class = 'lpcd-ov-btn-text';
								$lpcd_rec_action    = 'install';
							}
							?>
							<div class="lpcd-ov-plugin-row">
								<div class="lpcd-ov-plugin-icon lpcd-ov-plugin-icon--<?php echo esc_attr( $lpcd_rec_plugin['color'] ); ?>">
									<span class="dashicons <?php echo esc_attr( $lpcd_rec_plugin['icon'] ); ?>"></span>
								</div>
								<div class="lpcd-ov-plugin-meta">
									<strong><?php echo esc_html( $lpcd_rec_plugin['name'] ); ?></strong>
									<span><?php echo esc_html( $lpcd_rec_plugin['description'] ); ?></span>
								</div>
								<button
									class="<?php echo esc_attr( $lpcd_rec_btn_class ); ?>"
									data-slug="<?php echo esc_attr( $lpcd_rec_plugin['slug'] ); ?>"
									data-file="<?php echo esc_attr( $lpcd_rec_plugin['file'] ); ?>"
									data-action="<?php echo esc_attr( $lpcd_rec_action ); ?>"
									<?php disabled( $lpcd_rec_active ); ?>
								>
									<?php echo esc_html( $lpcd_rec_btn_text ); ?>
								</button>
							</div>
						<?php endforeach; ?>
					</div>
					<div class="lpcd-ov-card-footer">
						<a href="<?php echo esc_url( admin_url( 'plugin-install.php?s=shoiswp&tab=search&type=author' ) ); ?>"><?php esc_html_e( 'View all plugins →', 'login-page-customizer-and-designer' ); ?></a>
					</div>
				</div>

				<!-- Help & Resources -->
				<div class="lpcd-ov-card">
					<div class="lpcd-ov-card-header lpcd-ov-card-header--gradient">
						<span class="dashicons dashicons-editor-help"></span>
						<h4><?php esc_html_e( 'Help & Resources', 'login-page-customizer-and-designer' ); ?></h4>
					</div>
					<div class="lpcd-ov-help-links">
						<a href="#" class="lpcd-ov-help-link">
							<span class="dashicons dashicons-book"></span>
							<?php esc_html_e( 'Documentation', 'login-page-customizer-and-designer' ); ?>
						</a>
						<a href="#" class="lpcd-ov-help-link">
							<span class="dashicons dashicons-format-chat"></span>
							<?php esc_html_e( 'Support Forum', 'login-page-customizer-and-designer' ); ?>
						</a>
						<a href="#" class="lpcd-ov-help-link">
							<span class="dashicons dashicons-video-alt3"></span>
							<?php esc_html_e( 'Video Tutorials', 'login-page-customizer-and-designer' ); ?>
						</a>
					</div>
				</div>

				<!-- Status Card -->
				<div class="lpcd-ov-status">
					<p class="lpcd-ov-status-label"><?php esc_html_e( 'Current Status', 'login-page-customizer-and-designer' ); ?></p>
					<div class="lpcd-ov-status-value" id="lpcd-ov-status-display">
						<?php if ( $lpcd_is_enabled ) : ?>
							<span class="lpcd-ov-status-dot"></span>
							<span><?php esc_html_e( 'Custom Login Active', 'login-page-customizer-and-designer' ); ?></span>
						<?php else : ?>
							<span class="lpcd-ov-status-dot lpcd-ov-status-dot--inactive"></span>
							<span><?php esc_html_e( 'Custom Login Inactive', 'login-page-customizer-and-designer' ); ?></span>
						<?php endif; ?>
					</div>
					<p>
						<?php if ( $lpcd_is_enabled ) : ?>
							<?php esc_html_e( 'Your custom login page is currently serving 100% of your site traffic.', 'login-page-customizer-and-designer' ); ?>
						<?php else : ?>
							<?php esc_html_e( 'Enable the plugin above to start using your custom login page.', 'login-page-customizer-and-designer' ); ?>
						<?php endif; ?>
					</p>
				</div>

			</aside>

		</div>
	</div>

	<!-- Footer -->
	<footer class="lpcd-ov-footer">
		<p>
			<?php
			printf(
				/* translators: %s: Year. */
				esc_html__( '© %s LoginCraft. All rights reserved.', 'login-page-customizer-and-designer' ),
				esc_html( gmdate( 'Y' ) )
			);
			?>
		</p>
		<div class="lpcd-ov-footer-links">
			<a href="https://wordpress.org/support/plugin/login-page-customizer-and-designer/" target="_blank" rel="noopener"><?php esc_html_e( 'Support', 'login-page-customizer-and-designer' ); ?></a>
			<a href="https://wordpress.org/plugins/login-page-customizer-and-designer/#reviews" target="_blank" rel="noopener"><?php esc_html_e( 'Rate ★★★★★', 'login-page-customizer-and-designer' ); ?></a>
		</div>
	</footer>

</div>

