init

app/components/ThirdPlace.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { Team, ThirdPlaceRow } from "@/lib/types";
+
+export default function ThirdPlace({
+  rows, teams,
+}: { rows: ThirdPlaceRow[]; teams: Team[] }) {
+  const name = (id: string) => teams.find((t) => t.id === id)?.name ?? id;
+
+  return (
+    <div className="third-wrap">
+      <p className="notice" style={{ marginBottom: 16 }}>
+        Acht der zwölf Gruppendritten erreichen die Runde der letzten 32. Gewertet wird
+        gruppenübergreifend nach Punkten, Tordifferenz und Toren — der Direktvergleich
+        entfällt, weil diese Teams nie gegeneinander gespielt haben. Die Trennlinie markiert
+        den Schnitt zwischen Platz 8 und 9.
+      </p>
+      <table className="third-table">
+        <thead>
+          <tr>
+            <th>#</th><th>Gruppe</th><th>Team</th>
+            <th>Sp</th><th>Pkt</th><th>±</th><th>Tore</th><th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r, i) => {
+            const isCut = i === 8; // erste nicht-qualifizierte Zeile
+            return (
+              <tr
+                key={r.teamId}
+                className={`third-row ${r.qualifies ? "qual" : ""} ${isCut ? "cut" : ""}`}
+              >
+                <td>{r.overallRank}</td>
+                <td>{r.group}</td>
+                <td style={{ fontWeight: 600 }}>{name(r.teamId)}</td>
+                <td>{r.played}</td>
+                <td className="pts">{r.points}</td>
+                <td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
+                <td>{r.goalsFor}:{r.goalsAgainst}</td>
+                <td>
+                  <span className={`qual-badge ${r.qualifies ? "yes" : "no"}`}>
+                    {r.qualifies ? "weiter" : "raus"}
+                  </span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}