{% extends "base.html" %}
{% block title %}Meet Ageri{% endblock %}

{% block body %}
<div class="min-h-screen flex items-center justify-center px-4" x-data="{ loading: false }">
  <div class="w-full max-w-md">

    <!-- Logo -->
    <div class="text-center mb-10">
      <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-gradient-to-br from-accent to-teal mb-4">
        <span class="text-white font-bold text-2xl">A</span>
      </div>
      <h1 class="text-2xl font-bold text-white">One last thing</h1>
      <p class="text-slate-400 text-sm mt-1">Help Ageri get to know you.</p>
    </div>

    <!-- Form -->
    <div class="bg-panel border border-border rounded-2xl p-8">
      <form method="POST" action="/onboarding" @submit="loading = true" class="space-y-5">

        <!-- Name -->
        <div>
          <label class="block text-sm font-medium text-slate-300 mb-1.5">What's your name?</label>
          <input
            type="text"
            name="name"
            placeholder="Your first name"
            required
            autofocus
            class="w-full bg-surface border border-border rounded-lg px-4 py-3 text-white text-sm placeholder-slate-500 focus:ring-2 focus:ring-accent focus:border-transparent transition-all"
          >
        </div>

        <!-- Language -->
        <div x-data="languagePicker()" x-init="init()">
          <label class="block text-sm font-medium text-slate-300 mb-1.5">
            Your language
            <span class="text-slate-500 font-normal ml-1">— Ageri will use this by default</span>
          </label>
          <select
            name="language"
            x-model="selected"
            required
            class="w-full bg-surface border border-border rounded-lg px-4 py-3 text-white text-sm focus:ring-2 focus:ring-accent focus:border-transparent transition-all appearance-none"
          >
            <template x-for="lang in languages" :key="lang.value">
              <option :value="lang.value" x-text="lang.label" :selected="lang.value === selected"></option>
            </template>
          </select>
          <p class="text-xs text-slate-500 mt-1" x-show="autoDetected">Detected from your browser — feel free to change it.</p>
        </div>

        <script>
        function languagePicker() {
          return {
            selected: '{{ language }}',
            autoDetected: false,
            languages: [
              'Afrikaans','Albanian','Arabic','Armenian','Azerbaijani','Basque',
              'Belarusian','Bengali','Bosnian','Bulgarian','Catalan',
              'Chinese (Simplified)','Chinese (Traditional)',
              'Croatian','Czech','Danish','Dutch','English','Estonian','Filipino',
              'Finnish','French','Galician','Georgian','German','Greek','Gujarati',
              'Hebrew','Hindi','Hungarian','Icelandic','Indonesian','Irish','Italian',
              'Japanese','Kannada','Kazakh','Khmer','Korean','Latvian','Lithuanian',
              'Macedonian','Malay','Malayalam','Maltese','Marathi','Mongolian',
              'Nepali','Norwegian','Persian','Polish','Portuguese','Punjabi',
              'Romanian','Russian','Serbian','Sinhala','Slovak','Slovenian',
              'Spanish','Swahili','Swedish','Tamil','Telugu','Thai','Turkish',
              'Ukrainian','Urdu','Uzbek','Vietnamese','Welsh',
            ].map(l => ({ value: l, label: l })),
            _browserLang() {
              const map = {
                'af': 'Afrikaans', 'sq': 'Albanian', 'ar': 'Arabic', 'hy': 'Armenian',
                'az': 'Azerbaijani', 'eu': 'Basque', 'be': 'Belarusian', 'bn': 'Bengali',
                'bs': 'Bosnian', 'bg': 'Bulgarian', 'ca': 'Catalan',
                'zh': 'Chinese (Simplified)', 'zh-tw': 'Chinese (Traditional)', 'zh-hant': 'Chinese (Traditional)',
                'hr': 'Croatian', 'cs': 'Czech', 'da': 'Danish', 'nl': 'Dutch',
                'en': 'English', 'et': 'Estonian', 'fil': 'Filipino', 'tl': 'Filipino',
                'fi': 'Finnish', 'fr': 'French', 'gl': 'Galician', 'ka': 'Georgian',
                'de': 'German', 'el': 'Greek', 'gu': 'Gujarati', 'he': 'Hebrew',
                'iw': 'Hebrew', 'hi': 'Hindi', 'hu': 'Hungarian', 'is': 'Icelandic',
                'id': 'Indonesian', 'ga': 'Irish', 'it': 'Italian', 'ja': 'Japanese',
                'kn': 'Kannada', 'kk': 'Kazakh', 'km': 'Khmer', 'ko': 'Korean',
                'lv': 'Latvian', 'lt': 'Lithuanian', 'mk': 'Macedonian', 'ms': 'Malay',
                'ml': 'Malayalam', 'mt': 'Maltese', 'mr': 'Marathi', 'mn': 'Mongolian',
                'ne': 'Nepali', 'no': 'Norwegian', 'nb': 'Norwegian', 'nn': 'Norwegian',
                'fa': 'Persian', 'pl': 'Polish', 'pt': 'Portuguese', 'pa': 'Punjabi',
                'ro': 'Romanian', 'ru': 'Russian', 'sr': 'Serbian', 'si': 'Sinhala',
                'sk': 'Slovak', 'sl': 'Slovenian', 'es': 'Spanish', 'sw': 'Swahili',
                'sv': 'Swedish', 'ta': 'Tamil', 'te': 'Telugu', 'th': 'Thai',
                'tr': 'Turkish', 'uk': 'Ukrainian', 'ur': 'Urdu', 'uz': 'Uzbek',
                'vi': 'Vietnamese', 'cy': 'Welsh',
              };
              const langs = navigator.languages || [navigator.language];
              for (const l of langs) {
                const code = l.toLowerCase();
                if (map[code]) return map[code];
                const prefix = code.split('-')[0];
                if (map[prefix]) return map[prefix];
              }
              return 'English';
            },
            init() {
              if (!this.selected) {
                this.selected = this._browserLang();
                this.autoDetected = true;
              }
            }
          }
        }
        </script>

        <!-- Gender -->
        <div>
          <label class="block text-sm font-medium text-slate-300 mb-2">How do you identify?</label>
          <div class="grid grid-cols-2 gap-2">
            {% for value, label in [('male','Male'),('female','Female'),('nonbinary','Non-binary'),('prefer_not','Prefer not to say')] %}
            <label class="flex items-center gap-2.5 px-3 py-2.5 rounded-lg border border-border bg-surface hover:border-slate-500 cursor-pointer transition-colors has-[:checked]:border-accent has-[:checked]:bg-accent/10">
              <input type="radio" name="gender" value="{{ value }}" {% if value == 'prefer_not' %}checked{% endif %}
                class="accent-indigo-400 flex-shrink-0">
              <span class="text-sm text-slate-300">{{ label }}</span>
            </label>
            {% endfor %}
          </div>
        </div>

        <!-- Submit -->
        <button
          type="submit"
          :disabled="loading"
          class="w-full py-3 rounded-lg bg-accent hover:bg-indigo-500 disabled:opacity-60 disabled:cursor-not-allowed text-white font-semibold text-sm transition-colors mt-2"
        >
          <span x-show="!loading">Meet Ageri →</span>
          <span x-show="loading" class="flex items-center justify-center gap-2">
            <span class="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
            Getting Ageri ready for you…
          </span>
        </button>

      </form>
    </div>

  </div>
</div>
{% endblock %}