'多语言'

app/components/Tools.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useTranslation } from "@/i18n/navigation";
 import toolsData from "../data/tools.json";
 
 const categories = toolsData.categories as Array<{
@@ -14,29 +17,27 @@ function truncateDesc(desc: string, maxLen = 5) {
   return desc.slice(0, maxLen) + "...";
 }
 
-const toolStats = (() => {
-  const total = categories.reduce((s, c) => s + c.tools.length, 0);
-  return [
-    { value: `${total}+`, label: "精选工具" },
-    { value: String(categories.length), label: "分类" },
-    { value: "数字游民", label: "出海" },
-    { value: "佣金", label: "推荐" },
-  ];
-})();
-
 export default function Tools() {
+  const { t } = useTranslation("tools");
+  const total = categories.reduce((s, c) => s + c.tools.length, 0);
+  const toolStats = [
+    { value: `${total}+`, key: "tools" as const },
+    { value: String(categories.length), key: "categories" as const },
+    { value: "数字游民", key: "nomad" as const },
+    { value: "佣金", key: "affiliate" as const },
+  ];
   return (
     <section id="tools" className="py-20 sm:py-28">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="text-center">
           <div className="mb-4 inline-flex items-center gap-2 rounded-full border border-sky-200 bg-sky-50 px-4 py-1.5 text-sm font-medium text-sky-700">
-            🚀 50+ 精选工具
+            {t("badge")}
           </div>
           <h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
-            <span className="gradient-text">工具推荐</span>
+            <span className="gradient-text">{t("title")}</span>
           </h2>
           <p className="mx-auto mt-4 max-w-2xl text-lg text-slate-600">
-            数字游民出海必备工具精选，含游民社区、VPS、金融收款、出海掘金等，每个链接可点击跳转。
+            {t("subtitle")}
           </p>
         </div>
 
@@ -83,17 +84,16 @@ export default function Tools() {
           ))}
         </div>
 
-        {/* Stats bar */}
         <div className="mt-14 grid grid-cols-2 gap-4 sm:grid-cols-4">
           {toolStats.map((s) => (
             <div
-              key={s.label}
+              key={s.key}
               className="rounded-2xl border border-slate-100 bg-white p-5 text-center shadow-sm"
             >
               <div className="text-3xl font-extrabold text-sky-600">
                 {s.value}
               </div>
-              <div className="mt-1 text-sm text-slate-500">{s.label}</div>
+              <div className="mt-1 text-sm text-slate-500">{t(`stats.${s.key}`)}</div>
             </div>
           ))}
         </div>