{% extends "base.html" %}
{% block title %}Choose Your Email - Jadwa AI{% endblock %}
{% block content %}
<div class="min-h-[calc(100vh-80px)] flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- Background Decor -->
    <div class="absolute bottom-0 right-0 w-[600px] h-[600px] bg-emerald-500/5 rounded-full blur-[120px] -z-10 animate-pulse-slow"></div>
    <div class="absolute top-0 left-0 w-[600px] h-[600px] bg-gold-500/5 rounded-full blur-[120px] -z-10 animate-pulse-slow"></div>

    <div class="max-w-md w-full bg-slate-900/70 backdrop-blur-xl p-10 rounded-3xl border border-slate-700 shadow-2xl relative">
        <div class="text-center mb-8">
            <a href="/" class="block mx-auto mb-6 w-28">
                <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Jadwa AI Logo">
            </a>
            <h2 class="text-3xl font-serif font-bold text-white mb-2">Choose Your Email</h2>
            <p class="text-slate-400 text-sm">How would you like to verify your account?</p>
        </div>

        <div class="space-y-4">
            <!-- Gmail Option -->
            <form action="{{ url_for('auth.register_step2') }}" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="email_type" value="gmail">
                <div class="mb-4">
                    <input type="email" name="email" placeholder="your@gmail.com" required
                           class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 sm:text-sm transition duration-300"
                           pattern=".*@gmail\.com" title="Please enter a Gmail address">
                </div>
                <button type="submit" class="group relative w-full flex justify-center items-center gap-3 py-4 px-4 border border-slate-600 rounded-xl text-white bg-white/5 hover:bg-white/10 transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gold-500">
                    <svg class="w-5 h-5" viewBox="0 0 24 24">
                        <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                        <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                        <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                        <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                    </svg>
                    <span>Continue with Gmail</span>
                </button>
            </form>

            <div class="relative my-6">
                <div class="absolute inset-0 flex items-center">
                    <div class="w-full border-t border-slate-700"></div>
                </div>
                <div class="relative flex justify-center text-sm">
                    <span class="px-2 bg-slate-900 text-slate-500">or</span>
                </div>
            </div>

            <!-- Personal Email Option -->
            <form action="{{ url_for('auth.register_step2') }}" method="POST">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="hidden" name="email_type" value="personal">
                <div class="mb-4">
                    <input type="email" name="email" placeholder="your@email.com" required
                           class="appearance-none relative block w-full px-4 py-4 rounded-xl bg-black/50 border border-white/10 placeholder-slate-500 text-white focus:outline-none focus:ring-2 focus:ring-gold-500/50 focus:border-gold-500 sm:text-sm transition duration-300">
                </div>
                <button type="submit" class="group relative w-full flex justify-center py-4 px-4 border border-transparent text-sm font-bold rounded-xl text-white bg-gradient-to-r from-gold-400 to-gold-600 hover:from-gold-300 hover:to-gold-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gold-500 transition duration-300 shadow-[0_0_20px_rgba(210,175,32,0.3)] hover:shadow-[0_0_30px_rgba(210,175,32,0.5)] hover:-translate-y-0.5">
                    Send OTP to Personal Email
                </button>
            </form>

            <div class="text-center pt-4">
                <a href="{{ url_for('auth.register') }}" class="text-slate-500 text-sm hover:text-slate-400 transition border-b border-transparent hover:border-slate-500 pb-0.5">
                    ← Back to Profile
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}