<?php
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

wp_enqueue_style( 'x4email-admin-modern', esc_url( plugins_url( 'assets/css/admin-modern.css', dirname( __DIR__ ) ) ), array(), X4EMAIL_LITE_VER );
// Check if user has required capabilities.
if ( ! current_user_can( 'manage_options' ) ) {
	wp_die( esc_html__( 'You do not have sufficient permissions to access this page.', 'x4email-lite' ) );
}
?>
<div class="x4email-admin" style="min-height:100vh; background: var(--color-bg); padding: 2.5rem 0;">
	<div style="max-width: 1000px; margin: 0 auto;">
	<div class="x4email-title" style="display:flex;align-items:center;justify-content:space-between;gap:0.75em;flex-direction:row;">
		<div style="display:flex;flex-direction:column;align-items:flex-start;">
		<h1 style="color:#fff;">SECURITY</h1>
		<span style="font-size:1rem;color:#fff;opacity:0.9;margin-top:0.25em;letter-spacing:0.01em;">Manage security features for your admin area.</span>
		</div>
		<span style="font-size:3.5em;opacity:0.95;line-height:1;display:flex;align-items:center;justify-content:center;"><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='2' width='48' height='48'><path stroke-linecap='round' stroke-linejoin='round' d='M12 4v16m8-8H4'/></svg></span>
	</div>
	<div style="position:relative; margin:2.5rem auto; max-width:1000px;">
		<!-- Blur overlay -->
		<div id="x4email-security-blur" style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:auto;flex-direction:column;">
		<div style="background:rgba(255,255,255,0.95);padding:2em 3em 1.5em 3em;border-radius:12px;box-shadow:0 2px 12px 0 rgba(25,118,210,0.10);font-size:1.3em;color:#1976d2;font-weight:700;text-align:center;display: flex;flex-direction: column;">
			<span style="display:flex;align-items:center;justify-content:center;margin-bottom:0.7em;">
			<svg xmlns='http://www.w3.org/2000/svg' width='44' height='44' fill='none' viewBox='0 0 24 24'><rect width='24' height='24' fill='none'/><path d='M17 11V7a5 5 0 0 0-10 0v4' stroke='#1976d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><rect x='5' y='11' width='14' height='9' rx='2' stroke='#1976d2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/><circle cx='12' cy='15.5' r='1.5' fill='#1976d2'/></svg>
			</span>
			<?php esc_html_e( 'Upgrade to Pro for Security Features', 'x4email-lite' ); ?>    
			<div style="font-size:1em;color:#333;font-weight:400;margin:1em 0 1.5em 0;">
			<?php esc_html_e( 'Get Two-Factor Authentication (2FA) and admin login notifications with X4EMAIL Pro.', 'x4email-lite' ); ?>
			</div>
			<a href="<?php echo defined( 'X4EMAIL_PRO_URL' ) ? esc_url( X4EMAIL_PRO_URL ) : 'https://x4digital.io/'; ?>" target="_blank" class="x4email-btn" style="margin-top:0.5em;font-size:1.1em;font-weight:700;padding:0.7em 2.2em;">
			<?php esc_html_e( 'Upgrade to Pro', 'x4email-lite' ); ?>
			</a>
		</div>
		</div>
		<!-- Demo Security Feature Form (blurred) -->
		<div style="filter: blur(5px); pointer-events: none; opacity: 0.7; width:100%;">
		<div class="x4email-card x4email-box-shadow" style="padding:2em 2.5em; background:#fff; border-radius:12px; max-width:1000px; margin:0 auto;">
			<h2 style="color:#1976d2; margin-bottom:1.2em; font-size:1.3em;">Security Settings (Demo)</h2>
			<form>
			<div style="margin-bottom:1.5em;">
				<label style="display:flex;align-items:center;gap:0.7em;font-weight:600;">
				<input type="checkbox" disabled checked style="accent-color:#1976d2; width:1.2em; height:1.2em;">
				<?php esc_html_e( 'Enable Two-Factor Authentication (2FA)', 'x4email-lite' ); ?>
				</label>
				<div style="font-size:0.98em;color:#444;margin-left:2.1em;opacity:0.85;">
				<?php esc_html_e( 'Require admins to use a second authentication step when logging in.', 'x4email-lite' ); ?>
				</div>
			</div>
			<div style="margin-bottom:1.5em;">
				<label style="display:flex;align-items:center;gap:0.7em;font-weight:600;">
				<input type="checkbox" disabled checked style="accent-color:#1976d2; width:1.2em; height:1.2em;">
				<?php esc_html_e( 'Admin Login Notifications', 'x4email-lite' ); ?>
				</label>
				<div style="font-size:0.98em;color:#444;margin-left:2.1em;opacity:0.85;">
				<?php esc_html_e( 'Receive an email notification when an admin logs in.', 'x4email-lite' ); ?>
				</div>
			</div>
			<div style="margin-bottom:1.5em;">
				<label style="display:flex;align-items:center;gap:0.7em;font-weight:600;">
				<input type="checkbox" disabled style="accent-color:#1976d2; width:1.2em; height:1.2em;">
				<?php esc_html_e( 'Block Suspicious IPs', 'x4email-lite' ); ?>
				</label>
				<div style="font-size:0.98em;color:#444;margin-left:2.1em;opacity:0.85;">
				<?php esc_html_e( 'Automatically block IPs with repeated failed login attempts.', 'x4email-lite' ); ?>
				</div>
			</div>
			<button type="button" class="x4email-btn" style="margin-top:1em;opacity:0.7;pointer-events:none;" disabled><?php esc_html_e( 'Save Settings', 'x4email-lite' ); ?></button>
			</form>
		</div>
		</div>
	</div>
	</div>
</div>
