/* ============================================================
   SELARAS — auth (login / signup) + HR onboarding
   ============================================================ */

function AuthShell({children, mode, go}){
  return (
    <div className="auth">
      <div className="auth-brandcol">
        <div className="auth-brandtop">
          <div className="auth-mark"><Mark s={26} color="#fff"/></div>
          <b>Selaras</b>
        </div>
        <div className="auth-pitch">
          <div className="eyebrow" style={{color:'#9cc3b3'}}>Screening kandidat berbasis psikometri</div>
          <h2 className="serif">Rekrut orang yang <em>selaras</em> dengan perannya — bukan yang paling cepat melamar.</h2>
          <p>Sebar tes singkat lewat WhatsApp, terima kandidat yang sudah diurutkan dari paling cocok, lengkap dengan laporan ala talent expert.</p>
          <div className="auth-trust">
            <div><Icon n="check" s={16}/> Tes tervalidasi (IPIP · ICAR · SJT)</div>
            <div><Icon n="check" s={16}/> Tahan-cheat, mobile-first untuk kandidat</div>
            <div><Icon n="check" s={16}/> Skor & ranking gratis, bayar per laporan</div>
          </div>
        </div>
        <div className="auth-foot">“Hemat ~2 hari screening tiap batch.” — tim HR yang sudah pakai</div>
      </div>
      <div className="auth-formcol">
        <div className="auth-form fade">{children}</div>
      </div>
    </div>
  );
}

function GoogleBtn({label}){
  return (
    <button className="btn btn-ghost btn-block btn-lg" style={{gap:10}}>
      <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.5H42V20H24v8h11.3C33.7 32.9 29.3 36 24 36c-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 6.1 29.6 4 24 4 12.9 4 4 12.9 4 24s8.9 20 20 20 20-8.9 20-20c0-1.3-.1-2.3-.4-3.5z"/><path fill="#FF3D00" d="M6.3 14.7l6.6 4.8C14.7 16 19 12 24 12c3.1 0 5.9 1.2 8 3.1l5.7-5.7C34.5 6.1 29.6 4 24 4 16.3 4 9.7 8.3 6.3 14.7z"/><path fill="#4CAF50" d="M24 44c5.2 0 9.9-2 13.4-5.2l-6.2-5.2C29.2 35.3 26.7 36 24 36c-5.3 0-9.7-3.1-11.3-7.6l-6.5 5C9.5 39.6 16.2 44 24 44z"/><path fill="#1976D2" d="M43.6 20.5H42V20H24v8h11.3c-.8 2.2-2.2 4.1-4.1 5.6l6.2 5.2C39.9 36.4 44 31 44 24c0-1.3-.1-2.3-.4-3.5z"/></svg>
      {label}
    </button>
  );
}

function LoginScreen({go, onLogin}){
  const [show, setShow] = React.useState(false);
  return (
    <AuthShell mode="login" go={go}>
      <h1 className="serif">Masuk ke Selaras</h1>
      <p className="auth-lead">Lanjutkan menyaring kandidatmu.</p>
      <GoogleBtn label="Lanjut dengan Google"/>
      <div className="auth-or"><span>atau</span></div>
      <label className="label">Email kerja</label>
      <div className="input-ic"><Icon n="mail"/><input className="field" placeholder="kamu@perusahaan.co" defaultValue="indah@ubudvilla.co"/></div>
      <label className="label" style={{marginTop:14}}>Kata sandi</label>
      <div className="input-ic">
        <Icon n="lock"/>
        <input className="field" type={show?'text':'password'} defaultValue="rahasia123" style={{paddingRight:44}}/>
        <button className="pw-toggle" onClick={()=>setShow(s=>!s)} aria-label="toggle"><Icon n={show?'eyeOff':'eye'} s={18}/></button>
      </div>
      <div className="row between" style={{margin:'14px 0 18px'}}>
        <label className="remember"><input type="checkbox" defaultChecked/> Ingat saya</label>
        <a className="link">Lupa sandi?</a>
      </div>
      <button className="btn btn-primary btn-block btn-lg" onClick={onLogin}>Masuk <Icon n="arrowR" s={17}/></button>
      <p className="auth-switch">Belum punya akun? <a className="link" onClick={()=>go('signup')}>Daftar gratis</a></p>
    </AuthShell>
  );
}

function SignupScreen({go, onSignup}){
  return (
    <AuthShell mode="signup" go={go}>
      <h1 className="serif">Buat akun</h1>
      <p className="auth-lead">Mulai gratis — 10 kredit, tanpa kartu kredit.</p>
      <GoogleBtn label="Daftar dengan Google"/>
      <div className="auth-or"><span>atau</span></div>
      <div className="row gap10" style={{alignItems:'flex-start'}}>
        <div className="grow"><label className="label">Nama</label><input className="field" placeholder="Nama kamu"/></div>
        <div className="grow"><label className="label">Perusahaan</label><input className="field" placeholder="Nama bisnis"/></div>
      </div>
      <label className="label" style={{marginTop:14}}>Email kerja</label>
      <div className="input-ic"><Icon n="mail"/><input className="field" placeholder="kamu@perusahaan.co"/></div>
      <label className="label" style={{marginTop:14}}>Kata sandi</label>
      <div className="input-ic"><Icon n="lock"/><input className="field" type="password" placeholder="Minimal 8 karakter"/></div>
      <button className="btn btn-primary btn-block btn-lg mt20" onClick={onSignup}>Buat akun gratis <Icon n="arrowR" s={17}/></button>
      <p className="auth-fine">Dengan mendaftar kamu setuju dengan Ketentuan & Kebijakan Privasi Selaras.</p>
      <p className="auth-switch">Sudah punya akun? <a className="link" onClick={()=>go('login')}>Masuk</a></p>
    </AuthShell>
  );
}

/* ---------------- Onboarding ---------------- */
function HowStep({n, icon, title, body}){
  return (
    <div className="howstep">
      <div className="howstep-ic"><Icon n={icon} s={22}/></div>
      <div className="howstep-n">{n}</div>
      <div><div className="howstep-t">{title}</div><div className="howstep-b">{body}</div></div>
    </div>
  );
}

/* Adaptive AI business-context interview (mixed MC + short answer) */
function BusinessInterview(){
  const [qi,setQi]=React.useState(0);
  const [ans,setAns]=React.useState({});
  const [thinking,setThinking]=React.useState(false);
  const set=(k,v)=>setAns(a=>({...a,[k]:v}));

  const q3map={
    'Tidak tahan tekanan tamu':{q:'Seberapa sering tim menghadapi tamu sulit dalam sehari?',opts:['Hampir tiap jam','Beberapa kali sehari','Sesekali saja']},
    'Jam & shift tidak cocok':{q:'Pola shift mana yang paling sering jadi ganjalan?',opts:['Shift malam','Akhir pekan & hari libur','Jam tidak menentu']},
    'Kurang cocok dengan tim':{q:'Karakter tim kamu paling dekat ke mana?',opts:['Santai & cair','Disiplin & terstruktur','Cepat & kompetitif']},
    'Ekspektasi gaji':{q:'Seberapa fleksibel gaji untuk peran ini?',opts:['Tetap sesuai range','Ada sedikit ruang nego','Tergantung kualitas orang']},
  };
  const dyn=q3map[ans.q1]||{q:'Mana yang paling kamu utamakan untuk peran ini?',opts:['Ketahanan & konsistensi','Kecepatan & energi','Keramahan & empati','Ketelitian administrasi']};
  const questions=[
    {key:'q1',kind:'mc',q:'Apa yang paling sering bikin karyawan keluar dalam 6 bulan pertama?',opts:['Tidak tahan tekanan tamu','Jam & shift tidak cocok','Kurang cocok dengan tim','Ekspektasi gaji']},
    {key:'q2',kind:'text',q:'Ceritakan singkat satu karyawan terbaikmu — apa yang bikin dia pas di sini?',ph:'Mis. sabar menghadapi tamu, teliti, dan jarang absen…'},
    {key:'q3',kind:'mc',q:dyn.q,opts:dyn.opts},
  ];
  const total=questions.length, done=qi>=total, cur=questions[qi];
  const answered=cur&&(cur.kind==='text'?(ans[cur.key]||'').trim().length>0:!!ans[cur.key]);
  const advance=()=>{ setThinking(true); setTimeout(()=>{setThinking(false);setQi(qi+1);},650); };

  return (
    <div className="ob-card">
      <div className="row between" style={{marginBottom:2}}>
        <div className="eyebrow t-brand">Kenali bisnismu</div>
        <div className="ai-pill"><Icon n="sparkles" s={13}/> Disusun AI</div>
      </div>
      <h2 className="serif ob-h">Beberapa pertanyaan singkat.</h2>
      <p className="muted ob-lead">Jawabanmu membantu AI menyesuaikan tes dan skenario untuk konteks bisnismu. Pertanyaan ikut menyesuaikan jawabanmu.</p>
      {!done ? (
        <div className="qcard">
          <div className="qcard-top"><span>Pertanyaan {qi+1} dari {total}</span><div className="qdots">{questions.map((_,i)=><i key={i} className={i<=qi?'on':''}></i>)}</div></div>
          {thinking ? (
            <div className="ai-thinking"><span className="ai-dot"></span><span className="ai-dot"></span><span className="ai-dot"></span> AI menyusun pertanyaan berikutnya…</div>
          ) : (
            <div className="qbody fade" key={qi}>
              <div className="qtext">{cur.q}</div>
              {cur.kind==='mc' ? (
                <div className="qopts">
                  {cur.opts.map(o=>(
                    <button key={o} className={'qopt'+(ans[cur.key]===o?' on':'')} onClick={()=>set(cur.key,o)}>
                      <span className="qradio">{ans[cur.key]===o&&<Icon n="check" s={12}/>}</span>{o}
                    </button>
                  ))}
                </div>
              ):(
                <textarea className="field" rows="3" placeholder={cur.ph} value={ans[cur.key]||''} onChange={e=>set(cur.key,e.target.value)}></textarea>
              )}
              <button className="btn btn-soft btn-block" style={{marginTop:14}} disabled={!answered} onClick={advance}>
                {qi===total-1?'Selesai':'Lanjut pertanyaan'} <Icon n="arrowR" s={15}/>
              </button>
            </div>
          )}
        </div>
      ):(
        <div className="qcard">
          <div className="ai-ready"><div className="ai-ready-ic"><Icon n="sparkles" s={20}/></div><div><b>Konteks tersimpan.</b><span>AI akan memakai ini untuk menyesuaikan bobot tes &amp; skenario SJT yang relevan.</span></div></div>
          <div className="ai-signals">
            {['Prioritas: ketahanan kerja','Shift &amp; akhir pekan penting','Butuh administrasi rapi'].map(s=><span key={s} className="signal"><Icon n="check" s={13}/><span dangerouslySetInnerHTML={{__html:s}}/></span>)}
          </div>
          <button className="btn btn-quiet btn-sm" style={{marginTop:8}} onClick={()=>{setQi(0);setAns({});}}>Ulangi pertanyaan</button>
        </div>
      )}
    </div>
  );
}

function Onboarding({onDone}){
  const [step, setStep] = React.useState(0);
  const [size, setSize] = React.useState('11–50');
  const [industry, setIndustry] = React.useState('Hospitality');
  const steps = ['Selamat datang','Profil bisnis','Kenali bisnismu','Cara skor','Soal kredit'];
  const next = ()=> step<steps.length-1 ? setStep(step+1) : onDone();

  return (
    <div className="ob">
      <div className="ob-bar">
        <div className="row gap10">
          <div className="auth-mark sm"><Mark s={18} color="#fff"/></div>
          <b style={{fontWeight:800,letterSpacing:'-.3px'}}>Selaras</b>
        </div>
        <button className="btn btn-quiet btn-sm" onClick={onDone}>Lewati</button>
      </div>

      <div className="ob-prog">
        {steps.map((s,i)=>(
          <div key={i} className={'ob-prog-i'+(i<=step?' on':'')}>
            <span>{i<step ? <Icon n="check" s={14}/> : i+1}</span>{s}
          </div>
        ))}
      </div>

      <div className="ob-body fade" key={step}>
        {step===0 && (
          <div className="ob-card wide">
            <div className="eyebrow t-brand">Cara kerja Selaras</div>
            <h2 className="serif ob-h">Tiga langkah, dari tumpukan pelamar ke shortlist yang yakin.</h2>
            <p className="muted ob-lead">Selaras menyaring kandidat dengan tes psikometri tervalidasi, lalu mengurutkan mereka dari yang paling cocok dengan perannya. Kamu fokus interview yang sedikit dan tepat.</p>
            <div className="howgrid">
              <HowStep n="1" icon="briefcase" title="Buat lowongan" body="Tempel job description. AI merekomendasikan paket tes yang paling prediktif untuk peran itu."/>
              <HowStep n="2" icon="wa" title="Sebar lewat WhatsApp" body="Kandidat terima link, kerjakan tes ±12 menit dari HP. Tanpa install, tanpa akun."/>
              <HowStep n="3" icon="trend" title="Terima ranking & laporan" body="Kandidat otomatis terurut dari paling cocok. Buka laporan mendalam saat kamu siap."/>
            </div>
          </div>
        )}
        {step===1 && (
          <div className="ob-card">
            <div className="eyebrow t-brand">Profil bisnis</div>
            <h2 className="serif ob-h">Sedikit tentang bisnismu.</h2>
            <p className="muted ob-lead">Supaya rekomendasi tes lebih pas. Bisa diubah kapan saja.</p>
            <label className="label" style={{marginTop:18}}>Nama bisnis</label>
            <input className="field" defaultValue="The Ubud Villa"/>
            <label className="label" style={{marginTop:16}}>Industri</label>
            <div className="row wrap gap8" style={{marginTop:2}}>
              {['Hospitality','Ritel','F&B','Office','Manufaktur','Lainnya'].map(x=>(
                <span key={x} className={'chip'+(industry===x?' act':'')} onClick={()=>setIndustry(x)}>{x}</span>
              ))}
            </div>
            <label className="label" style={{marginTop:16}}>Jumlah karyawan</label>
            <div className="row wrap gap8" style={{marginTop:2}}>
              {['1–10','11–50','51–200','200+'].map(x=>(
                <span key={x} className={'chip'+(size===x?' act':'')} onClick={()=>setSize(x)}>{x}</span>
              ))}
            </div>
          </div>
        )}
        {step===2 && <BusinessInterview/>}
        {step===3 && (
          <div className="ob-card">
            <div className="eyebrow t-brand">Cara skor bekerja</div>
            <h2 className="serif ob-h">Satu angka, tiga dimensi.</h2>
            <p className="muted ob-lead">Skor fit (0–100) adalah gabungan berbobot dari beberapa tes. Bobot disesuaikan dengan peran — bukan rata-rata buta.</p>
            <div className="scoredemo">
              <div className="sd-badge">
                <div className="sd-num serif">88</div>
                <div className="sd-lbl">Skor fit</div>
              </div>
              <div className="scoredemo-rows">
                {[['Situational Judgment',40],['Kepribadian (Big Five)',30],['Kemampuan kognitif',30]].map(([l,w])=>(
                  <div className="weightrow" key={l}>
                    <span className="wlabel">{l}</span>
                    <div className="bar"><i style={{width:w+'%',background:'var(--brand-500)'}}></i></div>
                    <b className="tnum">{w}%</b>
                  </div>
                ))}
              </div>
            </div>
            <div className="ob-callout"><Icon n="info" s={18}/><span>Tes yang lemah memprediksi performa (mis. DISC) sengaja diberi bobot rendah. Skor & ranking selalu <b>gratis</b>.</span></div>
          </div>
        )}
        {step===4 && (
          <div className="ob-card">
            <div className="eyebrow t-brand">Soal kredit</div>
            <h2 className="serif ob-h">Bayar hanya untuk yang kamu buka.</h2>
            <p className="muted ob-lead">Menyebar tes dan melihat ranking tidak menghabiskan kredit. Kredit hanya dipakai saat kamu membuka laporan analis lengkap seorang kandidat.</p>
            <div className="creditgrid">
              <div className="creditcard free"><Icon n="checkCircle" s={22}/><div className="cc-t">Gratis selamanya</div><ul><li>Sebar tes ke kandidat</li><li>Skor fit & ranking</li><li>Rekomendasi tes AI</li></ul></div>
              <div className="creditcard paid"><Icon n="zap" s={22}/><div className="cc-t">1 kredit / laporan</div><ul><li>Interpretasi tiap tes</li><li>Kekuatan & catatan risiko</li><li>Pertanyaan interview</li><li>Akses selamanya, sekali buka</li></ul></div>
            </div>
            <div className="ob-callout"><Icon n="sparkles" s={18}/><span>Kamu mulai dengan <b>10 kredit gratis</b>. Cukup untuk membuka 10 laporan kandidat terbaikmu.</span></div>
          </div>
        )}
      </div>

      <div className="ob-nav">
        <div>{step>0 && <button className="btn btn-ghost" onClick={()=>setStep(step-1)}><Icon n="chevL" s={16}/> Kembali</button>}</div>
        <button className="btn btn-primary btn-lg" onClick={next}>
          {step===steps.length-1 ? <>Mulai pakai Selaras <Icon n="arrowR" s={17}/></> : <>Lanjut <Icon n="arrowR" s={17}/></>}
        </button>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen, SignupScreen, Onboarding });