feat: wire up settings sub-tabs in profile page

app/profile/page.tsx

@@ -7,16 +7,21 @@ import { ProfileHeader } from "@/components/profile/profile-header"
 import { StatsRow } from "@/components/profile/stats-row"
 import { ContributionList } from "@/components/profile/contribution-list"
 import { SavedGamesGrid } from "@/components/saved-games/saved-games-grid"
-import { Bookmark, Settings, Loader2 } from "lucide-react"
+import { Bookmark, Settings, Loader2, TrendingUp } from "lucide-react"
+import { SettingsProfileTab } from "@/components/profile/settings-profile-tab"
+import { SettingsSecurityTab } from "@/components/profile/settings-security-tab"
+import { SettingsAccountsTab } from "@/components/profile/settings-accounts-tab"
 import { motion } from "motion/react"
 import type { ContributionEntry } from "@/types/api"
 
 type Tab = "overview" | "saved" | "settings"
+type SettingsTab = "profile" | "security" | "accounts"
 
 export default function ProfilePage() {
   const router = useRouter()
   const { data: session, isPending: isSessionLoading } = useSession()
   const [activeTab, setActiveTab] = useState<Tab>("overview")
+  const [settingsSubTab, setSettingsSubTab] = useState<SettingsTab>("profile")
   const [profile, setProfile] = useState<{
     id: string
     name: string
@@ -78,7 +83,7 @@ export default function ProfilePage() {
   }
 
   const tabs: { id: Tab; label: string; icon: typeof Bookmark }[] = [
-    { id: "overview", label: "Overview", icon: Settings },
+    { id: "overview", label: "Overview", icon: TrendingUp },
     { id: "saved", label: "Saved Games", icon: Bookmark },
     { id: "settings", label: "Settings", icon: Settings },
   ]
@@ -148,9 +153,39 @@ export default function ProfilePage() {
             {activeTab === "saved" && <SavedGamesGrid />}
 
             {activeTab === "settings" && (
-              <div className="text-center py-12 text-text/40">
-                <Settings className="h-8 w-8 mx-auto mb-2" />
-                <p>Account settings will appear here</p>
+              <div className="space-y-4">
+                {/* Settings sub-tabs */}
+                <div className="flex gap-1 border-b border-border">
+                  {([
+                    { id: "profile" as SettingsTab, label: "Profile" },
+                    { id: "security" as SettingsTab, label: "Security" },
+                    { id: "accounts" as SettingsTab, label: "Linked Accounts" },
+                  ]).map((subTab) => (
+                    <button
+                      key={subTab.id}
+                      onClick={() => setSettingsSubTab(subTab.id)}
+                      className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                        settingsSubTab === subTab.id
+                          ? "border-primary text-primary"
+                          : "border-transparent text-text/50 hover:text-text/70"
+                      }`}
+                    >
+                      {subTab.label}
+                    </button>
+                  ))}
+                </div>
+
+                {/* Settings sub-tab content */}
+                {settingsSubTab === "profile" && (
+                  <SettingsProfileTab
+                    name={profile.name}
+                    email={profile.email}
+                    role={profile.role}
+                    createdAt={profile.createdAt}
+                  />
+                )}
+                {settingsSubTab === "security" && <SettingsSecurityTab />}
+                {settingsSubTab === "accounts" && <SettingsAccountsTab />}
               </div>
             )}
           </motion.div>