// =================================================================
// REGISTRATION FORM — based on DATA PEMAIN.docx structure
// =================================================================
const Field = ({ label, type = 'text', placeholder, required, options, full, span = 6 }) => (
  <div className={`col-span-12 md:col-span-${span}`}>
    <label className="block text-xs font-bold uppercase tracking-wider text-akaar-navy/80 mb-2">
      {label} {required && <span className="text-red-500">*</span>}
    </label>
    {type === 'select' ? (
      <select className="w-full bg-white border-2 border-akaar-slate focus:border-akaar-navy outline-none rounded-lg px-4 py-3 text-akaar-ink">
        <option value="">— Pilih —</option>
        {options.map(o => <option key={o} value={o}>{o}</option>)}
      </select>
    ) : type === 'textarea' ? (
      <textarea rows="3" placeholder={placeholder} className="w-full bg-white border-2 border-akaar-slate focus:border-akaar-navy outline-none rounded-lg px-4 py-3 text-akaar-ink"></textarea>
    ) : (
      <input type={type} placeholder={placeholder} className="w-full bg-white border-2 border-akaar-slate focus:border-akaar-navy outline-none rounded-lg px-4 py-3 text-akaar-ink"/>
    )}
  </div>
);

const FormSection = ({ num, title, children }) => (
  <div>
    <div className="flex items-center gap-3 mb-5">
      <div className="w-9 h-9 rounded-lg bg-akaar-navy text-akaar-gold h-display text-xl flex items-center justify-center">
        {num}
      </div>
      <h3 className="h-display text-2xl text-akaar-navy uppercase">{title}</h3>
    </div>
    <div className="grid grid-cols-12 gap-4">{children}</div>
  </div>
);

const Registration = () => {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section id="register" className="py-24 lg:py-32 bg-gradient-to-b from-akaar-cream/30 to-white relative">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid lg:grid-cols-12 gap-12">
          <div className="lg:col-span-4">
            <div className="sticky top-32">
              <div className="flex items-center gap-3 text-akaar-blue uppercase tracking-[0.3em] text-xs font-bold">
                <span className="w-10 h-px bg-akaar-blue"></span> Player Registration
              </div>
              <h2 className="h-display mt-4 text-5xl text-akaar-navy leading-[0.95]">
                Daftarkan calon<br/>
                <span className="text-akaar-gold">pahlawan</span>nya<br/>
                hari ini.
              </h2>
              <p className="mt-5 text-akaar-ink/70 leading-relaxed">
                Lengkapi formulir berikut untuk mendaftarkan pemain. Tim kami akan menghubungi via WhatsApp dalam 1×24 jam untuk konfirmasi jadwal trial.
              </p>

              <div className="mt-8 space-y-3">
                {[
                  ['Trial Gratis', 'Sesi pertama tanpa biaya'],
                  ['Konsultasi Pelatih', 'Asesmen kemampuan awal'],
                  ['Player Pathway', 'Penempatan kelompok yang tepat']
                ].map(([t, d], i) => (
                  <div key={i} className="flex gap-3 p-3 rounded-xl bg-white border border-akaar-slate">
                    <div className="w-8 h-8 rounded-lg bg-akaar-gold text-akaar-navy flex items-center justify-center shrink-0">
                      <IconCheck size={16} sw={3}/>
                    </div>
                    <div>
                      <div className="font-bold text-akaar-navy text-sm">{t}</div>
                      <div className="text-xs text-akaar-ink/60">{d}</div>
                    </div>
                  </div>
                ))}
              </div>

              <div className="mt-8 p-5 rounded-2xl bg-akaar-navy text-white">
                <div className="text-xs uppercase tracking-wider text-akaar-gold">Need help?</div>
                <div className="mt-2 font-bold flex items-center gap-2"><IconWA size={18}/> +62 812-0000-0000</div>
                <div className="mt-1 text-sm text-white/70">WhatsApp Admin Akaar</div>
              </div>
            </div>
          </div>

          <div className="lg:col-span-8">
            {submitted ? (
              <div className="bg-white border-2 border-akaar-gold rounded-3xl p-12 text-center">
                <div className="w-20 h-20 mx-auto rounded-full bg-akaar-gold text-akaar-navy flex items-center justify-center">
                  <IconCheck size={40} sw={3}/>
                </div>
                <h3 className="h-display text-4xl text-akaar-navy mt-6">Pendaftaran Diterima!</h3>
                <p className="mt-3 text-akaar-ink/70">Tim Akaar akan menghubungi Anda dalam 1×24 jam.</p>
                <button onClick={() => setSubmitted(false)} className="mt-6 text-akaar-blue font-bold hover:underline">Daftar pemain lain →</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSubmitted(true); window.scrollTo({ top: e.target.getBoundingClientRect().top + window.scrollY - 100, behavior: 'smooth'}); }}
                    className="bg-white border-2 border-akaar-slate rounded-3xl p-8 lg:p-10 shadow-sm space-y-10">

                <FormSection num="1" title="Data Pribadi">
                  <Field label="Nama Lengkap" placeholder="Nama sesuai KTP/Akta" required span={12}/>
                  <Field label="Nama Panggilan" placeholder="Panggilan sehari-hari" span={6}/>
                  <Field label="Tempat Lahir" placeholder="Kota lahir" span={6}/>
                  <Field label="Tanggal Lahir" type="date" required span={6}/>
                  <Field label="Usia" placeholder="Tahun" type="number" span={3}/>
                  <Field label="Sekolah / Instansi" placeholder="Nama sekolah" span={3}/>
                  <Field label="Alamat Rumah" type="textarea" placeholder="Alamat lengkap" span={12}/>
                  <Field label="No. HP / WhatsApp Pemain" placeholder="08xx-xxxx-xxxx" span={6}/>
                  <Field label="No. HP Orang Tua (Wajib U-18)" placeholder="08xx-xxxx-xxxx" required span={6}/>
                </FormSection>

                <div className="border-t border-akaar-slate"></div>

                <FormSection num="2" title="Data Teknis Futsal">
                  <Field label="Posisi Utama" type="select" options={['Anchor', 'Flank', 'Pivot', 'Goalkeeper']} required span={6}/>
                  <Field label="Posisi Alternatif" type="select" options={['Anchor', 'Flank', 'Pivot', 'Goalkeeper', 'Tidak Ada']} span={6}/>
                  <Field label="Kaki Dominan" type="select" options={['Kanan', 'Kiri', 'Keduanya']} required span={4}/>
                  <Field label="No. Punggung Favorit" type="number" placeholder="1 – 99" span={4}/>
                  <Field label="Pilihan Program" type="select" options={['Foundation (U-8/U-10)', 'Development (U-12/U-14)', 'Elite (U-16/U-18)']} required span={4}/>
                  <Field label="Riwayat Akademi / Tim Sebelumnya" type="textarea" placeholder="Sebutkan jika ada" span={12}/>
                </FormSection>

                <div className="border-t border-akaar-slate"></div>

                <FormSection num="3" title="Data Kesehatan">
                  <Field label="Golongan Darah" type="select" options={['A', 'B', 'AB', 'O', 'Tidak Tahu']} span={4}/>
                  <Field label="Tinggi Badan (cm)" type="number" placeholder="cm" span={4}/>
                  <Field label="Berat Badan (kg)" type="number" placeholder="kg" span={4}/>
                  <Field label="Riwayat Penyakit / Cedera" type="textarea" placeholder="Tulis 'Tidak Ada' jika tidak ada" span={6}/>
                  <Field label="Alergi" type="textarea" placeholder="Tulis 'Tidak Ada' jika tidak ada" span={6}/>
                </FormSection>

                <div className="border-t border-akaar-slate"></div>

                <FormSection num="4" title="Perlengkapan">
                  <Field label="Ukuran Jersey" type="select" options={['XS', 'S', 'M', 'L', 'XL', 'XXL']} span={6}/>
                  <Field label="Ukuran Sepatu (EUR)" type="number" placeholder="contoh: 38" span={6}/>
                </FormSection>

                <div className="bg-akaar-cream/60 border border-akaar-gold/40 rounded-xl p-5 flex gap-3">
                  <input type="checkbox" required className="mt-1 w-5 h-5 accent-akaar-navy"/>
                  <div className="text-sm text-akaar-ink/80">
                    Saya menyetujui <a href="#" className="font-bold text-akaar-navy underline">syarat & ketentuan</a> serta <a href="#" className="font-bold text-akaar-navy underline">kode etik</a> Akaar Futsal Academy, dan memberikan izin penggunaan data untuk kebutuhan administrasi akademi.
                  </div>
                </div>

                <div className="flex flex-col sm:flex-row gap-3">
                  <button type="submit" className="flex-1 inline-flex items-center justify-center gap-2 bg-akaar-navy text-white font-bold px-7 py-4 rounded-xl hover:bg-akaar-blue transition">
                    Submit Pendaftaran <IconArrow size={18}/>
                  </button>
                  <button type="reset" className="inline-flex items-center justify-center gap-2 bg-white border-2 border-akaar-slate text-akaar-ink font-bold px-7 py-4 rounded-xl hover:border-akaar-navy transition">
                    Reset Form
                  </button>
                </div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Registration });