<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset Password - INSCIPE</title>
    <script type="module" src="forgot.js"></script>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="forgot.css">
</head>
<body>
    <div class="bg-pattern" aria-hidden="true"></div>
    <div class="floating-particles" aria-hidden="true">
        <div class="particle" style="left: 10%; top: 20%;"></div>
        <div class="particle" style="left: 30%; top: 50%;"></div>
        <div class="particle" style="left: 50%; top: 70%;"></div>
        <div class="particle" style="left: 70%; top: 30%;"></div>
        <div class="particle" style="left: 90%; top: 60%;"></div>
    </div>
    <div class="container">
        <header>
            <div class="header" role="banner">
                <span>INSCIPE</span>
            </div>
        </header>
        <div class="left-panel" aria-hidden="true" id="welcome-panel">
            <button class="toggle-welcome" aria-label="Toggle welcome text" aria-controls="welcome-text">Show Welcome</button>
            <div class="welcome-text" id="welcome-text">
                <h1>Reset Your <span>Password</span></h1>
                <p>Secure your account by resetting your password. We'll send you a link to create a new one and get you back to shopping with INSCIPE.</p>
            </div>
        </div>
        <div class="right-panel" role="main">
            <div class="reset-container">
                <div class="reset-header">
                    <h2>Forgot Password?</h2>
                    <p>Enter your email to receive a password reset link</p>
                </div>
                <div class="success-message" id="successMessage" aria-live="polite">
                    <p>
                        <i class="fas fa-check-circle success-icon"></i>
                        <strong>Reset email sent!</strong> Check your inbox for a link to reset your password. If you don't see it, please check your spam folder.
                    </p>
                </div>
                <form id="resetForm" aria-label="Password reset form">
                    <div class="form-group">
                        <label for="email">Email Address</label>
                        <div class="input-group">
                            <i class="fas fa-envelope" aria-hidden="true"></i>
                            <input type="email" id="email" class="input-field" placeholder="your@email.com" required aria-label="Email" />
                        </div>
                    </div>
                    <button type="submit" class="submit-btn" id="resetBtn" aria-label="Send reset link">Send Reset Link</button>
                </form>
                <div class="back-to-login">
                    Remember your password? <a href="login">Back to login</a>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
    // Welcome text toggle for mobile
    const toggleButton = document.querySelector('.toggle-welcome');
    const welcomeText = document.querySelector('.welcome-text');

    if (toggleButton && welcomeText) {
        toggleButton.addEventListener('click', () => {
            welcomeText.classList.toggle('active');
            toggleButton.textContent = welcomeText.classList.contains('active') ? 'Hide Welcome' : 'Show Welcome';
            toggleButton.setAttribute('aria-expanded', welcomeText.classList.contains('active'));
        });
    }

    // Server-side password reset
    const resetForm = document.getElementById('resetForm');
    const resetBtn = document.getElementById('resetBtn');
    const successMessage = document.getElementById('successMessage');

    if (resetForm) {
        resetForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            
            const email = document.getElementById('email').value;
            
            resetBtn.disabled = true;
            resetBtn.textContent = 'Sending...';
            
            try {
                const response = await fetch('/api/reset-password', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ email }),
                });
                const data = await response.json();
                
                if (response.ok) {
                    successMessage.classList.add('show');
                    resetForm.style.display = 'none';
                } else {
                    throw new Error(data.error || 'Failed to send reset link');
                }
            } catch (error) {
                alert(error.message);
                resetBtn.disabled = false;
                resetBtn.textContent = 'Send Reset Link';
            }
        });
    }
});
    </script>
</body>
</html>
    <script>
      console.clear();
    </script>