{% extends "base.html" %}
{% block title %}Register - Infyrus Tech{% endblock %}

{% block content %}
<section class="hero-bg min-h-screen flex items-center justify-center pt-20 pb-10 relative overflow-hidden">
    <div class="orb w-80 h-80 bg-blue-600 top-0 -right-10 opacity-15" style="position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;"></div>
    <div class="orb w-80 h-80 bg-purple-600 bottom-0 -left-10 opacity-15" style="position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;"></div>
    
    <div class="w-full max-w-lg px-4 relative" data-aos="fade-up">
        <div class="text-center mb-8">
            <a href="/" class="inline-flex items-center gap-2">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center shadow-lg">
                    <i class="fa-solid fa-bolt text-white"></i>
                </div>
                <span class="font-display font-bold text-2xl text-white">Infyrus<span class="gradient-text">Tech</span></span>
            </a>
            <h1 class="font-display font-bold text-3xl text-white mt-6 mb-1">Create your account</h1>
            <p class="text-slate-400 text-sm">Start hosting in minutes. Free for 30 days.</p>
        </div>
        
        <div class="glass-strong rounded-2xl p-8">
            <form>
                <div class="grid sm:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">First Name</label>
                        <input type="text" placeholder="Ram" 
                            class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                    </div>
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">Last Name</label>
                        <input type="text" placeholder="Sharma" 
                            class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                    </div>
                </div>
                
                <div class="space-y-4">
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">Email Address</label>
                        <div class="relative">
                            <i class="fa-solid fa-envelope absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                            <input type="email" placeholder="you@example.com" 
                                class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 pl-11 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">Phone Number</label>
                        <div class="flex gap-2">
                            <div class="w-20 bg-[#0F172A] border border-white/10 rounded-xl px-3 py-3.5 text-slate-400 text-sm flex items-center">+977</div>
                            <input type="tel" placeholder="98XXXXXXXX" 
                                class="flex-1 bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                        </div>
                    </div>
                    
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">Password</label>
                        <div class="relative">
                            <i class="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                            <input type="password" placeholder="Min. 8 characters" 
                                class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 pl-11 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm"
                                oninput="checkStrength(this.value)">
                        </div>
                        <!-- Password strength -->
                        <div class="flex gap-1 mt-2">
                            <div class="h-1 flex-1 rounded-full bg-white/10" id="s1"></div>
                            <div class="h-1 flex-1 rounded-full bg-white/10" id="s2"></div>
                            <div class="h-1 flex-1 rounded-full bg-white/10" id="s3"></div>
                            <div class="h-1 flex-1 rounded-full bg-white/10" id="s4"></div>
                        </div>
                        <p class="text-xs text-slate-600 mt-1" id="strength-label">Enter a password</p>
                    </div>
                    
                    <div>
                        <label class="block text-xs text-slate-400 font-medium mb-2">Confirm Password</label>
                        <div class="relative">
                            <i class="fa-solid fa-lock absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                            <input type="password" placeholder="Repeat password" 
                                class="w-full bg-[#0F172A] border border-white/10 rounded-xl px-4 py-3.5 pl-11 text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500 transition-colors text-sm">
                        </div>
                    </div>
                    
                    <label class="flex items-start gap-3 cursor-pointer">
                        <input type="checkbox" class="w-4 h-4 mt-0.5 rounded border-white/20 bg-[#0F172A] accent-indigo-500">
                        <span class="text-xs text-slate-400">I agree to the <a href="#" class="text-indigo-400 hover:underline">Terms of Service</a> and <a href="#" class="text-indigo-400 hover:underline">Privacy Policy</a></span>
                    </label>
                    
                    <a href="/dashboard" class="btn-primary w-full justify-center mt-1">
                        Create Account <i class="fa-solid fa-arrow-right"></i>
                    </a>
                </div>
            </form>
        </div>
        
        <p class="text-center text-sm text-slate-500 mt-6">
            Already have an account? <a href="/login" class="text-indigo-400 hover:text-indigo-300 transition-colors font-medium">Sign in</a>
        </p>
    </div>
</section>
{% endblock %}

{% block extra_scripts %}
<script>
function checkStrength(val) {
    const bars = ['s1','s2','s3','s4'].map(id => document.getElementById(id));
    const label = document.getElementById('strength-label');
    let score = 0;
    if (val.length >= 8) score++;
    if (/[A-Z]/.test(val)) score++;
    if (/[0-9]/.test(val)) score++;
    if (/[^A-Za-z0-9]/.test(val)) score++;
    
    const colors = ['bg-red-500', 'bg-orange-500', 'bg-yellow-500', 'bg-green-500'];
    const labels = ['Weak', 'Fair', 'Good', 'Strong'];
    const textColors = ['text-red-400', 'text-orange-400', 'text-yellow-400', 'text-green-400'];
    
    bars.forEach((b, i) => {
        b.className = `h-1 flex-1 rounded-full ${i < score ? colors[score-1] : 'bg-white/10'}`;
    });
    
    if (val.length > 0) {
        label.textContent = labels[score-1] || 'Too short';
        label.className = `text-xs mt-1 ${score > 0 ? textColors[score-1] : 'text-red-400'}`;
    } else {
        label.textContent = 'Enter a password';
        label.className = 'text-xs text-slate-600 mt-1';
    }
}
</script>
{% endblock %}