{% extends "base.html" %}
{% block title %}{{ _('nav.new_study') }}{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto mt-16 px-4 mb-20 relative">
    <!-- Decor -->
    <div class="absolute top-0 right-0 w-96 h-96 bg-gold-500/10 rounded-full blur-[100px] -z-10 animate-pulse-slow"></div>
    <div class="absolute bottom-0 left-0 w-80 h-80 bg-blue-900/20 rounded-full blur-[100px] -z-10"></div>

    <div class="glass p-12 rounded-[2.5rem] border border-white/5 shadow-2xl relative overflow-hidden ring-1 ring-white/5">
        <div class="text-center mb-12">
            <h1 class="text-5xl font-extrabold luxury-text mb-4 tracking-tight">{{ _('study.new_title') }}</h1>
            <p class="text-slate-500 text-sm font-medium uppercase tracking-[0.2em]">{{ _('study.new_subtitle') }}</p>
        </div>
        
        <form method="POST" class="space-y-10">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="space-y-4">
                <label class="flex items-center gap-2 text-[10px] font-bold text-accent-gold uppercase tracking-[0.2em]">
                    <span class="w-1.5 h-1.5 bg-accent-gold rounded-full shadow-[0_0_8px_#c5a059]"></span>
                    {{ _('study.project_name') }}
                </label>
                <input type="text" name="project_name" required placeholder="{{ _('study.name_placeholder') }}"
                       class="w-full bg-white/[0.03] border border-white/10 rounded-2xl px-6 py-5 text-white text-lg placeholder-slate-700 focus:outline-none focus:border-accent-gold focus:ring-1 focus:ring-accent-gold transition-all duration-300">
            </div>
            
            <div class="space-y-4">
                <label class="flex items-center gap-2 text-[10px] font-bold text-accent-gold uppercase tracking-[0.2em]">
                    <span class="w-1.5 h-1.5 bg-accent-gold rounded-full shadow-[0_0_8px_#c5a059]"></span>
                    {{ _('study.project_desc') }}
                </label>
                <textarea name="project_description" required rows="6" placeholder="{{ _('study.desc_placeholder') }}"
                          class="w-full bg-white/[0.03] border border-white/10 rounded-2xl px-6 py-5 text-white text-lg placeholder-slate-700 focus:outline-none focus:border-accent-gold focus:ring-1 focus:ring-accent-gold transition-all duration-300 resize-none"></textarea>
            </div>

            <div class="space-y-4">
                <label class="flex items-center gap-2 text-[10px] font-bold text-accent-gold uppercase tracking-[0.2em]">
                    <span class="w-1.5 h-1.5 bg-accent-gold rounded-full shadow-[0_0_8px_#c5a059]"></span>
                    {{ _('Additional Notes for AI (Optional)' if not is_rtl else 'ملاحظات إضافية للذكاء الاصطناعي (اختياري)') }}
                </label>
                <textarea name="user_note" rows="3" placeholder="{{ 'Add any specific requirements, focus areas, or context for the AI to consider when generating your report...' if not is_rtl else 'أضف أي متطلبات محددة أو مجالات تركيز أو سياق للذكاء الاصطناعي ليأخذها في الاعتبار عند إنشاء التقرير...' }}"
                          class="w-full bg-white/[0.03] border border-white/10 rounded-2xl px-6 py-4 text-white text-sm placeholder-slate-700 focus:outline-none focus:border-accent-gold focus:ring-1 focus:ring-accent-gold transition-all duration-300 resize-none"></textarea>
                <p class="text-[10px] text-slate-600">💡 {{ 'Your notes will help the AI customize the report to your specific needs' if not is_rtl else 'ستساعد ملاحظاتك الذكاء الاصطناعي على تخصيص التقرير حسب احتياجاتك المحددة' }}</p>
            </div>

            <div class="space-y-4">
                <label class="flex items-center gap-2 text-[10px] font-bold text-accent-gold uppercase tracking-[0.2em]">
                    <span class="w-1.5 h-1.5 bg-accent-gold rounded-full shadow-[0_0_8px_#c5a059]"></span>
                    {{ _('study.language') }}
                </label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <label class="cursor-pointer group">
                        <input type="radio" name="language" value="ar" checked class="peer sr-only">
                        <div class="text-center py-6 rounded-2xl bg-white/[0.02] border border-white/5 text-slate-500 peer-checked:bg-accent-gold/10 peer-checked:border-accent-gold/50 peer-checked:text-accent-gold transition-all duration-300 group-hover:bg-white/[0.05] relative overflow-hidden">
                            <span class="font-black text-lg">{{ _('common.arabic') }}</span>
                            <div class="text-[10px] font-bold opacity-60 mt-1 uppercase tracking-widest">Default (SAR)</div>
                        </div>
                    </label>
                    <label class="cursor-pointer group">
                        <input type="radio" name="language" value="en" class="peer sr-only">
                        <div class="text-center py-6 rounded-2xl bg-white/[0.02] border border-white/5 text-slate-500 peer-checked:bg-accent-gold/10 peer-checked:border-accent-gold/50 peer-checked:text-accent-gold transition-all duration-300 group-hover:bg-white/[0.05] relative overflow-hidden">
                            <span class="font-black text-lg">English</span>
                            <div class="text-[10px] font-bold opacity-60 mt-1 uppercase tracking-widest">International (USD)</div>
                        </div>
                    </label>
                </div>
            </div>
            
            <div class="pt-8">
                <button type="submit" class="w-full btn-luxury py-5 rounded-2xl font-black text-xs uppercase tracking-[0.3em] group relative overflow-hidden">
                    <span class="relative z-10 flex items-center justify-center gap-4">
                        {{ _('study.start_engine') }}
                        <svg class="w-5 h-5 rtl:rotate-180 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
                    </span>
                </button>
                <p class="text-center text-[10px] font-bold text-slate-600 mt-6 uppercase tracking-widest">{{ _('study.est_time') }}</p>
            </div>
        </form>
    </div>
</div>
{% endblock %}