feat(ai): localize AI features

keep-notes/app/(main)/support/page.tsx

@@ -1,75 +1,77 @@
+'use client'
+
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { useLanguage } from '@/lib/i18n';
 
 export default function SupportPage() {
+  const { t } = useLanguage();
+
   return (
     <div className="container mx-auto py-10 max-w-4xl">
       <div className="text-center mb-10">
         <h1 className="text-4xl font-bold mb-4">
-          Support Memento Development ☕
+          {t('support.title')}
         </h1>
         <p className="text-muted-foreground text-lg">
-          Memento is 100% free and open-source. Your support helps keep it that way.
+          {t('support.description')}
         </p>
       </div>
 
       <div className="grid gap-6 md:grid-cols-2 mb-10">
-        {/* Ko-fi Card */}
         <Card className="border-2 border-primary">
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <span className="text-2xl">☕</span>
-              Buy me a coffee
+              {t('support.buyMeACoffee')}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <p className="mb-4">
-              Make a one-time donation or become a monthly supporter.
+              {t('support.donationDescription')}
             </p>
             <Button asChild className="w-full">
               <a href="https://ko-fi.com/yourusername" target="_blank" rel="noopener noreferrer">
-                Donate on Ko-fi
+                {t('support.donateOnKofi')}
               </a>
             </Button>
             <p className="text-xs text-muted-foreground mt-2">
-              No platform fees • Instant payouts • Secure
+              {t('support.kofiDescription')}
             </p>
           </CardContent>
         </Card>
 
-        {/* GitHub Sponsors Card */}
         <Card className="border-2 border-primary">
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
               <span className="text-2xl">💚</span>
-              Sponsor on GitHub
+              {t('support.sponsorOnGithub')}
             </CardTitle>
           </CardHeader>
           <CardContent>
             <p className="mb-4">
-              Become a monthly sponsor and get recognition.
+              {t('support.sponsorDescription')}
             </p>
             <Button asChild variant="outline" className="w-full">
               <a href="https://github.com/sponsors/yourusername" target="_blank" rel="noopener noreferrer">
-                Sponsor on GitHub
+                {t('support.sponsorOnGithub')}
               </a>
             </Button>
             <p className="text-xs text-muted-foreground mt-2">
-              Recurring support • Public recognition • Developer-focused
+              {t('support.githubDescription')}
             </p>
           </CardContent>
         </Card>
       </div>
 
-      {/* How Donations Are Used */}
       <Card className="mb-10">
         <CardHeader>
-          <CardTitle>How Your Support Helps</CardTitle>
+          <CardTitle>{t('support.howSupportHelps')}</CardTitle>
         </CardHeader>
         <CardContent>
           <div className="grid md:grid-cols-2 gap-4">
             <div>
-              <h3 className="font-semibold mb-2">💰 Direct Impact</h3>
+              <h3 className="font-semibold mb-2">💰 {t('support.directImpact')}</h3>
               <ul className="space-y-2 text-sm">
                 <li>☕ Keeps me fueled with coffee</li>
                 <li>🐛 Covers hosting and server costs</li>
@@ -79,7 +81,7 @@ export default function SupportPage() {
               </ul>
             </div>
             <div>
-              <h3 className="font-semibold mb-2">🎁 Sponsor Perks</h3>
+              <h3 className="font-semibold mb-2">🎁 {t('support.sponsorPerks')}</h3>
               <ul className="space-y-2 text-sm">
                 <li>🥉 $5/month - Bronze: Name in supporters list</li>
                 <li>🥈 $15/month - Silver: Priority feature requests</li>
@@ -91,30 +93,29 @@ export default function SupportPage() {
         </CardContent>
       </Card>
 
-      {/* Transparency */}
       <Card>
         <CardHeader>
-          <CardTitle>💡 Transparency</CardTitle>
+          <CardTitle>💡 {t('support.transparency')}</CardTitle>
         </CardHeader>
         <CardContent>
           <p className="text-sm mb-4">
-            I believe in complete transparency. Here's how donations are used:
+            {t('support.transparencyDescription')}
           </p>
           <div className="space-y-2 text-sm">
             <div className="flex justify-between">
-              <span>Hosting & servers:</span>
+              <span>{t('support.hostingServers')}</span>
               <span className="font-mono">~$20/month</span>
             </div>
             <div className="flex justify-between">
-              <span>Domain & SSL:</span>
+              <span>{t('support.domainSSL')}</span>
               <span className="font-mono">~$15/year</span>
             </div>
             <div className="flex justify-between">
-              <span>AI API costs:</span>
+              <span>{t('support.aiApiCosts')}</span>
               <span className="font-mono">~$30/month</span>
             </div>
             <div className="flex justify-between border-t pt-2">
-              <span className="font-semibold">Total expenses:</span>
+              <span className="font-semibold">{t('support.totalExpenses')}</span>
               <span className="font-mono font-semibold">~$50/month</span>
             </div>
           </div>
@@ -125,28 +126,27 @@ export default function SupportPage() {
         </CardContent>
       </Card>
 
-      {/* Alternative Ways to Support */}
       <div className="mt-10 text-center">
-        <h2 className="text-2xl font-bold mb-4">Other Ways to Support</h2>
+        <h2 className="text-2xl font-bold mb-4">{t('support.otherWaysTitle')}</h2>
         <div className="flex flex-wrap justify-center gap-4">
           <Button variant="outline" asChild>
             <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
-              ⭐ Star on GitHub
+              ⭐ {t('support.starGithub')}
             </a>
           </Button>
           <Button variant="outline" asChild>
             <a href="https://github.com/yourusername/memento/issues" target="_blank" rel="noopener noreferrer">
-              🐛 Report a bug
+              🐛 {t('support.reportBug')}
             </a>
           </Button>
           <Button variant="outline" asChild>
             <a href="https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
-              📝 Contribute code
+              📝 {t('support.contributeCode')}
             </a>
           </Button>
           <Button variant="outline" asChild>
             <a href="https://twitter.com/intent/tweet?text=Check%20out%20Memento%20-%20a%20great%20open-source%20note-taking%20app!%20https://github.com/yourusername/memento" target="_blank" rel="noopener noreferrer">
-              🐦 Share on Twitter
+              🐦 {t('support.shareTwitter')}
             </a>
           </Button>
         </div>