<!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">
    <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">Hesabınıza giriş yapın</p>
        </div>

        <!-- Login Form Card -->
        <div class="bg-verinay-dark-2 rounded-2xl p-8 shadow-2xl">
            <!-- Email Input -->
            <div class="mb-6">
                <label class="block verinay-white text-sm font-medium mb-2">E-posta</label>
                <input type="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">
            </div>

            <!-- Password Input -->
            <div class="mb-6">
                <label class="block verinay-white text-sm font-medium mb-2">Şifre</label>
                <div class="relative">
                    <input type="password" id="password" placeholder="••••••••"
                        class="w-full px-4 py-3 pr-12 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">
                    <button type="button" onclick="togglePassword('password')"
                        class="absolute right-3 top-1/2 -translate-y-1/2 verinay-gray-1 hover:verinay-yellow-1 transition-colors">
                        <i id="password-eye" class="fa-solid fa-eye"></i>
                    </button>
                </div>
            </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>

            <!-- Login 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-4">
                Giriş Yap
            </button>

            <!-- Additional Links -->
            <div class="flex justify-between items-center">
                <a href="forgot-password" class="verinay-yellow-1 text-sm transition-colors">Şifremi Unuttum</a>
                <a href="register" class="verinay-yellow-1 text-sm transition-colors">Kayıt Ol</a>
            </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>



    <script>
        // Toggle password visibility
        function togglePassword(inputId) {
            const input = document.getElementById(inputId);
            const eyeIcon = document.getElementById(inputId + '-eye');

            if (input.type === 'password') {
                input.type = 'text';
                eyeIcon.className = 'fa-solid fa-eye-slash';
            } else {
                input.type = 'password';
                eyeIcon.className = 'fa-solid fa-eye';
            }
        }
    </script>
</body>

</html>