/* ============================================================
   VETRO — workspace: jobs list, create job, billing, settings
   ============================================================ */

function PageHead({eyebrow, title, sub, actions}){
  return (
    <div className="phead">
      <div>
        {eyebrow && <div className="eyebrow" style={{marginBottom:8}}>{eyebrow}</div>}
        <div className="ttl">{title}</div>
        {sub && <div className="sub">{sub}</div>}
      </div>
      {actions && <div className="row gap10 wrap">{actions}</div>}
    </div>
  );
}

/* ---------------- JOBS LIST ---------------- */
function StatusPill({s}){
  const map={'Aktif':'p-hi','Menyaring':'p-mid','Selesai':'b-opt'};
  return <span className={'pill '+(map[s]||'b-opt')}><span className="dot" style={{background:'currentColor'}}></span>{s}</span>;
}

function JobsList({nav, empty}){
  const [q,setQ]=React.useState('');
  if(empty){
    return (
      <>
        <PageHead eyebrow="Lowongan" title="Lowongan kamu" />
        <div className="emptystate">
          <div className="empty-ic"><Icon n="briefcase" s={30}/></div>
          <h3 className="serif">Belum ada lowongan</h3>
          <p>Buat lowongan pertamamu, tempel job description, dan biarkan Vetro merekomendasikan tes yang paling pas. Sebar ke pelamar lewat WhatsApp dalam hitungan menit.</p>
          <button className="btn btn-primary btn-lg" onClick={()=>nav('create')}><Icon n="plus" s={17}/> Buat lowongan pertama</button>
          <div className="empty-steps">
            <span><b>1</b> Tempel JD</span><Icon n="chevR" s={14}/>
            <span><b>2</b> Pilih tes</span><Icon n="chevR" s={14}/>
            <span><b>3</b> Sebar via WA</span>
          </div>
        </div>
      </>
    );
  }
  const jobs = JOBS.filter(j=>j.title.toLowerCase().includes(q.toLowerCase()));
  return (
    <>
      <PageHead eyebrow="Lowongan" title="Lowongan kamu" sub="Semua posisi yang sedang kamu rekrut."
        actions={<button className="btn btn-primary" onClick={()=>nav('create')}><Icon n="plus" s={17}/> Buat lowongan</button>}/>
      <div className="toolbar">
        <div className="input-ic grow" style={{maxWidth:360}}><Icon n="search"/><input className="field" placeholder="Cari lowongan…" value={q} onChange={e=>setQ(e.target.value)}/></div>
        <button className="btn btn-ghost btn-sm"><Icon n="filter" s={15}/> Filter</button>
      </div>
      <div className="jobgrid">
        {jobs.map(j=>{
          const pct = Math.round(j.done/j.applicants*100);
          return (
            <div key={j.id} className="jobcard" onClick={()=>nav('dashboard')}>
              <div className="row between" style={{marginBottom:14}}>
                <div className="jobcat">{j.cat}</div>
                <StatusPill s={j.status}/>
              </div>
              <h3 className="jobttl">{j.title}</h3>
              <div className="note" style={{marginBottom:16}}>Diposting {j.posted}</div>
              <div className="jobstats">
                <div><b className="tnum">{j.applicants}</b><span>Pelamar</span></div>
                <div><b className="tnum">{j.done}</b><span>Selesai tes</span></div>
                <div><b className="tnum t-hi">{j.hi}</b><span>Fit tinggi</span></div>
              </div>
              <div className="jobprog">
                <div className="bar"><i style={{width:pct+'%',background:'var(--brand-500)'}}></i></div>
                <span className="note">{pct}% selesai</span>
              </div>
              <div className="jobcard-foot">Lihat kandidat <Icon n="arrowR" s={15}/></div>
            </div>
          );
        })}
      </div>
    </>
  );
}

/* ---------------- CREATE JOB ---------------- */
function CreateJob({nav}){
  const [recs,setRecs]=React.useState(TEST_RECS.map(r=>({...r})));
  const toggle = i => setRecs(rs=>rs.map((r,idx)=>idx===i?{...r,on:!r.on}:r));
  const active = recs.filter(r=>r.on).length;
  const mins = recs.filter(r=>r.on).length*4;

  return (
    <>
      <PageHead eyebrow="Lowongan baru" title="Buat lowongan & dapat rekomendasi tes"
        sub="Tempel job description — AI membaca kebutuhan peran dan menyusun paket tes yang paling prediktif."/>
      <div className="create-grid">
        <div className="card">
          <div className="card-hd"><h3>Job description</h3><span className="note">Tempel JD atau pilih template</span></div>
          <div className="card-bd">
            <label className="label">Posisi</label>
            <input className="field" defaultValue="Resepsionis Hotel — The Ubud Villa" style={{marginBottom:16}}/>
            <label className="label">Kategori</label>
            <div className="row wrap gap8" style={{marginBottom:18}}>
              <span className="chip act">Hospitality</span>
              <span className="chip">Shift / customer-facing</span>
              <span className="chip">Entry level</span>
            </div>
            <label className="label">Deskripsi tugas</label>
            <textarea className="field" rows="7" defaultValue="Menyambut tamu, proses check-in/check-out, menangani reservasi dan komplain tamu dengan tenang. Wajib komunikatif, sabar di bawah tekanan, rapi administrasi, dan bisa kerja sistem shift termasuk akhir pekan. Bahasa Inggris aktif jadi nilai plus. Mencari orang yang betah, bukan yang resign dalam 2 bulan."></textarea>
            <label className="label" style={{marginTop:16}}>Budget gaji posisi ini <span className="note" style={{fontWeight:400}}>(opsional — untuk penanda gaji, tidak memengaruhi skor)</span></label>
            <input className="field" defaultValue="Rp 2.800.000 / bulan"/>
            <div className="jd-note"><Icon n="users" s={16}/> 42 pelamar masuk dari job posting. Saring sebelum interview.</div>
          </div>
        </div>

        <div className="card">
          <div className="card-hd">
            <div className="row gap10">
              <div className="ai-spark"><Icon n="sparkles" s={16}/></div>
              <div><h3 style={{lineHeight:1.1}}>Rekomendasi tes AI</h3><span className="note">Dibaca dari JD · bisa kamu sesuaikan</span></div>
            </div>
          </div>
          <div className="card-bd">
            {recs.map((r,i)=>(
              <div className={'testrow'+(r.on?'':' is-off')} key={r.n}>
                <div className="testnum">{r.n}</div>
                <div className="grow">
                  <div className="testname">{r.name} <span className={'badge '+r.tagClass}>{r.tag}</span></div>
                  <div className="testwhy">{r.why}</div>
                </div>
                <button className={'tog'+(r.on?'':' off')} onClick={()=>toggle(i)} aria-label="toggle"></button>
              </div>
            ))}
            <div className="estbox">
              <div className="row gap8"><Icon n="clock" s={16} className="subtle"/><span className="note">Estimasi <b style={{color:'var(--ink)'}}>{mins} menit</b> per kandidat · {active} tes aktif</span></div>
              <div className="row gap8"><Icon n="zap" s={16} className="subtle"/><span className="note">Menyebar tes <b style={{color:'var(--ink)'}}>gratis</b> — kredit hanya untuk buka laporan</span></div>
            </div>
            <button className="btn btn-primary btn-block btn-lg mt20" onClick={()=>nav('sjt')}>Lanjut: konfirmasi kunci SJT <Icon n="arrowR" s={17}/></button>
            <div className="note mt10" style={{textAlign:'center'}}>Skenario SJT digenerate AI dari JD-mu — kamu yang mengunci jawaban terbaiknya (±2 menit).</div>
          </div>
        </div>
      </div>
    </>
  );
}

/* ---------------- SJT KEY CONFIRMATION (kunci skoring dikonfirmasi manusia) ---------------- */
function SJTConfirm({nav}){
  const [items,setItems]=React.useState(SJT_DRAFT.map(s=>({...s})));
  const [confirmed,setConfirmed]=React.useState(false);
  const setBest=(si,oi)=>setItems(xs=>xs.map((s,i)=>i===si?{...s,best:oi}:s));
  return (
    <>
      <PageHead eyebrow="Resepsionis Hotel" title="Konfirmasi kunci jawaban SJT"
        sub="AI menyusun skenario dari JD-mu dan mengusulkan jawaban terbaik. Kamu (atau manajer yang paling paham posisi ini) yang mengunci — tanpa konfirmasi, link tes belum bisa disebar."/>
      <div className="ob-callout" style={{marginBottom:18}}><Icon n="shield" s={18}/><span>Kenapa langkah ini wajib? Kunci jawaban yang dikonfirmasi manusia membuat skor mencerminkan standar layanan di tempatmu, bukan tebakan AI. Skenario identik untuk semua pelamar lowongan ini.</span></div>
      {items.map((s,si)=>(
        <div className="card" key={si} style={{marginBottom:14}}>
          <div className="card-hd"><h3>Skenario {si+1} dari {items.length}</h3><span className="note">Klik opsi untuk mengganti jawaban terbaik</span></div>
          <div className="card-bd">
            <p style={{marginBottom:12}}>{s.q}</p>
            {s.opts.map((o,oi)=>(
              <button key={oi} className={'opt'+(s.best===oi?' pick':'')} onClick={()=>setBest(si,oi)} style={{width:'100%',textAlign:'left'}}>
                <span className="opt-k">{String.fromCharCode(65+oi)}</span>
                <span className="grow">{o.t}</span>
                <span className={'badge '+(s.best===oi?'b-valid':'b-opt')}>{s.best===oi?'Kunci · 5 poin':o.pts+' poin'}</span>
              </button>
            ))}
            <div className="row gap8 mt10"><button className="btn btn-ghost btn-sm"><Icon n="pencil" s={14}/> Edit skenario</button><button className="btn btn-ghost btn-sm"><Icon n="trash" s={14}/> Buang</button><button className="btn btn-ghost btn-sm"><Icon n="refresh" s={14}/> Minta skenario lain</button></div>
          </div>
        </div>
      ))}
      <div className="card card-pad" style={{marginTop:4}}>
        <label className="row gap10" style={{cursor:'pointer',alignItems:'flex-start'}}>
          <input type="checkbox" checked={confirmed} onChange={e=>setConfirmed(e.target.checked)} style={{marginTop:4,width:18,height:18,accentColor:'var(--brand-500)'}}/>
          <span>Saya sudah meninjau skenario dan jawaban terbaiknya sesuai standar kerja di tempat kami. <span className="note" style={{display:'block'}}>Dikonfirmasi sebagai: Indah Permata · HR Lead · hari ini</span></span>
        </label>
        <button className="btn btn-primary btn-block btn-lg mt16" disabled={!confirmed} style={confirmed?{}:{opacity:.45,cursor:'not-allowed'}} onClick={()=>confirmed&&nav('distribute')}>
          <Icon n="lock" s={16}/> Kunci jawaban & lanjut sebar tes
        </button>
      </div>
    </>
  );
}

/* ---------------- DISTRIBUTE / SEBAR TES ---------------- */
function Distribute({nav}){
  const link = "vetro.id/t/ubud-villa/8kf2";
  const [msg,setMsg]=React.useState("Halo 👋 Terima kasih sudah melamar posisi Resepsionis di The Ubud Villa. Mohon selesaikan tes singkat ini (±12 menit) sebelum tahap interview ya:\n\nhttps://"+link+"\n\nBisa dikerjakan dari HP, kapan saja sebelum Jumat.");
  const [copied,setCopied]=React.useState(false);
  const copy=()=>{ try{navigator.clipboard.writeText("https://"+link);}catch(e){} setCopied(true); setTimeout(()=>setCopied(false),1800); };
  const waLink=(phone)=>"https://wa.me/"+(phone?("62"+phone.replace(/[^0-9]/g,'').replace(/^0/,'')):"")+"?text="+encodeURIComponent(msg);
  const invites=[
    {name:'Putu Ari Wibawa',phone:'0813-7788-1020',status:'Selesai'},
    {name:'Kadek Dwi Lestari',phone:'0812-5566-3401',status:'Selesai'},
    {name:'Made Surya Pratama',phone:'0859-2210-7788',status:'Terkirim'},
    {name:'Ni Komang Ayu',phone:'0878-9912-4456',status:'Belum'},
  ];
  const stMap={'Selesai':'p-hi','Terkirim':'p-mid','Belum':'b-opt'};
  return (
    <>
      <PageHead eyebrow="Sebar tes" title="Sebar tes ke pelamar"
        sub="Tesnya gratis. Bagikan satu link ke semua, atau undang per kandidat lewat WhatsApp-mu sendiri."
        actions={<button className="btn btn-ghost" onClick={()=>nav('dashboard')}>Lihat hasil <Icon n="arrowR" s={16}/></button>}/>
      <div className="create-grid">
        <div className="card">
          <div className="card-hd"><h3>Cara 1 — Satu link untuk semua</h3><span className="pill p-hi">Tercepat</span></div>
          <div className="card-bd">
            <label className="label">Link tes lowongan ini</label>
            <div className="linkrow">
              <div className="linkfield">https://{link}</div>
              <button className="btn btn-soft btn-sm" onClick={copy}><Icon n={copied?'check':'copy'} s={15}/> {copied?'Tersalin':'Salin'}</button>
            </div>
            <a className="btn btn-wa btn-block mt14" href={waLink()} target="_blank" rel="noreferrer"><Icon n="wa" s={17}/> Bagikan via WhatsApp</a>
            <div className="note mt10">Pelamar isi namanya sendiri saat mulai. Cocok dibagikan ke broadcast, status WA, atau dibalas ke chat pelamar yang sudah masuk.</div>
            <label className="label mt20">Pesan WhatsApp (bisa diedit)</label>
            <textarea className="field" rows="6" value={msg} onChange={e=>setMsg(e.target.value)}></textarea>
            <TimeLimitBox/>
          </div>
        </div>
        <div className="card">
          <div className="card-hd"><h3>Cara 2 — Undang per kandidat</h3><span className="note">Buat yang mau dilacak</span></div>
          <div className="card-bd">
            <div className="invite-add">
              <input className="field" placeholder="Nama pelamar"/>
              <input className="field" placeholder="08xxxxxxxxxx"/>
              <button className="btn btn-primary btn-sm"><Icon n="plus" s={15}/> Tambah</button>
            </div>
            <div className="invite-list">
              {invites.map((c,i)=>(
                <div className="inviterow" key={i}>
                  <Avatar name={c.name} color="var(--brand-500)" size={36}/>
                  <div className="grow"><b>{c.name}</b><span className="note">{c.phone}</span></div>
                  <span className={'pill '+stMap[c.status]}>{c.status}</span>
                  {c.status==='Belum'
                    ? <a className="btn btn-wa btn-sm" href={waLink(c.phone)} target="_blank" rel="noreferrer"><Icon n="wa" s={15}/> Kirim</a>
                    : <button className="btn btn-ghost btn-sm" disabled><Icon n="check" s={14}/> Terkirim</button>}
                </div>
              ))}
            </div>
            <div className="ob-callout mt16"><Icon n="info" s={18}/><span>Terkirim dari WhatsApp kamu sendiri — gratis, tanpa biaya per pesan. Pengiriman massal otomatis lewat WhatsApp resmi menyusul di fase berikutnya.</span></div>
          </div>
        </div>
      </div>
    </>
  );
}

function TimeLimitBox(){
  const [on,setOn]=React.useState(true);
  const [mins,setMins]=React.useState(30);
  return (
    <div className="estbox mt16" style={{display:'block'}}>
      <div className="row between">
        <div className="row gap8"><Icon n="clock" s={16} className="subtle"/><b style={{fontSize:14}}>Batas waktu sejak link dibuka</b></div>
        <button className={'tog'+(on?'':' off')} onClick={()=>setOn(!on)} aria-label="toggle"></button>
      </div>
      {on && (
        <div className="row gap8 wrap" style={{marginTop:10}}>
          {[20,30,45,60].map(m=>(
            <span key={m} className={'chip'+(mins===m?' act':'')} onClick={()=>setMins(m)}>{m} menit</span>
          ))}
          <span className="note" style={{flexBasis:'100%',marginTop:4}}>Begitu kandidat membuka link, hitung mundur jalan — selesai atau tidak, jawaban tersubmit otomatis. Tes kognitif tetap punya timer per bagian.</span>
        </div>
      )}
    </div>
  );
}

/* ---------------- BILLING ---------------- */
function Billing({nav}){
  return (
    <>
      <PageHead eyebrow="Tagihan & kredit" title="Tagihan & kredit"
        sub="Kelola paket dan kredit laporan. Skor dan ranking selalu gratis."/>
      <div className="billtop">
        <div className="card card-pad creditbig">
          <div className="eyebrow">Sisa kredit</div>
          <div className="creditbig-num"><span className="serif">7</span> <small>kredit</small></div>
          <div className="bar" style={{margin:'14px 0 8px'}}><i style={{width:'70%',background:'var(--accent)'}}></i></div>
          <div className="note">Dari paket Hemat 10 · berlaku s/d 12 Des 2026 — kredit tidak hangus bulanan</div>
          <button className="btn btn-accent btn-block mt20"><Icon n="plus" s={16}/> Beli kredit lagi</button>
        </div>
        <div className="card card-pad">
          <div className="eyebrow">Paket aktif</div>
          <div className="row between mt8" style={{alignItems:'flex-start'}}>
            <div><div className="plan-now serif">Hemat 10</div><div className="note">Rp 200.000 sekali beli · 10 kredit · berlaku 6 bulan</div></div>
            <span className="pill p-hi">Aktif</span>
          </div>
          <div className="usegrid mt20">
            <div><b className="tnum">3</b><span>laporan dibuka</span></div>
            <div><b className="tnum">4</b><span>lowongan aktif</span></div>
            <div><b className="tnum">∞</b><span>tes & ranking gratis</span></div>
          </div>
          <button className="btn btn-ghost btn-block mt20">Kelola paket</button>
        </div>
      </div>

      <h3 className="sec-h">Pilih paket kredit</h3>
      <div className="note" style={{marginTop:-6,marginBottom:14}}>Sekali beli, berlaku 6-12 bulan — pas untuk kebutuhan hiring yang naik-turun. Tanpa langganan bulanan. Satuan tetap tersedia Rp 25rb/laporan.</div>
      <div className="plangrid">
        {PLANS.map(p=>(
          <div key={p.name} className={'plancard'+(p.popular?' pop':'')}>
            {p.popular && <div className="plan-badge">Paling populer</div>}
            <div className="plan-name">{p.name}</div>
            <div className="plan-price serif">{p.price}<small>{p.price==='Gratis'?'':' sekali beli'}</small></div>
            <div className="plan-credits">{p.credits}</div>
            <ul className="plan-feat">
              {p.feat.map(f=><li key={f}><Icon n="check" s={15}/> {f}</li>)}
            </ul>
            <button className={'btn btn-block '+(p.tone==='primary'?'btn-primary':'btn-ghost')} disabled={p.popular}>{p.cta}</button>
          </div>
        ))}
      </div>

      <h3 className="sec-h">Riwayat tagihan</h3>
      <div className="card invoices">
        {[['12 Jun 2026','Paket Hemat 10 — berlaku s/d 12 Des 2026','Rp 200.000','Lunas'],['28 Mei 2026','2 laporan satuan','Rp 50.000','Lunas']].map((r,i)=>(
          <div className="invrow" key={i}>
            <Icon n="file" s={18} className="subtle"/>
            <div className="grow"><b>{r[1]}</b><span className="note">{r[0]}</span></div>
            <span className="tnum" style={{fontWeight:700}}>{r[2]}</span>
            <span className="pill p-hi">{r[3]}</span>
            <button className="iconbtn" style={{width:34,height:34}}><Icon n="download" s={16}/></button>
          </div>
        ))}
      </div>
    </>
  );
}

/* ---------------- SETTINGS ---------------- */
function Settings({nav}){
  const [tab,setTab]=React.useState('bisnis');
  const CTX_SUGGEST=['Sering hadapi tamu sulit','Banyak shift malam & akhir pekan','Tim kecil, harus multitasking','Standar kebersihan tinggi','Butuh bahasa Inggris aktif','Turnover tinggi di entry level','Layanan tamu premium','Kerja cepat saat peak season'];
  const [ctxChips,setCtxChips]=React.useState(['Sering hadapi tamu sulit','Banyak shift malam & akhir pekan','Standar kebersihan tinggi']);
  const toggleCtx=c=>setCtxChips(s=>s.includes(c)?s.filter(x=>x!==c):[...s,c]);
  const tabs=[['bisnis','Bisnis'],['konteks','Konteks AI'],['tim','Tim'],['notif','Notifikasi']];
  return (
    <>
      <PageHead eyebrow="Pengaturan" title="Pengaturan"/>
      <div className="settabs">
        {tabs.map(([k,l])=><button key={k} className={'settab'+(tab===k?' on':'')} onClick={()=>setTab(k)}>{l}</button>)}
      </div>
      {tab==='bisnis' && (
        <div className="card card-pad set-card">
          <h3 className="set-h">Profil bisnis</h3>
          <div className="setrow"><label className="label">Nama bisnis</label><input className="field" defaultValue="The Ubud Villa"/></div>
          <div className="setrow"><label className="label">Industri</label><input className="field" defaultValue="Hospitality"/></div>
          <div className="setrow"><label className="label">Nomor WhatsApp pengirim</label><input className="field" defaultValue="+62 813-XXXX-2201"/></div>
          <div className="setrow"><label className="label">Logo</label>
            <div className="row gap14"><div className="av" style={{width:52,height:52,background:'var(--brand)',borderRadius:14}}>UV</div><button className="btn btn-ghost btn-sm">Ganti logo</button></div>
          </div>
          <div className="row" style={{justifyContent:'flex-end',marginTop:8}}><button className="btn btn-primary">Simpan perubahan</button></div>
        </div>
      )}
      {tab==='konteks' && (
        <div className="card card-pad set-card">
          <div className="row gap10" style={{marginBottom:6}}>
            <div className="ai-spark"><Icon n="sparkles" s={16}/></div>
            <div><h3 className="set-h" style={{margin:0}}>Konteks bisnis untuk AI</h3><span className="note">Makin paham bisnismu, makin akurat penilaian kandidatnya.</span></div>
          </div>
          <div className="ob-callout" style={{marginTop:14,marginBottom:20}}><Icon n="info" s={18}/><span>Konteks ini dipakai AI untuk menyesuaikan bobot tes, menyusun skenario SJT, dan menafsirkan jawaban kandidat sesuai realita di tempatmu.</span></div>

          <label className="label">Hal khas yang perlu AI tahu</label>
          <textarea className="field" rows="5" defaultValue="Resepsionis kami sering jadi orang pertama yang dikomplain tamu, jadi ketenangan dan empati di bawah tekanan sangat penting. Banyak tamu asing, jadi bahasa Inggris aktif jadi nilai plus. Kami tim kecil — satu orang bisa pegang front desk, reservasi, dan bantu kasir sekaligus. Yang paling kami hindari: orang yang resign dalam 2 bulan."></textarea>

          <label className="label" style={{marginTop:18}}>Karakteristik bisnis</label>
          <div className="note" style={{marginBottom:10}}>Pilih yang sesuai — AI memberi bobot lebih pada sifat yang relevan.</div>
          <div className="row wrap gap8">
            {CTX_SUGGEST.map(c=>(
              <span key={c} className={'chip'+(ctxChips.includes(c)?' act':'')} onClick={()=>toggleCtx(c)}>
                {ctxChips.includes(c)&&<Icon n="check" s={13}/>}{c}
              </span>
            ))}
          </div>

          <label className="label" style={{marginTop:18}}>Seperti apa “karyawan sukses” di sini?</label>
          <textarea className="field" rows="3" defaultValue="Betah jangka panjang, rapi administrasi, dan tetap ramah walau hari sedang ramai."></textarea>

          <div className="row between" style={{marginTop:18,flexWrap:'wrap',gap:10}}>
            <span className="note"><Icon n="refresh" s={12}/> Konteks berlaku untuk semua lowongan baru.</span>
            <button className="btn btn-primary">Simpan konteks</button>
          </div>
        </div>
      )}
      {tab==='tim' && (
        <div className="card set-card" style={{padding:0}}>
          <div className="card-hd"><h3>Anggota tim</h3><button className="btn btn-soft btn-sm"><Icon n="plus" s={15}/> Undang anggota</button></div>
          <div className="card-bd" style={{paddingTop:6}}>
            {TEAM.map(m=>(
              <div className="teamrow" key={m.email}>
                <Avatar name={m.name} color={m.color} size={42}/>
                <div className="grow"><div className="row gap8"><b>{m.name}</b>{m.you&&<span className="badge b-opt">Kamu</span>}</div><span className="note">{m.email}</span></div>
                <span className="teamrole">{m.role}</span>
                {!m.you && <button className="iconbtn" style={{width:34,height:34}}><Icon n="more" s={16}/></button>}
              </div>
            ))}
          </div>
        </div>
      )}
      {tab==='notif' && (
        <div className="card card-pad set-card">
          <h3 className="set-h">Notifikasi</h3>
          {[['Kandidat menyelesaikan tes','Email + WhatsApp saat ada yang selesai',true],
            ['Ringkasan harian','Rekap kandidat baru tiap sore',true],
            ['Kredit hampir habis','Ingatkan saat sisa kredit di bawah 20',true],
            ['Tips & pembaruan produk','Sesekali, tanpa spam',false]].map((r,i)=>(
            <div className="notifrow" key={i}>
              <div className="grow"><b>{r[0]}</b><span className="note">{r[1]}</span></div>
              <NotifToggle on={r[2]}/>
            </div>
          ))}
        </div>
      )}
    </>
  );
}
function NotifToggle({on}){const[v,setV]=React.useState(on);return <button className={'tog'+(v?'':' off')} onClick={()=>setV(!v)} aria-label="toggle"></button>;}

Object.assign(window, { PageHead, JobsList, CreateJob, SJTConfirm, Distribute, Billing, Settings, StatusPill });