<!DOCTYPE html>
<html lang="tr">

<head>
    <?php include 'inc/head.php'; ?>
</head>

<body class="bg-verinay-dark min-h-screen flex items-center justify-center px-4 py-8">
    <div class="w-full max-w-md">
        <!-- Logo/Brand -->
        <div class="text-center mb-8">
            <h1 class="verinay-yellow-1 text-4xl font-bold mb-2">Verinay</h1>
            <p class="verinay-gray-1 text-lg">Şifrenizi sıfırlayın</p>
        </div>

        <!-- Forgot Password Form Card -->
        <div class="bg-verinay-dark-2 rounded-2xl p-8 shadow-2xl">
            <!-- Info Text -->
            <div class="text-center mb-6">
                <div class="w-16 h-16 bg-verinay-yellow-1 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa-solid fa-key verinay-dark text-xl"></i>
                </div>
                <h2 class="verinay-white text-xl font-semibold mb-2">Şifrenizi mi unuttunuz?</h2>
                <p class="verinay-gray-1 text-sm">
                    E-posta adresinizi girin, size şifre sıfırlama bağlantısı gönderelim.
                </p>
            </div>

            <!-- Email Input -->
            <div class="mb-6">
                <label class="block verinay-white text-sm font-medium mb-2">E-posta</label>
                <input type="email" name="email" placeholder="ornek@email.com"
                    class="w-full px-4 py-3 bg-verinay-dark-4 verinay-white rounded-lg border border-gray-600 focus:border-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-30 transition-all"
                    required>
            </div>

            <!-- Captcha - Responsive -->
            <div class="mb-8">
                <label class="block verinay-white text-sm font-medium mb-2">Güvenlik Kodu</label>
                <div class="flex flex-col sm:flex-row gap-3">
                    <input type="text" placeholder="Kodu girin"
                        class="w-full sm:flex-1 px-4 py-3 bg-verinay-dark-4 verinay-white rounded-lg border border-gray-600 focus:border-yellow-400 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-30 transition-all">
                    <div class="w-full sm:w-28 h-12 bg-verinay-gray-2 rounded-lg flex items-center justify-center">
                        <span class="verinay-white font-bold text-lg select-none">X7K9</span>
                    </div>
                </div>
            </div>

            <!-- Submit Button -->
            <button
                class="w-full bg-verinay-yellow-1 verinay-dark py-3 rounded-lg font-semibold text-lg hover:bg-verinay-yellow-2 transition-colors duration-200 mb-6">
                <i class="fas fa-paper-plane mr-2"></i>
                Sıfırlama Bağlantısı Gönder
            </button>

            <!-- Back to Login -->
            <div class="text-center">
                <span class="verinay-gray-1 text-sm">Şifrenizi hatırladınız mı? </span>
                <a href="login" class="verinay-yellow-1 hover:underline text-sm font-medium">
                    Giriş Yap
                </a>
            </div>
        </div>

        <!-- Info Box -->
        <div class="bg-verinay-dark-4 rounded-xl p-6 mt-6 border border-gray-600">
            <div class="flex items-start gap-3">
                <i class="fas fa-info-circle verinay-yellow-1 text-lg mt-1"></i>
                <div>
                    <h3 class="verinay-white font-medium mb-2">Bilgilendirme</h3>
                    <ul class="verinay-gray-1 text-sm space-y-1">
                        <li>• Sıfırlama bağlantısı 15 dakika geçerlidir</li>
                        <li>• E-posta gelmezse spam klasörünü kontrol edin</li>
                        <li>• Sorun devam ederse destek ekibimize ulaşın</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="text-center mt-8">
            <p class="verinay-gray-1 text-sm">&copy; 2016 - <?php echo date('Y'); ?> Verinay. Tüm hakları saklıdır.</p>
        </div>
    </div>
</body>

</html>