/* @jsx React.createElement */
/* ============================================================
   INDIE Music — Jadi guru mitra IMS Home Private (kampanye + onboarding + formulir lamaran).
   React 18 UMD + Babel standalone, tanpa build. Fungsi bersama di hp-common.jsx (window.HP, dimuat duluan).
   Kontrak: ims-api routes/hp-public.js — GET /config, POST /apply (JSON, dokumen base64).
   Saklar hp_public_enabled mati -> /config 404 -> informasi tetap tampil, formulir diganti
   blok "Segera hadir" + WhatsApp admin. Kalkulator bagi hasil hanya tampil bila /config memberi harga.
   Pratinjau: ?demo=1 (data contoh, lihat hp-demo.js).

   TAHAP 3 (hp5): formulir lamaran = wizard 4 langkah (data diri → mengajar & wilayah → dokumen → referensi & kirim),
   tiap langkah ada jalan ke WA admin. Kontrak POST /apply TIDAK berubah.
   ============================================================ */

const { useState, useEffect, useRef } = React;
const {
  waLink, rupiah, DEMO, AREAS, PHONE_RE, HHMM, normPhone, haversineKm, hpApi, friendlyError, useHpConfig,
  PREFERS_REDUCED, Reveal, HpMap, DemoBanner, DemoTag, HpNav, HpFooter, WAFloat, WaIcon, ComingSoon, Faq,
  StickyCta, SuccessScreen, InstIcon, areaText, useGps, useWizOn, WizardProgress, WaHelp,
} = window.HP;

const EMAIL_RE = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
const MB = 1024 * 1024;
const BODY_LIMIT = 20 * MB; // ims-api menerima body /apply maks 22 MB — sisakan ruang
// Bagi hasil guru: /config tidak (belum) mengirim angka ini. 70% = keputusan terkonfirmasi Bram (SPEC §1,
// PK pasal 5, default hp_teacher_share_pct ims-api/src/hp.js). Dipakai hanya bila /config tidak memberi teacher_share_pct.
const SPEC_TEACHER_SHARE = 70;
const teacherShare = (cfg) => (cfg && Number.isFinite(Number(cfg.teacher_share_pct)) ? Number(cfg.teacher_share_pct) : SPEC_TEACHER_SHARE);
function ageOn(birth) {
  if (!/^\d{4}-\d{2}-\d{2}$/.test(birth || '')) return null;
  const [y, m, d] = birth.split('-').map(Number);
  const now = new Date();
  const ty = now.getFullYear(); const tm = now.getMonth() + 1; const td = now.getDate();
  return ty - y - (tm < m || (tm === m && td < d) ? 1 : 0);
}
const shortInst = (label) => String(label || '').split(' (')[0];

/* ─────────────────────────────────────────────
   Dokumen: cek tipe (magic bytes, sama dengan decodeDoc ims-api) + ukuran sebelum kirim.
   Foto besar / format HP (HEIC dsb.) dikompres jadi JPEG ≤1600 px di browser.
   ───────────────────────────────────────────── */
async function sniffType(blob) {
  const b = new Uint8Array(await blob.slice(0, 8).arrayBuffer());
  if (b[0] === 0xff && b[1] === 0xd8 && b[2] === 0xff) return 'image/jpeg';
  if (b[0] === 0x89 && b[1] === 0x50 && b[2] === 0x4e && b[3] === 0x47 && b[4] === 0x0d && b[5] === 0x0a && b[6] === 0x1a && b[7] === 0x0a) return 'image/png';
  if (b[0] === 0x25 && b[1] === 0x50 && b[2] === 0x44 && b[3] === 0x46 && b[4] === 0x2d) return 'application/pdf';
  return null;
}
function compressImage(file) {
  return new Promise((resolve, reject) => {
    const url = URL.createObjectURL(file);
    const img = new Image();
    img.onload = () => {
      const scale = Math.min(1, 1600 / Math.max(img.naturalWidth, img.naturalHeight));
      const c = document.createElement('canvas');
      c.width = Math.max(1, Math.round(img.naturalWidth * scale));
      c.height = Math.max(1, Math.round(img.naturalHeight * scale));
      c.getContext('2d').drawImage(img, 0, 0, c.width, c.height);
      URL.revokeObjectURL(url);
      c.toBlob((b) => (b ? resolve(b) : reject(new Error('blob'))), 'image/jpeg', 0.85);
    };
    img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('decode')); };
    img.src = url;
  });
}
const toDataUrl = (blob) => new Promise((resolve, reject) => {
  const r = new FileReader();
  r.onload = () => resolve(r.result);
  r.onerror = () => reject(new Error('read'));
  r.readAsDataURL(blob);
});
// -> { dataUrl, size, type, name } atau throw Error(pesan ramah)
async function prepareDoc(file, { label, allowPdf, maxMb }) {
  const max = maxMb * MB;
  const kinds = allowPdf ? 'JPG, PNG, atau PDF' : 'foto JPG atau PNG';
  if (file.size > 15 * MB) throw new Error(label + ' terlalu besar (maks ' + maxMb + ' MB).');
  let type = await sniffType(file);
  let blob = file;
  if (type === 'application/pdf') {
    if (!allowPdf) throw new Error(label + ' harus ' + kinds + ', bukan PDF.');
    if (file.size > max) throw new Error(label + ' terlalu besar (maks ' + maxMb + ' MB). Perkecil PDF-nya atau kirim foto.');
  } else if (type === 'image/jpeg' || type === 'image/png' || /^image\//.test(file.type)) {
    // Foto di atas 1,5 MB atau format lain (HEIC/WebP) -> JPEG terkompres.
    if (!type || file.size > 1.5 * MB) {
      try { blob = await compressImage(file); } catch (e) {
        if (!type) throw new Error(label + ': format tidak didukung. Pakai ' + kinds + '.');
        throw new Error(label + ': foto tidak bisa dibaca. Coba foto ulang atau pakai file lain.');
      }
      type = 'image/jpeg';
    }
    if (blob.size > max) throw new Error(label + ' terlalu besar (maks ' + maxMb + ' MB).');
  } else {
    throw new Error(label + ': format tidak didukung. Pakai ' + kinds + '.');
  }
  const dataUrl = await toDataUrl(blob);
  return { dataUrl, size: blob.size, type, name: file.name };
}

/* ─────────────────────────────────────────────
   Ketersediaan mingguan -> { mon: [["16:00","20:00"]], ... } (availabilityOrThrow di ims-api hp.js)
   ───────────────────────────────────────────── */
function AvailabilityEditor({ days, value, onChange, invalid }) {
  const toggle = (d, on) => {
    const v = { ...value };
    if (on) v[d] = [['16:00', '20:00']]; else delete v[d];
    onChange(v);
  };
  const setRange = (d, i, j, t) => onChange({ ...value, [d]: value[d].map((r, k) => (k === i ? (j === 0 ? [t, r[1]] : [r[0], t]) : r)) });
  const addRange = (d) => onChange({ ...value, [d]: [...value[d], ['18:00', '21:00']] });
  const delRange = (d, i) => {
    const rs = value[d].filter((_, k) => k !== i);
    const v = { ...value };
    if (rs.length) v[d] = rs; else delete v[d];
    onChange(v);
  };
  return (
    <div className="hp-avail">
      {days.map((d) => {
        const on = !!value[d.key];
        return (
          <div key={d.key} className={'hp-avail__day' + (on ? ' is-on' : '')}>
            <label className="hp-consent" style={{ fontWeight: 700 }}>
              <input type="checkbox" checked={on} onChange={(e) => toggle(d.key, e.target.checked)} aria-invalid={invalid ? true : undefined} />
              <span>{d.label}</span>
            </label>
            {on && (
              <div className="hp-avail__ranges">
                {value[d.key].map((r, i) => (
                  <div key={i} className="hp-row">
                    <input className="hp-mini" type="time" min="06:00" max="22:00" step="900" aria-label={d.label + ' rentang ' + (i + 1) + ' mulai'} value={r[0]} onChange={(e) => setRange(d.key, i, 0, e.target.value)} />
                    <span aria-hidden>–</span>
                    <input className="hp-mini" type="time" min="06:00" max="22:00" step="900" aria-label={d.label + ' rentang ' + (i + 1) + ' selesai'} value={r[1]} onChange={(e) => setRange(d.key, i, 1, e.target.value)} />
                    <button type="button" className="hp-x" aria-label={'Hapus rentang ' + (i + 1) + ' hari ' + d.label} onClick={() => delRange(d.key, i)}>×</button>
                  </div>
                ))}
                {value[d.key].length < 4 && <button type="button" className="hp-link" onClick={() => addRange(d.key)}>+ Tambah rentang jam {d.label}</button>}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}
function availabilityError(av, dayLabel) {
  let n = 0;
  for (const [d, ranges] of Object.entries(av)) {
    const sorted = ranges.slice().sort((a, b) => a[0].localeCompare(b[0]));
    for (const r of sorted) {
      if (!HHMM.test(r[0]) || !HHMM.test(r[1])) return 'Jam ' + dayLabel(d) + ' belum lengkap (HH:MM).';
      if (r[0] >= r[1]) return 'Jam ' + dayLabel(d) + ': jam mulai harus sebelum jam selesai.';
      if (r[0] < '06:00' || r[1] > '22:00') return 'Jam ' + dayLabel(d) + ': hanya 06:00–22:00.';
    }
    for (let i = 1; i < sorted.length; i++) if (sorted[i][0] < sorted[i - 1][1]) return 'Jam ' + dayLabel(d) + ' tumpang tindih.';
    n += ranges.length;
  }
  return n ? null : 'Isi minimal satu hari & jam ketersediaan.';
}

/* ─────────────────────────────────────────────
   Radius & jangkauan — dihitung di perangkat dari titik + radius yang dipilih.
   ───────────────────────────────────────────── */
function ReachSummary({ loc, radius }) {
  if (!loc) return <p className="hp-reach hp-reach--idle">Tandai titik tempat tinggal (lokasi perangkat, area, atau ketuk peta) untuk melihat area ajarmu.</p>;
  const r = Number(radius) || 0;
  const near = AREAS.map((a) => ({ a, km: haversineKm(loc, a) })).filter((x) => x.km <= r).sort((x, y) => x.km - y.km);
  return (
    <div className="hp-reach" aria-live="polite" id="ap-reach">
      <div className="hp-reach__big"><strong>{r} km</strong> dari titikmu</div>
      <p>Kamu akan ditawari murid dalam radius ini — lingkaran merah di peta. Kamu tetap boleh menolak tawaran.</p>
      <p className="hp-hint">
        {near.length
          ? 'Pusat area dalam jangkauan: ' + near.map((x) => x.a.short + ' (±' + Math.round(x.km * 10) / 10 + ' km)').join(', ') + '.'
          : 'Belum ada pusat area pilot/sekitarnya dalam radius ini — perbesar radius bila sanggup, atau pilih titik yang lebih tepat.'}
      </p>
    </div>
  );
}

/* ─────────────────────────────────────────────
   WIZARD LAMARAN — 4 langkah → POST /apply (kontrak hp-public.js, field & tipe tidak berubah).
   ───────────────────────────────────────────── */
const DOCS = [
  { key: 'ktp', label: 'Foto KTP', required: true, allowPdf: false, accept: 'image/jpeg,image/png,image/*', hint: 'Foto jelas, semua tulisan terbaca.' },
  { key: 'selfie', label: 'Foto selfie', required: true, allowPdf: false, accept: 'image/jpeg,image/png,image/*', capture: 'user', hint: 'Wajah jelas, tanpa masker/kacamata hitam.' },
  { key: 'skck', label: 'SKCK', required: false, allowPdf: true, accept: 'image/jpeg,image/png,application/pdf,image/*', hint: 'Foto atau PDF. Boleh menyusul — wajib sebelum kamu aktif mengajar.' },
];
// Ketersediaan cepat: chip hari + rentang waktu → { mon: [["16:00","22:00"]], ... } (rentang bersebelahan digabung).
const RANGES = [
  { k: 'pagi', label: 'Pagi', from: '08:00', to: '12:00' },
  { k: 'siang', label: 'Siang', from: '12:00', to: '16:00' },
  { k: 'sore', label: 'Sore', from: '16:00', to: '19:00' },
  { k: 'malam', label: 'Malam', from: '19:00', to: '22:00' },
];
const DAY_SHORT = { mon: 'Sen', tue: 'Sel', wed: 'Rab', thu: 'Kam', fri: 'Jum', sat: 'Sab', sun: 'Min' };
function quickAvailability(days, ranges) {
  const rs = RANGES.filter((r) => ranges.includes(r.k)).map((r) => [r.from, r.to]);
  const merged = [];
  rs.forEach((r) => { const l = merged[merged.length - 1]; if (l && l[1] === r[0]) l[1] = r[1]; else merged.push([r[0], r[1]]); });
  const out = {};
  if (merged.length) days.forEach((d) => { out[d] = merged.map((r) => [r[0], r[1]]); });
  return out;
}

const AP_INIT = {
  full_name: '', phone: '', email: '', birth_date: '', area_label: '', radius_km: 10,
  instruments: [], experience: '', bio: '', kids_ok: false,
  days: [], ranges: [], availMode: 'quick', availability: {},
  refs: [{ name: '', phone: '', relation: '' }], consent: false, website: '', company_url: '',
};

/* Pesan WA dari data yang SUDAH diisi — tanpa dokumen, tanpa tanggal lahir/KTP, tanpa koordinat. */
function guruWaText(cfg, f, loc) {
  const parts = ['Halo IMS! Aku mau daftar jadi guru mitra Home Private, lebih gampang lewat chat.'];
  if (f.full_name.trim()) parts.push('Nama: ' + f.full_name.trim().slice(0, 80) + '.');
  if (f.instruments.length) parts.push('Bisa mengajar: ' + f.instruments.map((k) => { const i = cfg.instruments.find((x) => x.key === k); return i ? shortInst(i.label) : k; }).join(', ') + '.');
  const area = f.area_label.trim() || areaText(loc);
  if (area) parts.push('Area tinggal: ' + area.slice(0, 80) + (loc ? ' (radius ' + f.radius_km + ' km)' : '') + '.');
  const days = f.availMode === 'detail' ? Object.keys(f.availability) : f.days;
  if (days.length) parts.push('Hari bisa mengajar: ' + cfg.days.filter((d) => days.includes(d.key)).map((d) => d.label).join(', ') + '.');
  if (!f.full_name.trim() && !f.instruments.length) parts.push('Aku bisa mengajar: ');
  return parts.join(' ');
}

function ApplyWizard({ cfg, onClosed }) {
  const maxMb = cfg.doc_max_mb || 5;
  const maxR = cfg.max_radius_km;
  const [step, setStep] = useState(1);
  const [f, setF] = useState(() => ({ ...AP_INIT, radius_km: Math.min(10, maxR) }));
  const [loc, setLoc] = useState(null);
  const [docs, setDocs] = useState({});
  const [docErr, setDocErr] = useState({});
  const [docBusy, setDocBusy] = useState({});
  const [errors, setErrors] = useState({});
  const [formErr, setFormErr] = useState(null);
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(null);
  const top = useRef(null);
  const head = useRef(null);
  const first = useRef(true);
  const set = (k, v) => { setF((x) => ({ ...x, [k]: v })); if (errors[k]) setErrors((e) => { const c = { ...e }; delete c[k]; return c; }); };
  const dayLabel = (k) => { const d = cfg.days.find((x) => x.key === k); return d ? d.label : k; };
  const instLabel = (k) => { const i = cfg.instruments.find((x) => x.key === k); return i ? shortInst(i.label) : k; };
  const gps = useGps((l) => { setLoc(l); if (errors.loc) set('loc', undefined); });
  useWizOn(top);
  const TITLES = ['Kenalan dulu', 'Kamu mengajar apa & di mana?', 'Dokumen verifikasi', 'Referensi & kirim'];
  const availability = f.availMode === 'detail' ? f.availability : quickAvailability(f.days, f.ranges);

  useEffect(() => {
    if (first.current) { first.current = false; return; }
    if (head.current) head.current.focus({ preventScroll: true });
    const r = top.current && top.current.getBoundingClientRect();
    if (r && (r.top < 0 || r.top > window.innerHeight * 0.4)) top.current.scrollIntoView({ behavior: PREFERS_REDUCED ? 'auto' : 'smooth', block: 'start' });
  }, [step, !!done]);

  const onFile = async (d, file) => {
    setDocErr((x) => ({ ...x, [d.key]: null }));
    if (errors['doc_' + d.key]) setErrors((e) => { const c = { ...e }; delete c['doc_' + d.key]; return c; });
    if (!file) { setDocs((x) => ({ ...x, [d.key]: null })); return; }
    setDocBusy((x) => ({ ...x, [d.key]: true }));
    try {
      const p = await prepareDoc(file, { label: d.label, allowPdf: d.allowPdf, maxMb });
      setDocs((x) => ({ ...x, [d.key]: p }));
    } catch (e) {
      setDocs((x) => ({ ...x, [d.key]: null }));
      setDocErr((x) => ({ ...x, [d.key]: e.message }));
    } finally {
      setDocBusy((x) => ({ ...x, [d.key]: false }));
    }
  };

  const validate = (s) => {
    const e = {};
    if (s === 1) {
      if (f.full_name.trim().length < 3) e.full_name = 'Tulis nama lengkap sesuai KTP (minimal 3 huruf).';
      if (!PHONE_RE.test(normPhone(f.phone))) e.phone = f.phone.trim() ? 'Nomor WhatsApp belum benar. Contoh: 0812 3456 7890.' : 'Isi nomor WhatsApp aktif.';
      if (!EMAIL_RE.test(f.email.trim())) e.email = f.email.trim() ? 'Format email belum benar, contoh nama@email.com.' : 'Isi email aktif (untuk akun dashboard mitra).';
      const age = ageOn(f.birth_date);
      if (age === null) e.birth_date = 'Isi tanggal lahir.';
      else if (age < 18 || age > 80) e.birth_date = 'Usia pelamar minimal 18 tahun.';
    } else if (s === 2) {
      if (!f.instruments.length) e.instruments = 'Pilih minimal satu alat musik.';
      if (f.experience.trim().length < 20) e.experience = 'Ceritakan sedikit pengalaman mengajar/bermusik (minimal 20 karakter).';
      if (!loc) e.loc = 'Tandai titik dekat rumahmu — pakai lokasi saya, pilih area, atau ketuk peta.';
      const r = Number(f.radius_km);
      if (!(r > 0 && r <= maxR)) e.radius_km = 'Radius 1–' + maxR + ' km.';
      if (f.area_label.trim().length < 3) e.area_label = 'Isi kelurahan/kecamatan tempat tinggal.';
      if (f.availMode === 'quick') {
        if (!f.days.length) e.availability = 'Pilih hari kamu bisa mengajar.';
        else if (!f.ranges.length) e.availability = 'Pilih jam kamu bisa mengajar (pagi/siang/sore/malam).';
      } else {
        const av = availabilityError(f.availability, dayLabel);
        if (av) e.availability = av;
      }
    } else if (s === 3) {
      for (const d of DOCS) {
        if (docErr[d.key]) e['doc_' + d.key] = docErr[d.key];
        else if (d.required && !docs[d.key]) e['doc_' + d.key] = d.label + ' wajib diunggah.';
      }
    } else if (s === 4) {
      const refs = f.refs.filter((x) => x.name.trim() || x.phone.trim() || x.relation.trim());
      if (!refs.length) e.refs = 'Isi minimal satu referensi.';
      else {
        for (let i = 0; i < refs.length; i++) {
          if (refs[i].name.trim().length < 2) { e.refs = 'Referensi ' + (i + 1) + ': nama wajib.'; break; }
          if (!PHONE_RE.test(normPhone(refs[i].phone))) { e.refs = 'Referensi ' + (i + 1) + ': nomor belum benar (contoh 0812xxxxxxx).'; break; }
        }
      }
      if (!f.consent) e.consent = 'Centang persetujuan data pribadi untuk mengirim.';
    }
    return e;
  };
  const FIRST = { full_name: 'ap-name', phone: 'ap-phone', email: 'ap-email', birth_date: 'ap-birth', instruments: 'ap-inst', experience: 'ap-exp', loc: 'ap-gps', radius_km: 'ap-radius', area_label: 'ap-area-label', availability: 'ap-avail', doc_ktp: 'ap-doc-ktp', doc_selfie: 'ap-doc-selfie', doc_skck: 'ap-doc-skck', refs: 'ap-ref-0-name', consent: 'ap-consent' };
  const check = (s) => {
    if (s === 3 && Object.values(docBusy).some(Boolean)) { setErrors({ docs: 'Tunggu sebentar, dokumen masih diproses.' }); return false; }
    const e = validate(s);
    setErrors(e);
    const keys = Object.keys(e);
    if (keys.length) { setTimeout(() => { const el = document.getElementById(FIRST[keys[0]]); if (el) el.focus(); }, 0); return false; }
    return true;
  };
  const next = () => { if (check(step)) setStep(step + 1); };
  const back = () => { setErrors({}); setFormErr(null); setStep(step - 1); };

  const submit = async () => {
    setFormErr(null);
    for (const s of [1, 2, 3, 4]) { if (!check(s)) { setStep(s); return; } }
    const body = {
      full_name: f.full_name.trim(),
      phone: f.phone.trim(),
      email: f.email.trim(),
      birth_date: f.birth_date,
      area_label: f.area_label.trim(),
      lat: loc.lat,
      lng: loc.lng,
      radius_km: Number(f.radius_km),
      instruments: f.instruments,
      availability,
      refs: f.refs.filter((x) => x.name.trim() || x.phone.trim()).map((x) => ({ name: x.name.trim(), phone: x.phone.trim(), relation: x.relation.trim() })),
      experience: f.experience.trim(),
      bio: f.bio.trim(),
      kids_ok: f.kids_ok,
      ktp: docs.ktp.dataUrl,
      selfie: docs.selfie.dataUrl,
      consent: true,
      consent_version: cfg.consent.version,
      website: f.website, // honeypot
      company_url: f.company_url, // honeypot
    };
    if (docs.skck) body.skck = docs.skck.dataUrl;
    const size = (body.ktp.length + body.selfie.length + (body.skck ? body.skck.length : 0));
    if (size > BODY_LIMIT) { setFormErr('Total dokumen terlalu besar untuk sekali kirim. Perkecil PDF SKCK atau kirim SKCK menyusul.'); return; }
    setBusy(true);
    const r = await hpApi('/apply', { method: 'POST', body, timeout: 90000 });
    setBusy(false);
    if (r.ok && r.body && r.body.ok) { setDone(r.body.message || 'Lamaran terkirim.'); return; }
    if (r.status === 404) { onClosed(); return; }
    setFormErr(friendlyError(r, 'apply', maxMb));
  };

  const waText = guruWaText(cfg, f, loc);
  if (done) {
    const days = cfg.days.filter((d) => availability[d.key]).map((d) => d.label);
    return (
      <div ref={top}>
        <SuccessScreen
          title="Lamaran terkirim"
          message={done}
          summary={[
            ['Nama', f.full_name.trim()],
            ['Bisa mengajar', f.instruments.map(instLabel).join(', ') + (f.kids_ok ? ' · bersedia mengajar anak' : '')],
            ['Wilayah', f.area_label.trim() + ' · radius ' + f.radius_km + ' km'],
            ['Hari tersedia', days.join(', ')],
            ['Dokumen', 'KTP ✓ · Selfie ✓ · SKCK ' + (docs.skck ? '✓' : 'menyusul')],
            ['Referensi', f.refs.filter((x) => x.name.trim()).length + ' orang'],
            ['Kontak', f.phone.trim() + ' · ' + f.email.trim()],
          ]}
          steps={[
            'Seleksi dokumen: KTP & selfie dicek, referensi dihubungi.',
            'Wawancara — onsite, Zoom, atau Google Meet.',
            'Demo mengajar, lalu pelatihan Metode IMS + tes.',
            'Tanda tangan Perjanjian Kemitraan → akun dashboard mitra aktif, mulai menerima tawaran murid.',
          ]}
          note={docs.skck ? 'Tim IMS menghubungi lewat WhatsApp bila profilmu cocok.' : 'SKCK boleh menyusul — wajib berlaku sebelum kamu aktif mengajar. Tim IMS menghubungi lewat WhatsApp bila profilmu cocok.'}
          waText={'Halo IMS! Aku barusan kirim lamaran guru mitra Home Private atas nama ' + f.full_name.trim() + '.'}
        />
      </div>
    );
  }

  const inv = (k, id, hint) => ({ id, 'aria-invalid': errors[k] ? true : undefined, 'aria-describedby': errors[k] ? id + '-err' : hint });
  const err = (k, id) => (errors[k] ? <div className="hp-err" id={id + '-err'}>{errors[k]}</div> : null);
  const toggle = (k, v) => set(k, f[k].includes(v) ? f[k].filter((x) => x !== v) : [...f[k], v]);
  const setRef = (i, patch) => set('refs', f.refs.map((x, j) => (j === i ? { ...x, ...patch } : x)));
  const presets = [...new Set([3, 5, 10, maxR].filter((v) => v <= maxR))];
  const refsN = f.refs.filter((x) => x.name.trim()).length;
  const availDays = cfg.days.filter((d) => availability[d.key]);
  const summary = [
    ['Nama', f.full_name.trim()],
    ['Kontak', f.phone.trim() + (f.email.trim() ? ' · ' + f.email.trim() : '')],
    ['Mengajar', f.instruments.map(instLabel).join(', ') + (f.kids_ok ? ' · bisa ajar anak' : '')],
    ['Wilayah', (f.area_label.trim() || areaText(loc)) + ' · radius ' + f.radius_km + ' km'],
    ['Jadwal', availDays.map((d) => DAY_SHORT[d.key] + ' ' + availability[d.key].map((r) => r[0] + '–' + r[1]).join(', ')).join(' · ')],
    ['Dokumen', 'KTP ' + (docs.ktp ? '✓' : '—') + ' · Selfie ' + (docs.selfie ? '✓' : '—') + ' · SKCK ' + (docs.skck ? '✓' : 'menyusul')],
  ];

  return (
    <div className="hp-wiz hp-applywiz" ref={top}>
      <div className="hp-panel hp-wiz__panel">
        <WizardProgress step={step} total={4} title={TITLES[step - 1]} id="ap-prog" />
        <h3 className="hp-wiz__title" tabIndex={-1} ref={head} id="ap-title">{TITLES[step - 1]}</h3>

        {step === 1 && (
          <div className="hp-wiz__body">
            <p className="hp-wiz__sub">Sesuai KTP. Email dipakai untuk akun dashboard mitra bila kamu diterima.</p>
            <div className="hp-field">
              <label htmlFor="ap-name">Nama lengkap (sesuai KTP)</label>
              <input {...inv('full_name', 'ap-name')} value={f.full_name} onChange={(e) => set('full_name', e.target.value)} autoComplete="name" enterKeyHint="next" />
              {err('full_name', 'ap-name')}
            </div>
            <div className="hp-fgrid">
              <div className="hp-field">
                <label htmlFor="ap-phone">Nomor WhatsApp</label>
                <input {...inv('phone', 'ap-phone')} type="tel" inputMode="tel" value={f.phone} onChange={(e) => set('phone', e.target.value)} placeholder="0812 3456 7890" autoComplete="tel" enterKeyHint="next" />
                {err('phone', 'ap-phone')}
              </div>
              <div className="hp-field">
                <label htmlFor="ap-email">Email</label>
                <input {...inv('email', 'ap-email')} type="email" inputMode="email" value={f.email} onChange={(e) => set('email', e.target.value)} placeholder="nama@email.com" autoComplete="email" enterKeyHint="next" />
                {err('email', 'ap-email')}
              </div>
            </div>
            <div className="hp-field hp-field--half">
              <label htmlFor="ap-birth">Tanggal lahir</label>
              <input {...inv('birth_date', 'ap-birth', 'ap-birth-h')} type="date" value={f.birth_date} onChange={(e) => set('birth_date', e.target.value)} autoComplete="bday" />
              {errors.birth_date ? err('birth_date', 'ap-birth') : <span className="hp-hint" id="ap-birth-h">Minimal 18 tahun.</span>}
            </div>
            <div className="hp-trap" aria-hidden="true">
              <label htmlFor="ap-website">Situs web</label>
              <input id="ap-website" name="website" tabIndex={-1} autoComplete="off" value={f.website} onChange={(e) => set('website', e.target.value)} />
              <label htmlFor="ap-company">URL perusahaan</label>
              <input id="ap-company" name="company_url" tabIndex={-1} autoComplete="off" value={f.company_url} onChange={(e) => set('company_url', e.target.value)} />
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="hp-wiz__body">
            <div className="hp-field">
              <span className="hp-legend" id="ap-inst-l">Alat musik yang bisa kamu ajarkan</span>
              <div className="hp-instpick__grid hp-instpick__grid--6" role="group" aria-labelledby="ap-inst-l" id="ap-inst" tabIndex={-1} aria-describedby={errors.instruments ? 'ap-inst-err' : 'ap-inst-h'}>
                {cfg.instruments.map((i) => (
                  <button key={i.key} type="button" id={'ap-inst-' + i.key} className="hp-instcard" aria-pressed={f.instruments.includes(i.key)} onClick={() => toggle('instruments', i.key)}>
                    <span className="hp-instcard__icon"><InstIcon k={i.key} size={28} /></span>
                    <span className="hp-instcard__label">{shortInst(i.label)}</span>
                  </button>
                ))}
              </div>
              {errors.instruments ? err('instruments', 'ap-inst') : <span className="hp-hint" id="ap-inst-h">Boleh lebih dari satu. Drum di rumah hanya drum pad / practice kit.</span>}
            </div>
            <div className="hp-field">
              <label htmlFor="ap-exp">Pengalaman singkat</label>
              <textarea {...inv('experience', 'ap-exp')} rows={3} value={f.experience} onChange={(e) => set('experience', e.target.value)} placeholder="mis. 3 tahun mengajar gitar anak di sanggar, main di band kampus, Grade 5 RSL" />
              {err('experience', 'ap-exp')}
            </div>
            <label className="hp-toggle" htmlFor="ap-kids">
              <input type="checkbox" id="ap-kids" checked={f.kids_ok} onChange={(e) => set('kids_ok', e.target.checked)} />
              <span className="hp-toggle__ui" aria-hidden />
              <span>Saya bersedia & berpengalaman mengajar anak (di bawah 17 tahun)</span>
            </label>

            <div className="hp-wiz__sec">
              <span className="hp-legend">Di mana kamu tinggal & seberapa jauh mau datang?</span>
              <p className="hp-hint">Titik persis kamu tidak pernah ditampilkan — publik hanya melihat area kira-kira ±1 km dan nama kecamatan.</p>
              <div className="hp-reachbox">
                <div className="hp-reachbox__side">
                  <button type="button" id="ap-gps" className="hp-bigbtn" onClick={gps.run} disabled={gps.busy} aria-invalid={errors.loc ? true : undefined} aria-describedby={errors.loc ? 'ap-loc-err' : undefined}>
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" aria-hidden><circle cx="12" cy="12" r="3.2" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3" /><circle cx="12" cy="12" r="7.5" /></svg>
                    <span>{gps.busy ? 'Mencari lokasi…' : 'Pakai lokasi saya'}</span>
                  </button>
                  {gps.err && <div className="hp-err" role="alert">{gps.err}</div>}
                  <div className="hp-field">
                    <label htmlFor="ap-area">Atau pilih area terdekat</label>
                    <select id="ap-area" value={loc && loc.source === 'area' ? loc.key : ''} onChange={(e) => { const a = AREAS.find((x) => x.key === e.target.value); if (a) { setLoc({ lat: a.lat, lng: a.lng, source: 'area', key: a.key, label: a.label }); if (errors.loc) set('loc', undefined); } }}>
                      <option value="">— Pilih area —</option>
                      {[...new Set(AREAS.map((a) => a.group))].map((g) => <optgroup key={g} label={g}>{AREAS.filter((a) => a.group === g).map((a) => <option key={a.key} value={a.key}>{a.label}</option>)}</optgroup>)}
                    </select>
                  </div>
                  {err('loc', 'ap-loc')}
                  <div className="hp-field">
                    <label htmlFor="ap-radius">Radius bersedia datang: <strong>{f.radius_km} km</strong></label>
                    <input id="ap-radius" className="hp-range" type="range" min="1" max={maxR} step="0.5" value={f.radius_km} onChange={(e) => set('radius_km', e.target.value)} aria-describedby="ap-radius-h" aria-valuetext={f.radius_km + ' kilometer'} />
                    <div className="hp-chips" role="group" aria-label="Pilihan cepat radius">
                      {presets.map((v) => <button key={v} type="button" className="hp-chip hp-chip--sm" aria-pressed={Number(f.radius_km) === v} onClick={() => set('radius_km', v)}>{v} km</button>)}
                    </div>
                    <span className="hp-hint" id="ap-radius-h">Pikirkan macet — pilih jarak yang realistis.</span>
                    {err('radius_km', 'ap-radius')}
                  </div>
                </div>
                <div className="hp-reachbox__map">
                  <HpMap pin={loc} pinLabel="Titik kamu" radiusKm={Number(f.radius_km)} pilotZone zoom={10.5} fitKey={loc ? loc.lat + ',' + loc.lng + ',' + f.radius_km : 'none'}
                    onPick={(p) => { setLoc({ ...p, source: 'map', label: 'Titik yang kamu ketuk di peta' }); if (errors.loc) set('loc', undefined); }}
                    onLocate={gps.run} locating={gps.busy}
                    label="Peta: ketuk titik dekat rumahmu. Lingkaran merah = radius mengajar. Ringkasan jangkauan tertulis di bawah peta." describedBy="ap-map-legend"
                    legend={[{ sw: 'pin', text: 'Titik kamu' }, { sw: 'ring', text: 'Radius mengajar' }, { sw: 'pilot', text: 'Area pilot' }]} />
                  <ReachSummary loc={loc} radius={f.radius_km} />
                </div>
              </div>
              <div className="hp-field hp-field--half" style={{ marginTop: 14 }}>
                <label htmlFor="ap-area-label">Kelurahan / kecamatan</label>
                <input {...inv('area_label', 'ap-area-label')} value={f.area_label} onChange={(e) => set('area_label', e.target.value)} placeholder="mis. Pakulonan Barat, Kelapa Dua" />
                {err('area_label', 'ap-area-label')}
              </div>
            </div>

            <div className="hp-wiz__sec" id="ap-avail" tabIndex={-1} aria-describedby={errors.availability ? 'ap-avail-err' : undefined}>
              <span className="hp-legend" id="ap-days-l">Kapan kamu bisa mengajar?</span>
              {f.availMode === 'quick' ? (
                <React.Fragment>
                  <div className="hp-daychips" role="group" aria-labelledby="ap-days-l">
                    {cfg.days.map((d) => <button key={d.key} type="button" id={'ap-day-' + d.key} className="hp-daychip" aria-pressed={f.days.includes(d.key)} aria-label={d.label} onClick={() => { toggle('days', d.key); if (errors.availability) set('availability', f.availability); }}>{DAY_SHORT[d.key]}</button>)}
                  </div>
                  <div className="hp-timechips" role="group" aria-label="Rentang jam">
                    {RANGES.map((r) => (
                      <button key={r.k} type="button" className="hp-timechip" id={'ap-range-' + r.k} aria-pressed={f.ranges.includes(r.k)} onClick={() => { toggle('ranges', r.k); if (errors.availability) set('availability', f.availability); }}>
                        <strong>{r.label}</strong><span>{r.from}–{r.to}</span>
                      </button>
                    ))}
                  </div>
                  <button type="button" className="hp-link" onClick={() => setF((x) => ({ ...x, availMode: 'detail', availability: quickAvailability(x.days, x.ranges) }))}>Jam beda tiap hari? Atur per hari</button>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <p className="hp-hint">Centang hari, lalu isi jam (06:00–22:00, maks 4 rentang per hari).</p>
                  <AvailabilityEditor days={cfg.days} value={f.availability} onChange={(v) => set('availability', v)} invalid={!!errors.availability} />
                  <button type="button" className="hp-link" onClick={() => setF((x) => ({ ...x, availMode: 'quick' }))}>Kembali ke pilihan cepat</button>
                </React.Fragment>
              )}
              {err('availability', 'ap-avail')}
            </div>

            <details className="hp-adv">
              <summary>Perkenalan singkat untuk profil <span className="hp-opt">(opsional)</span></summary>
              <div className="hp-adv__body hp-field">
                <label htmlFor="ap-bio" className="hp-sr">Perkenalan singkat</label>
                <textarea id="ap-bio" rows={3} maxLength={1000} value={f.bio} onChange={(e) => set('bio', e.target.value)} aria-describedby="ap-bio-h" />
                <span className="hp-hint" id="ap-bio-h">Tampil di profil publik bila kamu diterima (maks 280 karakter yang ditampilkan).</span>
              </div>
            </details>
          </div>
        )}

        {step === 3 && (
          <div className="hp-wiz__body">
            <p className="hp-wiz__sub">Hanya untuk verifikasi identitas & keselamatan murid. Disimpan privat, hanya dibuka tim verifikasi IMS, setiap akses tercatat. Maks {maxMb} MB per berkas — foto besar dikecilkan otomatis.</p>
            <div className="hp-docs">
              {DOCS.map((d) => {
                const id = 'ap-doc-' + d.key;
                const e = errors['doc_' + d.key] || docErr[d.key];
                const p = docs[d.key];
                return (
                  <div key={d.key} className={'hp-doccard' + (p ? ' is-ok' : '') + (e ? ' is-bad' : '')}>
                    <div className="hp-doccard__prev" aria-hidden>
                      {p && p.type !== 'application/pdf' ? <img src={p.dataUrl} alt="" /> : p ? <span className="hp-doccard__pdf">PDF</span> : <span className="hp-doccard__ph">{d.key === 'selfie' ? '🙂' : d.key === 'ktp' ? 'KTP' : 'SKCK'}</span>}
                    </div>
                    <div className="hp-doccard__main">
                      <label htmlFor={id} className="hp-doccard__lbl">{d.label}{d.required ? '' : ' (boleh menyusul)'}</label>
                      <input id={id} type="file" accept={d.accept} capture={d.capture} aria-invalid={e ? true : undefined} aria-describedby={id + (e ? '-err' : '-h')}
                        onChange={(ev) => onFile(d, (ev.target.files && ev.target.files[0]) || null)} />
                      {e
                        ? <div className="hp-err" id={id + '-err'} role="alert">{e}</div>
                        : <span className="hp-hint" id={id + '-h'}>{docBusy[d.key] ? 'Memproses…' : p ? '✓ ' + p.name + ' · ' + Math.max(1, Math.round(p.size / 1024)) + ' KB' : d.hint}</span>}
                    </div>
                  </div>
                );
              })}
            </div>
            {errors.docs && <div className="hp-err" role="alert">{errors.docs}</div>}
          </div>
        )}

        {step === 4 && (
          <div className="hp-wiz__body">
            <div className="hp-field">
              <span className="hp-legend">Referensi (1–3 orang, bukan keluarga)</span>
              <p className="hp-hint">Orang yang bisa kami hubungi soal pengalaman mengajarmu.</p>
              {f.refs.map((r, i) => (
                <div key={i} className="hp-refrow">
                  <input className="hp-mini" id={'ap-ref-' + i + '-name'} aria-label={'Referensi ' + (i + 1) + ': nama'} placeholder="Nama" value={r.name} onChange={(e) => setRef(i, { name: e.target.value })} aria-invalid={errors.refs ? true : undefined} aria-describedby={errors.refs ? 'ap-refs-err' : undefined} />
                  <input className="hp-mini" type="tel" inputMode="tel" aria-label={'Referensi ' + (i + 1) + ': nomor telepon'} placeholder="No. telepon" value={r.phone} onChange={(e) => setRef(i, { phone: e.target.value })} />
                  <input className="hp-mini" aria-label={'Referensi ' + (i + 1) + ': hubungan'} placeholder="Hubungan (mis. kepala sekolah musik)" value={r.relation} onChange={(e) => setRef(i, { relation: e.target.value })} />
                  {f.refs.length > 1 && <button type="button" className="hp-x" aria-label={'Hapus referensi ' + (i + 1)} onClick={() => set('refs', f.refs.filter((_, j) => j !== i))}>×</button>}
                </div>
              ))}
              {f.refs.length < 3 && <button type="button" className="hp-link" onClick={() => set('refs', [...f.refs, { name: '', phone: '', relation: '' }])}>+ Tambah referensi</button>}
              {err('refs', 'ap-refs')}
            </div>
            <div className="hp-sumbox">
              <div className="hp-legend">Ringkasan lamaran</div>
              <dl className="hp-success__dl">
                {[...summary, ['Referensi', refsN ? refsN + ' orang' : '']].filter((r) => r[1]).map(([k, v]) => <div key={k} className="hp-sum__row"><dt>{k}</dt><dd>{v}</dd></div>)}
              </dl>
            </div>
            <div className="hp-consent-text" id="ap-consent-text">
              {cfg.consent.text}
              <span className="hp-consent-ver">Versi {cfg.consent.version}</span>
            </div>
            <label className="hp-consent hp-consent--big" htmlFor="ap-consent">
              <input type="checkbox" id="ap-consent" checked={f.consent} onChange={(e) => set('consent', e.target.checked)}
                aria-invalid={errors.consent ? true : undefined} aria-describedby={'ap-consent-text' + (errors.consent ? ' ap-consent-err' : '')} />
              <span>Saya sudah membaca dan menyetujui pemrosesan data pribadi di atas.</span>
            </label>
            {err('consent', 'ap-consent')}
            {formErr && (
              <div className="hp-alert hp-alert--err" role="alert">
                {formErr}
                <div className="hp-alert__acts"><a className="btn btn--sm hp-wa-btn hp-wa-btn--sm" href={waLink(waText)} target="_blank" rel="noopener"><WaIcon size={16} /> Hubungi admin via WhatsApp</a></div>
              </div>
            )}
            {busy && <p className="hp-hint" role="status">Mengunggah dokumen, jangan tutup halaman ini.</p>}
          </div>
        )}

        <div className="hp-wiz__foot">
          <div className="hp-wiz__btns">
            {step > 1 && <button type="button" className="btn btn--outline hp-wiz__back" onClick={back}>← Kembali</button>}
            {step < 4
              ? <button type="button" className="btn btn--primary hp-wiz__next" onClick={next}>Lanjut →</button>
              : <button type="button" className="btn btn--primary hp-wiz__next" onClick={submit} disabled={busy}>{busy ? 'Mengirim lamaran…' : 'Kirim lamaran'}</button>}
          </div>
          <WaHelp text={waText} />
        </div>
      </div>
    </div>
  );
}

/* ─────────────────────────────────────────────
   Kalkulator bagi hasil ILUSTRATIF — tampil hanya bila /config memberi harga. Tanpa angka pajak.
   ───────────────────────────────────────────── */
function EarningsCalc({ cfg }) {
  const ps = cfg.package_sessions || 4;
  const pk = Number(cfg.prices.paket) || 0;
  const ec = Number(cfg.prices.eceran) || 0;
  const share = teacherShare(cfg);
  const kinds = [pk > 0 && 'paket', ec > 0 && 'eceran'].filter(Boolean);
  const [kind, setKind] = useState(kinds[0]);
  const [perWeek, setPerWeek] = useState(4);
  const perSession = kind === 'paket' ? pk / ps : ec;
  const honor = Math.round((perSession * share) / 100);
  const week = honor * perWeek;
  const four = week * 4;
  return (
    <Reveal className="hp-calc">
      <div className="hp-calc__inputs">
        <div className="hp-legend">Murid {kind === 'paket' ? 'paket' : 'eceran'} <DemoTag /></div>
        <div className="hp-chips" role="group" aria-label="Jenis pembayaran murid">
          {kinds.map((k) => <button key={k} type="button" className="hp-chip" aria-pressed={kind === k} onClick={() => setKind(k)}>{k === 'paket' ? 'Paket ' + ps + ' sesi' : 'Eceran'}</button>)}
        </div>
        <label htmlFor="calc-week" className="hp-calc__q">Sesi per minggu: <strong>{perWeek}</strong></label>
        <input id="calc-week" className="hp-range" type="range" min="1" max="20" step="1" value={perWeek} onChange={(e) => setPerWeek(Number(e.target.value))} aria-valuetext={perWeek + ' sesi per minggu'} />
        <ol className="hp-calc__math">
          <li>Nilai per sesi: {kind === 'paket' ? rupiah(pk) + ' ÷ ' + ps + ' = ' : ''}<strong>{rupiah(Math.round(perSession))}</strong></li>
          <li>Bagian guru {share}%: <strong id="calc-honor">{rupiah(honor)}</strong> per sesi selesai</li>
          <li>{perWeek} sesi × {rupiah(honor)} = <strong>{rupiah(week)}</strong> per minggu</li>
        </ol>
      </div>
      <div className="hp-calc__out" aria-live="polite">
        <div className="hp-calc__label">Ilustrasi 4 minggu</div>
        <div className="hp-calc__big" id="calc-total">{rupiah(four)}</div>
        <div className="hp-calc__sub">{perWeek * 4} sesi selesai × {rupiah(honor)}</div>
        <p className="hp-calc__disc">
          <strong>Ilustrasi perhitungan, bukan janji penghasilan.</strong> Jumlah murid tidak dijamin — tergantung permintaan di areamu
          dan jadwal yang kamu buka. Ketentuan resmi mengikuti Perjanjian Kemitraan.
        </p>
      </div>
    </Reveal>
  );
}

/* ─────────────────────────────────────────────
   Konten kampanye (tetap tampil walau pendaftaran belum dibuka).
   ───────────────────────────────────────────── */
function Reasons({ maxR, share }) {
  const items = [
    { t: 'Jadwal & radius kamu yang atur', d: 'Kamu isi ketersediaan mingguan dan radius sendiri (maks ' + maxR + ' km dari rumah). Tawaran murid boleh kamu tolak tanpa sanksi.' },
    { t: 'Murid & jadwal dari IMS', d: 'Permintaan ortu masuk ke IMS. Sistem merekomendasikan guru yang cocok (alat musik, jarak, jadwal), admin menawarkan, kamu yang memutuskan terima.' },
    { t: 'Bagi hasil ' + share + ' / ' + (100 - share), d: share + '% untuk kamu, ' + (100 - share) + '% untuk IMS, dari nilai yang dibayar murid ke IMS — dihitung per sesi yang selesai.' },
    { t: 'Kurikulum & metode seragam', d: 'Pakai Metode IMS — kurikulum, rapor progres tiap sesi (skill, milestone, stamp) — dengan pelatihan saat onboarding. Kamu fokus ngajar, nggak bikin materi dari nol.' },
    { t: 'Honor tercatat di dashboard', d: 'Tiap sesi yang dikonfirmasi tercatat di dashboard mitra. Pencairan tiap 4 sesi selesai (paket) atau akhir bulan (eceran).' },
    { t: 'Nggak perlu nagih', d: 'Ortu bayar ke IMS, bukan ke kamu. Urusan tagihan, jadwal ulang, dan guru pengganti dibantu admin IMS.' },
  ];
  return (
    <div className="hp-grid">
      {items.map((x, i) => (
        <Reveal key={i} className="hp-card" delay={(i % 3) * 80}>
          <div className="hp-card__num">0{i + 1}</div>
          <h3 className="hp-card__title">{x.t}</h3>
          <p className="hp-card__text">{x.d}</p>
        </Reveal>
      ))}
    </div>
  );
}

/* Stepper onboarding interaktif (pola tab; panah atas/bawah/kiri/kanan berpindah langkah).
   Urutan & isi = SPEC:43 + CHECKLIST ims-api hp.js + Perjanjian Kemitraan outline. Tanpa estimasi durasi (belum ditetapkan). */
const ONBOARD = [
  { t: 'Daftar online', d: 'Isi formulir di halaman ini: data diri, dokumen, alat musik, wilayah & radius, jadwal, referensi.',
    what: ['Lamaranmu masuk ke daftar pelamar IMS.', 'Dokumen disimpan di penyimpanan privat — hanya tim verifikasi yang bisa membuka, setiap akses tercatat.'],
    prep: ['Foto KTP & selfie (JPG/PNG)', 'SKCK (boleh menyusul)', '1–3 referensi', 'Jadwal mingguan, titik tempat tinggal & radius'] },
  { t: 'Seleksi dokumen', d: 'Tim IMS memeriksa KTP & selfie, lalu menghubungi referensimu. SKCK boleh menyusul, tapi wajib berlaku sebelum kamu aktif.', tag: 'KTP · Selfie · SKCK · Referensi',
    what: ['KTP diverifikasi dan selfie dicocokkan dengan KTP.', 'Referensi dihubungi soal pengalaman mengajarmu.', 'SKCK dicek masih berlaku.'],
    prep: ['Kabari referensimu bahwa IMS mungkin menghubungi mereka.', 'Urus SKCK kalau belum punya.'] },
  { t: 'Wawancara', d: 'Ngobrol santai soal pengalaman dan cara mengajarmu — tatap muka (onsite) atau online lewat Zoom / Google Meet.', tag: 'Onsite · Zoom · Meet',
    what: ['Ngobrol soal pengalaman, alat musik, dan cara kamu mengajar.'],
    prep: ['Pilih format: onsite, Zoom, atau Google Meet.'] },
  { t: 'Demo mengajar', d: 'Tunjukkan cara kamu mengajar satu materi. Bukan audisi bintang — kami lihat cara kamu menjelaskan.',
    what: ['Kamu mengajarkan satu materi; tim IMS menilai cara kamu menjelaskan.'],
    prep: ['Siapkan satu materi singkat untuk alat musikmu.'] },
  { t: 'Pelatihan Metode IMS + tes', d: 'Kenalan dengan kurikulum, rapor progres, dan standar sesi IMS, ditutup tes singkat.',
    what: ['Pelatihan kurikulum Metode IMS dan rapor progres (skill, milestone, stamp) yang diisi tiap sesi.', 'Ditutup tes singkat.'],
    prep: [] },
  { t: 'Perjanjian kemitraan', d: 'Kamu baca dan tanda tangan Perjanjian Kemitraan — termasuk larangan mengambil murid IMS di luar platform selama terdaftar + 12 bulan sesudahnya.', tag: 'Non-solicit 12 bulan',
    what: ['Isi perjanjian: status mitra (bukan karyawan), bagi hasil, pembayaran hanya lewat IMS, perlindungan data murid, non-solicit 12 bulan.'],
    prep: ['Baca dengan teliti; tanyakan yang belum jelas sebelum tanda tangan.'] },
  { t: 'Aktif & mulai menerima murid', d: 'Akun dashboard mitra dibuat (login pakai email). Profilmu bisa tampil di "Cari guru terdekat", dan kamu mulai menerima tawaran murid.',
    what: ['Akun dashboard mitra dibuat — login pakai email yang kamu daftarkan.', 'Profilmu bisa tampil di "Cari guru terdekat": nama depan + inisial, area kira-kira ±1 km.', 'Tawaran murid masuk; terima atau tolak tanpa sanksi.'],
    prep: [] },
];
function Onboarding() {
  const [cur, setCur] = useState(0);
  const tabs = useRef([]);
  const go = (i) => { const n = (i + ONBOARD.length) % ONBOARD.length; setCur(n); if (tabs.current[n]) tabs.current[n].focus(); };
  const onKey = (e) => {
    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') { e.preventDefault(); go(cur + 1); }
    else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') { e.preventDefault(); go(cur - 1); }
    else if (e.key === 'Home') { e.preventDefault(); go(0); }
    else if (e.key === 'End') { e.preventDefault(); go(ONBOARD.length - 1); }
  };
  const s = ONBOARD[cur];
  return (
    <div className="hp-ob">
      <div className="hp-ob__list" role="tablist" aria-label="Langkah onboarding" aria-orientation="vertical" onKeyDown={onKey}>
        {ONBOARD.map((x, i) => (
          <button key={i} type="button" role="tab" id={'ob-tab-' + i} aria-selected={cur === i} aria-controls="ob-panel" tabIndex={cur === i ? 0 : -1}
            ref={(el) => { tabs.current[i] = el; }} onClick={() => setCur(i)}
            className={'hp-ob__tab' + (i < cur ? ' is-done' : '') + (cur === i ? ' is-cur' : '')}>
            <span className="hp-ob__n" aria-hidden>{String(i + 1).padStart(2, '0')}</span>
            <span className="hp-ob__t">{x.t}</span>
          </button>
        ))}
      </div>
      <div className="hp-ob__panel" role="tabpanel" id="ob-panel" aria-labelledby={'ob-tab-' + cur} key={cur}>
        <div className="hp-ob__step">Langkah {cur + 1} dari {ONBOARD.length}</div>
        <h3 className="hp-ob__title">{s.t}</h3>
        <p className="hp-ob__desc">{s.d}</p>
        {s.tag && <span className="hp-step__tag">{s.tag}</span>}
        <div className="hp-ob__cols">
          <div>
            <div className="hp-legend">Yang terjadi</div>
            <ul className="hp-list">{s.what.map((w, i) => <li key={i}><span>{w}</span></li>)}</ul>
          </div>
          {s.prep.length > 0 && (
            <div>
              <div className="hp-legend">Yang kamu siapkan</div>
              <ul className="hp-list">{s.prep.map((w, i) => <li key={i}><span>{w}</span></li>)}</ul>
            </div>
          )}
        </div>
        <div className="hp-ob__nav">
          <button type="button" className="btn btn--outline btn--sm" onClick={() => go(cur - 1)} disabled={cur === 0}>← Sebelumnya</button>
          {cur < ONBOARD.length - 1
            ? <button type="button" className="btn btn--primary btn--sm" onClick={() => go(cur + 1)}>Berikutnya →</button>
            : <a className="btn btn--primary btn--sm" href="#daftar">Mulai daftar</a>}
        </div>
      </div>
    </div>
  );
}

// Fallback teks bila /config tidak menjawab — sama dengan INSTRUMENTS ims-api/src/hp.js.
const INSTRUMENT_TEXT = 'gitar, gitar listrik, piano/keyboard, vokal, biola, atau drum pad';

function Requirements({ cfg, maxR }) {
  const inst = cfg ? cfg.instruments.map((i) => shortInst(i.label).toLowerCase()).join(', ') : INSTRUMENT_TEXT;
  return (
    <div className="hp-grid hp-grid--2">
      <Reveal className="hp-card">
        <div className="hp-card__num">Apa yang kami butuhkan</div>
        <ul className="hp-list">
          <li><span>Usia <strong>minimal 18 tahun</strong>.</span></li>
          <li><span><strong>Foto KTP</strong> dan <strong>selfie</strong> wajah jelas.</span></li>
          <li><span><strong>SKCK</strong> yang berlaku — boleh menyusul, wajib sebelum aktif.</span></li>
          <li><span><strong>1–3 referensi</strong> yang bisa dihubungi soal pengalaman mengajarmu (bukan keluarga).</span></li>
          <li><span>Bisa mengajar minimal satu: {inst}.</span></li>
          <li><span>Nomor WhatsApp & <strong>email aktif</strong> (untuk akun dashboard mitra).</span></li>
          <li><span>Ketersediaan mingguan + titik tempat tinggal dan radius (maks {maxR} km).</span></li>
        </ul>
      </Reveal>
      <Reveal className="hp-card hp-card--note" delay={90}>
        <div className="hp-card__num">Yang perlu kamu tahu</div>
        <ul className="hp-list">
          <li><span><strong>Mitra, bukan karyawan.</strong> Tidak ada jam kerja tetap; kamu atur ketersediaan & radius, dan boleh menolak tawaran tanpa sanksi. Standar mutu Metode IMS tetap berlaku.</span></li>
          <li><span><strong>Non-solicit.</strong> Selama terdaftar dan 12 bulan setelah keluar, kamu tidak boleh menawarkan, menerima, atau mengajar murid yang kamu kenal lewat IMS di luar platform. Kalau ortu menghubungi langsung, arahkan kembali ke IMS. Rincian & sanksinya ada di perjanjian.</span></li>
          <li><span><strong>Pembayaran hanya lewat IMS.</strong> Jangan menerima uang langsung dari murid/ortu IMS.</span></li>
          <li><span><strong>Data murid dijaga.</strong> Nomor ortu tidak diberikan ke guru — komunikasi lewat kanal IMS. Alamat murid dibuka setelah penugasan dikonfirmasi.</span></li>
          <li><span><strong>Tiap sesi:</strong> check-in GPS + foto saat datang, check-out saat selesai, isi catatan progres; ortu mengonfirmasi sesinya.</span></li>
          <li><span><strong>Murid anak:</strong> orang dewasa wajib ada di rumah selama sesi murid di bawah 17 tahun.</span></li>
          <li><span>Kami <strong>tidak menjanjikan</strong> jumlah murid atau penghasilan tertentu — tergantung permintaan di areamu dan jadwal yang kamu buka.</span></li>
        </ul>
      </Reveal>
    </div>
  );
}

/* "Cek kesiapanmu" — hanya state di memori (tidak disimpan ke localStorage/cookie, tidak dikirim). */
const READY = [
  { k: 'age', t: 'Usia minimal 18 tahun', req: true },
  { k: 'ktp', t: 'Foto KTP jelas, semua tulisan terbaca', req: true },
  { k: 'selfie', t: 'Bisa foto selfie wajah jelas (tanpa masker/kacamata hitam)', req: true },
  { k: 'refs', t: '1–3 referensi yang bisa dihubungi (bukan keluarga)', req: true },
  { k: 'inst', t: 'Bisa mengajar minimal satu alat musik Home Private', req: true },
  { k: 'sched', t: 'Punya jadwal mingguan yang bisa dibuka + radius yang realistis', req: true },
  { k: 'contact', t: 'WhatsApp & email aktif', req: true },
  { k: 'skck', t: 'SKCK berlaku', req: false, note: 'boleh menyusul — wajib sebelum aktif' },
];
function Readiness() {
  const [on, setOn] = useState({});
  const req = READY.filter((x) => x.req);
  const done = req.filter((x) => on[x.k]).length;
  const pct = Math.round((done / req.length) * 100);
  const all = done === req.length;
  return (
    <Reveal className="hp-ready">
      <div className="hp-ready__head">
        <div>
          <div className="hp-card__num">Cek kesiapanmu</div>
          <p className="hp-hint">Centang yang sudah siap. Hanya di layar kamu — tidak disimpan, tidak dikirim.</p>
        </div>
        <div className="hp-ready__pct" aria-hidden>{pct}%</div>
      </div>
      <div className="hp-ready__bar" role="progressbar" aria-label="Kesiapan" aria-valuemin={0} aria-valuemax={req.length} aria-valuenow={done} aria-valuetext={done + ' dari ' + req.length + ' syarat wajib siap'}>
        <span style={{ width: pct + '%' }} />
      </div>
      <div className="hp-ready__items">
        {READY.map((x) => (
          <label key={x.k} className={'hp-ready__item' + (on[x.k] ? ' is-on' : '')}>
            <input type="checkbox" checked={!!on[x.k]} onChange={(e) => setOn({ ...on, [x.k]: e.target.checked })} />
            <span>{x.t}{!x.req && <em> — {x.note}</em>}</span>
          </label>
        ))}
      </div>
      <p className="hp-ready__msg" aria-live="polite">
        {all
          ? <>Semua syarat wajib siap{on.skck ? ', SKCK juga' : ' (SKCK boleh menyusul)'}. <a href="#daftar" className="hp-link">Lanjut isi formulir →</a></>
          : 'Masih ' + (req.length - done) + ' syarat wajib lagi.'}
      </p>
    </Reveal>
  );
}

function faqItems(maxR, share) {
  return [
    { q: 'Berapa honornya?', a: 'Bagi hasil ' + share + '% untuk guru dan ' + (100 - share) + '% untuk IMS, dari nilai yang dibayar murid ke IMS, dihitung per sesi yang selesai. Kalau murid membatalkan mendadak (kurang dari 3 jam sebelum sesi), kamu tetap dapat 50% honor sesi itu. Angka lengkapnya tertulis di perjanjian kemitraan.' },
    { q: 'Kapan honor dicairkan?', a: 'Honor tercatat per sesi yang dikonfirmasi ortu (otomatis terkonfirmasi bila ortu tidak merespons dalam 24 jam). Pencairan tiap 4 sesi selesai untuk murid paket, atau akhir bulan untuk murid eceran, setelah dipotong pajak sesuai ketentuan.' },
    { q: 'Apa saya karyawan IMS?', a: 'Bukan. Hubungannya kemitraan: kamu mengatur ketersediaan dan radius sendiri, dan boleh menolak tawaran tanpa sanksi. IMS menetapkan standar mutu (Metode IMS, ketepatan waktu, kode etik) agar pengalaman murid seragam.' },
    { q: 'Apa itu non-solicit?', a: 'Selama terdaftar dan 12 bulan setelah keluar, kamu tidak boleh mengambil murid yang kamu kenal lewat IMS untuk les di luar platform — termasuk menerima bayaran langsung. Ini melindungi murid, ortu, dan sesama guru. Rinciannya kamu baca sebelum tanda tangan.' },
    { q: 'Wilayahnya di mana?', a: 'Mulai dari klaster pilot Gading Serpong – BSD – Alam Sutera, dekat studio IMS. Kamu memilih radius sendiri, maksimal ' + maxR + ' km dari rumahmu.' },
    { q: 'Siapa yang menyiapkan alat musik?', a: 'Murid. Untuk piano/keyboard dipakai alat milik murid, gitar listrik dengan amp kecil. Drum kit penuh tidak dipakai untuk les di rumah — hanya drum pad / practice kit.' },
  ];
}

/* ─────────────────────────────────────────────
   App
   ───────────────────────────────────────────── */
const HP_LINKS = [
  { href: 'index.html', label: 'Beranda' },
  { href: '#kenapa', label: 'Kenapa IMS' },
  { href: '#alur', label: 'Alur' },
  { href: '#syarat', label: 'Syarat' },
  { href: 'les-di-rumah.html', label: 'Les di rumah' },
];

function JadiGuruApp() {
  const [hp, closeHp] = useHpConfig();
  const cfg = hp.state === 'open' ? hp.cfg : null;
  const maxR = cfg ? cfg.max_radius_km : 15;
  const minutes = cfg ? cfg.session_minutes : 60;
  const share = teacherShare(cfg);
  const hasPrice = !!(cfg && cfg.prices && (Number(cfg.prices.paket) > 0 || Number(cfg.prices.eceran) > 0));
  const waText = 'Halo IMS! Aku guru musik dan tertarik jadi guru mitra Home Private. Aku bisa mengajar: ';
  return (
    <React.Fragment>
      <DemoBanner />
      <a className="hp-skip" href="#konten">Lewati ke konten</a>
      <HpNav links={HP_LINKS} sub="Jadi guru" ctaHref="#daftar" ctaLabel="Daftar jadi guru" />
      <main id="konten" className="hp-page">
        <section className="hero hp-hero" aria-labelledby="hp-hero-title">
          <div className="hero__media" aria-hidden>
            <div className="hero__slide is-active" style={{ backgroundImage: 'url(assets/photos/lesson-piano.jpg)' }} />
            <div className="hero__scrim" />
          </div>
          <div className="hero__content">
            <div className="hero__eyebrow hero__text-in">IMS Home Private · Rekrutmen guru mitra</div>
            <h1 className="hero__title hero__text-in" id="hp-hero-title" style={{ animationDelay: '110ms' }}>Ngajar musik, di dekat rumahmu.</h1>
            <p className="hero__subtitle hero__text-in" style={{ animationDelay: '230ms' }}>
              Jadwal kamu atur. Jadi guru mitra INDIE Music School: kamu mengajar di rumah murid sekitar tempat tinggalmu,
              IMS yang mencarikan murid, menyiapkan kurikulum, dan mengurus pembayarannya.
            </p>
            <div className="hero__ctas hero__text-in" style={{ animationDelay: '350ms' }}>
              <a className="btn btn--primary btn--lg" href="#daftar">Daftar jadi guru</a>
              <a className="btn btn--glass btn--lg" href="#alur">Lihat alurnya</a>
            </div>
            <div className="hp-hero__facts hero__text-in" style={{ animationDelay: '450ms' }}>
              <span className="hp-hero__fact">Bagi hasil {share}% guru</span>
              <span className="hp-hero__fact">Radius kamu pilih · maks {maxR} km</span>
              <span className="hp-hero__fact">Sesi {minutes} menit</span>
            </div>
          </div>
        </section>

        <section id="kenapa" className="section">
          <div className="wrap">
            <Reveal className="section__head">
              <div className="eyebrow-line">Kenapa gabung · Guru mitra IMS</div>
              <h2 className="section__title">Kamu ngajar. Sisanya kami urus.</h2>
              <p className="section__intro">Yang tertulis di sini sudah jadi aturan sistem kami — bukan janji manis di brosur.</p>
            </Reveal>
            <Reasons maxR={maxR} share={share} />
          </div>
        </section>

        {hasPrice && (
          <section id="hitung" className="section section--surface" aria-labelledby="hitung-title">
            <div className="wrap">
              <Reveal className="section__head">
                <div className="eyebrow-line">Hitung-hitungan · Ilustrasi</div>
                <h2 className="section__title" id="hitung-title">Bagi hasil, dihitung terbuka.</h2>
                <p className="section__intro">Geser jumlah sesi per minggu. Harga diambil dari sistem IMS; bagian guru {share}% per sesi selesai.</p>
              </Reveal>
              <EarningsCalc cfg={cfg} />
            </div>
          </section>
        )}

        <section id="alur" className={'section' + (hasPrice ? '' : ' section--surface')}>
          <div className="wrap">
            <Reveal className="section__head">
              <div className="eyebrow-line">Alur onboarding · 7 langkah</div>
              <h2 className="section__title">Dari daftar sampai murid pertama.</h2>
              <p className="section__intro">Semua guru melewati jalur yang sama. Ini yang bikin ortu berani membuka pintu rumahnya. Klik tiap langkah untuk detailnya.</p>
            </Reveal>
            <Onboarding />
          </div>
        </section>

        <section id="syarat" className={'section' + (hasPrice ? ' section--surface' : '')}>
          <div className="wrap">
            <Reveal className="section__head">
              <div className="eyebrow-line">Syarat · Terus terang dari awal</div>
              <h2 className="section__title">Sebelum kamu daftar.</h2>
            </Reveal>
            <Requirements cfg={cfg} maxR={maxR} />
            <Readiness />
          </div>
        </section>

        <section id="daftar" className={'section' + (hasPrice ? '' : ' section--surface')} aria-labelledby="daftar-title">
          <div className="wrap" style={{ maxWidth: 980 }}>
            <Reveal className="section__head">
              <div className="eyebrow-line">Formulir lamaran</div>
              <h2 className="section__title" id="daftar-title">Daftar jadi guru mitra.</h2>
              <p className="section__intro">4 langkah singkat. Gratis — tidak ada biaya pendaftaran.</p>
            </Reveal>
            {hp.state === 'loading' && <div className="hp-loading" role="status"><span className="hp-spin" aria-hidden /> Memuat formulir…</div>}
            {(hp.state === 'closed' || hp.state === 'unavailable') && (
              <ComingSoon state={hp.state} waText={waText} eyebrow="Rekrutmen guru · Pilot"
                soonText="Pendaftaran online guru mitra dibuka bertahap, mulai dari klaster Tangerang dekat studio IMS. Tertarik? Kenalan dulu dengan admin IMS — kami kabari begitu formulir dibuka."
                downText="Koneksi ke sistem IMS sedang tidak terjangkau. Kalau mau daftar sekarang, kenalan dulu dengan admin lewat WhatsApp." />
            )}
            {cfg && <ApplyWizard cfg={cfg} onClosed={closeHp} />}
          </div>
        </section>

        <Faq eyebrow="FAQ · Calon guru mitra" title="Pertanyaan jujur, jawaban jujur." intro="Ada yang belum jelas? WA admin IMS:" items={faqItems(maxR, share)} />
      </main>
      <HpFooter blurb="Sekolah musik anti-mainstream di Gading Serpong. Lewat Home Private, guru mitra IMS mengajar langsung di rumah murid."
        schoolLinks={[{ href: 'index.html', label: 'Beranda' }, { href: 'index.html#method', label: 'Metode IMS' }, { href: 'shop.html', label: 'Shop' }]} />
      <StickyCta href="#daftar" label="Daftar jadi guru" hideIds={['daftar', 'hp-hero-title']} />
      <WAFloat text="Halo IMS! Aku mau tanya soal jadi guru mitra Home Private." />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<JadiGuruApp />);