Initialize League GUI prototype

src/pages/ChampionDetailPage.tsx

@@ -0,0 +1,67 @@
+import type { CSSProperties } from "react";
+import { Link, useParams } from "react-router-dom";
+import { Panel } from "../components/ui";
+import { getChampionById } from "../features/champions/championLookup";
+
+export function ChampionDetailPage() {
+  const { championId } = useParams();
+  const champion = getChampionById(championId);
+
+  if (!champion) {
+    return (
+      <div className="page-stack">
+        <Panel title="Champion not found" subtitle="The requested mock champion does not exist.">
+          <Link className="text-link" to="/champions">
+            Return to champions
+          </Link>
+        </Panel>
+      </div>
+    );
+  }
+
+  return (
+    <div className="page-stack">
+      <section className="champion-detail-hero">
+        <div className="champion-portrait" style={{ "--champion-accent": champion.accentColor } as CSSProperties}>
+          {champion.name.charAt(0)}
+        </div>
+        <div>
+          <span className="eyebrow">{champion.role}</span>
+          <h2>{champion.name}</h2>
+          <p>{champion.shortDescription}</p>
+          <div className="tag-row">
+            {champion.tags.map((tag) => (
+              <span key={tag}>{tag}</span>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      <div className="dashboard-grid">
+        <Panel title="Combat Profile" subtitle="Placeholder values for future tuning">
+          <dl className="stat-list">
+            <div>
+              <dt>Difficulty</dt>
+              <dd>{champion.difficulty}</dd>
+            </div>
+            <div>
+              <dt>Primary Role</dt>
+              <dd>{champion.role}</dd>
+            </div>
+            <div>
+              <dt>Theme Hint</dt>
+              <dd>{champion.accentColor ?? "Default accent"}</dd>
+            </div>
+          </dl>
+        </Panel>
+
+        <Panel title="Future Detail Modules" subtitle="Prepared but not implemented">
+          <p>Abilities, skins, progression, lore, and build recommendations can be added as independent modules.</p>
+          <Link className="action-link action-link-inline" to="/champions">
+            Back to overview
+          </Link>
+        </Panel>
+      </div>
+    </div>
+  );
+}