import React,{useMemo,useState}from"react";import{createRoot}from"react-dom/client";import"./style.css";
const skins=[
["AK-47 | Slate","Restricted",18.4,"AK-47"],["AWP | Atheris","Restricted",24.8,"AWP"],["M4A1-S | Basilisk","Restricted",31.2,"M4A1-S"],["USP-S | Cortex","Classified",44.5,"USP-S"],["Glock-18 | Vogue","Classified",67,"GLOCK-18"],["AK-47 | Neon Rider","Covert",118,"AK-47"],["M4A4 | Temukau","Covert",145,"M4A4"],["AWP | Wildfire","Covert",210,"AWP"]];
const img=s=>`https://placehold.co/640x420/111720/7df1c4?text=${encodeURIComponent(s)}`;
function App(){const[t,setT]=useState("Upgrade"),[bal,setBal]=useState(250),[a,setA]=useState(skins[0]),[b,setB]=useState(skins[3]),[result,setResult]=useState(null);
const chance=useMemo(()=>Math.max(2,Math.min(95,a[2]/b[2]*92)),[a,b]);
function up(){let ok=Math.random()*100<chance;setResult(ok?`✓ Upgrade successful — ${b[0]}`:`× Upgrade failed — try again`)}
return <><header><div className="brand">UPGRADE<span>X</span><i>CS2</i></div><nav>{["Upgrade","Cases","Inventory","Referral"].map(x=><button className={t==x?"on":""} onClick={()=>setT(x)}>{x}</button>)}</nav><div className="bal">◈ {bal.toFixed(2)} <button onClick={()=>setBal(x=>x+50)}>+</button></div></header>
<main><section className="hero"><div><label>CS2 SKIN PLATFORM · DEMO</label><h1>UPGRADE<br/><em>YOUR SKIN.</em></h1><p>Тестовая веб-версия игровой платформы с виртуальным балансом и предметами.</p></div><div className="ring">CS2</div></section>
{t==="Upgrade"&&<><div className="upgradegrid"><Picker title="YOUR SKIN" item={a} set={setA} list={skins.slice(0,6)}/><div className="arr">→</div><Picker title="TARGET SKIN" item={b} set={setB} list={skins.slice(3)}/></div><div className="bar"><div><small>SUCCESS CHANCE</small><strong>{chance.toFixed(1)}%</strong></div><button onClick={up}>UPGRADE <b>→</b></button><div><small>VALUE</small><strong>${a[2].toFixed(2)} → ${b[2].toFixed(2)}</strong></div></div>{result&&<div className="result">{result}</div>}</>}
{t==="Cases"&&<Page title="Cases"><div className="cards">{["Starter Case","Neon Case","Elite Case"].map((x,i)=><article><div className="case">▣</div><h3>{x}</h3><p>{[25,60,120][i]} virtual coins</p><button onClick={()=>setResult(`Демо: ${x} открыт`)}>OPEN</button></article>)}</div></Page>}
{t==="Inventory"&&<Page title="Inventory"><div className="skins">{skins.map(s=><div className="skin"><img src={img(s[0])}/><b>{s[0]}</b><span>{s[1]} · ${s[2]}</span></div>)}</div></Page>}
{t==="Referral"&&<Page title="Referral"><p>Твоя демо-ссылка</p><code>upgradex.demo/ref/MISHA</code><div className="stats"><b>0<small>INVITED</small></b><b>0<small>BONUS</small></b></div></Page>}</main><footer>UPGRADEX CS2 DEMO · Virtual economy only · No real-money wagering or withdrawals</footer></>}
function Picker({title,item,set,list}){return <section className="panel"><label>{title}</label><img className="preview" src={img(item[0])}/><h2>{item[0]}</h2><p>{item[1]} · <strong>${item[2]}</strong></p><div className="list">{list.map(x=><button className={x[0]==item[0]?"sel":""} onClick={()=>set(x)}>{x[0]}<span>${x[2]}</span></button>)}</div></section>}
function Page(p){return <section className="page"><h2>{p.title}</h2>{p.children}</section>}createRoot(document.getElementById("root")).render(<App/>);