init localize

app/[locale]/components/ThirdPlace.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { Team, ThirdPlaceRow } from "@/lib/types";
+
+export default function ThirdPlace({
+  rows, teams, secureTeams,
+}: { rows: ThirdPlaceRow[]; teams: Team[]; secureTeams?: string[] }) {
+  const name = (id: string) => {
+    const t = teams.find((t) => t.id === id);
+    return t?.localisedName ?? t?.name ?? id;
+  };
+  const secureSet = secureTeams ? new Set(secureTeams) : null;
+
+  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 className={r.played === 3 ? "team-complete" : ""} style={{ fontWeight: 600 }}>
+                {name(r.teamId)}
+                {secureSet?.has(r.teamId) && (
+                  <span style={{ color: "var(--turf)", marginLeft: 6, fontSize: 13 }} title="sicher qualifiziert">✓</span>
+                )}
+              </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>
+  );
+}