/* @jsx React.createElement */
/* ============================================================
   INDIE Music — Les Musik di Rumah (IMS Home Private) untuk murid/ortu.
   React 18 UMD + Babel standalone, tanpa build. Fungsi bersama di hp-common.jsx (window.HP, dimuat duluan).
   Data & aturan dari ims-api /api/public/hp/* (routes/hp-public.js):
     GET /config, GET /teachers?lat&lng&instrument&age&day, POST /request.
   Saklar hp_public_enabled mati -> semua endpoint 404 -> halaman tetap informatif,
   pencarian & formulir diganti blok "Segera hadir" + WhatsApp admin.
   Harga TIDAK di-hardcode: hanya tampil (dan dihitung) bila /config menjawab.
   Pratinjau: ?demo=1 (data contoh, lihat hp-demo.js).

   TAHAP 3 (hp5): "Cari guru" = wizard 3 langkah (lokasi → alat & usia → hasil peta+daftar);
   permintaan = lembar 4 langkah (murid → jadwal → kontak → paket & kirim). Tiap langkah ada jalan ke WA admin.
   Kontrak POST /request TIDAK berubah (field & tipe sama persis dengan tahap 2).
   ============================================================ */

const { useState, useEffect, useRef, useMemo } = React;
const {
  waLink, rupiah, DEMO, PILOT_KM, PHONE_RE, HHMM, normPhone, pilotCheck, hpApi, friendlyError, useHpConfig,
  PREFERS_REDUCED, Reveal, smoothScrollTo, HpMap, cellKey, DemoBanner, DemoTag, HpNav, HpFooter,
  WAFloat, WaIcon, ComingSoon, Faq, StickyCta, SuccessScreen,
  InstIcon, areaText, useGps, useWizOn, WizardProgress, WaHelp, Sheet, Segmented, Stepper, AreaChooser,
} = window.HP;

const LEVEL_LABEL = { pemula: 'Pemula (belum pernah)', menengah: 'Menengah', lanjut: 'Lanjut' };
const LEVEL_SHORT = { pemula: 'Pemula', menengah: 'Menengah', lanjut: 'Lanjut' };
// Fallback hanya untuk teks informasi saat /config tidak menjawab — sama dengan INSTRUMENTS ims-api/src/hp.js.
const INSTRUMENT_TEXT = 'gitar, gitar listrik (amp kecil), piano/keyboard (alat milik murid), vokal, biola, dan drum pad / practice kit';
const shortInst = (label) => String(label || '').split(' (')[0];
const DAY_SHORT = { mon: 'Sen', tue: 'Sel', wed: 'Rab', thu: 'Kam', fri: 'Jum', sat: 'Sab', sun: 'Min' };
// Pilihan waktu → jam mulai slot. Batas jam kontrak POST /request: 06:00–21:00 (hp-public.js).
// /config belum mengirim batas jam; bila kelak mengirim slot_start_min/max, dipakai otomatis.
const TIMES = [
  { k: 'pagi', label: 'Pagi', start: '09:00' },
  { k: 'siang', label: 'Siang', start: '13:00' },
  { k: 'sore', label: 'Sore', start: '16:00' },
  { k: 'malam', label: 'Malam', start: '19:00' },
];
const timesFor = (cfg) => {
  const lo = HHMM.test(cfg.slot_start_min || '') ? cfg.slot_start_min : '06:00';
  const hi = HHMM.test(cfg.slot_start_max || '') ? cfg.slot_start_max : '21:00';
  return TIMES.filter((t) => t.start >= lo && t.start <= hi);
};
// Petunjuk per alat — hanya fakta SPEC §3 / label INSTRUMENTS ims-api.
const INST_NOTE = {
  gitar_listrik: 'Pakai amp kecil, disiapkan murid.',
  piano: 'Pakai piano/keyboard milik murid.',
  drum_pad: 'Drum kit penuh tidak tersedia untuk les di rumah — hanya drum pad / practice kit. Mau drum kit? Kelas di studio IMS.',
};
const instName = (cfg, k) => { const i = cfg && cfg.instruments.find((x) => x.key === k); return i ? shortInst(i.label) : k; };
const dayName = (cfg, k) => { const d = cfg && cfg.days.find((x) => x.key === k); return d ? d.label : k; };

const RQ_INIT = {
  instrument: '', student_name: '', student_age: '', level: 'pemula', days: [], time: 'sore',
  area_label: '', address: '', kind: 'paket', parent_name: '', parent_phone: '', note: '', consent: false, website: '',
};

/* Pesan WA ke admin dari data yang SUDAH diisi — bahasa natural, TANPA koordinat, tanpa alamat/nomor. */
function lesWaText({ cfg, q, loc, rq, picked }) {
  const parts = ['Halo IMS! Aku mau cari guru les musik di rumah, lebih gampang lewat chat.'];
  const inst = (rq && rq.instrument) || (q && q.instrument);
  if (inst) parts.push('Alat musik: ' + instName(cfg, inst) + '.');
  const area = areaText(loc);
  if (area) parts.push('Area: ' + area + '.');
  if (rq && rq.area_label.trim()) parts.push('Kelurahan/kecamatan: ' + rq.area_label.trim().slice(0, 80) + '.');
  const age = (rq && rq.student_age) || (q && q.age);
  if (age) parts.push('Usia murid: ' + age + ' tahun.');
  if (rq && rq.student_name.trim()) parts.push('Nama murid: ' + rq.student_name.trim().slice(0, 60) + '.');
  if (picked) parts.push('Guru pilihan dari daftar: ' + picked.name + '.');
  if (rq && rq.days.length) {
    const t = TIMES.find((x) => x.k === rq.time);
    parts.push('Hari yang bisa: ' + cfg.days.filter((d) => rq.days.includes(d.key)).map((d) => d.label).join(', ') + (t ? ', ' + t.label.toLowerCase() + ' (' + t.start + ')' : '') + '.');
  }
  if (rq && rq.parent_name.trim()) parts.push('Nama saya: ' + rq.parent_name.trim().slice(0, 60) + '.');
  if (!inst && !area) parts.push('Area aku: ');
  return parts.join(' ');
}

/* ─────────────────────────────────────────────
   Pemilih alat musik (kartu besar).
   ───────────────────────────────────────────── */
function InstrumentPicker({ cfg, value, onChange, allowAll = true, idPrefix = 'cari-inst', labelId, invalid, errId }) {
  const opts = [...(allowAll ? [{ key: '', label: 'Semua alat' }] : []), ...cfg.instruments];
  const note = value && INST_NOTE[value];
  return (
    <div className="hp-instpick">
      <div className="hp-instpick__grid" role="group" aria-labelledby={labelId} id={idPrefix} tabIndex={-1} aria-describedby={invalid ? errId : undefined}>
        {opts.map((i) => (
          <button key={i.key || 'all'} type="button" id={idPrefix + '-' + (i.key || 'all')} className="hp-instcard" aria-pressed={value === i.key} onClick={() => onChange(i.key)}>
            <span className="hp-instcard__icon"><InstIcon k={i.key} size={30} /></span>
            <span className="hp-instcard__label">{shortInst(i.label)}</span>
          </button>
        ))}
      </div>
      <p className="hp-hint hp-instpick__note" aria-live="polite">{note ? note + ' ' : ''}Alat musik disiapkan murid.</p>
    </div>
  );
}

/* Cek jangkauan — dihitung di perangkat dari pusat area pilot, lokasi tidak dikirim ke server. */
function CoverageCheck({ loc, maxR }) {
  const c = pilotCheck(loc, maxR);
  if (!c) return null;
  const where = c.area.short;
  if (c.tier === 'in') {
    return (
      <div className="hp-cover hp-cover--in" role="status">
        <div className="hp-cover__title"><span className="hp-cover__ico" aria-hidden>✓</span> Masuk area pilot</div>
        <p>{c.km < 0.5 ? 'Di sekitar pusat ' + where : '±' + c.km + ' km dari pusat ' + where}. Lanjut pilih alat musik.</p>
      </div>
    );
  }
  const wa = 'Halo IMS! Aku tertarik les musik di rumah, tapi lokasiku di luar area pilot (sekitar ' + Math.round(c.km) + ' km dari ' + where + '). Kabari aku kalau areaku sudah dibuka ya. Area aku: ';
  if (c.tier === 'edge') {
    return (
      <div className="hp-cover hp-cover--edge" role="status">
        <div className="hp-cover__title"><span className="hp-cover__ico" aria-hidden>~</span> Pinggir area pilot</div>
        <p>±{c.km} km dari pusat {where}. Masih mungkin terjangkau bila ada guru yang radiusnya sampai — lanjut saja, atau tetap kirim permintaan.</p>
      </div>
    );
  }
  return (
    <div className="hp-cover hp-cover--out" role="status">
      <div className="hp-cover__title"><span className="hp-cover__ico" aria-hidden>!</span> Belum terjangkau</div>
      <p>±{c.km} km dari area pilot terdekat ({where}). Tinggalkan nomor WA ke admin — kami kabari saat areamu dibuka.</p>
      <a className="btn btn--sm hp-wa-btn hp-wa-btn--sm" href={waLink(wa)} target="_blank" rel="noopener"><WaIcon size={16} /> Kabari aku via WhatsApp</a>
    </div>
  );
}

function SkeletonCards() {
  return (
    <div className="hp-tlist" aria-hidden>
      {[0, 1, 2].map((i) => (
        <div key={i} className="hp-tcard hp-skel">
          <div className="hp-tcard__head"><span className="hp-skel__circle" /><div style={{ flex: 1 }}><span className="hp-skel__line" style={{ width: '60%' }} /><span className="hp-skel__line" style={{ width: '40%' }} /></div></div>
          <span className="hp-skel__line" style={{ width: '80%' }} />
        </div>
      ))}
    </div>
  );
}

/* Kartu guru (daftar) — nomor = badge di peta. */
function TeacherCard({ t, num, cfg, hl, onHl, onAsk }) {
  const k = cellKey(t.area);
  return (
    <article data-cell={k} data-num={num} tabIndex={-1} style={{ '--i': num - 1 }}
      className={'hp-tcard' + (hl === k ? ' is-hl' : '')}
      aria-label={'Guru nomor ' + num + ': ' + t.name + ', sekitar ' + t.distance_km + ' km'}
      onMouseEnter={() => onHl(k)} onMouseLeave={() => onHl(null)} onFocus={() => onHl(k)} onClick={() => onHl(k)}>
      <div className="hp-tcard__head">
        <span className="hp-tcard__num" aria-hidden>{num}</span>
        {t.photo_url
          ? <img className="hp-tcard__photo" src={t.photo_url} alt={'Foto ' + t.name} loading="lazy" />
          : <span className="hp-tcard__mono" aria-hidden><InstIcon k={(t.instruments || [])[0]} size={26} /></span>}
        <div style={{ minWidth: 0, flex: 1 }}>
          <h4 className="hp-tcard__name">{t.name}</h4>
          <div className="hp-tcard__meta">{t.area_label || 'Area sekitar'} · <span className="hp-tcard__dist">±{t.distance_km} km</span></div>
          {t.rating != null && <div className="hp-tcard__rating"><span aria-hidden>★</span> {Number(t.rating).toFixed(1)} <span className="hp-hint">rating ortu{DEMO ? ' (contoh)' : ''}</span></div>}
        </div>
      </div>
      <div className="hp-tags">
        {(t.instruments || []).map((x) => <span key={x} className="hp-tag">{instName(cfg, x)}</span>)}
        {t.kids_ok && <span className="hp-tag hp-tag--kid">Bisa ajar anak</span>}
      </div>
      {t.days && t.days.length > 0 && <p className="hp-hint">Biasanya bisa: {t.days.map((d) => DAY_SHORT[d] || d).join(', ')}</p>}
      <button type="button" className="btn btn--primary btn--sm hp-tcard__ask" onClick={(e) => { e.stopPropagation(); onAsk(t); }}>Minta guru ini</button>
    </article>
  );
}

/* ─────────────────────────────────────────────
   WIZARD PENCARIAN — 3 langkah. Langkah 3 = GET /teachers (lokasi tidak disimpan server).
   ───────────────────────────────────────────── */
function Finder({ cfg, onClosed }) {
  const [step, setStep] = useState(1);
  const [loc, setLoc] = useState(null);
  const [q, setQ] = useState({ instrument: '', age: '', day: '' });
  const [stepErr, setStepErr] = useState(null);
  const [showMap1, setShowMap1] = useState(false);
  const [res, setRes] = useState(null);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState(null);
  const [retry, setRetry] = useState(0);
  const [hl, setHl] = useState(null);
  const [sel, setSel] = useState(null);
  const [view, setView] = useState('peta');
  const [fitKey, setFitKey] = useState(0);
  const [sheet, setSheet] = useState(false);
  const [picked, setPicked] = useState(null);
  const [rq, setRq] = useState(RQ_INIT);
  const [sentNote, setSentNote] = useState(null);
  const top = useRef(null);
  const head = useRef(null);
  const listRef = useRef(null);
  const lastCtl = useRef(null);
  const first = useRef(true);
  const gps = useGps((l) => { setLoc(l); setStepErr(null); });
  useWizOn(top);

  // Langkah berganti -> fokus ke judul langkah (pembaca layar) + gulir ke atas wizard bila perlu.
  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)) smoothScrollTo(top.current);
  }, [step]);

  const ageN = q.age === '' ? null : Number(q.age);
  const ageBad = ageN !== null && (!Number.isInteger(ageN) || ageN < 3 || ageN > 90);

  useEffect(() => {
    if (step !== 3 || !loc || ageBad) return undefined;
    const p = new URLSearchParams({ lat: String(loc.lat), lng: String(loc.lng) });
    if (q.instrument) p.set('instrument', q.instrument);
    if (ageN !== null) p.set('age', String(ageN));
    if (q.day) p.set('day', q.day);
    if (lastCtl.current) lastCtl.current.abort();
    const ctl = new AbortController();
    lastCtl.current = ctl;
    setBusy(true); setErr(null); setHl(null); setSel(null);
    hpApi('/teachers?' + p.toString(), { signal: ctl.signal }).then((r) => {
      if (ctl.signal.aborted) return;
      setBusy(false);
      if (r.status === 404) { onClosed(); return; }
      if (!r.ok || !r.body || !Array.isArray(r.body.teachers)) { setErr(friendlyError(r)); return; }
      const list = r.body.teachers.slice().sort((a, b) => (a.distance_km || 0) - (b.distance_km || 0));
      setRes({ teachers: list, max_radius_km: r.body.max_radius_km });
      setFitKey((k) => k + 1);
    });
    return () => ctl.abort();
  }, [step, loc && loc.lat, loc && loc.lng, q.instrument, q.age, q.day, retry]);

  const teachers = res ? res.teachers : [];
  const n = teachers.length;
  // Sel unik (beberapa guru bisa berbagi sel ±1 km) + nomor kartu yang sama dengan daftar.
  const markers = useMemo(() => {
    const m = new Map();
    teachers.forEach((t, i) => {
      if (!t.area) return;
      const k = cellKey(t.area);
      if (!m.has(k)) m.set(k, { key: k, lat: t.area.lat, lng: t.area.lng, nums: [], names: [], inst: q.instrument || (t.instruments || [])[0] });
      const x = m.get(k);
      x.nums.push(i + 1);
      x.names.push(t.name + ' ±' + t.distance_km + ' km');
    });
    return [...m.values()].map((x) => ({ ...x, label: 'Area guru nomor ' + x.nums.join(' dan ') + ': ' + x.names.join('; ') + '. Area kira-kira ±1 km, bukan alamat.' }));
  }, [res]);

  const goStep = (s) => { setStepErr(null); setStep(s); };
  const next1 = () => {
    if (!loc) { setStepErr('Pilih lokasi dulu — pakai lokasi kamu, pilih area, atau ketuk peta.'); const b = document.getElementById('wz-gps'); if (b) b.focus(); return; }
    goStep(2);
  };
  const next2 = () => {
    if (ageBad) { setStepErr('Usia murid 3–90 tahun (atau kosongkan).'); const a = document.getElementById('wz-age'); if (a) a.focus(); return; }
    goStep(3);
  };
  const ask = (t) => {
    setPicked(t || null);
    setRq((x) => ({
      ...x,
      instrument: x.instrument || q.instrument || (t && t.instruments && t.instruments[0]) || '',
      student_age: x.student_age || q.age,
      area_label: x.area_label || (loc && loc.source === 'area' ? loc.label : ''),
    }));
    setSheet(true);
  };
  const onMarker = (k) => {
    setSel(k); setHl(k);
    if (window.innerWidth > 980) {
      const c = listRef.current && listRef.current.querySelector('[data-cell="' + k + '"]');
      if (c) c.scrollIntoView({ behavior: PREFERS_REDUCED ? 'auto' : 'smooth', block: 'nearest' });
    }
  };
  const clear = {
    instrument: { label: () => instName(cfg, q.instrument), go: () => setQ({ ...q, instrument: '' }), hint: 'Semua alat musik' },
    age: { label: () => 'Usia ' + q.age, go: () => setQ({ ...q, age: '' }), hint: 'Tanpa filter usia' },
    day: { label: () => dayName(cfg, q.day), go: () => setQ({ ...q, day: '' }), hint: 'Hari apa saja' },
  };
  const active = ['instrument', 'age', 'day'].filter((k) => (k === 'age' ? q.age !== '' : q[k]));
  const waText = lesWaText({ cfg, q, loc, rq: null, picked: null });
  const selTeachers = sel ? teachers.map((t, i) => ({ t, num: i + 1 })).filter((x) => cellKey(x.t.area) === sel) : [];
  const ageHint = ageN > 0 && ageN < 17
    ? 'Di bawah 17 th: hanya guru yang bersedia mengajar anak yang tampil, dan orang dewasa wajib ada di rumah selama sesi.'
    : 'Boleh dikosongkan. Di bawah 17 th hanya guru yang bersedia mengajar anak yang tampil.';
  const TITLES = ['Di mana lokasi lesnya?', 'Alat musik & untuk siapa?', n ? n + ' guru bisa datang ke sana' : busy || !res ? 'Mencari guru terdekat…' : 'Belum ada guru yang cocok'];

  return (
    <div className={'hp-wiz hp-finderwiz is-step' + step} ref={top}>
      {sentNote && <div className="hp-alert hp-alert--ok" role="status">{sentNote}</div>}
      <div className="hp-panel hp-wiz__panel">
        <WizardProgress step={step} total={3} title={TITLES[step - 1]} id="wz-prog" />
        <h3 className="hp-wiz__title" tabIndex={-1} ref={head} id="wz-title">{TITLES[step - 1]}</h3>

        {step === 1 && (
          <div className="hp-wiz__body">
            <p className="hp-wiz__sub">Kami tampilkan guru yang radius mengajarnya (maks {cfg.max_radius_km} km) sampai ke sana.</p>
            <AreaChooser loc={loc} setLoc={(l) => { setLoc(l); setStepErr(null); }} idPrefix="wz" invalid={!!stepErr} errId="wz-err"
              mapSlot={(
                <div className="hp-achoose__map">
                  <button type="button" className="hp-link" aria-expanded={showMap1} aria-controls="wz-map1" onClick={() => setShowMap1((v) => !v)}>
                    {showMap1 ? 'Sembunyikan peta' : 'Atau ketuk titik di peta'}
                  </button>
                  {showMap1 && (
                    <div id="wz-map1">
                      <HpMap pin={loc} pilotZone fitKey={loc ? loc.lat + ',' + loc.lng : 'none'} zoom={12} onLocate={gps.run} locating={gps.busy}
                        onPick={(p) => { setLoc({ ...p, source: 'map', label: 'Titik yang kamu ketuk di peta' }); setStepErr(null); }}
                        label="Peta: ketuk untuk memilih lokasi les. Pilihan area di atas berisi informasi yang sama." describedBy="wz-map1-legend"
                        legend={[{ sw: 'pin', text: 'Lokasi kamu' }, { sw: 'pilot', text: 'Area pilot' }]} />
                    </div>
                  )}
                </div>
              )} />
            {gps.err && <div className="hp-err" role="alert">{gps.err}</div>}
            {loc && (
              <div className="hp-loc__status" aria-live="polite">
                <span className="hp-loc__dot" aria-hidden /> <span>Lokasi: <strong>{loc.label}</strong>{loc.source === 'area' ? ' (titik tengah area)' : ''}</span>
              </div>
            )}
            <CoverageCheck loc={loc} maxR={cfg.max_radius_km} />
            <p className="hp-privacy">Lokasi dibulatkan ±100 m di perangkatmu dan tidak disimpan saat mencari. Guru tampil hanya dengan area kira-kira ±1 km — tanpa alamat.</p>
          </div>
        )}

        {step === 2 && (
          <div className="hp-wiz__body">
            <span className="hp-legend" id="wz-inst-l">Alat musik</span>
            <InstrumentPicker cfg={cfg} value={q.instrument} onChange={(k) => setQ({ ...q, instrument: k })} idPrefix="wz-inst" labelId="wz-inst-l" />
            <div className="hp-field hp-wiz__age">
              <label htmlFor="wz-age">Usia murid <span className="hp-opt">(opsional)</span></label>
              <Stepper id="wz-age" value={q.age} onChange={(v) => { setQ({ ...q, age: v }); setStepErr(null); }} min={3} max={90} label="usia murid" placeholder="mis. 8" describedBy="wz-age-h" invalid={ageBad} />
              <span className="hp-hint" id="wz-age-h">{ageHint}</span>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="hp-wiz__body">
            <div className="hp-qsum" aria-label="Pencarian kamu">
              <button type="button" className="hp-qsum__chip" onClick={() => goStep(1)}><span className="hp-qsum__k">Lokasi</span> {areaText(loc).replace(/^sekitar /, '±')} <span className="hp-qsum__edit">ubah</span></button>
              <button type="button" className="hp-qsum__chip" onClick={() => goStep(2)}><span className="hp-qsum__k">Alat</span> {q.instrument ? instName(cfg, q.instrument) : 'Semua'}{q.age !== '' ? ' · ' + q.age + ' th' : ''} <span className="hp-qsum__edit">ubah</span></button>
            </div>
            <details className="hp-adv">
              <summary>Filter lanjutan{q.day ? ' · ' + dayName(cfg, q.day) : ''}</summary>
              <div className="hp-adv__body">
                <span className="hp-legend" id="wz-day-l">Hari les</span>
                <div className="hp-chips" role="group" aria-labelledby="wz-day-l">
                  <button type="button" className="hp-chip" aria-pressed={!q.day} onClick={() => setQ({ ...q, day: '' })}>Hari apa saja</button>
                  {cfg.days.map((d) => <button key={d.key} type="button" id={'wz-day-' + d.key} className="hp-chip" aria-pressed={q.day === d.key} onClick={() => setQ({ ...q, day: d.key })}>{d.label}</button>)}
                </div>
              </div>
            </details>
            <Segmented className="hp-finder__seg" label="Tampilan hasil" value={view} onChange={setView} options={[['peta', 'Peta'], ['daftar', 'Daftar']]} />
            <div className="hp-finder" data-view={view}>
              <div className="hp-finder__map">
                <HpMap pin={loc} markers={markers} hlKey={hl} onMarker={onMarker} onMarkerHover={setHl} onBlank={() => setSel(null)} pilotZone fitKey={fitKey}
                  onLocate={gps.run} locating={gps.busy}
                  label="Peta hasil: badge bernomor = area kira-kira guru (±1 km, bukan alamat), sama dengan nomor di daftar."
                  describedBy="wz-map-legend"
                  legend={[{ sw: 'pin', text: 'Lokasi kamu' }, { sw: 'zone', text: 'Area guru ±1 km (bukan alamat)' }, { sw: 'pilot', text: 'Area pilot' }]}>
                  {selTeachers.length > 0 && (
                    <div className="hp-mcard" role="dialog" aria-label="Detail area guru">
                      <button type="button" className="hp-mcard__x" aria-label="Tutup detail" onClick={() => setSel(null)}>×</button>
                      {selTeachers.map(({ t, num }) => (
                        <div key={t.id} className="hp-mcard__row">
                          <span className="hp-tcard__num" aria-hidden>{num}</span>
                          <div className="hp-mcard__info">
                            <strong>{t.name}</strong>
                            <span>±{t.distance_km} km · {(t.instruments || []).map((x) => instName(cfg, x)).join(', ')}</span>
                          </div>
                          <button type="button" className="btn btn--primary btn--sm" onClick={() => ask(t)}>Minta guru ini</button>
                        </div>
                      ))}
                    </div>
                  )}
                </HpMap>
              </div>
              <div className="hp-finder__list" ref={listRef} aria-live="polite" aria-busy={busy}>
                {err && (
                  <div className="hp-alert hp-alert--err" role="alert">
                    {err}
                    <div className="hp-alert__acts">
                      <button type="button" className="btn btn--outline btn--sm" onClick={() => setRetry((x) => x + 1)}>Coba lagi</button>
                      <a className="btn btn--sm hp-wa-btn hp-wa-btn--sm" href={waLink(waText)} target="_blank" rel="noopener"><WaIcon size={16} /> Tanya admin di WhatsApp</a>
                    </div>
                  </div>
                )}
                {busy && <div><div className="hp-sr" role="status">Mencari guru di sekitar kamu…</div><SkeletonCards /></div>}
                {res && !busy && !err && (
                  <div>
                    <p className="hp-hint hp-results__note">Urut dari terdekat · jarak dibulatkan · nomor sama dengan di peta</p>
                    {!n && (
                      <div className="hp-empty">
                        <p><strong>{active.length ? 'Belum ada guru aktif yang cocok dengan semua pilihan ini.' : 'Belum ada guru aktif yang radiusnya sampai ke titik ini.'}</strong></p>
                        {active.length > 0 && (
                          <React.Fragment>
                            <p>Coba longgarkan:</p>
                            <div className="hp-empty__acts">{active.map((k) => <button key={k} type="button" className="hp-chip" onClick={clear[k].go}>{clear[k].hint}</button>)}</div>
                          </React.Fragment>
                        )}
                        <p style={{ marginTop: 12 }}>Atau tetap kirim permintaan — tim IMS yang mencarikan guru.</p>
                        <div className="hp-empty__acts">
                          <button type="button" className="btn btn--primary btn--sm" onClick={() => ask(null)}>Tetap kirim permintaan</button>
                          <a className="btn btn--sm hp-wa-btn hp-wa-btn--sm" href={waLink(waText)} target="_blank" rel="noopener"><WaIcon size={16} /> Tanya admin di WhatsApp</a>
                        </div>
                      </div>
                    )}
                    <div className="hp-tlist">
                      {teachers.map((t, i) => <TeacherCard key={t.id} t={t} num={i + 1} cfg={cfg} hl={hl} onHl={setHl} onAsk={ask} />)}
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>
        )}

        {stepErr && <div className="hp-err hp-wiz__err" id="wz-err" role="alert">{stepErr}</div>}
        <div className="hp-wiz__foot">
          <div className="hp-wiz__btns">
            {step > 1 && <button type="button" className="btn btn--outline hp-wiz__back" onClick={() => goStep(step - 1)}>← Kembali</button>}
            {step === 1 && <button type="button" className="btn btn--primary hp-wiz__next" onClick={next1}>Lanjut →</button>}
            {step === 2 && <button type="button" className="btn btn--primary hp-wiz__next" onClick={next2}>Lihat guru →</button>}
            {step === 3 && <button type="button" className="btn btn--primary hp-wiz__next" onClick={() => ask(null)}>{n ? 'Kirim permintaan' : 'Tetap kirim permintaan'}</button>}
          </div>
          <WaHelp text={waText} />
        </div>
      </div>

      <RequestSheet open={sheet} cfg={cfg} loc={loc} setLoc={setLoc} q={q} picked={picked} clearPicked={() => setPicked(null)}
        rq={rq} setRq={setRq} onClosed={onClosed}
        onClose={(done) => {
          setSheet(false);
          if (done) { setSentNote('Permintaan terkirim. Tim IMS akan menghubungi lewat WhatsApp setelah guru yang cocok ditemukan.'); setRq(RQ_INIT); setPicked(null); }
        }} />
    </div>
  );
}

/* ─────────────────────────────────────────────
   LEMBAR PERMINTAAN — 4 langkah → POST /request (kontrak createHpRequest di hp-public.js, tidak berubah).
   ───────────────────────────────────────────── */
function RequestSheet({ open, onClose, cfg, loc, setLoc, q, picked, clearPicked, rq, setRq, onClosed }) {
  const [step, setStep] = useState(1);
  const [errors, setErrors] = useState({});
  const [formErr, setFormErr] = useState(null);
  const [busy, setBusy] = useState(false);
  const [done, setDone] = useState(null);
  const [editInst, setEditInst] = useState(false);
  const head = useRef(null);
  const body = useRef(null);
  const set = (k, v) => { setRq((x) => ({ ...x, [k]: v })); if (errors[k]) setErrors((e) => { const c = { ...e }; delete c[k]; return c; }); };
  const times = timesFor(cfg);
  const ps = cfg.package_sessions || 4;
  const hasPrice = cfg.prices && (Number(cfg.prices.paket) > 0 || Number(cfg.prices.eceran) > 0);
  const TITLES = ['Siapa yang mau les?', 'Kapan bisanya?', 'Ke mana guru datang?', 'Cek & kirim'];

  useEffect(() => { if (open) { setStep(1); setErrors({}); setFormErr(null); setDone(null); setEditInst(false); } }, [open]);
  useEffect(() => {
    if (!open) return;
    if (body.current) body.current.scrollTop = 0;
    const t = setTimeout(() => head.current && head.current.focus({ preventScroll: true }), 30);
    return () => clearTimeout(t);
  }, [open, step]);

  const validate = (s) => {
    const e = {};
    if (s === 1) {
      if (!cfg.instruments.some((i) => i.key === rq.instrument)) e.instrument = 'Pilih alat musik.';
      if (rq.student_name.trim().length < 2) e.student_name = 'Tulis nama murid (minimal 2 huruf).';
      const age = Number(rq.student_age);
      if (rq.student_age === '' || !Number.isInteger(age) || age < 3 || age > 90) e.student_age = 'Usia murid 3–90 tahun.';
    } else if (s === 2) {
      if (rq.days.length < 2) e.days = rq.days.length ? 'Pilih 1 hari lagi — minimal 2 hari supaya guru lebih mudah dicocokkan.' : 'Pilih minimal 2 hari yang bisa.';
      if (!times.some((t) => t.k === rq.time)) e.time = 'Pilih waktu les.';
    } else if (s === 3) {
      if (rq.parent_name.trim().length < 2) e.parent_name = 'Tulis nama orang tua/wali (minimal 2 huruf).';
      if (!PHONE_RE.test(normPhone(rq.parent_phone))) e.parent_phone = rq.parent_phone.trim() ? 'Nomor WhatsApp belum benar. Contoh: 0812 3456 7890.' : 'Isi nomor WhatsApp untuk dihubungi admin.';
      if (rq.address.trim().length < 10) e.address = 'Tulis alamat lengkap (jalan, nomor, cluster) — minimal 10 karakter.';
      if (!loc) e.loc = 'Lokasi les belum dipilih. Kembali ke pencarian untuk memilih lokasi.';
    } else if (s === 4) {
      if (!['paket', 'eceran'].includes(rq.kind)) e.kind = 'Pilih paket atau eceran.';
      if (!rq.consent) e.consent = 'Centang persetujuan data pribadi untuk mengirim.';
    }
    return e;
  };
  const FOCUS = { instrument: 'rq-inst', student_name: 'rq-name', student_age: 'rq-age', days: 'rq-days', time: 'rq-time', parent_name: 'rq-pname', parent_phone: 'rq-phone', address: 'rq-addr', loc: 'rq-addr', kind: 'rq-kind', consent: 'rq-consent' };
  const check = (s) => {
    const e = validate(s);
    setErrors(e);
    const keys = Object.keys(e);
    if (keys.length) {
      if (keys.includes('instrument')) setEditInst(true);
      setTimeout(() => { const el = document.getElementById(FOCUS[keys[0]]); if (el) el.focus(); }, 0);
      return false;
    }
    return true;
  };
  const next = () => { if (check(step)) { setErrors({}); setStep(step + 1); } };
  const back = () => { setErrors({}); setFormErr(null); if (step > 1) setStep(step - 1); else onClose(false); };

  const slots = cfg.days.filter((d) => rq.days.includes(d.key)).map((d) => ({ day: d.key, start: (times.find((t) => t.k === rq.time) || {}).start }));
  const submit = async () => {
    setFormErr(null);
    for (const s of [1, 2, 3, 4]) { if (!check(s)) { setStep(s); return; } }
    setBusy(true);
    const payload = {
      instrument: rq.instrument,
      student_name: rq.student_name.trim(),
      student_age: Number(rq.student_age),
      level: rq.level,
      lat: loc.lat,
      lng: loc.lng,
      area_label: rq.area_label.trim(),
      address: rq.address.trim(),
      slots: slots.map((s) => ({ day: s.day, start: s.start })),
      kind: rq.kind,
      parent_name: rq.parent_name.trim(),
      parent_phone: rq.parent_phone.trim(),
      note: rq.note.trim(),
      preferred_teacher_id: picked ? picked.id : null,
      consent: true,
      consent_version: cfg.parent_consent.version,
      website: rq.website, // honeypot — manusia tidak pernah mengisi
    };
    const r = await hpApi('/request', { method: 'POST', body: payload, timeout: 20000 });
    setBusy(false);
    if (r.ok && r.body && r.body.ok) { setDone(r.body.message || 'Permintaan terkirim.'); return; }
    if (r.status === 404) { onClose(false); onClosed(); return; }
    setFormErr(friendlyError(r));
  };

  const waText = lesWaText({ cfg, q, loc, rq, picked });
  const Err = ({ k, id }) => (errors[k] ? <div className="hp-err" id={id + '-err'}>{errors[k]}</div> : null);
  const inv = (k, id, hint) => ({ id, 'aria-invalid': errors[k] ? true : undefined, 'aria-describedby': errors[k] ? id + '-err' : hint });
  const age = Number(rq.student_age);
  const timeObj = times.find((t) => t.k === rq.time);
  const summary = [
    ['Murid', rq.student_name.trim() + (rq.student_age ? ', ' + rq.student_age + ' th' : '')],
    ['Alat musik', instName(cfg, rq.instrument) + ' · ' + (LEVEL_SHORT[rq.level] || rq.level)],
    ['Jadwal', cfg.days.filter((d) => rq.days.includes(d.key)).map((d) => d.label).join(', ') + (timeObj ? ' · ' + timeObj.label + ' ' + timeObj.start : '')],
    ['Lokasi', areaText(loc) + (rq.area_label.trim() && rq.area_label.trim() !== (loc && loc.label) ? ' · ' + rq.area_label.trim() : '')],
    ['Guru pilihan', picked ? picked.name : 'Dicarikan tim IMS'],
    ['WhatsApp', rq.parent_phone.trim()],
  ];

  return (
    <Sheet open={open} onClose={() => onClose(!!done)} labelledBy="rq-title">
      <div className="hp-sheet__head">
        <div className="hp-sheet__ttl">Permintaan les di rumah {DEMO && <span className="hp-demo-tag">pratinjau</span>}</div>
        <button type="button" className="hp-sheet__x" aria-label="Tutup (isian tetap tersimpan)" onClick={() => onClose(!!done)}>×</button>
      </div>
      {done ? (
        <div className="hp-sheet__body" ref={body}>
          <SuccessScreen
            title="Permintaan terkirim"
            message={done}
            summary={[...summary.slice(0, 3), ['Pilihan', rq.kind === 'paket' ? 'Paket ' + ps + ' sesi' : 'Eceran per sesi'], ...summary.slice(3)]}
            steps={[
              'Tim IMS mencocokkan guru: alat musik, jarak, dan jadwal' + (picked ? ' — guru pilihanmu kami prioritaskan.' : '.'),
              'Guru ditawari dan memutuskan menerima (bukan rebutan).',
              'Kami kabari lewat WhatsApp ke ' + rq.parent_phone.trim() + ' — kamu konfirmasi jadwal sesi pertama.',
              'Hari-H: guru datang, check-in GPS + foto. Setelah sesi kamu dapat tautan untuk konfirmasi & memberi nilai.',
            ]}
            note="Belum ada pembayaran di tahap ini. Pembayaran nanti ke IMS — bukan ke guru."
            waText={'Halo IMS! Aku barusan kirim permintaan les musik di rumah (' + instName(cfg, rq.instrument) + ', murid ' + rq.student_name.trim() + ').'} />
          <div className="hp-sheet__done"><button type="button" className="btn btn--outline" onClick={() => onClose(true)}>Tutup</button></div>
        </div>
      ) : (
        <React.Fragment>
          <div className="hp-sheet__prog"><WizardProgress step={step} total={4} title={TITLES[step - 1]} id="rq-prog" /></div>
          <div className="hp-sheet__body" ref={body}>
            <h3 className="hp-wiz__title" id="rq-title" tabIndex={-1} ref={head}>{TITLES[step - 1]}</h3>

            {step === 1 && (
              <div className="hp-wiz__body">
                {picked && (
                  <div className="hp-picked">
                    <span>Guru pilihan: <strong>{picked.name}</strong> — kami prioritaskan, tetap tergantung kesediaan guru.</span>
                    <button type="button" className="hp-link" onClick={clearPicked}>Batalkan</button>
                  </div>
                )}
                {rq.instrument && !editInst ? (
                  <p className="hp-prefill"><InstIcon k={rq.instrument} size={20} /> <span>Alat musik: <strong>{instName(cfg, rq.instrument)}</strong></span>
                    <button type="button" className="hp-link" onClick={() => setEditInst(true)}>ubah</button></p>
                ) : (
                  <div className="hp-field">
                    <span className="hp-legend" id="rq-inst-l">Alat musik</span>
                    <InstrumentPicker cfg={cfg} value={rq.instrument} onChange={(k) => { set('instrument', k); }} allowAll={false} idPrefix="rq-inst" labelId="rq-inst-l" invalid={!!errors.instrument} errId="rq-inst-err" />
                    <Err k="instrument" id="rq-inst" />
                  </div>
                )}
                <div className="hp-field">
                  <label htmlFor="rq-name">Nama murid</label>
                  <input {...inv('student_name', 'rq-name')} value={rq.student_name} onChange={(e) => set('student_name', e.target.value)} autoComplete="off" enterKeyHint="next" />
                  <Err k="student_name" id="rq-name" />
                </div>
                <div className="hp-field">
                  <label htmlFor="rq-age">Usia murid</label>
                  <Stepper id="rq-age" value={rq.student_age} onChange={(v) => set('student_age', v)} min={3} max={90} label="usia murid" invalid={!!errors.student_age} describedBy={errors.student_age ? 'rq-age-err' : undefined} />
                  <Err k="student_age" id="rq-age" />
                  {age > 0 && age < 17 && <span className="hp-hint">Murid di bawah 17 tahun: orang dewasa wajib ada di rumah selama sesi.</span>}
                </div>
                <div className="hp-field">
                  <span className="hp-legend" id="rq-level-l">Level</span>
                  <div className="hp-chips" role="group" aria-labelledby="rq-level-l">
                    {(cfg.levels || ['pemula']).map((l) => <button key={l} type="button" className="hp-chip hp-chip--lg" aria-pressed={rq.level === l} onClick={() => set('level', l)}>{LEVEL_SHORT[l] || l}</button>)}
                  </div>
                </div>
              </div>
            )}

            {step === 2 && (
              <div className="hp-wiz__body">
                <div className="hp-field">
                  <span className="hp-legend" id="rq-days-l">Hari yang bisa <span className="hp-opt">(pilih minimal 2)</span></span>
                  <div className="hp-daychips" role="group" aria-labelledby="rq-days-l" id="rq-days" tabIndex={-1} aria-describedby={errors.days ? 'rq-days-err' : undefined}>
                    {cfg.days.map((d) => (
                      <button key={d.key} type="button" id={'rq-day-' + d.key} className="hp-daychip" aria-pressed={rq.days.includes(d.key)} aria-label={d.label}
                        onClick={() => set('days', rq.days.includes(d.key) ? rq.days.filter((x) => x !== d.key) : [...rq.days, d.key])}>
                        {DAY_SHORT[d.key] || d.label}
                      </button>
                    ))}
                  </div>
                  <Err k="days" id="rq-days" />
                </div>
                <div className="hp-field">
                  <span className="hp-legend" id="rq-time-l">Jam berapa?</span>
                  <div className="hp-timechips" role="radiogroup" aria-labelledby="rq-time-l" id="rq-time" tabIndex={-1}>
                    {times.map((t) => (
                      <button key={t.k} type="button" role="radio" aria-checked={rq.time === t.k} className="hp-timechip" id={'rq-time-' + t.k} onClick={() => set('time', t.k)}>
                        <strong>{t.label}</strong><span>mulai {t.start}</span>
                      </button>
                    ))}
                  </div>
                  <Err k="time" id="rq-time" />
                </div>
                <p className="hp-hint">Sesi {cfg.session_minutes} menit. Jadwal pasti dikonfirmasi admin lewat WhatsApp — ini hanya pilihan awal.</p>
              </div>
            )}

            {step === 3 && (
              <div className="hp-wiz__body">
                <p className="hp-prefill"><span className="hp-loc__dot" aria-hidden /> <span>Lokasi les: <strong>{areaText(loc) || 'belum dipilih'}</strong></span></p>
                {errors.loc && <div className="hp-err" role="alert">{errors.loc}</div>}
                <div className="hp-field">
                  <label htmlFor="rq-pname">Nama orang tua / wali</label>
                  <input {...inv('parent_name', 'rq-pname')} value={rq.parent_name} onChange={(e) => set('parent_name', e.target.value)} autoComplete="name" enterKeyHint="next" />
                  <Err k="parent_name" id="rq-pname" />
                </div>
                <div className="hp-field">
                  <label htmlFor="rq-phone">Nomor WhatsApp</label>
                  <input {...inv('parent_phone', 'rq-phone', 'rq-phone-h')} type="tel" inputMode="tel" value={rq.parent_phone} onChange={(e) => set('parent_phone', e.target.value)} placeholder="0812 3456 7890" autoComplete="tel" enterKeyHint="next" />
                  {errors.parent_phone ? <Err k="parent_phone" id="rq-phone" /> : <span className="hp-hint" id="rq-phone-h">Admin IMS menghubungi lewat nomor ini. Tidak diberikan ke guru.</span>}
                </div>
                <div className="hp-field">
                  <label htmlFor="rq-addr">Alamat lengkap</label>
                  <textarea {...inv('address', 'rq-addr', 'rq-addr-h')} rows={2} value={rq.address} onChange={(e) => set('address', e.target.value)} placeholder="Jalan, nomor rumah, cluster, RT/RW" autoComplete="street-address" />
                  {errors.address ? <Err k="address" id="rq-addr" /> : <span className="hp-hint" id="rq-addr-h">Tidak tampil publik — hanya dibuka untuk guru yang sudah ditetapkan IMS.</span>}
                </div>
                <div className="hp-field">
                  <label htmlFor="rq-arealabel">Kelurahan / kecamatan <span className="hp-opt">(opsional)</span></label>
                  <input id="rq-arealabel" value={rq.area_label} onChange={(e) => set('area_label', e.target.value)} placeholder="mis. Pakulonan Barat, Kelapa Dua" />
                </div>
              </div>
            )}

            {step === 4 && (
              <div className="hp-wiz__body">
                <div className="hp-field">
                  <span className="hp-legend" id="rq-kind-l">Pilihan pembayaran {hasPrice && <DemoTag />}</span>
                  <div className="hp-chips" role="radiogroup" aria-labelledby="rq-kind-l" id="rq-kind" tabIndex={-1}>
                    {[['paket', 'Paket ' + ps + ' sesi' + (Number(cfg.prices && cfg.prices.paket) > 0 ? ' · ' + rupiah(cfg.prices.paket) : '')],
                      ['eceran', 'Eceran' + (Number(cfg.prices && cfg.prices.eceran) > 0 ? ' · ' + rupiah(cfg.prices.eceran) + '/sesi' : ' per sesi')]].map(([v, l]) => (
                      <button key={v} type="button" role="radio" aria-checked={rq.kind === v} className="hp-chip hp-chip--lg" onClick={() => set('kind', v)}>{l}</button>
                    ))}
                  </div>
                  <span className="hp-hint">Bayar nanti ke IMS setelah guru cocok — bukan ke guru.</span>
                  <Err k="kind" id="rq-kind" />
                </div>
                <div className="hp-sumbox">
                  <div className="hp-legend">Ringkasan</div>
                  <dl className="hp-success__dl">
                    {summary.filter((r) => r[1]).map(([k, v]) => <div key={k} className="hp-sum__row"><dt>{k}</dt><dd>{v}</dd></div>)}
                  </dl>
                </div>
                <details className="hp-adv">
                  <summary>Tambah catatan untuk admin <span className="hp-opt">(opsional)</span></summary>
                  <div className="hp-adv__body hp-field">
                    <label htmlFor="rq-note" className="hp-sr">Catatan</label>
                    <textarea id="rq-note" rows={2} value={rq.note} onChange={(e) => set('note', e.target.value)} placeholder="mis. anak sudah punya keyboard 61 tuts, mau belajar lagu pop" />
                  </div>
                </details>
                <div className="hp-consent-text" id="rq-consent-text">
                  {cfg.parent_consent.text}
                  <span className="hp-consent-ver">Versi {cfg.parent_consent.version}</span>
                </div>
                <label className="hp-consent hp-consent--big" htmlFor="rq-consent">
                  <input type="checkbox" id="rq-consent" checked={rq.consent} onChange={(e) => set('consent', e.target.checked)}
                    aria-invalid={errors.consent ? true : undefined} aria-describedby={'rq-consent-text' + (errors.consent ? ' rq-consent-err' : '')} />
                  <span>Saya sudah membaca dan menyetujui pemrosesan data pribadi di atas.</span>
                </label>
                <Err k="consent" id="rq-consent" />
                <div className="hp-trap" aria-hidden="true">
                  <label htmlFor="rq-website">Situs web</label>
                  <input id="rq-website" name="website" tabIndex={-1} autoComplete="off" value={rq.website} onChange={(e) => set('website', e.target.value)} />
                </div>
                {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} /> Kirim lewat WhatsApp saja</a></div>
                  </div>
                )}
              </div>
            )}
          </div>
          <div className="hp-sheet__foot">
            <div className="hp-wiz__btns">
              <button type="button" className="btn btn--outline hp-wiz__back" onClick={back}>{step > 1 ? '← Kembali' : 'Batal'}</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…' : 'Kirim permintaan'}</button>}
            </div>
            <WaHelp text={waText} />
          </div>
        </React.Fragment>
      )}
    </Sheet>
  );
}

/* ─────────────────────────────────────────────
   Harga + perbandingan Paket vs Eceran — SEMUA angka dari /config (prices, package_sessions).
   ───────────────────────────────────────────── */
function PriceCompare({ cfg }) {
  const ps = cfg.package_sessions || 4;
  const pk = Number(cfg.prices.paket) || 0;
  const ec = Number(cfg.prices.eceran) || 0;
  const [n, setN] = useState(ps);
  const perPk = pk / ps;
  const ecTotal = n * ec;
  const packs = Math.ceil(n / ps);
  const pkTotal = packs * pk;
  const covered = packs * ps;
  const spare = covered - n;
  const max = Math.max(ecTotal, pkTotal, 1);
  const perDiff = Math.round(ec - perPk);
  let verdict;
  if (pkTotal < ecTotal) verdict = <>Untuk {n} sesi, <strong>paket lebih hemat {rupiah(ecTotal - pkTotal)}</strong>.</>;
  else if (pkTotal > ecTotal) verdict = <>Untuk {n} sesi, <strong>eceran lebih ringan</strong> — bayar per pertemuan, cocok untuk coba dulu tanpa komitmen panjang.</>;
  else verdict = <>Untuk {n} sesi, totalnya sama.</>;
  return (
    <Reveal className="hp-compare" delay={60}>
      <div className="hp-compare__head">
        <div>
          <div className="hp-legend">Bandingkan sendiri <DemoTag /></div>
          <label htmlFor="cmp-n" className="hp-compare__q">Mau ambil berapa sesi? <strong>{n} sesi</strong></label>
        </div>
        <div className="hp-chips" role="group" aria-label="Pilihan cepat jumlah sesi">
          {[1, ps, ps * 2].map((v) => <button key={v} type="button" className="hp-chip hp-chip--sm" aria-pressed={n === v} onClick={() => setN(v)}>{v} sesi</button>)}
        </div>
      </div>
      <input id="cmp-n" className="hp-range" type="range" min="1" max={ps * 3} step="1" value={n} onChange={(e) => setN(Number(e.target.value))} aria-valuetext={n + ' sesi'} />
      <div className="hp-compare__rows">
        <div className="hp-compare__row">
          <div className="hp-compare__lbl"><strong>Eceran</strong><span>{n} × {rupiah(ec)}</span></div>
          <div className="hp-compare__bar"><span style={{ width: (ecTotal / max) * 100 + '%' }} /></div>
          <div className="hp-compare__amt" id="cmp-ec">{rupiah(ecTotal)}</div>
        </div>
        <div className="hp-compare__row hp-compare__row--pk">
          <div className="hp-compare__lbl"><strong>Paket {ps} sesi</strong><span>{packs} × {rupiah(pk)} · mencakup {covered} sesi</span></div>
          <div className="hp-compare__bar"><span style={{ width: (pkTotal / max) * 100 + '%' }} /></div>
          <div className="hp-compare__amt" id="cmp-pk">{rupiah(pkTotal)}</div>
        </div>
      </div>
      <p className="hp-compare__verdict" aria-live="polite" id="cmp-verdict">{verdict}</p>
      <ul className="hp-compare__notes">
        <li>Per sesi: paket {rupiah(Math.round(perPk))} vs eceran {rupiah(ec)}{perDiff > 0 ? ' — paket ' + rupiah(perDiff) + ' lebih murah per sesi.' : perDiff < 0 ? ' — eceran lebih murah per sesi.' : '.'}</li>
        <li>Eceran = fleksibel: bayar per pertemuan, bisa coba dulu tanpa komitmen panjang.</li>
        {spare > 0 && <li>Paket mencakup {covered} sesi — sisa {spare} sesi berlaku dalam jendela kuota 2 bulan; yang tidak terpakai sampai jendela berakhir hangus.</li>}
      </ul>
    </Reveal>
  );
}

function PriceSection({ cfg }) {
  const ps = cfg.package_sessions || 4;
  const pk = Number(cfg.prices.paket) || 0;
  const ec = Number(cfg.prices.eceran) || 0;
  const pkCheaper = pk > 0 && ec > 0 && pk / ps < ec;
  return (
    <section id="harga" className="section pricing">
      <div className="wrap">
        <Reveal className="section__head section__head--center">
          <div className="eyebrow-line">Harga · Home Private</div>
          <h2 className="section__title">Dua cara, satu kualitas.</h2>
          <p className="section__intro">Sesi {cfg.session_minutes} menit di rumah kamu. Bayar ke IMS — guru tidak menerima uang langsung.</p>
        </Reveal>
        <div className="hp-prices">
          {pk > 0 && (
            <Reveal className={'plan' + (pkCheaper ? ' plan--hl' : '')}>
              {pkCheaper && <div className="plan__ribbon">Lebih hemat per sesi</div>}
              <div className="plan__name">Paket {ps} sesi <DemoTag /></div>
              <div className="plan__price">{rupiah(pk)}</div>
              <div className="plan__unit">{rupiah(Math.round(pk / ps))} / sesi · idealnya habis dalam 1 bulan</div>
              <a className="btn btn--lg btn--primary" style={{ marginTop: 22 }} href="#cari-guru">Cari guru</a>
            </Reveal>
          )}
          {ec > 0 && (
            <Reveal className="plan" delay={90}>
              <div className="plan__name">Eceran <DemoTag /></div>
              <div className="plan__price">{rupiah(ec)}</div>
              <div className="plan__unit">/ sesi · bayar per pertemuan, tanpa komitmen panjang</div>
              <a className="btn btn--lg btn--outline" style={{ marginTop: 22 }} href="#cari-guru">Cari guru</a>
            </Reveal>
          )}
        </div>
        {pk > 0 && ec > 0 && <PriceCompare cfg={cfg} />}
      </div>
    </section>
  );
}


/* "Perjalanan satu sesi" — garis progres terisi saat scroll (tanpa animasi bila reduced-motion).
   Isi hanya fakta SPEC §4–5 + hp-public.js (konfirmasi ortu, nilai 1–5, auto-konfirmasi, catatan guru). */
function SessionJourney({ minutes }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return undefined;
    if (PREFERS_REDUCED) {
      el.style.setProperty('--p', '1');
      el.querySelectorAll('.hp-journey__step').forEach((s) => s.classList.add('is-lit'));
      return undefined;
    }
    let raf = 0;
    const update = () => {
      raf = 0;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const p = Math.max(0, Math.min(1, (vh * 0.62 - r.top) / Math.max(1, r.height)));
      el.style.setProperty('--p', p.toFixed(3));
      el.querySelectorAll('.hp-journey__step').forEach((s) => {
        const sr = s.getBoundingClientRect();
        s.classList.toggle('is-lit', sr.top < vh * 0.62);
      });
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(update); };
    update();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, []);
  const steps = [
    { t: 'Pilih guru', d: 'Dari daftar "Cari guru terdekat", atau serahkan ke IMS untuk dicarikan. Guru tetap boleh menerima atau menolak.', k: 'Kamu' },
    { t: 'Konfirmasi', d: 'IMS menawarkan ke guru, guru menerima, lalu kamu konfirmasi jadwal lewat WhatsApp. Alamat lengkap baru dibuka ke guru setelah penugasan dikonfirmasi.', k: 'IMS · guru · kamu' },
    { t: 'Guru datang & check-in', d: 'Saat tiba, guru check-in dengan GPS + foto di sistem IMS. Untuk murid di bawah 17 tahun, orang dewasa ada di rumah.', k: 'Guru' },
    { t: 'Belajar ' + minutes + ' menit', d: 'Sesi pakai Metode IMS. Selesai sesi, guru check-out dan mengisi catatan progres.', k: 'Guru · murid' },
    { t: 'Ortu konfirmasi + nilai', d: 'Kamu dapat tautan untuk konfirmasi sesi dan memberi nilai 1–5. Tanpa respons dalam 24 jam, sesi dianggap terkonfirmasi. Ada masalah? Lapor lewat tautan yang sama.', k: 'Kamu' },
    { t: 'Progres tercatat', d: 'Catatan guru, milestone, dan skor skill tercatat di platform IMS — ikut tampil di halaman konfirmasi sesimu.', k: 'Sistem IMS' },
  ];
  return (
    <ol className="hp-journey" ref={ref}>
      <span className="hp-journey__track" aria-hidden><span className="hp-journey__fill" /></span>
      {steps.map((s, i) => (
        <li key={i} className="hp-journey__step">
          <span className="hp-journey__dot" aria-hidden>{i + 1}</span>
          <div className="hp-journey__card">
            <span className="hp-journey__who">{s.k}</span>
            <h3 className="hp-journey__title"><span className="hp-sr">Tahap {i + 1}: </span>{s.t}</h3>
            <p className="hp-journey__desc">{s.d}</p>
          </div>
        </li>
      ))}
    </ol>
  );
}

function SafetyGrid({ minutes }) {
  const items = [
    { t: 'Guru terverifikasi IMS', d: 'Sebelum aktif: cek KTP + selfie, SKCK, referensi, wawancara, demo mengajar, pelatihan Metode IMS + tes, lalu tanda tangan perjanjian kemitraan.' },
    { t: 'Check-in & check-out GPS', d: 'Guru check-in di lokasi (GPS + foto) saat datang dan check-out saat selesai. Durasi sesi ' + minutes + ' menit.' },
    { t: 'Kamu konfirmasi tiap sesi', d: 'Setelah sesi, kamu dapat tautan untuk konfirmasi & memberi nilai 1–5. Tanpa respons dalam 24 jam, sesi dianggap terkonfirmasi.' },
    { t: 'Ada jalur lapor', d: 'Ada yang tidak beres? Laporkan lewat tautan sesi yang sama. Laporan masuk ke antrean tim IMS untuk ditindaklanjuti.' },
    { t: 'Data kamu dijaga', d: 'Alamat lengkap hanya dibuka untuk guru yang sudah ditetapkan IMS. Nomor WhatsApp kamu tidak diberikan ke guru — komunikasi lewat IMS.' },
    { t: 'Murid anak = ada orang dewasa', d: 'Untuk murid di bawah 17 tahun, orang dewasa wajib ada di rumah selama sesi berlangsung.' },
  ];
  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>
  );
}

function faqItems(cfg) {
  const open = !!cfg;
  const radius = open ? cfg.max_radius_km : 15;
  return [
    {
      q: 'Berapa biayanya?',
      a: open
        ? 'Paket ' + (cfg.package_sessions || 4) + ' sesi ' + rupiah(cfg.prices.paket) + ' (idealnya habis dalam 1 bulan), atau eceran ' + rupiah(cfg.prices.eceran) + ' per sesi. Satu sesi ' + cfg.session_minutes + ' menit. Pembayaran ke IMS — jangan bayar langsung ke guru.' + (DEMO ? ' (Angka di pratinjau ini contoh.)' : '')
        : 'Harga Home Private kami umumkan saat layanan dibuka di area pilot. Untuk info terbaru, chat admin IMS. Yang pasti: pembayaran selalu ke IMS, bukan langsung ke guru.',
    },
    {
      q: 'Kuota paket & pembatalan gimana?',
      a: 'Paket 4 sesi idealnya selesai dalam sebulan; kuota berlaku dalam jendela 2 bulan — sesi yang belum dipakai sampai jendela berakhir hangus (aturan sama dengan kelas studio IMS). Pembatalan mendadak (kurang dari 3 jam sebelum sesi) dapat dihitung sesi hangus. Detail reschedule dikonfirmasi admin sebelum sesi pertama.',
    },
    {
      q: 'Seberapa aman guru datang ke rumah?',
      a: 'Guru lolos verifikasi (identitas, SKCK, referensi, wawancara, demo, pelatihan Metode IMS) dan terikat perjanjian kemitraan. Tiap sesi ada check-in/out GPS, kamu yang konfirmasi sesinya, dan ada jalur lapor insiden. Untuk murid di bawah 17 tahun, orang dewasa wajib ada di rumah.',
    },
    {
      q: 'Wilayah mana saja?',
      a: 'Mulai dari klaster pilot Gading Serpong – BSD – Alam Sutera. Guru memilih radius mengajarnya sendiri, maksimal ' + radius + ' km dari area tinggalnya. Di luar area itu? Tetap kirim permintaan atau chat admin — kalau belum ada guru, kelas di studio IMS Gading Serpong selalu bisa.',
    },
    {
      q: 'Alat musik apa saja?',
      a: 'Untuk les di rumah: ' + (open ? cfg.instruments.map((i) => i.label.toLowerCase()).join(', ') : INSTRUMENT_TEXT) + '. Alat musik disiapkan murid. Drum kit penuh tidak realistis di rumah — untuk drum kit, ikut kelas di studio IMS.',
    },
    {
      q: 'Bisa pilih guru sendiri?',
      a: 'Bisa pilih dari daftar "Cari guru terdekat" — kami prioritaskan. Guru tetap bisa menerima atau menolak sesuai jadwalnya; kalau berhalangan, IMS mencarikan guru lain yang cocok.',
    },
  ];
}

/* Cara kerja — ringkas (4 langkah). */
function Steps() {
  const steps = [
    { title: 'Pilih lokasi & alat musik', desc: 'Lokasi les, alat musik, dan usia murid. Tiga ketukan.' },
    { title: 'Lihat guru terdekat', desc: 'Guru terverifikasi IMS yang radiusnya sampai — area kira-kira ±1 km, tanpa alamat atau nomor guru.' },
    { title: 'Kirim permintaan', desc: 'Nama murid, hari yang bisa, nomor WhatsApp. Belum ada pembayaran.' },
    { title: 'IMS menghubungi', desc: 'Kami cocokkan guru (alat, jarak, jadwal), lalu kamu konfirmasi sesi pertama lewat WhatsApp.' },
  ];
  return (
    <ol className="hp-ministeps">
      {steps.map((st, i) => (
        <Reveal key={i} tag="li" className="hp-ministeps__item" delay={i * 60}>
          <span className="hp-ministeps__n" aria-hidden>{i + 1}</span>
          <h3 className="hp-ministeps__t"><span className="hp-sr">Langkah {i + 1}: </span>{st.title}</h3>
          <p className="hp-ministeps__d">{st.desc}</p>
        </Reveal>
      ))}
    </ol>
  );
}

/* ─────────────────────────────────────────────
   App
   ───────────────────────────────────────────── */
const HP_LINKS = [
  { href: 'index.html', label: 'Beranda' },
  { href: '#cari-guru', label: 'Cari guru' },
  { href: '#cara-kerja', label: 'Cara kerja' },
  { href: '#faq', label: 'FAQ' },
  { href: 'jadi-guru.html', label: 'Jadi guru' },
];

function LesDiRumahApp() {
  const [hp, closeHp] = useHpConfig();
  const cfg = hp.state === 'open' ? hp.cfg : null;
  const minutes = cfg ? cfg.session_minutes : 60;
  const waText = 'Halo IMS! Aku tertarik les musik di rumah (Home Private). Area aku: ';
  const startFind = (e) => {
    const sec = document.getElementById('cari-guru');
    if (!sec) return;
    e.preventDefault();
    smoothScrollTo(sec);
    setTimeout(() => { const h = document.getElementById('wz-title') || sec.querySelector('h2,h3'); if (h) h.focus({ preventScroll: true }); }, PREFERS_REDUCED ? 0 : 500);
  };

  return (
    <React.Fragment>
      <DemoBanner />
      <a className="hp-skip" href="#konten">Lewati ke konten</a>
      <HpNav links={HP_LINKS} sub="Les di rumah" ctaHref="#cari-guru" ctaLabel="Cari guru" />
      <main id="konten" className="hp-page">
        <section className="hero hp-hero hp-hero--les" aria-labelledby="hp-hero-title">
          <div className="hero__media" aria-hidden>
            <div className="hero__slide is-active" style={{ backgroundImage: 'url(assets/photos/lesson-guitar.jpg)' }} />
            <div className="hero__scrim" />
          </div>
          <div className="hero__content">
            <div className="hero__eyebrow hero__text-in">IMS Home Private · Les musik di rumah</div>
            <h1 className="hero__title hero__text-in" id="hp-hero-title" style={{ animationDelay: '110ms' }}>Gurunya yang datang.</h1>
            <p className="hero__subtitle hero__text-in" style={{ animationDelay: '230ms' }}>
              Guru musik terverifikasi IMS datang ke rumahmu. Cari yang terdekat, kirim permintaan — admin yang atur sisanya.
            </p>
            <div className="hp-hero__go hero__text-in" style={{ animationDelay: '330ms' }}>
              <a className="btn btn--primary btn--lg hp-hero__cta" href="#cari-guru" onClick={startFind}>Cari guru terdekat</a>
              <a className="hp-hero__wa" href={waLink('Halo IMS! Aku mau tanya soal les musik di rumah.')} target="_blank" rel="noopener"><WaIcon size={18} /> Chat admin di WhatsApp</a>
            </div>
            <div className="hp-hero__facts hero__text-in" style={{ animationDelay: '430ms' }}>
              <span className="hp-hero__fact">Sesi {minutes} menit</span>
              <span className="hp-hero__fact">Pilot: Gading Serpong · BSD · Alam Sutera</span>
            </div>
          </div>
        </section>

        <section id="cari-guru" className="section hp-findsec" aria-labelledby={cfg ? 'wz-title' : 'cari-title'}>
          <div className="wrap">
            {!cfg && (
              <div className="section__head">
                <div className="eyebrow-line">Cari guru terdekat</div>
                <h2 className="section__title" id="cari-title" tabIndex={-1}>Siapa yang bisa datang ke rumahmu?</h2>
              </div>
            )}
            {hp.state === 'loading' && <div className="hp-loading" role="status"><span className="hp-spin" aria-hidden /> Memuat…</div>}
            {(hp.state === 'closed' || hp.state === 'unavailable') && (
              <ComingSoon state={hp.state} waText={waText} eyebrow="Home Private · Pilot"
                soonText="Pencarian guru & permintaan les ke rumah lagi kami siapkan, mulai dari klaster Tangerang dekat studio IMS. Mau dikabari duluan atau tanya-tanya? Chat admin IMS."
                downText="Koneksi ke sistem IMS sedang tidak terjangkau. Admin kami tetap bisa bantu langsung lewat WhatsApp." />
            )}
            {cfg && <Finder cfg={cfg} onClosed={closeHp} />}
          </div>
        </section>

        {cfg && cfg.prices && (cfg.prices.paket > 0 || cfg.prices.eceran > 0) && <PriceSection cfg={cfg} />}

        <section id="cara-kerja" className="section section--surface hp-infosec">
          <div className="wrap">
            <Reveal className="section__head">
              <div className="eyebrow-line">Cara kerjanya</div>
              <h2 className="section__title">Simpel. IMS yang atur.</h2>
            </Reveal>
            <Steps />
          </div>
        </section>

        <section id="perjalanan" className="section" aria-labelledby="journey-title">
          <div className="wrap">
            <Reveal className="section__head">
              <div className="eyebrow-line">Perjalanan satu sesi</div>
              <h2 className="section__title" id="journey-title">Dari pilih guru sampai progres tercatat.</h2>
              <p className="section__intro">Tiap sesi lewat jalur yang sama — kamu selalu tahu siapa datang, kapan, dan apa hasilnya.</p>
            </Reveal>
            <SessionJourney minutes={minutes} />
          </div>
        </section>

        <section id="keamanan" className="section section--surface">
          <div className="wrap">
            <Reveal className="section__head">
              <div className="eyebrow-line">Keamanan · Bukan sekadar janji</div>
              <h2 className="section__title">Orang asing? Bukan. Guru IMS.</h2>
              <p className="section__intro">Yang di bawah ini sudah dibangun ke sistem kami — bukan cuma tulisan di brosur.</p>
            </Reveal>
            <SafetyGrid minutes={minutes} />
          </div>
        </section>

        <Faq eyebrow="FAQ · Les di rumah" title="Yang sering ditanya ortu." intro="Belum kejawab? WA aja langsung." items={faqItems(cfg)} />

        <section className="finalcta">
          <div className="finalcta__word" aria-hidden>RUMAH.</div>
          <Reveal className="finalcta__inner">
            <div className="eyebrow-line eyebrow-line--dark">「 Masih mikir-mikir? 」</div>
            <h2 className="finalcta__title">Atau mampir ke studio dulu.</h2>
            <p className="finalcta__sub">Mau rasain vibe IMS langsung? Kelas trial di studio Gading Serpong gratis buat murid baru.</p>
            <div className="finalcta__ctas">
              <a className="btn btn--white btn--lg" href={waLink('Halo IMS! Aku mau tanya soal les musik di rumah.')}>Tanya admin via WhatsApp</a>
              <a className="btn btn--glass btn--lg" href="index.html#programs">Lihat kelas studio</a>
            </div>
          </Reveal>
        </section>
      </main>
      <HpFooter blurb="Sekolah musik anti-mainstream di Gading Serpong. Sekarang juga lewat guru terverifikasi IMS yang datang ke rumah kamu."
        schoolLinks={[{ href: 'index.html', label: 'Beranda' }, { href: 'index.html#programs', label: 'Program les' }, { href: 'index.html#pricing', label: 'Harga studio' }, { href: 'shop.html', label: 'Shop' }]} />
      <StickyCta href="#cari-guru" label="Cari guru terdekat" hideIds={['cari-guru', 'hp-hero-title']} />
      <WAFloat text="Halo IMS! Aku mau tanya soal les musik di rumah." />
    </React.Fragment>
  );
}

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