fix: update document.title on every page via useEffect

All pages are 'use client' so metadata exports don't work. Each page now
sets document.title via useEffect — static pages with a fixed string,
dynamic pages keyed on data so the title reflects the loaded content.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/groups/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { useQuery, gql } from '@/lib/graphql/hooks'
+import { useEffect } from 'react'
 import Link from 'next/link'
 import { TeamFlag } from '@/components/team-flag'
 
@@ -22,6 +23,8 @@ interface Standing {
 export default function GroupsPage() {
   const { data, loading } = useQuery(GROUPS_QUERY, { pollInterval: 60_000 })
 
+  useEffect(() => { document.title = 'Group Stage · World Cup' }, [])
+
   const standings: Standing[] = data?.groupStandings ?? []
   const byGroup = standings.reduce<Record<string, Standing[]>>((acc, s) => {
     acc[s.groupName] = [...(acc[s.groupName] ?? []), s]

app/history/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { useQuery, gql } from '@/lib/graphql/hooks'
+import { useEffect } from 'react'
 import Link from 'next/link'
 import { TeamFlag } from '@/components/team-flag'
 
@@ -23,6 +24,8 @@ interface Tournament {
 
 
 export default function HistoryPage() {
+  useEffect(() => { document.title = 'History · World Cup' }, [])
+
   const { data, loading } = useQuery(HISTORY_QUERY)
   const tournaments: Tournament[] = data?.tournaments ?? []
   const is2026InProgress = !tournaments.find(t => t.year === 2026)?.winner

app/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { useQuery, gql } from '@/lib/graphql/hooks'
+import { useEffect } from 'react'
 import Link from 'next/link'
 import { TeamFlag } from '@/components/team-flag'
 import { LiveBadge } from '@/components/live-badge'
@@ -86,6 +87,8 @@ interface MatchData {
 export default function HomePage() {
   const { data, loading } = useQuery(HOME_QUERY, { pollInterval: 60_000 })
 
+  useEffect(() => { document.title = 'World Cup' }, [])
+
   const stats = data?.tournamentStats
   const live: MatchData[] = data?.liveMatches ?? []
   const recent: MatchData[] = data?.recentMatches ?? []

app/players/[name]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useQuery, gql } from '@/lib/graphql/hooks'
-import { use } from 'react'
+import { use, useEffect } from 'react'
 import Link from 'next/link'
 import { TeamFlag } from '@/components/team-flag'
 import { MatchCard } from '@/components/match-card'
@@ -32,6 +32,10 @@ export default function PlayerPage({ params }: { params: Promise<{ name: string
   const { data, loading } = useQuery(PLAYER_QUERY, { variables: { name } })
   const player: PlayerData | null = data?.player ?? null
 
+  useEffect(() => {
+    document.title = `${player?.playerName ?? name} · World Cup`
+  }, [player, name])
+
   // Fetch all goals for this player broken down by year
   const { data: goalsData } = useQuery(gql`
     query PlayerGoalsByYear($name: String!) {

app/search/page.tsx

@@ -41,6 +41,10 @@ function SearchContent() {
     return () => clearTimeout(t)
   }, [q, router])
 
+  useEffect(() => {
+    document.title = q.trim() ? `"${q.trim()}" · World Cup` : 'Search · World Cup'
+  }, [q])
+
   const skip = debouncedQ.trim().length < 2
   const { data, loading } = useQuery(SEARCH_QUERY, {
     variables: { q: debouncedQ },

app/stats/page.tsx

@@ -1,5 +1,6 @@
 'use client'
 import { useQuery, gql } from '@/lib/graphql/hooks'
+import { useEffect } from 'react'
 import Link from 'next/link'
 import { TeamFlag } from '@/components/team-flag'
 
@@ -57,6 +58,8 @@ interface MatchRow { id: number; year: number; round: string; date?: string | nu
 interface ETStats { totalKnockoutMatches: number; wentToExtraTime: number; wentToPenalties: number; extraTimePct: number; penaltiesPct: number }
 
 export default function StatsPage() {
+  useEffect(() => { document.title = 'Statistics · World Cup' }, [])
+
   const { data, loading } = useQuery(STATS_QUERY)
 
   const tournaments: Tournament[] = (data?.tournaments ?? []).filter((t: Tournament) => t.totalGoals != null).sort((a: Tournament, b: Tournament) => a.year - b.year)

app/teams/[slug]/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { useQuery, gql } from '@/lib/graphql/hooks'
-import { use } from 'react'
+import { use, useEffect } from 'react'
 import Link from 'next/link'
 import { TeamFlag } from '@/components/team-flag'
 import { MatchCard } from '@/components/match-card'
@@ -36,6 +36,10 @@ export default function TeamPage({ params }: { params: Promise<{ slug: string }>
   const { data: teamData, loading } = useQuery(TEAM_QUERY, { variables: { slug } })
   const team: TeamData | null = teamData?.team ?? null
 
+  useEffect(() => {
+    document.title = team ? `${team.name} · World Cup` : 'Team · World Cup'
+  }, [team])
+
   // Load all scorers to filter by team
   const { data: scorerData } = useQuery(gql`
     query TeamScorers {

app/tournaments/[year]/page.tsx

@@ -72,6 +72,12 @@ export default function TournamentPage({ params }: { params: Promise<{ year: str
     if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
   }, [data])
 
+  useEffect(() => {
+    document.title = data?.tournament
+      ? `${year} World Cup · World Cup`
+      : `${year} · World Cup`
+  }, [data, year])
+
   const t = data?.tournament
   const standings: Standing[] = data?.groupStandings ?? []
   const byGroup = standings.reduce<Record<string, Standing[]>>((acc, s) => {