/* ============================================================
   SELARAS — candidate side (mobile): intro, test, result
   ============================================================ */

function Phone({children}){
  return (
    <div className="phoneframe">
      <div className="phone-notch"></div>
      <div className="phone-screen">{children}</div>
    </div>
  );
}

function CandTop({title, sub, prog, progLabel, onBack}){
  return (
    <div className="ct-top">
      <div className="ct-bar">
        {onBack ? <button className="ct-back" onClick={onBack}><Icon n="chevL" s={18}/></button> : <div className="ct-emp"><Mark s={16} color="#fff"/> The Ubud Villa</div>}
        <div className="ct-secure"><Icon n="shield" s={14}/> Aman</div>
      </div>
      <h4>{title}</h4>
      {sub && <div className="ct-sub">{sub}</div>}
      {prog!=null && <><div className="ct-prog"><i style={{width:prog+'%'}}></i></div><div className="ct-prog-l">{progLabel}</div></>}
    </div>
  );
}

function CandIntro({onStart}){
  return (
    <>
      <CandTop title="Tes Resepsionis Hotel" sub="The Ubud Villa"/>
      <div className="cand-bd">
        <p className="cand-hi">Halo Putu 👋</p>
        <p className="cand-lead">Terima kasih sudah melamar. Sebelum interview, kami ingin mengenal cara kerjamu lewat tes singkat ini. Tidak ada jawaban benar-salah mutlak — jawab apa adanya, ya.</p>
        <div className="cand-meta">
          <div><Icon n="clock" s={18}/><div><b>±12 menit</b><span>Sekali duduk</span></div></div>
          <div><Icon n="layers" s={18}/><div><b>3 bagian</b><span>Situasi · sifat · logika</span></div></div>
          <div><Icon n="phone" s={18}/><div><b>Dari HP</b><span>Tanpa install</span></div></div>
        </div>
        <div className="cand-rules">
          <div className="cand-rules-h">Sebelum mulai</div>
          <div className="cand-rule"><Icon n="check" s={16}/> Cari tempat tenang, koneksi stabil.</div>
          <div className="cand-rule"><Icon n="check" s={16}/> Beberapa bagian ada batas waktu — santai saja.</div>
          <div className="cand-rule"><Icon n="shield" s={16}/> Jangan pindah tab; kami mendeteksinya untuk menjaga keadilan.</div>
          <div className="cand-rule"><Icon n="lock" s={16}/> Jawabanmu hanya dipakai untuk lamaran ini.</div>
        </div>
      </div>
      <div className="cand-foot">
        <button className="btn btn-primary btn-block btn-lg" onClick={onStart}>Mulai tes <Icon n="arrowR" s={17}/></button>
      </div>
    </>
  );
}

function CandTest({variant, onNext, onBack}){
  const [pick,setPick]=React.useState(0);
  const [scale,setScale]=React.useState(4);
  const q=QUESTIONS[0];
  return (
    <>
      <CandTop title="Tes Resepsionis Hotel" prog={60} progLabel="Bagian 2 dari 3 · soal 6 / 10" onBack={onBack}/>
      <div className="cand-bd">
        <span className="q-tag">{q.tag}</span>
        {variant==='kartu' && (
          <>
            <div className="q-txt">{q.q}</div>
            {q.opts.map((o,i)=>(
              <button key={i} className={'opt'+(pick===i?' pick':'')} onClick={()=>setPick(i)}>
                <span className="opt-k">{String.fromCharCode(65+i)}</span><span>{o}</span>
              </button>
            ))}
          </>
        )}
        {variant==='skala' && (
          <>
            <div className="q-txt">Saya tetap tenang dan ramah meski menghadapi tamu yang marah.</div>
            <div className="scale-lbl"><span>Sangat tidak setuju</span><span>Sangat setuju</span></div>
            <div className="scale">
              {[1,2,3,4,5].map(n=>(
                <button key={n} className={'scale-dot'+(scale===n?' on':'')} onClick={()=>setScale(n)} style={{'--i':n}}>{scale===n&&<Icon n="check" s={16}/>}</button>
              ))}
            </div>
            <div className="scale-help">Geser sesuai yang paling menggambarkan dirimu.</div>
          </>
        )}
        {variant==='fokus' && (
          <>
            <div className="q-txt big">{q.q}</div>
            <div className="opt-min-wrap">
              {q.opts.map((o,i)=>(
                <button key={i} className={'opt-min'+(pick===i?' pick':'')} onClick={()=>setPick(i)}>{o}</button>
              ))}
            </div>
          </>
        )}
      </div>
      <div className="cand-foot">
        <button className="btn btn-primary btn-block btn-lg" onClick={onNext}>Lanjut <Icon n="arrowR" s={17}/></button>
        <div className="cand-foot-note"><Icon n="clock" s={13}/> Sisa waktu bagian ini 4:12</div>
      </div>
    </>
  );
}

function CandDone(){
  return (
    <>
      <div className="cand-done-top">
        <div className="done-burst"><Icon n="check" s={34}/></div>
      </div>
      <div className="cand-bd center-text">
        <h3 className="serif">Selesai — terima kasih, Putu! 🤍</h3>
        <p className="cand-lead">Jawabanmu sudah kami terima. Kamu mengerjakan semuanya dalam <b>11 menit</b>.</p>
        <div className="done-next">
          <div className="done-next-h">Apa selanjutnya?</div>
          <div className="done-step"><span className="dnum">1</span><span>Tim The Ubud Villa meninjau hasilmu bersama pelamar lain.</span></div>
          <div className="done-step"><span className="dnum">2</span><span>Kalau cocok, kamu dihubungi untuk interview.</span></div>
          <div className="done-step"><span className="dnum">3</span><span>Kabar berikutnya datang lewat <b>WhatsApp</b> yang sama.</span></div>
        </div>
        <div className="done-quote">“Rekrut yang selaras dengan perannya.”</div>
      </div>
      <div className="cand-foot">
        <div className="cand-foot-note" style={{justifyContent:'center'}}><Icon n="lock" s={13}/> Kamu boleh menutup halaman ini.</div>
      </div>
    </>
  );
}

function CandidatePreview({nav}){
  const [step,setStep]=React.useState('intro');
  const [variant,setVariant]=React.useState('kartu');
  const screen = step==='intro' ? <CandIntro onStart={()=>setStep('test')}/>
    : step==='test' ? <CandTest variant={variant} onNext={()=>setStep('done')} onBack={()=>setStep('intro')}/>
    : <CandDone/>;

  return (
    <>
      <PageHead eyebrow="Pratinjau" title="Pengalaman dari sisi kandidat"
        sub="Yang kandidat terima dan kerjakan dari HP-nya. Tanpa install, tanpa akun — cukup buka link dari WhatsApp."/>
      <div className="cand-layout">
        <div className="cand-aside">
          <div className="card card-pad">
            <div className="row gap8" style={{marginBottom:12}}><Icon n="wa" s={18} style={{color:'var(--wa)'}}/><b>Pesan WhatsApp</b></div>
            <div className="wa-bubble">
              Halo Putu 👋 Terima kasih sudah melamar posisi <b>Resepsionis di The Ubud Villa</b>. Mohon selesaikan tes singkat ini (±12 menit) sebelum tahap interview ya:
              <span className="wa-link">selaras.id/t/ubud-villa/8kf2</span>
              Bisa dikerjakan dari HP, kapan saja sebelum Jumat. 🌿
            </div>
            <div className="wa-time">Terkirim 09:24 ✓✓</div>
          </div>

          <div className="card card-pad">
            <div className="row gap8" style={{marginBottom:10}}><Icon n="shield" s={18} className="t-brand"/><b>Tahan-cheat</b></div>
            <div className="anti"><Icon n="check" s={15}/> Soal SJT tidak bisa di-google</div>
            <div className="anti"><Icon n="check" s={15}/> Tes kognitif diberi batas waktu</div>
            <div className="anti"><Icon n="check" s={15}/> Deteksi pindah tab & tempel teks</div>
          </div>

          <div className="varbox">
            <div className="eyebrow" style={{marginBottom:10}}>Pratinjau tampilan soal</div>
            <div className="segctl col-seg">
              {[['kartu','Pilihan kartu','grid'],['skala','Skala setuju','gauge'],['fokus','Fokus minimal','target']].map(([k,l,ic])=>(
                <button key={k} className={variant===k?'on':''} onClick={()=>{setVariant(k);setStep('test');}}><Icon n={ic} s={15}/> {l}</button>
              ))}
            </div>
            <div className="note" style={{marginTop:10}}>Tiga gaya soal yang bisa dipakai bergantung jenis tes.</div>
          </div>

          <div className="stepnav">
            {[['intro','Intro'],['test','Soal'],['done','Selesai']].map(([k,l])=>(
              <button key={k} className={'stepnav-b'+(step===k?' on':'')} onClick={()=>setStep(k)}>{l}</button>
            ))}
          </div>
        </div>

        <div className="cand-stage">
          <Phone key={step+variant}>{screen}</Phone>
        </div>
      </div>
    </>
  );
}

Object.assign(window, { CandidatePreview, Phone });