function App() {
  const [meta, setMeta] = useState(undefined);
  const [tab, setTab] = useState("draft");
  useEffect(() => {
    loadMeta().then(setMeta);
  }, []);
  const eng = useMemo(() => meta ? makeEngine(meta) : null, [meta]);
  const md = meta && meta.metadata || {};
  return <React.Fragment>
      <div className="topbar">
        <div className="topbar-inner">
          <div className="brand"><span className="mark"></span> LoL Draft WinRate</div>
          <div className="spacer"></div>
        </div>
      </div>

      <div className="wrap">
        <div className="intro">
          <div className="eyebrow">프로 8시즌 데이터 기반 승률 예측</div>
          <h1>LoL 드래프트 승률 예측 — 밴픽 최적화 게임</h1>
          <div className="lead">
            프로 경기 데이터를 PySpark로 분석해 학습한 모델로, 밴픽(드래프트) 단계만의 정보로 승률을 예측합니다.
            챔피언 기본 강함·라인 상성·팀 궁합·밴 가치·패치 적합도 5가지 요소를 가산해 산출합니다.
          </div>
          <div className="badges">
            {meta === undefined && <span className="badge"><span className="dotmark"></span>데이터 확인 중…</span>}
            {meta === null && <span className="badge warn"><span className="dotmark"></span>meta.json 미연결 · 디자인 미리보기</span>}
          </div>
        </div>

        <div className="tabs">
          <button className={"tab" + (tab === "draft" ? " active" : "")} onClick={() => setTab("draft")}>밴픽 대전 (vs NPC)</button>
          <button className={"tab" + (tab === "pvp" ? " active" : "")} onClick={() => setTab("pvp")}>멀티 대전 (1v1)</button>
          <button className={"tab" + (tab === "rank" ? " active" : "")} onClick={() => setTab("rank")}>랭킹</button>
          <button className={"tab" + (tab === "sim" ? " active" : "")} onClick={() => setTab("sim")}>자유 시뮬레이션</button>
        </div>

        {tab === "draft" ? <DraftGame eng={eng} /> : tab === "pvp" ? <MultiplayerPage eng={eng} /> : tab === "rank" ? <RankingPage /> : <FreeSim eng={eng} />}

        <div className="footer">
          데이터 출처: <a href="https://oracleselixir.com" target="_blank" rel="noopener">Oracle's Elixir</a> — Tim Sevenhuysen.
          공개 데이터의 비상업적 학술 활용. {md.honesty_note || "드래프트-only 예측은 본질적으로 어려우며, AUC는 가공 없이 보고됩니다."}
        </div>
      </div>
    </React.Fragment>;
}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);