<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <title>Forgot Password - TyreCare 360</title>
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/variables.css">
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/base.css">
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/components.css">
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/animations.css">
    <link rel="stylesheet" href="<?= ($ASSET_PATH) ?>/css/mobile.css">
    <style>
        .login-container {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        
        .login-card {
            width: 100%;
            max-width: 420px;
            padding: 40px;
        }
        
        .login-header {
            text-align: center;
            margin-bottom: 32px;
        }
        
        .login-logo {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
        }
        
        .login-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 8px;
        }
        
        .login-subtitle {
            color: var(--text-muted);
            font-size: 0.875rem;
        }
        
        .info-box {
            background: #f0f9ff;
            border: 1px solid #bae6fd;
            border-radius: 12px;
            padding: 24px;
            margin-bottom: 24px;
        }
        
        .info-box h3 {
            color: #0369a1;
            font-size: 1rem;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .info-box p {
            color: #0c4a6e;
            font-size: 0.875rem;
            line-height: 1.6;
            margin-bottom: 16px;
        }
        
        .info-box ul {
            color: #0c4a6e;
            font-size: 0.875rem;
            padding-left: 20px;
            margin: 0;
        }
        
        .info-box li {
            margin-bottom: 8px;
        }
        
        .contact-info {
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
            margin-top: 16px;
        }
        
        .contact-info p {
            margin: 0;
            font-size: 0.875rem;
            color: #374151;
        }
        
        .contact-info strong {
            color: #7c3aed;
        }
        
        .back-link {
            display: block;
            text-align: center;
            margin-top: 20px;
            color: var(--primary);
            font-size: 0.875rem;
        }
        
        @media (max-width: 480px) {
            .login-card {
                margin: 12px;
                padding: 24px 16px;
            }
            .login-title { font-size: 1.25rem; }
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="glass-card login-card fade-in">
            <div class="login-header">
                <img src="<?= ($ASSET_PATH) ?>/images/logo.png" alt="TyreCare 360" class="login-logo" onerror="this.style.display='none'">
                <h1 class="login-title">Forgot Password</h1>
                <p class="login-subtitle">Need help accessing your account?</p>
            </div>
            
            <div class="info-box">
                <h3>
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    Password Reset Instructions
                </h3>
                <p>For security reasons, password reset requires verification by your administrator.</p>
                <p>Please contact your administrator with the following information:</p>
                <ul>
                    <li>Your registered email address</li>
                    <li>Your full name</li>
                    <li>Company name (if applicable)</li>
                </ul>
                
                <div class="contact-info">
                    <p>Your administrator will reset your password and provide you with new login credentials.</p>
                </div>
            </div>
            
            <a href="<?= ($BASE_PATH) ?>/login" class="btn btn-primary" style="width: 100%; text-align: center; padding: 14px;">
                Back to Login
            </a>
        </div>
    </div>
</body>
</html>
