/* ============================================================
   SELARAS — dashboard, candidate detail, compare
   ============================================================ */

function StatCard({v, l, tone, icon}){
  return (
    <div className="statcard">
      <div className="statcard-ic"><Icon n={icon} s={18}/></div>
      <div className="statcard-v tnum" style={tone?{color:`var(--${tone})`}:{}}>{v}</div>
      <div className="statcard-l">{l}</div>
    </div>
  );
}

function FitBar({score}){
  const t=fitTone(score);
  return <div className="fitbar"><div className={'fitbar-n tnum t-'+t}>{score}</div><div className="bar grow"><i style={{width:score+'%',background:barColor(t)}}></i></div></div>;
}
function MiniBars({dims}){
  return <div className="mini">{dims.map((d,i)=><i key={i} style={{height:Math.max(20,d)+'%',background:d>=58?(d>=75?'var(--hi-bar)':'var(--mid-bar)'):'var(--lo-bar)'}}></i>)}</div>;
}

/* ---------------- DASHBOARD ---------------- */
const REJECT_MSG = `Halo {nama}, terima kasih sudah meluangkan waktu mengikuti proses seleksi Resepsionis di The Ubud Villa.

Untuk kesempatan kali ini, kami memutuskan melanjutkan dengan kandidat lain yang lebih sesuai dengan kebutuhan tim saat ini. Keputusan ini sama sekali tidak mengurangi apresiasi kami atas usaha dan waktumu.

Data dan hasil tesmu tetap kami simpan. Kami akan menghubungimu lebih dulu bila ada posisi yang cocok ke depannya. Sukses selalu untukmu! 🌿

— Tim The Ubud Villa`;

function DecisionPill({d}){
  if(d==='shortlist') return <span className="pill p-hi"><Icon n="check" s={12}/> Lanjut</span>;
  if(d==='reject') return <span className="pill pill-reject">Ditolak</span>;
  return null;
}
function SelectBox({on,onToggle}){
  return <button className={'selbox'+(on?' on':'')} onClick={e=>{e.stopPropagation();onToggle();}} aria-label="pilih kandidat">{on&&<Icon n="check" s={13}/>}</button>;
}

function Dashboard({nav, openCandidate, empty, decisions={}, decide=()=>{}, showToast=()=>{}}){
  const [view,setView]=React.useState('tabel');
  const [sel,setSel]=React.useState([]);
  const [modal,setModal]=React.useState(null);
  const toggle=id=>setSel(s=>s.includes(id)?s.filter(x=>x!==id):[...s,id]);
  const pending=CANDIDATES.filter(c=>!decisions[c.id]);
  const confirm=(mode)=>{
    const updates={};
    if(mode==='reject'){ sel.forEach(id=>updates[id]='reject'); }
    else { sel.forEach(id=>updates[id]='shortlist'); pending.filter(c=>!sel.includes(c.id)).forEach(c=>updates[c.id]='reject'); }
    decide(updates);
    const rc=Object.values(updates).filter(v=>v==='reject').length;
    const sc=Object.values(updates).filter(v=>v==='shortlist').length;
    setModal(null); setSel([]);
    showToast(mode==='keep' ? `${sc} kandidat dilanjutkan · ${rc} lainnya dikabari dengan sopan` : `${rc} kandidat ditolak — pesan baik terkirim`);
  };

  if(empty){
    return (
      <>
        <PageHead eyebrow="The Ubud Villa › Resepsionis Hotel" title="Dashboard kandidat"/>
        <div className="emptystate">
          <div className="empty-ic"><Icon n="wa" s={30}/></div>
          <h3 className="serif">Tes sudah disebar — menunggu kandidat</h3>
          <p>42 link tes terkirim lewat WhatsApp. Begitu kandidat mulai menyelesaikan tes, mereka akan otomatis muncul di sini, terurut dari yang paling cocok.</p>
          <div className="row gap10 center wrap">
            <button className="btn btn-ghost"><Icon n="refresh" s={16}/> Cek pembaruan</button>
            <button className="btn btn-primary" onClick={()=>nav('candidate')}><Icon n="phone" s={16}/> Lihat sisi kandidat</button>
          </div>
          <div className="empty-waiting">
            <div className="row gap10"><span className="ping"></span><span className="note"><b style={{color:'var(--ink)'}}>0 dari 42</b> sudah menyelesaikan tes</span></div>
          </div>
        </div>
      </>
    );
  }

  return (
    <>
      <PageHead eyebrow="The Ubud Villa › Resepsionis Hotel" title="Dashboard kandidat"
        sub="Diurutkan otomatis dari paling cocok ke paling tidak cocok."
        actions={<><button className="btn btn-ghost btn-sm" onClick={()=>nav('compare')}><Icon n="compare" s={16}/> Bandingkan</button><button className="btn btn-soft btn-sm"><Icon n="download" s={16}/> Ekspor</button></>}/>

      <div className="statgrid">
        <StatCard v="42" l="Link terkirim (WhatsApp)" icon="send"/>
        <StatCard v={<>31 <small>/42</small></>} l="Sudah menyelesaikan tes" icon="checkCircle"/>
        <StatCard v="9" l="Kandidat fit tinggi" tone="hi" icon="trend"/>
        <StatCard v="~2 hari" l="Hemat waktu screening" icon="clock"/>
      </div>

      <div className="row between wrap" style={{margin:'4px 0 16px',gap:12}}>
        <div className="note">Menampilkan <b style={{color:'var(--ink)'}}>31 kandidat</b> selesai</div>
        <div className="segctl">
          {[['tabel','Tabel','list'],['kartu','Kartu','grid'],['papan','Papan','layers']].map(([k,l,ic])=>(
            <button key={k} className={view===k?'on':''} onClick={()=>setView(k)}><Icon n={ic} s={15}/> {l}</button>
          ))}
        </div>
      </div>

      {view==='tabel' && <DashTable openCandidate={openCandidate} decisions={decisions} sel={sel} toggle={toggle}/>}
      {view==='kartu' && <DashCards openCandidate={openCandidate} decisions={decisions} sel={sel} toggle={toggle}/>}
      {view==='papan' && <DashBoard openCandidate={openCandidate} decisions={decisions}/>}

      <div className="note" style={{marginTop:16,textAlign:'center'}}>Centang kandidat untuk memutuskan, lalu lanjutkan terpilih atau tolak otomatis. Klik baris untuk lihat laporan.</div>

      {sel.length>0 && (
        <div className="actionbar fade">
          <div className="row gap10"><span className="ab-count">{sel.length} dipilih</span><button className="btn btn-quiet btn-sm" onClick={()=>setSel([])}>Bersihkan</button></div>
          <div className="row gap8 wrap">
            <button className="btn btn-ghost btn-sm" onClick={()=>setModal('reject')}><Icon n="x" s={15}/> Tolak yang dipilih</button>
            <button className="btn btn-primary btn-sm" onClick={()=>setModal('keep')}><Icon n="check" s={15}/> Lanjutkan terpilih, tolak sisanya</button>
          </div>
        </div>
      )}
      {modal && <RejectModal mode={modal} sel={sel} decisions={decisions} onConfirm={()=>confirm(modal)} onClose={()=>setModal(null)}/>}
    </>
  );
}

function DashTable({openCandidate, decisions={}, sel=[], toggle}){
  return (
    <div className="card ranklist">
      <div className="rl-head">
        <div style={{textAlign:'center'}}>#</div><div>Kandidat</div><div>Skor fit</div><div className="hide-sm">Dimensi</div><div style={{textAlign:'right'}}>Status</div>
      </div>
      {CANDIDATES.map((c,i)=>{
        const t=fitTone(c.score); const d=decisions[c.id];
        return (
          <div className={'candrow'+(d==='reject'?' is-rejected':'')+(sel.includes(c.id)?' is-sel':'')} key={c.id} onClick={()=>openCandidate(c.id)}>
            <div className="rank tnum">{i+1}</div>
            <div className="who">{!d&&<SelectBox on={sel.includes(c.id)} onToggle={()=>toggle(c.id)}/>}<Avatar name={c.name} color={c.color}/><div><div className="who-nm">{c.name}</div><div className="note">Selesai · {c.mins} menit</div></div></div>
            <FitBar score={c.score}/>
            <div className="hide-sm"><MiniBars dims={c.dims}/></div>
            <div style={{justifySelf:'end'}}>{d?<DecisionPill d={d}/>:<span className={'pill p-'+t}>{fitLabel(c.score)}</span>}</div>
          </div>
        );
      })}
    </div>
  );
}

function DashCards({openCandidate, decisions={}, sel=[], toggle}){
  return (
    <div className="candcards">
      {CANDIDATES.map((c,i)=>{
        const t=fitTone(c.score); const d=decisions[c.id];
        return (
          <div className={'candcard'+(d==='reject'?' is-rejected':'')+(sel.includes(c.id)?' is-sel':'')} key={c.id} onClick={()=>openCandidate(c.id)}>
            <div className="row between">
              <div className="row gap10">{!d&&<SelectBox on={sel.includes(c.id)} onToggle={()=>toggle(c.id)}/>}<Avatar name={c.name} color={c.color} size={42}/><div><div className="who-nm">{c.name}</div><div className="note">#{i+1} · {c.mins} mnt</div></div></div>
              <div className={'candcard-score serif t-'+t}>{c.score}</div>
            </div>
            <div className="candcard-sub">{c.sub}</div>
            <div className="bar" style={{margin:'12px 0 12px'}}><i style={{width:c.score+'%',background:barColor(t)}}></i></div>
            <div className="row between">{d?<DecisionPill d={d}/>:<span className={'pill p-'+t}>{fitLabel(c.score)}</span>}<span className="link" style={{fontSize:13}}>Lihat →</span></div>
          </div>
        );
      })}
    </div>
  );
}

function DashBoard({openCandidate, decisions={}}){
  const cols=[['Fit tinggi','hi',c=>c.score>=75],['Fit sedang','mid',c=>c.score>=58&&c.score<75],['Fit rendah','lo',c=>c.score<58]];
  return (
    <div className="board">
      {cols.map(([title,tone,fn])=>{
        const list=CANDIDATES.filter(fn);
        return (
          <div className="boardcol" key={tone}>
            <div className="boardcol-h"><span className={'dot'} style={{background:`var(--${tone})`}}></span>{title}<span className="boardcol-n">{list.length}</span></div>
            {list.map(c=>{ const d=decisions[c.id]; return (
              <div className={'boardcard'+(d==='reject'?' is-rejected':'')} key={c.id} onClick={()=>openCandidate(c.id)}>
                <div className="row gap8"><Avatar name={c.name} color={c.color} size={32}/><div className="grow"><div className="who-nm" style={{fontSize:13.5}}>{c.name}</div><div className="note">{c.mins} mnt</div></div><b className={'serif t-'+tone} style={{fontSize:20}}>{c.score}</b></div>
                <div className="row between" style={{marginTop:9}}><div className="boardcard-sub" style={{margin:0}}>{c.sub}</div>{d&&<DecisionPill d={d}/>}</div>
              </div>
            );})}
            {list.length===0 && <div className="boardempty">—</div>}
          </div>
        );
      })}
    </div>
  );
}

function RejectModal({mode, sel, decisions={}, onConfirm, onClose}){
  const pending=CANDIDATES.filter(c=>!decisions[c.id]);
  const advancing = mode==='keep' ? CANDIDATES.filter(c=>sel.includes(c.id)) : [];
  const rejecting = mode==='keep' ? pending.filter(c=>!sel.includes(c.id)) : CANDIDATES.filter(c=>sel.includes(c.id));
  const [send,setSend]=React.useState(true);
  const [msg,setMsg]=React.useState(REJECT_MSG);
  return ReactDOM.createPortal((
    <div className="modal-wrap" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-hd">
          <div><div className="eyebrow">Konfirmasi keputusan</div><h3 className="serif">{mode==='keep'?'Lanjutkan pilihanmu, tolak sisanya':'Tolak kandidat terpilih'}</h3></div>
          <button className="iconbtn" onClick={onClose}><Icon n="x" s={18}/></button>
        </div>
        <div className="modal-bd">
          {advancing.length>0 && (
            <div className="decide-group">
              <div className="dg-h t-hi"><Icon n="checkCircle" s={16}/> Lanjut ke interview · {advancing.length}</div>
              <div className="dg-list">{advancing.map(c=><span className="dg-chip" key={c.id}><Avatar name={c.name} color={c.color} size={22} fontSize={10}/>{c.name}</span>)}</div>
            </div>
          )}
          <div className="decide-group">
            <div className="dg-h t-lo"><Icon n="x" s={16}/> Tolak otomatis · {rejecting.length}</div>
            <div className="dg-list">{rejecting.map(c=><span className="dg-chip is-rej" key={c.id}><Avatar name={c.name} color={c.color} size={22} fontSize={10}/>{c.name}</span>)}</div>
          </div>
          <div className="msg-toggle">
            <div className="grow"><b>Kirim pesan penolakan yang sopan</b><span className="note" style={{display:'block'}}>Lewat WhatsApp yang sama. Nama kandidat terisi otomatis.</span></div>
            <button className={'tog'+(send?'':' off')} onClick={()=>setSend(!send)} aria-label="toggle"></button>
          </div>
          {send && (
            <div className="msg-edit">
              <div className="msg-wa"><Icon n="wa" s={15}/><textarea value={msg} onChange={e=>setMsg(e.target.value)} rows="8"></textarea></div>
              <div className="note" style={{marginTop:7,display:'flex',gap:5,alignItems:'flex-start'}}><Icon n="info" s={13}/><span>{'{nama}'} otomatis diganti nama tiap kandidat saat dikirim.</span></div>
            </div>
          )}
        </div>
        <div className="modal-ft">
          <button className="btn btn-ghost" onClick={onClose}>Batal</button>
          <button className="btn btn-primary" onClick={onConfirm}>{send?<><Icon n="send" s={16}/> Konfirmasi & kabari kandidat</>:<>Konfirmasi keputusan</>}</button>
        </div>
      </div>
    </div>
  ), document.body);
}

/* ---------------- CANDIDATE DETAIL ---------------- */
function DetailScreen({candId, unlocked, unlock, nav, decisions={}, decide=()=>{}, showToast=()=>{}}){
  const c = CANDIDATES.find(x=>x.id===candId) || CANDIDATES[0];
  const decision = decisions[c.id];
  const rank = CANDIDATES.findIndex(x=>x.id===c.id)+1;
  const t=fitTone(c.score);
  const pct = c.score;
  const R = REPORTS[c.id] || REPORTS.pa;

  return (
    <>
      <button className="backbtn" onClick={()=>nav('dashboard')}><Icon n="chevL" s={16}/> Kembali ke dashboard</button>
      <div className="detail">
        {/* scorecard */}
        <div className="scorecard">
          <Avatar name={c.name} color={c.color} size={66} fontSize={23}/>
          <div className="sc-nm">{c.name}</div>
          <div className="sc-role">Resepsionis Hotel · Peringkat #{rank} dari 31</div>
          <div className="donut" style={{background:`conic-gradient(${barColor(t)} ${pct}%, #ECECE2 0)`}}>
            <div className="donut-in"><b className="serif tnum">{c.score}</b><span>Skor fit</span></div>
          </div>
          <div className={'sc-verdict p-'+t} style={{justifyContent:'center'}}>
            {t==='hi'?<><Icon n="check" s={15}/> Sangat direkomendasikan</>:t==='mid'?<>Pertimbangkan</>:<>Risiko tinggi</>}
          </div>
          <div className="note" style={{marginTop:12,textAlign:'center'}}>Skor & ranking gratis. Laporan mendalamnya berbayar.</div>
        </div>

        {/* body */}
        {!unlocked ? (
          <div className="lockwrap">
            <div className="blurred">
              <div className="block exec"><h4><Icon n="sparkles" s={15}/> Ringkasan analis</h4><p dangerouslySetInnerHTML={{__html:R.summary}}></p></div>
              <div className="block"><h4>Interpretasi per tes</h4><div className="tparse"><div className="th"><div className="tn">{R.tests[0].name}</div><div className={'sc t-'+fitTone(R.tests[0].score)}>{R.tests[0].score}</div></div><div className="it" dangerouslySetInnerHTML={{__html:R.tests[0].it}}></div></div></div>
            </div>
            <div className="paywall">
              <div className="paycard">
                <div className="pay-ic"><Icon n="lock" s={22}/></div>
                <h3 className="serif">Buka laporan lengkap</h3>
                <p>Analisa mendalam ala talent acquisition expert untuk <b>{c.name}</b>. Skor dan ranking sudah gratis — ini yang menjelaskan kenapa.</p>
                <div className="payincl">
                  {['Interpretasi tiap tes, bukan cuma angka','Kekuatan utama & potensi kurang','Apa yang perlu dia tingkatkan','Ekspektasi 90 hari pertama','Pertanyaan interview yang disarankan'].map(x=>(
                    <div key={x}><Icon n="check" s={16}/> {x}</div>
                  ))}
                </div>
                <button className="btn btn-primary btn-block btn-lg" onClick={unlock}><Icon n="zap" s={17}/> Buka laporan · 1 kredit</button>
                <div className="note" style={{marginTop:10}}>Sisa 173 kredit · sekali buka, akses selamanya</div>
              </div>
            </div>
          </div>
        ) : <FullReport c={c} rank={rank} nav={nav} decision={decision} decide={decide} showToast={showToast}/>}
      </div>
    </>
  );
}

function Facet({l,v}){const t=fitTone(v);return(<div className="facet"><div className="fl">{l}</div><div className="fb bar"><i style={{width:v+'%',background:barColor(t)}}></i></div><div className="fv tnum">{v}</div></div>);}

function FullReport({c, rank, nav, decision, decide=()=>{}, showToast=()=>{}}){
  const R = REPORTS[c.id] || REPORTS.pa;
  const t = fitTone(c.score);
  const softMap={hi:{background:'var(--hi-soft)',color:'var(--hi)'},mid:{background:'var(--mid-soft)',color:'var(--mid)'},lo:{background:'var(--lo-soft)',color:'var(--lo)'}};
  const riskTone=l=>l==='AMAN'?'hi':l==='TINGGI'?'lo':'mid';
  const reject=()=>{decide({[c.id]:'reject'});showToast('Kandidat ditolak \u2014 pesan baik terkirim');nav('dashboard');};
  const advance=()=>{decide({[c.id]:'shortlist'});showToast(c.name+' dilanjutkan ke interview');nav('dashboard');};
  return (
    <div className="report fade">
      <div className="rpt-banner">
        <Avatar name={c.name} color={c.color} size={52} fontSize={18}/>
        <div className="grow"><div className="who-nm" style={{fontSize:17}}>{c.name}</div><div className="note">Resepsionis Hotel · Peringkat #{rank} dari 31 · selesai {c.mins} menit</div></div>
        <span className="score-chip" style={softMap[t]}>{c.score} · {R.verdict}</span>
        <button className="btn btn-wa btn-sm"><Icon n="wa" s={16}/> Hubungi via WA</button>
      </div>

      <div className="rpt-grid">
        <div>
          <div className="block exec">
            <h4><Icon n="sparkles" s={15}/> Ringkasan analis</h4>
            <p dangerouslySetInnerHTML={{__html:R.summary}}></p>
          </div>
          <div className="block">
            <h4>Interpretasi per tes</h4>
            {R.tests.map((tt,ti)=>(
              <div className="tparse" key={ti}>
                <div className="th"><div className="tn">{tt.name} <span className="badge b-weight">{tt.weight}</span></div><div className={'sc tnum t-'+fitTone(tt.score)}>{tt.score}</div></div>
                {tt.facets && <div className="facets">{tt.facets.map(f=><Facet key={f[0]} l={f[0]} v={f[1]}/>)}</div>}
                <div className="it" dangerouslySetInnerHTML={{__html:tt.it}}></div>
              </div>
            ))}
          </div>
          <div className="block">
            <h4>Pertanyaan interview yang disarankan</h4>
            {R.qs.map((qq,qi)=>(<div className="qa" key={qi}><div className="q">{qq.q}</div><div className="qa-why">{qq.why}</div></div>))}
          </div>
        </div>

        <div>
          <div className="block">
            <h4>Kekuatan utama</h4>
            {R.strengths.map(x=><div className="li good" key={x}><Icon n="arrowUp" s={15}/><div>{x}</div></div>)}
          </div>
          <div className="block">
            <h4>Yang perlu diperhatikan</h4>
            {R.watch.map(x=><div className="li warn" key={x}><Icon n="alert" s={15}/><div>{x}</div></div>)}
          </div>
          <div className="block">
            <h4>Apa yang perlu dia tingkatkan</h4>
            {R.improve.map(x=><div className="li up" key={x}><Icon n="trend" s={15}/><div>{x}</div></div>)}
          </div>
          <div className="block">
            <h4>Ekspektasi 90 hari pertama</h4>
            <p>{R.expect}</p>
          </div>
          <div className="block">
            <h4>Catatan risiko</h4>
            {R.risks.map((rr,rii)=>{const rt=riskTone(rr.lvl);return <div className="riskrow" key={rii}><span className="badge" style={softMap[rt]}>{rr.lvl}</span><div dangerouslySetInnerHTML={{__html:rr.text}}></div></div>;})}
          </div>
        </div>
      </div>
      <div className="report-actions">
        <div className="ra-info">{decision==='shortlist'?<span className="pill p-hi"><Icon n="check" s={12}/> Sudah dilanjutkan</span>:decision==='reject'?<span className="pill pill-reject">Sudah ditolak</span>:<span className="note">Putuskan kandidat ini:</span>}</div>
        <div className="row gap10">
          <button className="btn btn-ghost" onClick={reject}><Icon n="x" s={16}/> Tolak dengan sopan</button>
          <button className="btn btn-primary" onClick={advance}><Icon n="check" s={16}/> Lanjutkan ke interview</button>
        </div>
      </div>
      <div className="note" style={{marginTop:16,textAlign:'center'}}>Laporan di-generate dari skor tes asli kandidat. Alat bantu prioritas, bukan vonis — keputusan akhir tetap di tangan HR.</div>
    </div>
  );
}

/* ---------------- COMPARE ---------------- */
function Compare({nav}){
  const [sel,setSel]=React.useState(['pa','kd','ms']);
  const toggle=id=>setSel(s=>s.includes(id)?s.filter(x=>x!==id):(s.length<4?[...s,id]:s));
  const chosen=CANDIDATES.filter(c=>sel.includes(c.id));
  const rows=DIM_NAMES;
  return (
    <>
      <PageHead eyebrow="Resepsionis Hotel" title="Bandingkan kandidat"
        sub="Pilih hingga 4 kandidat untuk disandingkan berdampingan."
        actions={<button className="btn btn-ghost btn-sm" onClick={()=>nav('dashboard')}><Icon n="chevL" s={15}/> Dashboard</button>}/>
      <div className="cmp-picker">
        {CANDIDATES.map(c=>(
          <button key={c.id} className={'cmp-chip'+(sel.includes(c.id)?' on':'')} onClick={()=>toggle(c.id)}>
            <Avatar name={c.name} color={c.color} size={26} fontSize={11}/>{c.name.split(' ')[0]} {c.name.split(' ')[1]||''}
            {sel.includes(c.id)&&<Icon n="check" s={14}/>}
          </button>
        ))}
      </div>
      <div className="card cmp-table" style={{overflowX:'auto'}}>
        <div className="cmp-grid" style={{gridTemplateColumns:`200px repeat(${chosen.length},1fr)`}}>
          <div className="cmp-cell cmp-corner">Kriteria</div>
          {chosen.map(c=>(
            <div className="cmp-cell cmp-head" key={c.id}>
              <Avatar name={c.name} color={c.color} size={46} fontSize={16}/>
              <div className="who-nm" style={{marginTop:8}}>{c.name}</div>
              <div className={'cmp-score serif t-'+fitTone(c.score)}>{c.score}</div>
              <span className={'pill p-'+fitTone(c.score)}>{fitLabel(c.score)}</span>
            </div>
          ))}
          {rows.map((r,ri)=>(
            <React.Fragment key={r}>
              <div className="cmp-cell cmp-lbl">{r}</div>
              {chosen.map(c=>{
                const v=c.dims[ri];const best=Math.max(...chosen.map(x=>x.dims[ri]));
                return <div className={'cmp-cell cmp-val'+(v===best?' best':'')} key={c.id}><div className="bar" style={{width:'100%'}}><i style={{width:v+'%',background:barColor(fitTone(v))}}></i></div><span className="tnum">{v}{v===best&&<Icon n="star" s={12}/>}</span></div>;
              })}
            </React.Fragment>
          ))}
          <div className="cmp-cell cmp-lbl">Waktu pengerjaan</div>
          {chosen.map(c=><div className="cmp-cell cmp-val" key={c.id}><span className="tnum">{c.mins} menit</span></div>)}
          <div className="cmp-cell cmp-lbl">Rekomendasi</div>
          {chosen.map(c=><div className="cmp-cell" key={c.id}><span className="note" style={{textAlign:'center',display:'block'}}>{c.sub}</span></div>)}
        </div>
      </div>
      <div className="note" style={{marginTop:14,textAlign:'center'}}><Icon n="star" s={12}/> menandai skor tertinggi per kriteria di antara yang dibandingkan.</div>
    </>
  );
}

Object.assign(window, { Dashboard, DetailScreen, Compare, StatCard });