e.stopPropagation()}>

Arahkan ke QR code di stiker mesin

{err ?

{err}
Ketik nomor mesin secara manual

); } /* ========================================================================= DIGITAL · BELI AIR (slider Rupiah) ========================================================================= */ function DigitalBeli({ go, back, saldo, onBeli, deviceNo='' }){ const MIN=100, MAX=50000, STEP=100; const QUICK = [1000, 2000, 5000, 10000, 25000, 50000]; const [amount, setAmount] = useState(1000); const [askPin, setAskPin] = useState(false); const [dev, setDev] = useState(deviceNo); const [scanning, setScanning] = useState(false); const devOk = dev.trim().length >= 3; const cukup = saldo >= amount; const pct = ((amount-MIN)/(MAX-MIN))*100; const fmtQ = v => v>=1000 ? (v/1000)+'K' : String(v); return (

{scanning && { setDev(no); setScanning(false); }} onClose={()=>setScanning(false)}/>}

Saldo{fmtRp(saldo)}

{/* nomor mesin */}

Nomor Mesin

{deviceNo ?

{dev}

: setDev(e.target.value)} placeholder="Scan QR mesin atau ketik di sini…" inputMode="numeric" autoFocus className="w-full bg-transparent outline-none text-sm font-bold text-ink placeholder:text-slate-300"/>}

{devOk && }

{!deviceNo && !devOk &&

Tap ⚡ untuk scan QR mesin, atau ketik nomor mesin.

}

Nominal Pembelian

{fmtRp(amount)}

setAmount(+e.target.value)} aria-label="Nominal pembelian air" style={{ background:`linear-gradient(90deg,#0066CC 0%,#21C7E8 ${pct}%, #E2E8F0 ${pct}%, #E2E8F0 100%)` }}/>

Rp 100Rp 50K

{QUICK.map(v=>( ))}

Dibayar dari saldo{fmtRp(amount)}

Saldo setelah{fmtRp(Math.max(0,saldo-amount))}

{!devOk ? : cukup ? : } {devOk && !cukup && }

Rp 100 = ±1 gelas · dikonfirmasi dengan PIN

setAskPin(false)} onVerify={async(pin)=>{ try{ return await window.AquAPI.verifyPin(pin); }catch(e){ return null; } }} onSuccess={(pin, status)=>{ setAskPin(false); onBeli(amount, dev.trim()); }} title="Konfirmasi dengan PIN" subtitle={"Bayar "+fmtRp(amount)+" dari saldo untuk membeli air di mesin "+dev.trim()+"."}/>

); } /* ========================================================================= DIGITAL · SUKSES (air keluar) ========================================================================= */ function DigitalSukses({ go, lastBuy, saldo }){ const bubbles = React.useMemo(()=>Array.from({length:16}).map((_,i)=>({ left:4+(i*6)%92, size:6+(i%4)*6, dur:6+(i%5)*1.6, delay:(i*0.4)%5 })),[]); return (

Air Keluar! 🎉

{fmtRp(lastBuy.amount)} · air sedang mengalir

Saldo kamu

{fmtRp(saldo)}

); } /* ========================================================================= RIWAYAT — daftar transaksi + filter (Semua / Topup / Beli Air) ========================================================================= */ function Riwayat({ go, flow='digital', onOpen }){ const [filter, setFilter] = useState('all'); const home = flow==='kartu' ? 'kartu-home' : 'digital-home'; const [data, setData] = useState([]); useEffect(()=>{ if(!(window.AquAPI && window.AquAPI.hasToken())) return; window.AquAPI.history().then(r=>{ setData((r.data||[]).map(x=>{ const dt = new Date(x.created_at); const tp = x.type==='topup' ? 'topup' : x.type==='transfer_to_card' ? 'transfer' : 'beli'; return { type: tp, amt: x.amount, liter: x.volume_ml ? Math.round(x.volume_ml/100)/10 : undefined, d: dt.toLocaleDateString('id-ID',{day:'numeric',month:'short'}), time: dt.toLocaleTimeString('id-ID',{hour:'2-digit',minute:'2-digit'}), orderId: x.order_id, via: x.type==='topup' ? 'QRIS Faspay' : x.type==='transfer_to_card' ? 'Saldo digital → Kartu fisik' : ('Saldo digital'+(x.device_no?(' · '+x.device_no):'')), status: x.status, }; })); }).catch(()=>setData([])); },[]); const list = data.filter(d=> filter==='all' || d.type===filter); const totalTopup = data.filter(d=>d.type==='topup').reduce((s,d)=>s+d.amt,0); const totalLiter = data.filter(d=>d.type==='beli').reduce((s,d)=>s+(d.liter||0),0); const chips = [['all','Semua'],['topup','Topup'],['beli','Beli Air'],['transfer','Transfer']]; return (

Riwayat Transaksi

{/* ringkasan */}

Total Topup

{fmtRp(totalTopup)}

Air Dibeli

{totalLiter} Liter

{flow==='kartu' && (

Riwayat topup saldo digital dari akun yang terhubung.

)} {/* filter */}

{chips.map(([k,l])=>( ))}

{/* daftar */} {list.length===0 ? (

Belum ada transaksi

Transaksi {chips.find(c=>c[0]===filter)?.[1].toLowerCase()} kamu akan tampil di sini.

) : ( {list.map((r,i)=>{ const topup = r.type==='topup'; const transfer = r.type==='transfer'; const title = topup ? (flow==='kartu'?'Topup Saldo Digital':'Topup Saldo') : transfer ? 'Transfer ke Kartu' : 'Beli Air'+(r.liter?` ${r.liter}L`:''); return ( ); })} )}

); } /* baris menu untuk halaman Akun */ function MenuRow({ icon, label, sub, onClick, right, danger }){ return ( ); } function SectionLabel({ children }){ return

{children}

; } /* ========================================================================= AKUN — profil, keamanan, aktivitas, bantuan ========================================================================= */ function Akun({ go, notice, flow='digital', saldo=0, cardNo='1234', openSub, user, onGoKartu }){ const isKartu = flow==='kartu'; const home = isKartu ? 'kartu-home' : 'digital-home'; const nama = user?.name || (isKartu ? 'Pemegang Kartu' : 'Member'); const telp = user?.phone || '-'; const verified = Terverifikasi; const [showLogout, setShowLogout] = useState(false); const [kartu, setKartu] = useState(null); useEffect(()=>{ if(isKartu || !(window.AquAPI && window.AquAPI.hasToken())) return; window.AquAPI.kartuList().then(r=>setKartu(r.data||[])).catch(()=>setKartu([])); },[]); return (

Akun Saya

{user?.avatar_url ? avatar

{nama[0]}

}

{nama}

{telp}

{isKartu?'Pemegang Kartu ••'+cardNo:'Member Digital'}

{/* saldo mini */}

{isKartu?'Saldo Kartu':'Saldo Digital'}

{fmtRp(saldo)}

Profil & Keamanan } label="Edit Profil" sub="Nama, foto, alamat" onClick={()=>{ if(isKartu && !(window.AquAPI&&window.AquAPI.hasToken())){ notice('Masuk ke akun digital untuk mengedit profil'); return; } openSub('edit-profil', flow); }}/> } label="Ubah PIN Keamanan" sub="PIN 4-digit untuk transaksi" onClick={()=>{ if(isKartu && !(window.AquAPI&&window.AquAPI.hasToken())){ notice('Masuk ke akun digital untuk mengubah PIN'); return; } openSub('ubah-pin', flow); }}/> } label="Nomor WhatsApp" right={verified} onClick={()=>notice('Nomor sudah terverifikasi')}/> {isKartu && } label="Kartu Tertaut" sub={'MizuOne ••'+cardNo} right={ Aktif} onClick={()=>notice('Kartu MizuOne ••'+cardNo+' aktif & tertaut')}/>} {/* kartu terhubung — hanya flow digital */} {!isKartu && kartu && kartu.length > 0 && ( <> Kartu Terhubung {kartu.map((c,i)=>( } label={`Kartu MizuOne •••• ${String(c.nokartu).slice(-4)}`} sub={c.saldo != null ? fmtRp(c.saldo)+' saldo kartu' : 'tap ke mesin untuk cek saldo'} onClick={()=>onGoKartu&&onGoKartu(c.nokartu, c.saldo)}/> ))} )} Aktivitas } label="Riwayat Transaksi" sub="Topup & beli air" onClick={()=>go(isKartu?'kartu-riwayat':'digital-riwayat')}/> } label="Metode Pembayaran" sub="QRIS · Faspay" onClick={()=>openSub('metode-bayar', flow)}/> Bantuan } label="Chat Mizu (WhatsApp)" sub="Asisten pembelian air" right={} onClick={()=>{ notice('Membuka WhatsApp…'); openExt(LINKS.wa); }}/> } label="Chat Mizuki (Telegram)" sub="Asisten pembelian air" right={} onClick={()=>{ notice('Membuka Telegram…'); openExt(LINKS.tg); }}/> } label="Pusat Bantuan & S&K" sub="FAQ & Syarat & Ketentuan" onClick={()=>openSub('bantuan', flow)}/>

MizuOne v1.0.0 · PT. Dinasty Sahabat Mulia

{/* Modal konfirmasi logout — fixed di dalam root div */} {showLogout && (

setShowLogout(false)}>

e.stopPropagation()}>

Keluar dari akun?

Kamu perlu masuk lagi untuk akses saldo dan transaksi.

)}

); } /* ========================================================================= STRUK — e-Struk detail transaksi ========================================================================= */ function Struk({ tx, back, notice }){ if(!tx) return null; const rows = [ ['Jenis transaksi', tx.title], ['Nominal', fmtRp(tx.amt)], tx.liter ? ['Jumlah air', tx.liter+' Liter'] : null, ['Tanggal & jam', (tx.date||'')+(tx.time?' · '+tx.time:'')], ['ID Transaksi', tx.id], ['Metode bayar', tx.method], ['Status', tx.status], ].filter(Boolean); const receiptText = 'MizuOne — e-Struk\n'+'-'.repeat(30)+'\n'+rows.map(([k,v])=>k+': '+v).join('\n')+'\n'+'-'.repeat(30)+'\nPT. Dinasty Sahabat Mulia · mizuone.id'; const share = async()=>{ const data = { title:'e-Struk MizuOne', text:receiptText }; if(navigator.share){ try{ await navigator.share(data); }catch(e){} } else { try{ await navigator.clipboard.writeText(receiptText); notice('Detail struk disalin'); }catch(e){ notice('Tidak dapat membagikan'); } } }; const unduh = ()=>{ try{ const blob = new Blob([receiptText], {type:'text/plain'}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href=url; a.download='e-struk-'+tx.id+'.txt'; document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(url), 1000); notice('Struk diunduh'); }catch(e){ notice('Gagal mengunduh struk'); } }; return (

{tx.title}

{fmtRp(tx.amt)}

Transaksi Berhasil

{rows.map(([k,v],i)=>(

{k} {k==='ID Transaksi' ? : {v} }

))}

{tx.type==='topup' && Aman oleh Faspay}

); } /* ========================================================================= EDIT PROFIL — nama, foto, alamat, kelurahan, kecamatan, kota + map ========================================================================= */ function EditProfil({ flow='digital', back, notice, user, onSave }){ const [nama, setNama] = useState(user?.name || ''); const [alamat, setAlamat] = useState(user?.alamat || ''); const [kelurahan, setKelurahan] = useState(user?.kelurahan || ''); const [kecamatan, setKecamatan] = useState(user?.kecamatan || ''); const [kota, setKota] = useState(user?.kota || ''); const [lat, setLat] = useState(user?.lat || null); const [lng, setLng] = useState(user?.lng || null); const [avatarFile, setAvatarFile] = useState(null); const [busy, setBusy] = useState(false); const [err, setErr] = useState(''); const [showMap, setShowMap] = useState(false); const pickAvatar = (e)=>{ const f=e.target.files?.[0]; if(!f) return; const rd=new FileReader(); rd.onload=ev=>setAvatarFile({preview:ev.target.result, base64:ev.target.result}); rd.readAsDataURL(f); }; const onMapPick = (d)=>{ setLat(d.lat); setLng(d.lng); if(d.display_name && !alamat) setAlamat(d.display_name.split(',').slice(0,3).join(',').trim()); if(d.kelurahan) setKelurahan(d.kelurahan); if(d.kecamatan) setKecamatan(d.kecamatan); if(d.kota) setKota(d.kota); }; const doSave = async ()=>{ if(!nama.trim()||busy) return; setBusy(true); setErr(''); try{ if(avatarFile) await window.AquAPI.uploadAvatar(avatarFile.base64); await window.AquAPI.updateProfile({name:nama, alamat, kelurahan, kecamatan, kota, lat, lng}); if(onSave) onSave(); notice('Profil berhasil disimpan'); back(); }catch(e){ setErr(e.message||'Gagal menyimpan profil'); setBusy(false); } }; const avatarSrc = avatarFile?.preview || user?.avatar_url; return (

{/* Foto profil */}

{avatarSrc ? foto

: }

Foto profil (opsional)

Nama lengkap setNama(e.target.value)} onKeyDown={e=>e.key==='Enter'&&document.getElementById('ep-alamat')?.focus()} className={inputCls} placeholder="Nama lengkap"/> Nomor HP

+62

Terverifikasi · hubungi bantuan untuk mengubah Alamat

setAlamat(e.target.value)} rows="2" className={inputCls+" resize-none leading-snug"} placeholder="Jl. Merdeka No. 1"/>
          </label>

<button type="button" onClick={()=>setShowMap(m=>!m)}
            className="mb-3 inline-flex items-center gap-1.5 text-xs font-semibold text-mizu hover:underline">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
            {showMap ? 'Sembunyikan Peta' : 'Pilih Lokasi di Peta'}{lat ? ' ✓' : ''}
          </button>
          {showMap && <MapPicker initLat={lat} initLng={lng} onPick={onMapPick}/>}

<div className="grid grid-cols-2 gap-3 mb-3">
            <label className="block">
              <span className="block text-sm font-semibold mb-1.5">Kelurahan</span>
              <input value={kelurahan} onChange={e=>setKelurahan(e.target.value)} className={inputCls} placeholder="Singosari"/>
            </label>
            <label className="block">
              <span className="block text-sm font-semibold mb-1.5">Kecamatan</span>
              <input value={kecamatan} onChange={e=>setKecamatan(e.target.value)} className={inputCls} placeholder="Singosari"/>
            </label>
          </div>
          <label className="block mb-5">
            <span className="block text-sm font-semibold mb-1.5">Kota / Kabupaten</span>
            <input value={kota} onChange={e=>setKota(e.target.value)} onKeyDown={e=>e.key==='Enter'&&doSave()} className={inputCls} placeholder="Malang"/>
          </label>

{err && <p className="text-danger text-sm mb-3 text-center font-semibold">{err}</p>}
          <Button size="lg" className="w-full" disabled={!nama.trim()||busy} onClick={doSave} icon={<Ic.check className="w-5 h-5"/>}>{busy?'Menyimpan…':'Simpan Perubahan'}</Button>
        </Card>
      </div>
    </div>
  );
}

/* =========================================================================
   UBAH PIN — verifikasi lama → buat baru → konfirmasi (reuse PinSheet)
   ========================================================================= */
function UbahPin({ back, notice }){
  const order = ['lama','baru','konfirmasi'];
  const [step, setStep] = useState('lama');
  const [npin, setNpin] = useState('');
  const [pinLama, setPinLama] = useState('');
  const [checking, setChecking] = useState(true);

useEffect(()=>{
    if(!window.AquAPI || !window.AquAPI.hasToken()){ setChecking(false); return; }
    // Probe: cek apakah user sudah punya PIN (no_pin → skip step lama)
    window.AquAPI.verifyPin('0000').then(r=>{
      if(r && r.status==='no_pin') setStep('baru');
      setChecking(false);
    }).catch(()=>setChecking(false));
  },[]);

return (
    <div className="relative fade-in" data-screen-label="UbahPin">
      <WaterHeader className="absolute top-0 left-0 right-0 h-44 rounded-b-[2rem]"><div className="h-44"></div></WaterHeader>
      <div className={"relative "+wrapNarrow+" px-4 pt-5 pb-24"}>
        <div className="relative z-10"><ScreenTop onBack={back} title="Ubah PIN" light/></div>
        <Card className="p-6 pop text-center">
          <div className="w-14 h-14 rounded-2xl bg-mizu-light text-mizu grid place-items-center mx-auto mb-3"><Ic.shield className="w-7 h-7"/></div>
          <h2 className="text-xl font-extrabold">{step==='baru'&&!pinLama ? 'Buat PIN Keamanan' : 'Ubah PIN Keamanan'}</h2>
          <p className="text-slate-500 text-sm mt-1 sub">{ step==='lama'?'Masukkan PIN kamu saat ini.':step==='baru'?'Pilih 4 angka yang mudah kamu ingat.':'Masukkan ulang PIN baru kamu.' }</p>
          <div className="flex justify-center gap-2 mt-5">
            {order.map((s,i)=>{
              const done = order.indexOf(step) > i, cur = step===s;
              return <span key={s} className={"h-1.5 rounded-full transition-all "+(cur?'w-8 bg-mizu':done?'w-5 bg-mizu/50':'w-5 bg-slate-200 dark:bg-slate-700')}></span>;
            })}
          </div>
          {checking && <p className="text-xs text-slate-400 mt-4">Memuat status PIN…</p>}
        </Card>
      </div>
      {!checking && (
        <PinSheet key={step} open
          onVerify={step==='lama' ? async(pin)=>{ try{ return await window.AquAPI.verifyPin(pin); }catch(e){ return null; } } : null}
          expect={step==='konfirmasi' ? npin : null}
          hint={false}
          errMsg={ step==='konfirmasi' ? 'PIN tidak cocok, ulangi' : 'PIN salah, coba lagi' }
          title={ step==='lama'?'Masukkan PIN lama':step==='baru'?'Buat PIN baru':'Konfirmasi PIN baru' }
          subtitle={ step==='lama'?'Demi keamanan, masukkan PIN kamu saat ini.':step==='baru'?'Pilih 4 angka yang mudah kamu ingat.':'Masukkan ulang PIN baru kamu.' }
          onClose={back}
          onSuccess={(pin, status)=>{
            if(step==='lama'){
              if(status==='no_pin') setStep('baru');
              else { setPinLama(pin); setStep('baru'); }
            }
            else if(step==='baru'){ setNpin(pin); setStep('konfirmasi'); }
            else { doSavePin(pin); }
          }}/>
      )}
    </div>
  );
}

/* =========================================================================
   METODE PEMBAYARAN — QRIS Faspay aktif
   ========================================================================= */
function MetodeBayar({ flow='digital', back }){
  return (
    <div className="relative fade-in" data-screen-label="MetodeBayar">
      <WaterHeader className="absolute top-0 left-0 right-0 h-44 rounded-b-[2rem]"><div className="h-44"></div></WaterHeader>
      <div className={"relative "+wrapNarrow+" px-4 pt-5 pb-24"}>
        <div className="relative z-10"><ScreenTop onBack={back} title="Metode Pembayaran" light/></div>
        <Card className="p-5 pop">
          <div className="flex items-center gap-3">
            <div className="shrink-0 w-12 h-12 rounded-xl bg-mizu-light text-mizu grid place-items-center"><Ic.qr className="w-6 h-6"/></div>
            <div className="flex-1 min-w-0">
              <div className="font-bold">QRIS · Faspay</div>
              <div className="text-xs text-slate-400">GoPay, OVO, DANA, ShopeePay, m-banking, dll.</div>
            </div>
            <Badge tone="success">Aktif</Badge>
          </div>
        </Card>
        <p className="text-xs text-slate-400 text-center mt-4 px-6 sub">Seluruh pembayaran MizuOne diproses aman lewat QRIS Faspay. Metode lain akan ditambahkan menyusul.</p>
      </div>
    </div>
  );
}

/* =========================================================================
   BANTUAN — FAQ + Syarat & Ketentuan
   ========================================================================= */
function FaqItem({ q, children }){
  const [open, setOpen] = useState(false);
  return (
    <div>
      <button onClick={()=>setOpen(o=>!o)} className="w-full flex items-center justify-between gap-3 p-4 text-left active:scale-[.99] transition">
        <span className="font-semibold text-sm">{q}</span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={"w-5 h-5 text-slate-400 shrink-0 transition-transform "+(open?'rotate-180':'')}><path d="m6 9 6 6 6-6"/></svg>
      </button>
      {open && <div className="px-4 pb-4 -mt-1 text-sm text-slate-500 dark:text-slate-400 sub leading-relaxed fade-in">{children}</div>}
    </div>
  );
}
function Bantuan({ back }){
  const sk = [
    'Layanan MizuOne dikelola oleh PT. Dinasty Sahabat Mulia.',
    'Saldo yang telah diisi tidak dapat diuangkan kembali (non-refundable), kecuali terjadi kegagalan sistem yang terverifikasi.',
    'Harga air dapat berubah sewaktu-waktu dengan pemberitahuan di aplikasi.',
    'Pengguna bertanggung jawab menjaga kerahasiaan PIN dan kode OTP. Jangan bagikan ke siapa pun.',
    'Transaksi yang telah berhasil diproses tidak dapat dibatalkan.',
  ];
  return (
    <div className="relative fade-in" data-screen-label="Bantuan">
      <WaterHeader className="absolute top-0 left-0 right-0 h-44 rounded-b-[2rem]"><div className="h-44"></div></WaterHeader>
      <div className={"relative "+wrapNarrow+" px-4 pt-5 pb-24"}>
        <div className="relative z-10"><ScreenTop onBack={back} title="Pusat Bantuan & S&K" light/></div>

<Card className="p-4 pop">
          <div className="text-sm font-semibold mb-3">Butuh bantuan langsung?</div>
          <div className="grid grid-cols-2 gap-2.5">
            <button onClick={()=>openExt(LINKS.wa)} className="inline-flex items-center justify-center gap-2 min-h-[44px] px-3 rounded-xl bg-[#25D366] text-white font-semibold active:scale-[.98] transition">
              <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5"><path d="M12 2a10 10 0 0 0-8.6 15l-1.3 4.7L7 20.4A10 10 0 1 0 12 2Zm5.3 14.1c-.2.6-1.3 1.2-1.8 1.2-.5.1-1 .1-1.7-.1-.4-.1-.9-.3-1.6-.6-2.8-1.2-4.6-4-4.7-4.2-.1-.2-1.1-1.5-1.1-2.8 0-1.3.7-2 .9-2.2.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 1.9c.1.2.1.4 0 .6l-.4.6c-.2.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l1.8.9c.3.1.4.2.5.3 0 .2 0 .8-.2 1.3Z"/></svg> Mizu
            </button>
            <button onClick={()=>openExt(LINKS.tg)} className="inline-flex items-center justify-center gap-2 min-h-[44px] px-3 rounded-xl bg-[#229ED9] text-white font-semibold active:scale-[.98] transition">
              <svg viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5"><path d="M21.9 4.5 18.7 19c-.2 1-.9 1.3-1.7.8l-4.6-3.4-2.2 2.1c-.2.2-.4.4-.9.4l.3-4.6 8.5-7.7c.4-.3-.1-.5-.6-.2L7.3 13.4l-4.5-1.4c-1-.3-1-1 .2-1.4l17.6-6.8c.8-.3 1.5.2 1.3 1.3Z"/></svg> Mizuki
            </button>
          </div>
        </Card>

<SectionLabel>Pertanyaan Umum</SectionLabel>
        <Card className="divide-y divide-slate-100 dark:divide-slate-800 overflow-hidden">
          <FaqItem q="Bagaimana cara isi ulang air?">Pilih <b>Topup Digital</b> atau <b>Topup Kartu</b> di beranda, tentukan nominal, lalu bayar lewat QRIS Faspay.</FaqItem>
          <FaqItem q="Apa fungsi PIN keamanan?">PIN 4-digit melindungi saldomu. PIN diminta setiap kali membeli air dari saldo digital agar tidak bisa dipakai orang lain.</FaqItem>
          <FaqItem q="Metode pembayaran apa yang didukung?">Semua aplikasi yang mendukung QRIS — GoPay, OVO, DANA, ShopeePay, hingga m-banking bank apa pun.</FaqItem>
          <FaqItem q="Saldo belum bertambah setelah bayar?">Pembayaran QRIS umumnya masuk dalam 1–2 menit. Jika lebih lama, hubungi Mizu (WhatsApp) dengan menyertakan ID Transaksi pada e-struk kamu.</FaqItem>
          <FaqItem q="Bagaimana cara mendapat kartu fisik MizuOne?">Hubungi agen kami lewat WhatsApp untuk pemesanan kartu fisik MizuOne.</FaqItem>
        </Card>

<SectionLabel>Syarat & Ketentuan</SectionLabel>
        <Card className="p-5">
          <ol className="space-y-3 text-sm text-slate-500 dark:text-slate-400 sub">
            {sk.map((t,i)=>(
              <li key={i} className="flex gap-3">
                <span className="shrink-0 w-5 h-5 rounded-full bg-mizu-light text-mizu grid place-items-center text-[11px] font-bold">{i+1}</span>
                <span className="leading-relaxed">{t}</span>
              </li>
            ))}
          </ol>
          <p className="text-xs text-slate-400 mt-5 pt-4 border-t border-slate-100 dark:border-slate-800">© 2025 MizuOne · PT. Dinasty Sahabat Mulia · Jl. Raya Randu Agung No. 246, Singosari, Malang</p>
        </Card>
      </div>
    </div>
  );
}

Object.assign(window, { Footer, Landing, DigitalLogin, DaftarDigital, DigitalHome, DigitalTopup, DigitalBeli, DigitalSukses, Riwayat, Akun, Struk, EditProfil, UbahPin, MetodeBayar, Bantuan });

Air bersih, isi ulang sendiri, bayar QRIS

Topup Digital

Topup Kartu

Masuk dengan No HP

Lengkapi profil kamu

Buat akun — gratis

Verifikasi nomor

Transfer ke Kartu

Halo, {(user?.name||'Member').split(' ')[0]}! 👋

Kartu Fisik MizuOne

Riwayat Transaksi

Air Keluar! 🎉

Riwayat Transaksi

Belum ada transaksi

Akun Saya

Keluar dari akun?