{% extends "base.html" %}
{% block title %}{{ _('auth.register_title') }}{% 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">{{ _('auth.register_title') }}</h2>
            <p class="text-slate-400 text-sm">{{ _('auth.register_subtitle') }}</p>
        </div>

        <form class="space-y-6" action="{{ url_for('auth.register') }}" method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="space-y-4">
                <div>
                    <label for="name" class="sr-only">{{ _('auth.name') }}</label>
                    <input id="name" name="name" type="text" autocomplete="name" 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 focus:z-10 sm:text-sm transition duration-300" 
                           placeholder="{{ _('auth.name') }}">
                </div>
                <div>
                    <label for="email" class="sr-only">{{ _('auth.email') }}</label>
                    <input id="email" name="email" type="email" autocomplete="email" 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 focus:z-10 sm:text-sm transition duration-300" 
                           placeholder="{{ _('auth.email') }}">
                </div>
                <div>
                    <label for="password" class="sr-only">{{ _('auth.password') }}</label>
                    <input id="password" name="password" type="password" autocomplete="new-password" 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 focus:z-10 sm:text-sm transition duration-300" 
                           placeholder="{{ _('auth.password_hint') }}">
                </div>
                <div>
                    <label for="password_confirm" class="sr-only">{{ _('auth.confirm_password') }}</label>
                    <input id="password_confirm" name="password_confirm" type="password" autocomplete="new-password" 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 focus:z-10 sm:text-sm transition duration-300" 
                           placeholder="{{ _('auth.confirm_password') }}">
                </div>

                <!-- Account Type -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">طبيعة العمل</label>
                    <div class="grid grid-cols-2 gap-2" id="accountTypeGrid">
                        <label class="account-type-card cursor-pointer">
                            <input type="radio" name="account_type" value="entrepreneur" checked class="hidden peer">
                            <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                                <span>💡</span><span>صاحب فكرة</span>
                            </div>
                        </label>
                        <label class="account-type-card cursor-pointer">
                            <input type="radio" name="account_type" value="investor" class="hidden peer">
                            <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                                <span>💰</span><span>مستثمر</span>
                            </div>
                        </label>
                        <label class="account-type-card cursor-pointer">
                            <input type="radio" name="account_type" value="factory" class="hidden peer">
                            <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                                <span>🏭</span><span>مصنع</span>
                            </div>
                        </label>
                        <label class="account-type-card cursor-pointer">
                            <input type="radio" name="account_type" value="incubator" class="hidden peer">
                            <div class="flex items-center gap-2 px-3 py-3 rounded-xl bg-black/50 border border-white/10 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 transition text-sm text-slate-300 peer-checked:text-gold-400">
                                <span>🏢</span><span>حاضنة أعمال</span>
                            </div>
                        </label>
                    </div>
                </div>

                <!-- Company Name (shown for non-entrepreneur) -->
                <div id="companyNameField" class="hidden">
                    <input type="text" name="company_name" placeholder="اسم الشركة / المصنع / الحاضنة"
                           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>

                <!-- Interests / Sectors -->
                <div>
                    <label class="block text-sm font-medium text-slate-300 mb-2">القطاعات المهتم بها</label>
                    <div class="flex flex-wrap gap-2">
                        {% set sectors = ['صناعي', 'تقني', 'تجاري', 'غذائي', 'طبي', 'تعليمي', 'عقاري', 'زراعي', 'سياحي', 'لوجستي'] %}
                        {% for s in sectors %}
                        <label class="cursor-pointer">
                            <input type="checkbox" name="interests" value="{{ s }}" class="hidden peer">
                            <span class="inline-block px-3 py-1.5 rounded-full text-xs bg-black/50 border border-white/10 text-slate-400 peer-checked:border-gold-500 peer-checked:bg-gold-500/10 peer-checked:text-gold-400 transition">{{ s }}</span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="flex items-center">
                <input id="terms" name="terms" type="checkbox" required class="h-4 w-4 text-gold-600 focus:ring-gold-500 border-gray-600 rounded bg-black/50">
                <label for="terms" class="{{ 'mr-2' if is_rtl else 'ml-2' }} block text-xs text-slate-400">
                    {{ _('auth.agree_terms') }} <a href="#" class="text-gold-400 hover:text-gold-300">{{ _('footer.terms') }}</a> & <a href="#" class="text-gold-400 hover:text-gold-300">{{ _('footer.privacy') }}</a>
                </label>
            </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-black 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">
                {{ _('auth.create_free') }}
            </button>
            
            <div class="text-center text-sm text-slate-500 mt-6">
                {{ _('auth.have_account') }} 
                <a href="{{ url_for('auth.login') }}" class="font-medium text-gold-400 hover:text-gold-300 transition border-b border-gold-400/30 pb-0.5">{{ _('nav.login') }}</a>
            </div>
        </form>
    </div>
</div>
<script>
document.querySelectorAll('input[name="account_type"]').forEach(radio => {
    radio.addEventListener('change', () => {
        const field = document.getElementById('companyNameField');
        if (radio.value !== 'entrepreneur') {
            field.classList.remove('hidden');
        } else {
            field.classList.add('hidden');
        }
    });
});
</script>
{% endblock %}