/* ================= PENDAFTARAN ANGGOTA ================= */
const { useState } = React;

const PROVINSI = ["DKI Jakarta", "Jawa Barat", "Jawa Tengah", "Jawa Timur", "Banten", "DI Yogyakarta", "Bali", "Sumatera Utara", "Sumatera Barat", "Sumatera Selatan", "Riau", "Kalimantan Barat", "Kalimantan Timur", "Sulawesi Selatan", "Sulawesi Utara", "Papua", "Lainnya"];
const PENDIDIKAN = ["SMA/SMK/Sederajat", "Diploma (D1–D4)", "Sarjana (S1)", "Magister (S2)", "Doktor (S3)", "Lainnya"];
const BIDANG = ["Pendidikan Politik", "Pemberdayaan Ekonomi", "Aksi Sosial", "Literasi Digital & Kreatif", "Belum menentukan"];

function Field({ label, en, opt, full, children }) {
  return (
    <div className={"field" + (full ? " field--full" : "")}>
      <label>{label}{opt && <span className="opt"> (opsional)</span>}{en && <span className="en">{en}</span>}</label>
      {children}
    </div>
  );
}

function Check() {
  return (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.5 7.5l3 3 6-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
  );
}

function Aside() {
  const benefits = [
    ["Kartu anggota digital", "Identitas resmi sebagai kader GMN, langsung di genggaman."],
    ["Akses program & pelatihan", "Sekolah politik, pemberdayaan ekonomi, dan kelas literasi digital."],
    ["Jejaring nasional", "Terhubung dengan 12.000+ anak muda dari 34 provinsi."],
    ["Panggung untuk berkarya", "Inisiasi program di daerahmu dengan dukungan organisasi."],
  ];
  return (
    <aside className="reg__aside">
      <Logo light />
      <h1>Bergabung jadi<br /><span className="serif-it">Gajah Muda Nusantara</span>.</h1>
      <ul className="reg__benefits">
        {benefits.map(([t, d]) => (
          <li key={t}>
            <span className="reg__check"><Check /></span>
            <span><b>{t}.</b> {d}</span>
          </li>
        ))}
      </ul>
      <blockquote className="reg__quote">
        “Perubahan besar selalu dimulai dari anak muda yang berani melangkah lebih dulu.”
      </blockquote>
    </aside>
  );
}

function Success({ data }) {
  const kode = "GMN-2026-" + String(Math.floor(1000 + Math.random() * 8999));
  return (
    <div className="reg__success">
      <div className="tick">
        <svg width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M10 21l6 6 14-15" stroke="currentColor" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </div>
      <Eyebrow id="Pendaftaran Berhasil" en="Submitted" />
      <h2 className="h2" style={{ marginTop: 14 }}>Terima kasih, {data.nama || "Calon Kader"}!</h2>
      <p className="lead" style={{ margin: "16px auto 0" }}>
        Pendaftaranmu sudah kami terima. Tim cabang akan memverifikasi data dan menghubungimu
        via WhatsApp/email dalam 3×24 jam. Sampai jumpa di gerakan!
      </p>
      <div className="reg__code">Nomor registrasi: <b>{kode}</b></div>
      <div style={{ marginTop: 30, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <a className="btn btn--primary btn--lg" href="index.html">Kembali ke Beranda <Arrow /></a>
      </div>
    </div>
  );
}

function Form() {
  const [data, setData] = useState({ nama: "", gender: "Laki-laki", domisili: "DKI Jakarta", pendidikan: "Sarjana (S1)", bidang: "Pendidikan Politik" });
  const [done, setDone] = useState(false);
  const set = (k) => (e) => setData({ ...data, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    setDone(true);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

  if (done) return <div className="reg__formwrap"><Success data={data} /></div>;

  return (
    <div className="reg__formwrap">
      <div className="reg__top">
        <a className="reg__back" href="index.html"><svg width="15" height="15" viewBox="0 0 16 16" fill="none"><path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" /></svg> Kembali</a>
        <div className="reg__steps">
          <i><b>1</b> Data Diri</i>
          <i><b>2</b> Keanggotaan</i>
        </div>
      </div>

      <Eyebrow id="Pendaftaran Anggota Baru" en="Membership Form" />
      <h2 className="h2" style={{ marginTop: 14 }}>Daftar jadi kader.</h2>
      <p className="lead" style={{ marginTop: 14, fontSize: 16 }}>
        Isi data berikut dengan benar. Estimasi pengisian ±5 menit. Tanda <b>*</b> wajib diisi.
      </p>

      <form onSubmit={submit}>
        {/* DATA DIRI */}
        <div className="fieldset">
          <div className="fieldset__h"><b>01</b><h3 className="h3">Data Diri</h3></div>
          <div className="fgrid">
            <Field label="Nama lengkap *" en="Full name" full>
              <input className="input" required placeholder="Sesuai KTP" value={data.nama} onChange={set("nama")} />
            </Field>
            <Field label="NIK *" en="ID number">
              <input className="input" required inputMode="numeric" maxLength="16" placeholder="16 digit" onChange={set("nik")} />
            </Field>
            <Field label="Tanggal lahir *" en="Date of birth">
              <input className="input" required type="date" onChange={set("tgl")} />
            </Field>
            <Field label="Tempat lahir *" en="Place of birth">
              <input className="input" required placeholder="Kota kelahiran" onChange={set("tempat")} />
            </Field>
            <Field label="Jenis kelamin *" en="Gender">
              <div className="radio-row">
                {["Laki-laki", "Perempuan"].map((g) => (
                  <label className="radio-chip" key={g}>
                    <input type="radio" name="gender" checked={data.gender === g} onChange={() => setData({ ...data, gender: g })} />
                    <span>{g}</span>
                  </label>
                ))}
              </div>
            </Field>
            <Field label="Nomor WhatsApp *" en="Phone">
              <input className="input" required inputMode="tel" placeholder="08xx xxxx xxxx" onChange={set("hp")} />
            </Field>
            <Field label="Email *" en="Email">
              <input className="input" required type="email" placeholder="nama@email.com" onChange={set("email")} />
            </Field>
            <Field label="Pendidikan terakhir *" en="Education">
              <select className="select" value={data.pendidikan} onChange={set("pendidikan")}>
                {PENDIDIKAN.map((p) => <option key={p}>{p}</option>)}
              </select>
            </Field>
            <Field label="Pekerjaan / aktivitas" en="Occupation">
              <input className="input" placeholder="mis. Mahasiswa, Karyawan, Wiraswasta" onChange={set("kerja")} />
            </Field>
            <Field label="Alamat domisili *" en="Address" full>
              <textarea className="textarea" required placeholder="Alamat lengkap tempat tinggal saat ini" onChange={set("alamat")} />
            </Field>
          </div>
        </div>

        {/* KEANGGOTAAN */}
        <div className="fieldset">
          <div className="fieldset__h"><b>02</b><h3 className="h3">Keanggotaan</h3></div>
          <div className="fgrid">
            <Field label="Provinsi cabang *" en="Province">
              <select className="select" value={data.domisili} onChange={set("domisili")}>
                {PROVINSI.map((p) => <option key={p}>{p}</option>)}
              </select>
            </Field>
            <Field label="Kota / Kabupaten *" en="City">
              <input className="input" required placeholder="Kota/kabupaten domisili" onChange={set("kota")} />
            </Field>
            <Field label="Bidang yang diminati *" en="Interest" full>
              <select className="select" value={data.bidang} onChange={set("bidang")}>
                {BIDANG.map((b) => <option key={b}>{b}</option>)}
              </select>
            </Field>
            <Field label="Alasan bergabung" en="Motivation" opt full>
              <textarea className="textarea" placeholder="Ceritakan singkat kenapa kamu ingin bergabung dengan GMN" onChange={set("alasan")} />
            </Field>
          </div>

          <label className="check" style={{ marginTop: 22 }}>
            <input type="checkbox" required />
            <span>Saya menyatakan data di atas benar dan bersedia mematuhi <a href="#">AD/ART</a> serta nilai-nilai organisasi Gajah Muda Nusantara.</span>
          </label>
          <label className="check" style={{ marginTop: 14 }}>
            <input type="checkbox" required />
            <span>Saya menyetujui pemrosesan data pribadi saya untuk keperluan keanggotaan sesuai <a href="#">Kebijakan Privasi</a>.</span>
          </label>
        </div>

        <div className="reg__submit">
          <button type="submit" className="btn btn--primary btn--lg">Kirim Pendaftaran <Arrow /></button>
          <span className="reg__note">Gratis · tanpa biaya pendaftaran</span>
        </div>
      </form>
    </div>
  );
}

function RegApp() {
  return (
    <div className="reg">
      <Aside />
      <main className="reg__main"><Form /></main>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<RegApp />);