<!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-lg">
        <!-- 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">Yeni hesap oluşturun</p>
        </div>

        <!-- Register Form Card -->
        <div class="bg-verinay-dark-2 rounded-2xl p-8 shadow-2xl">
            <!-- Name & Surname Row -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div>
                    <label class="block verinay-white text-sm font-medium mb-2">Ad</label>
                    <input type="text" name="name" placeholder="Adınız"
                        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>
                <div>
                    <label class="block verinay-white text-sm font-medium mb-2">Soyad</label>
                    <input type="text" name="surname" placeholder="Soyadınız"
                        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>
            </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>

            <!-- 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" name="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"
                        required>
                    <button type="button" onclick="togglePassword('password')"
                        class="absolute right-3 top-1/2 -translate-y-1/2 verinay-gray-1">
                        <i id="password-eye" class="fa-solid fa-eye"></i>
                    </button>
                </div>
            </div>

            <!-- Password Confirm -->
            <div class="mb-6">
                <label class="block verinay-white text-sm font-medium mb-2">Şifre Tekrar</label>
                <div class="relative">
                    <input type="password" name="password_confirm" id="password_confirm" 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"
                        required>
                    <button type="button" onclick="togglePassword('password_confirm')"
                        class="absolute right-3 top-1/2 -translate-y-1/2 verinay-gray-1">
                        <i id="password_confirm-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>

            <!-- Terms & Conditions -->
            <div class="mb-6">
                <label class="flex items-start gap-3 cursor-pointer">
                    <input type="checkbox" name="terms" class="mt-1 w-4 h-4 accent-yellow-400" required>
                    <span class="verinay-gray-1 text-sm">
                        <a href="#" class="verinay-yellow-1 hover:underline">Kullanım Şartları</a>
                        ve
                        <a href="#" class="verinay-yellow-1 hover:underline">Gizlilik Politikası</a>'nı
                        okudum ve kabul ediyorum.
                    </span>
                </label>
            </div>

            <!-- Register 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">
                Kayıt Ol
            </button>

            <!-- Login Link -->
            <div class="text-center">
                <span class="verinay-gray-1 text-sm">Zaten hesabınız var mı? </span>
                <a href="login" class="verinay-yellow-1 hover:underline text-sm font-medium">Giriş Yap</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 = 'fas fa-eye-slash';
            } else {
                input.type = 'password';
                eyeIcon.className = 'fas fa-eye';
            }
        }
    </script>
</body>

</html>