import { useState, useEffect, useMemo } from “react”;
import { RadarChart, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar, ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Cell } from “recharts”;
const PIN = “2026”;
const SEC = [
{ id:”A”, t:”Stress & Recovery”, st:”Kondisi 7 hari terakhir”, ic:”⚡”, c:”#06b6d4″, items:Array.from({length:15},(_,i)=>i+1), ta:”7 hari terakhir” },
{ id:”B”, t:”Burnout Risk”, st:”Risiko kelelahan mental”, ic:”🔥”, c:”#f97316″, items:Array.from({length:12},(_,i)=>i+16), ta:”2–4 minggu terakhir” },
{ id:”C”, t:”Coping & Mental Skills”, st:”Ketahanan mental”, ic:”🧠”, c:”#8b5cf6″, items:Array.from({length:16},(_,i)=>i+28), ta:”secara umum” },
{ id:”D”, t:”Competitive State”, st:”Kesiapan bertanding SAAT INI”, ic:”⚔️”, c:”#ef4444″, items:Array.from({length:12},(_,i)=>i+44), ta:”saat ini” },
{ id:”E”, t:”Motivasi”, st:”Kualitas motivasi”, ic:”🏆”, c:”#eab308″, items:Array.from({length:10},(_,i)=>i+56), ta:”secara umum” },
{ id:”F”, t:”Team Fit & Coachability”, st:”Kesiapan dalam sistem tim baru”, ic:”🤝”, c:”#10b981″, items:Array.from({length:14},(_,i)=>i+66), ta:”secara umum” },
{ id:”G”, t:”Situational Judgment”, st:”Respons skenario in-game”, ic:”🎮”, c:”#ec4899″, items:Array.from({length:8},(_,i)=>i+80), ta:”bayangkan situasi ini” },
{ id:”H”, t:”Refleksi Diri”, st:”Kejujuran & kesadaran diri”, ic:”🪞”, c:”#64748b”, items:Array.from({length:7},(_,i)=>i+88), ta:”” },
];
const Q = {
1:”Dalam 7 hari terakhir, kualitas tidur saya konsisten baik.”,
2:”Saya bangun dengan perasaan segar dan siap menjalani hari.”,
3:”Energi mental saya stabil dari pagi sampai malam.”,
4:”Saya mudah terdistraksi saat latihan karena pikiran di luar game.”,
5:”Walaupun jadwal padat, saya merasa recovery saya cukup.”,
6:”Saya sering merasa tegang atau gelisah tanpa alasan jelas.”,
7:”Saya mampu menjaga fokus panjang (3+ jam) saat scrim/turnamen.”,
8:”Saya merasa kelelahan menumpuk di minggu ini.”,
9:”Saya punya waktu untuk aktivitas rileks di luar game.”,
10:”Nafsu makan dan pola makan saya teratur minggu ini.”,
11:”Tubuh saya dalam kondisi fisik baik (tidak pegal, sakit kepala, mata berat).”,
12:”Mood saya stabil — tidak mudah marah atau sensitif.”,
13:”Saya merasa overwhelmed dengan tanggung jawab di luar game.”,
14:”Saya tidur minimal 7 jam per malam secara konsisten minggu ini.”,
15:”Secara keseluruhan, saya merasa siap perform di minggu ini.”,
16:”Akhir-akhir ini saya merasa ‘habis’ secara mental setelah latihan.”,
17:”Game ini masih terasa bermakna dan menyenangkan buat saya.”,
18:”Saya merasa performa saya stagnan dan itu menguras semangat.”,
19:”Ketika memikirkan turnamen besar, semangat saya justru naik.”,
20:”Saya tetap bangga dengan proses latihan harian saya.”,
21:”Saya mulai ‘cuek’ dengan hasil latihan/scrim.”,
22:”Usaha saya selama latihan tidak membuahkan hasil sepadan.”,
23:”Saya masih excited menemukan hal baru dalam game.”,
24:”Kadang saya berharap tidak perlu latihan hari ini.”,
25:”Saya merasa kontribusi saya dihargai oleh tim dan pelatih.”,
26:”Saya sering berpikir ‘buat apa semua ini’ saat latihan berat.”,
27:”Kalau bisa memilih ulang, saya tetap pilih jalan atlet esports.”,
28:”Kalau bikin mistake fatal, saya bisa reset dalam 1–2 menit.”,
29:”Di situasi high pressure, keputusan saya biasanya makin jernih.”,
30:”Saya punya rutinitas mental sebelum match (breathing, checklist).”,
31:”Saya bisa tetap koms jelas walau emosi naik.”,
32:”Saya bisa fokus pada next play, bukan kesalahan sebelumnya.”,
33:”Saya nyaman menerima feedback keras tanpa defensif.”,
34:”Saya bisa menjaga konsistensi walau zona/tempo game jelek.”,
35:”Saya cenderung ’tilt’ dan itu mempengaruhi aim/keputusan.”,
36:”Ketika plan A gagal, saya bisa switch ke plan B tanpa panik.”,
37:”Saya bisa mengisolasi match buruk dan tidak bawa ke match berikutnya.”,
38:”Saya punya self-talk positif untuk situasi sulit.”,
39:”Saya tetap perform optimal saat banyak orang menonton.”,
40:”Ketika trailing di klasemen, saya lebih termotivasi bukan cemas.”,
41:”Saya mampu mengenali tanda awal tilt sebelum parah.”,
42:”Setelah mati duluan di match penting, saya langsung switch ke mode support.”,
43:”Saya terbiasa menetapkan target spesifik sebelum sesi latihan.”,
44:”Saat ini saya percaya diri menghadapi tim terbaik.”,
45:”Saat ini ada ketegangan fisik mengganggu (jantung, tangan, napas).”,
46:”Saat ini pikiran negatif tentang performa sering muncul.”,
47:”Saat ini saya siap mengambil keputusan krusial di late game.”,
48:”Saat ini saya terlalu tegang untuk main natural.”,
49:”Saat ini fokus saya stabil.”,
50:”Saat ini saya khawatir tidak tampil sesuai kemampuan.”,
51:”Saat ini saya yakin dengan kemampuan mekanik saya.”,
52:”Saat ini saya merasa tenang dan terkontrol secara emosional.”,
53:”Saat ini saya ragu-ragu dalam mengambil keputusan.”,
54:”Saat ini saya siap secara fisik dan mental untuk bertanding.”,
55:”Saat ini saya percaya bisa memberikan dampak besar untuk tim.”,
56:”Saya ingin Timnas karena ingin berkembang sebagai atlet.”,
57:”Motivasi tetap tinggi meskipun tidak ada spotlight/viral.”,
58:”Jika tidak starter, saya tetap kerja keras dari posisi apapun.”,
59:”Target saya jelas dan saya tahu proses hariannya.”,
60:”Saya berlatih karena menikmati proses — bukan tekanan luar.”,
61:”Saya sering mempersiapkan mental untuk skenario sulit di turnamen.”,
62:”Tanpa hadiah uang, saya tetap bermain dengan intensitas sama.”,
63:”Saya merasa ‘harus’ berlatih karena kewajiban, bukan kemauan.”,
64:”Saya termotivasi peningkatan skill harian, bukan hanya hasil akhir.”,
65:”Kadang saya tidak tahu mengapa masih bertanding.”,
66:”Saya nyaman mengikuti struktur tim walau beda dengan klub.”,
67:”Saya bisa percaya IGL dan tidak ‘ambil alih’ koms.”,
68:”Saya selesaikan konflik lewat diskusi, bukan sindir/diam.”,
69:”Saya bisa jelaskan keputusan in-game secara tenang saat review.”,
70:”Saya bisa bangun chemistry dengan pemain baru dalam < 1 minggu.",
71:"Saya hormati keputusan coach walau tidak setuju.",
72:"Saya bersedia ubah playstyle jika dibutuhkan sistem tim.",
73:"Saya tidak terancam jika pemain lain perform lebih baik.",
74:"Dalam diskusi tim, saya dengarkan dulu sebelum bicara.",
75:"Saya proaktif beri callout bahkan tanpa diminta.",
76:"Saya bisa terima role yang bukan preferred demi tim.",
77:"Saya pentingkan kemenangan tim daripada stats personal.",
78:"Jika rekan struggle, saya support bukan kritik.",
79:"Saya terbuka dikoreksi oleh siapapun termasuk yang lebih muda.",
80:"Hot drop, hanya saya survive — saya tetap tenang ambil keputusan.",
81:"Match 5/6, klasemen bawah — saya tetap main sesuai strategi.",
82:"IGL call rotasi berisiko — saya commit 100% sambil sampaikan concern.",
83:"Mati pertama di match penting — langsung switch ke mode support.",
84:"Final circle 2v4 — tetap percaya menang dan main kalkulasi.",
85:"Ping spike/frame drop — tetap adaptasi tanpa mengeluh.",
86:"Strategi gagal total match 1 — langsung kontribusi adaptasi.",
87:"Bisa bedakan kapan main placement vs agresif sesuai klasemen.",
88:"Saya tidak pernah kesal atau frustrasi saat kalah.",
89:"Saya selalu 100% fokus penuh setiap sesi tanpa terkecuali.",
90:"Saya pernah keputusan buruk karena terbawa emosi.",
91:"Ada kalanya saya merasa malas atau tidak ingin berlatih.",
92:"Untuk pertanyaan ini, pilih angka 4 (Setuju).",
93:"Saya tidak pernah iri dengan pencapaian pemain lain.",
94:"Ada saat-saat saya meragukan kemampuan diri sendiri.",
};
const REV = new Set([4,6,8,13,16,18,21,22,24,26,35,45,46,48,50,53,63,65]);
const SD = new Set([88,89,93]);
const HON = new Set([90,91,94]);
const ATT = 92;
const CPAIRS = [[28,37],[17,27],[44,51],[33,79],[56,60],[32,42],[66,72],[35,41]];
function sc(n,r){ return !r?3:REV.has(n)?6-r:r; }
function avg(a){ const v=a.filter(x=>x!=null); return v.length?v.reduce((s,x)=>s+x,0)/v.length:0; }
function calcVal(ans){
let sd=0,hon=0,att=true,con=0;
SD.forEach(n=>{if(ans[n]===5)sd++;});
HON.forEach(n=>{if(ans[n]===1)hon++;});
if(ans[ATT]!==4)att=false;
CPAIRS.forEach(([a,b])=>{if(ans[a]&&ans[b]&&Math.abs(sc(a,ans[a])-sc(b,ans[b]))>2)con++;});
const t=sd+hon+(att?0:1);
if(t<=1&&con<=1&&att) return{sd,hon,att,con,t,lv:"VALID",c:"#10b981",bg:"rgba(16,185,129,0.12)"};
if(t<=2&&con<=2) return{sd,hon,att,con,t,lv:"CAUTION",c:"#f59e0b",bg:"rgba(245,158,11,0.12)"};
return{sd,hon,att,con,t,lv:"SUSPECT",c:"#ef4444",bg:"rgba(239,68,68,0.12)"};
}
function calcIdx(ans){
const s=items=>avg(items.map(i=>sc(i,ans[i])));
const rec=s([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]);
const bh=s([16,17,18,19,20,21,22,23,24,25,26,27]);
const br=6-bh;
const cop=s([28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43]);
const cs=s([44,45,46,47,48,49,50,51,52,53,54,55]);
const prs=s([28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55]);
const mot=s([56,57,58,59,60,61,62,63,64,65]);
const tf=s([33,58,66,67,68,69,70,71,72,73,74,75,76,77,78,79]);
const sit=s([80,81,82,83,84,85,86,87]);
return{rec,br,bh,cop,cs,prs,mot,tf,sit};
}
function lv(v){
if(v>=4)return{l:”Excellent”,c:”#10b981″,bg:”rgba(16,185,129,0.12)”};
if(v>=3)return{l:”Good”,c:”#06b6d4″,bg:”rgba(6,182,212,0.12)”};
if(v>=2.5)return{l:”Watchlist”,c:”#f59e0b”,bg:”rgba(245,158,11,0.12)”};
return{l:”High Risk”,c:”#ef4444″,bg:”rgba(239,68,68,0.12)”};
}
function blv(r){
if(r<=2)return{l:"Low Risk",c:"#10b981",bg:"rgba(16,185,129,0.12)"};
if(r<=3)return{l:"Moderate",c:"#06b6d4",bg:"rgba(6,182,212,0.12)"};
if(r<=3.5)return{l:"Watchlist",c:"#f59e0b",bg:"rgba(245,158,11,0.12)"};
return{l:"High Risk",c:"#ef4444",bg:"rgba(239,68,68,0.12)"};
}
function getFlags(idx){
const f=[];
if(idx.rec<2.5&&idx.br>3.5)f.push({t:”Recovery rendah + Burnout tinggi → rawan drop bootcamp”,s:”critical”});
if(idx.rec<2.5)f.push({t:"Recovery rendah — risiko fatigue",s:"warning"});
if(idx.br>3.5)f.push({t:”Burnout risk tinggi”,s:”critical”});
if(idx.prs<2.5)f.push({t:"Pressure Performance rendah → scrim hero stage zero",s:"critical"});
if(idx.cop<2.5)f.push({t:"Coping lemah — rentan tilt",s:"warning"});
if(idx.cs<2.5)f.push({t:"Competitive state rendah",s:"warning"});
if(idx.tf<2.5)f.push({t:"Team Fit rendah — cost sosial tinggi",s:"warning"});
if(idx.mot<2.5)f.push({t:"Motivasi rapuh",s:"warning"});
if(idx.sit<2.5)f.push({t:"Situational judgment lemah",s:"critical"});
return f;
}
function getStatus(idx){
const c=[idx.rec,idx.prs,idx.mot,idx.tf,idx.sit];
if(c.some(s=>s<2.5)||idx.br>3.5)return{l:”HIGH RISK”,c:”#ef4444″,bg:”rgba(239,68,68,0.15)”};
if(c.some(s=>s<3)||idx.br>3)return{l:”WATCHLIST”,c:”#f59e0b”,bg:”rgba(245,158,11,0.15)”};
if(c.every(s=>s>=4)&&idx.br<=2)return{l:"EXCELLENT",c:"#10b981",bg:"rgba(16,185,129,0.15)"};
return{l:"PASS",c:"#06b6d4",bg:"rgba(6,182,212,0.15)"};
}
async function load(){try{const r=await window.storage.get("tn_v3");return r?JSON.parse(r.value):[];}catch{return[];}}
async function save(p){try{await window.storage.set("tn_v3",JSON.stringify(p));}catch{}}
const bd = (c,bg) => ({display:”inline-block”,padding:”4px 12px”,borderRadius:20,fontSize:12,fontWeight:600,fontFamily:”‘Rajdhani’,sans-serif”,letterSpacing:1,color:c,background:bg,textTransform:”uppercase”});
const css = `@import url(‘https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap’);*{box-sizing:border-box;margin:0;padding:0}body{background:#080c14;color:#e2e8f0;font-family:’Outfit’,sans-serif}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:#0f1420}::-webkit-scrollbar-thumb{background:#2a3348;border-radius:3px}input:focus{border-color:rgba(245,158,11,0.5)!important}@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}`;
const pg = {minHeight:”100vh”,background:”linear-gradient(180deg,#080c14,#0c1222,#080c14)”,position:”relative”};
const grd = {position:”fixed”,inset:0,backgroundImage:”linear-gradient(rgba(245,158,11,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(245,158,11,0.03) 1px,transparent 1px)”,backgroundSize:”48px 48px”,pointerEvents:”none”,zIndex:0};
const cnt = w => ({maxWidth:w,margin:”0 auto”,padding:”24px 16px”,position:”relative”,zIndex:1});
const crd = {background:”rgba(15,20,32,0.85)”,border:”1px solid rgba(245,158,11,0.15)”,borderRadius:12,padding:24,backdropFilter:”blur(8px)”,animation:”fadeUp 0.4s ease”};
const btn = {fontFamily:”‘Rajdhani’,sans-serif”,fontWeight:600,fontSize:16,padding:”12px 32px”,borderRadius:8,border:”none”,cursor:”pointer”,letterSpacing:1,textTransform:”uppercase”,transition:”all 0.2s”};
const bP = {background:”linear-gradient(135deg,#f59e0b,#d97706)”,color:”#080c14″};
const bS = {background:”rgba(245,158,11,0.1)”,color:”#f59e0b”,border:”1px solid rgba(245,158,11,0.3)”};
const bD = {background:”rgba(239,68,68,0.15)”,color:”#ef4444″,border:”1px solid rgba(239,68,68,0.3)”};
const bG = {background:”transparent”,color:”#94a3b8″,border:”1px solid rgba(148,163,184,0.2)”};
const inp = {width:”100%”,padding:”12px 16px”,background:”rgba(15,20,32,0.9)”,border:”1px solid rgba(245,158,11,0.2)”,borderRadius:8,color:”#e2e8f0″,fontFamily:”‘Outfit’,sans-serif”,fontSize:15,outline:”none”};
function Landing({onRole}){
return