<?php
/**
 * Enhanced setup wizard view.
 *
 * @package ZA_Creative_Login_Shield
 */

defined( 'ABSPATH' ) || exit;
?>
<div class="wrap zacls-onboarding">
	<div class="zacls-onboarding-container">
		<div class="zacls-onboarding-header">
			<span class="dashicons dashicons-shield" style="font-size:64px;width:64px;height:64px;color:#2271b1;"></span>
			<h1><?php esc_html_e( 'Welcome to ZA Creative Login Shield', 'za-creative-login-shield' ); ?></h1>
			<p class="description">
				<?php esc_html_e( 'Let\'s quickly set up your login security in a few steps. You can change these settings anytime.', 'za-creative-login-shield' ); ?>
			</p>
		</div>

		<div class="zacls-wizard-progress">
			<div class="wizard-step-indicator active" data-step="1">1</div>
			<div class="wizard-step-indicator" data-step="2">2</div>
			<div class="wizard-step-indicator" data-step="3">3</div>
			<div class="wizard-step-indicator" data-step="4">4</div>
			<div class="wizard-step-indicator" data-step="5">5</div>
		</div>

		<div class="zacls-wizard-step" data-step="1">
			<h2><?php esc_html_e( 'Custom Login URL', 'za-creative-login-shield' ); ?></h2>
			<p><?php esc_html_e( 'Change the default login URL to prevent bots from targeting wp-login.php. This is one of the most effective ways to reduce automated attacks.', 'za-creative-login-shield' ); ?></p>
			<label>
				<input type="checkbox" class="wizard-toggle" data-step="1" checked>
				<?php esc_html_e( 'Enable custom login URL', 'za-creative-login-shield' ); ?>
			</label>
			<div class="wizard-extra" style="margin-top:10px;">
				<code><?php echo esc_html( trailingslashit( home_url() ) ); ?></code>
				<input type="text" id="wizard-login-slug" value="be-login" class="regular-text" pattern="[a-z0-9\-]+">
			</div>
		</div>

		<div class="zacls-wizard-step" data-step="2" style="display:none;">
			<h2><?php esc_html_e( 'Login Limits & IP Blocking', 'za-creative-login-shield' ); ?></h2>
			<p><?php esc_html_e( 'Limit failed login attempts and automatically block IPs that exceed the threshold.', 'za-creative-login-shield' ); ?></p>
			<label>
				<input type="checkbox" class="wizard-toggle" data-step="2" checked>
				<?php esc_html_e( 'Limit failed login attempts (max 5 per 15 minutes)', 'za-creative-login-shield' ); ?>
			</label>
			<p style="margin-top:8px;color:#757575;font-size:12px;">
				<?php esc_html_e( 'IPs exceeding 10 failed attempts will be automatically blocked for 24 hours.', 'za-creative-login-shield' ); ?>
			</p>
		</div>

		<div class="zacls-wizard-step" data-step="3" style="display:none;">
			<h2><?php esc_html_e( 'Password Policy', 'za-creative-login-shield' ); ?></h2>
			<p><?php esc_html_e( 'Enforce strong password requirements for all users to prevent credential stuffing attacks.', 'za-creative-login-shield' ); ?></p>
			<label>
				<input type="checkbox" class="wizard-toggle" data-step="3" checked>
				<?php esc_html_e( 'Enforce strong password policy', 'za-creative-login-shield' ); ?>
			</label>
			<ul style="margin-top:8px;color:#757575;font-size:12px;">
				<li><?php esc_html_e( 'Minimum 8 characters', 'za-creative-login-shield' ); ?></li>
				<li><?php esc_html_e( 'Uppercase & lowercase letters', 'za-creative-login-shield' ); ?></li>
				<li><?php esc_html_e( 'At least one number', 'za-creative-login-shield' ); ?></li>
				<li><?php esc_html_e( 'At least one special character', 'za-creative-login-shield' ); ?></li>
			</ul>
		</div>

		<div class="zacls-wizard-step" data-step="4" style="display:none;">
			<h2><?php esc_html_e( 'Email Notifications', 'za-creative-login-shield' ); ?></h2>
			<p><?php esc_html_e( 'Get alerted about suspicious activity on your site.', 'za-creative-login-shield' ); ?></p>
			<label style="display:block;margin-bottom:8px;">
				<input type="checkbox" class="wizard-toggle" data-step="4" checked>
				<?php esc_html_e( 'Enable security email notifications', 'za-creative-login-shield' ); ?>
			</label>
			<p style="color:#757575;font-size:12px;">
				<?php esc_html_e( 'You will be notified of multiple failed logins, logins from new IPs, and blocked IP events.', 'za-creative-login-shield' ); ?>
			</p>
		</div>

		<div class="zacls-wizard-step" data-step="5" style="display:none;">
			<h2><?php esc_html_e( 'Two-Factor Authentication', 'za-creative-login-shield' ); ?></h2>
			<p><?php esc_html_e( 'Add an extra layer of security with email-based OTP verification or Google Authenticator.', 'za-creative-login-shield' ); ?></p>
			<label>
				<input type="checkbox" class="wizard-toggle" data-step="5" checked>
				<?php esc_html_e( 'Enable two-factor authentication', 'za-creative-login-shield' ); ?>
			</label>
			<p style="margin-top:12px;font-weight:600;">
				<?php esc_html_e( 'Setup Summary', 'za-creative-login-shield' ); ?>
			</p>
			<ul id="wizard-summary" style="color:#50575e;">
				<li><?php esc_html_e( 'Custom login URL enabled', 'za-creative-login-shield' ); ?></li>
				<li><?php esc_html_e( 'Login limiting and IP blocking active', 'za-creative-login-shield' ); ?></li>
				<li><?php esc_html_e( 'Strong password policy enforced', 'za-creative-login-shield' ); ?></li>
				<li><?php esc_html_e( 'Email notifications enabled', 'za-creative-login-shield' ); ?></li>
				<li><?php esc_html_e( 'Two-factor authentication enabled', 'za-creative-login-shield' ); ?></li>
			</ul>
		</div>

		<div class="zacls-wizard-nav">
			<button type="button" id="wizard-prev" class="zacls-btn" style="display:none;"><?php esc_html_e( 'Previous', 'za-creative-login-shield' ); ?></button>
			<button type="button" id="wizard-next" class="zacls-btn zacls-btn-primary"><?php esc_html_e( 'Next', 'za-creative-login-shield' ); ?></button>
			<button type="button" id="wizard-finish" class="zacls-btn zacls-btn-primary" style="display:none;"><?php esc_html_e( 'Complete Setup', 'za-creative-login-shield' ); ?></button>
		</div>

		<div class="zacls-onboarding-footer">
			<p>
				<a href="<?php echo esc_url( admin_url( 'admin.php?page=zacls' ) ); ?>" id="zacls-skip-onboarding">
					<?php esc_html_e( 'Skip setup, I\'ll configure later', 'za-creative-login-shield' ); ?>
				</a>
			</p>
		</div>
	</div>
</div>

