feat: complete i18n support for all components (6 languages)

Add full internationalization across 127+ components and pages.
790+ translation keys in en, tr, kmr, ckb, ar, fa locales.
Remove duplicate keys and delete unused .json locale files.

web/src/pages/BeCitizen.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { CitizenshipModal } from '@/components/citizenship/CitizenshipModal';
@@ -12,6 +13,7 @@ const BeCitizen: React.FC = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
   const [referrerAddress, setReferrerAddress] = useState<string | null>(null);
+  const { t } = useTranslation();
 
   // Check for referral parameter on mount
   useEffect(() => {
@@ -34,7 +36,7 @@ const BeCitizen: React.FC = () => {
             className="w-full sm:w-auto bg-red-600 hover:bg-red-700 border-yellow-400 border-2 text-white font-semibold shadow-lg"
           >
             <ArrowLeft className="mr-2 h-4 w-4" />
-            Back to Home
+            {t('beCitizen.backToHome')}
           </Button>
 
           <Button
@@ -42,20 +44,20 @@ const BeCitizen: React.FC = () => {
             className="w-full sm:w-auto bg-green-600 hover:bg-green-700 border-yellow-400 border-2 text-white font-semibold shadow-lg"
           >
             <UserPlus className="mr-2 h-4 w-4" />
-            Invite Friend
+            {t('beCitizen.inviteFriend')}
           </Button>
         </div>
 
         {/* Hero Section */}
         <div className="text-center mb-16">
           <h1 className="text-5xl md:text-6xl font-bold text-red-700 mb-6 drop-shadow-lg">
-            🏛️ Digital Kurdistan
+            🏛️ {t('beCitizen.heroTitle')}
           </h1>
           <h2 className="text-3xl md:text-4xl font-semibold text-green-700 mb-4 drop-shadow-lg">
-            Bibe Welati / Be a Citizen
+            {t('beCitizen.heroSubtitle')}
           </h2>
           <p className="text-xl text-gray-800 font-semibold max-w-3xl mx-auto drop-shadow-md">
-            Join the Digital Kurdistan State as a sovereign citizen. Receive your Welati Tiki NFT and unlock governance, trust scoring, and community benefits.
+            {t('beCitizen.heroDesc')}
           </p>
         </div>
 
@@ -64,9 +66,9 @@ const BeCitizen: React.FC = () => {
           <Card className="bg-red-50/90 backdrop-blur-md border-red-600/50 hover:border-red-600 transition-all shadow-lg">
             <CardHeader>
               <Shield className="h-12 w-12 text-red-600 mb-3" />
-              <CardTitle className="text-red-700 font-bold">Privacy Protected</CardTitle>
+              <CardTitle className="text-red-700 font-bold">{t('beCitizen.privacyTitle')}</CardTitle>
               <CardDescription className="text-gray-700 font-medium">
-                Your data is encrypted with ZK-proofs. Only hashes are stored on-chain.
+                {t('beCitizen.privacyDesc')}
               </CardDescription>
             </CardHeader>
           </Card>
@@ -74,9 +76,9 @@ const BeCitizen: React.FC = () => {
           <Card className="bg-yellow-50/90 backdrop-blur-md border-yellow-600/50 hover:border-yellow-600 transition-all shadow-lg">
             <CardHeader>
               <Award className="h-12 w-12 text-yellow-700 mb-3" />
-              <CardTitle className="text-yellow-800 font-bold">Welati Tiki NFT</CardTitle>
+              <CardTitle className="text-yellow-800 font-bold">{t('beCitizen.nftTitle')}</CardTitle>
               <CardDescription className="text-gray-700 font-medium">
-                Receive your unique soulbound citizenship NFT after KYC approval.
+                {t('beCitizen.nftDesc')}
               </CardDescription>
             </CardHeader>
           </Card>
@@ -84,9 +86,9 @@ const BeCitizen: React.FC = () => {
           <Card className="bg-green-50/90 backdrop-blur-md border-green-600/50 hover:border-green-600 transition-all shadow-lg">
             <CardHeader>
               <Users className="h-12 w-12 text-green-600 mb-3" />
-              <CardTitle className="text-green-700 font-bold">Trust Scoring</CardTitle>
+              <CardTitle className="text-green-700 font-bold">{t('beCitizen.trustTitle')}</CardTitle>
               <CardDescription className="text-gray-700 font-medium">
-                Build trust through referrals, staking, and community contributions.
+                {t('beCitizen.trustDesc')}
               </CardDescription>
             </CardHeader>
           </Card>
@@ -94,9 +96,9 @@ const BeCitizen: React.FC = () => {
           <Card className="bg-red-50/90 backdrop-blur-md border-red-600/50 hover:border-red-600 transition-all shadow-lg">
             <CardHeader>
               <Globe className="h-12 w-12 text-red-600 mb-3" />
-              <CardTitle className="text-red-700 font-bold">Governance Access</CardTitle>
+              <CardTitle className="text-red-700 font-bold">{t('beCitizen.govTitle')}</CardTitle>
               <CardDescription className="text-gray-700 font-medium">
-                Participate in on-chain governance and shape the future of Digital Kurdistan.
+                {t('beCitizen.govDesc')}
               </CardDescription>
             </CardHeader>
           </Card>
@@ -108,9 +110,9 @@ const BeCitizen: React.FC = () => {
             <CardContent className="pt-8 pb-8">
               <div className="text-center space-y-6">
                 <div>
-                  <h3 className="text-2xl font-bold text-red-700 mb-3">Ready to Join?</h3>
+                  <h3 className="text-2xl font-bold text-red-700 mb-3">{t('beCitizen.readyToJoin')}</h3>
                   <p className="text-gray-800 font-medium mb-6">
-                    Whether you&apos;re already a citizen or want to become one, start your journey here.
+                    {t('beCitizen.readyToJoinDesc')}
                   </p>
                 </div>
 
@@ -119,24 +121,24 @@ const BeCitizen: React.FC = () => {
                   size="lg"
                   className="bg-gradient-to-r from-red-600 to-green-700 hover:from-red-700 hover:to-green-800 text-white font-bold px-8 py-6 text-lg group shadow-xl border-2 border-yellow-300"
                 >
-                  <span>Start Citizenship Process</span>
+                  <span>{t('beCitizen.startProcess')}</span>
                   <ChevronRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
                 </Button>
 
                 <div className="flex flex-col md:flex-row gap-4 justify-center items-center text-sm text-gray-700 font-medium pt-4">
                   <div className="flex items-center gap-2">
                     <Shield className="h-4 w-4 text-green-700" />
-                    <span>Secure ZK-Proof Authentication</span>
+                    <span>{t('beCitizen.zkAuth')}</span>
                   </div>
                   <div className="hidden md:block text-red-600">•</div>
                   <div className="flex items-center gap-2">
                     <Award className="h-4 w-4 text-red-600" />
-                    <span>Soulbound NFT Citizenship</span>
+                    <span>{t('beCitizen.soulboundNft')}</span>
                   </div>
                   <div className="hidden md:block text-red-600">•</div>
                   <div className="flex items-center gap-2">
                     <Globe className="h-4 w-4 text-green-700" />
-                    <span>Decentralized Identity</span>
+                    <span>{t('beCitizen.decentralizedId')}</span>
                   </div>
                 </div>
               </div>
@@ -146,7 +148,7 @@ const BeCitizen: React.FC = () => {
 
         {/* Process Overview */}
         <div className="mt-16 max-w-5xl mx-auto">
-          <h3 className="text-3xl font-bold text-red-700 text-center mb-8 drop-shadow-lg">How It Works</h3>
+          <h3 className="text-3xl font-bold text-red-700 text-center mb-8 drop-shadow-lg">{t('beCitizen.howItWorks')}</h3>
 
           <div className="grid md:grid-cols-3 gap-8">
             {/* Existing Citizens */}
@@ -155,13 +157,13 @@ const BeCitizen: React.FC = () => {
                 <div className="bg-red-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                   <span className="text-2xl font-bold text-white">1</span>
                 </div>
-                <CardTitle className="text-red-700 font-bold">Already a Citizen?</CardTitle>
+                <CardTitle className="text-red-700 font-bold">{t('beCitizen.existingTitle')}</CardTitle>
               </CardHeader>
               <CardContent className="text-gray-700 font-medium space-y-2 text-sm">
-                <p>✓ Enter your Welati Tiki NFT number</p>
-                <p>✓ Verify NFT ownership on-chain</p>
-                <p>✓ Sign authentication challenge</p>
-                <p>✓ Access your citizen dashboard</p>
+                <p>✓ {t('beCitizen.existing1')}</p>
+                <p>✓ {t('beCitizen.existing2')}</p>
+                <p>✓ {t('beCitizen.existing3')}</p>
+                <p>✓ {t('beCitizen.existing4')}</p>
               </CardContent>
             </Card>
 
@@ -171,13 +173,13 @@ const BeCitizen: React.FC = () => {
                 <div className="bg-yellow-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                   <span className="text-2xl font-bold text-white">2</span>
                 </div>
-                <CardTitle className="text-yellow-800 font-bold">New to Citizenship?</CardTitle>
+                <CardTitle className="text-yellow-800 font-bold">{t('beCitizen.newTitle')}</CardTitle>
               </CardHeader>
               <CardContent className="text-gray-700 font-medium space-y-2 text-sm">
-                <p>✓ Fill detailed KYC application</p>
-                <p>✓ Data encrypted with ZK-proofs</p>
-                <p>✓ Your referrer approves your identity</p>
-                <p>✓ Confirm and receive your Welati Tiki NFT</p>
+                <p>✓ {t('beCitizen.new1')}</p>
+                <p>✓ {t('beCitizen.new2')}</p>
+                <p>✓ {t('beCitizen.new3')}</p>
+                <p>✓ {t('beCitizen.new4')}</p>
               </CardContent>
             </Card>
 
@@ -187,13 +189,13 @@ const BeCitizen: React.FC = () => {
                 <div className="bg-green-600 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                   <span className="text-2xl font-bold text-white">3</span>
                 </div>
-                <CardTitle className="text-green-700 font-bold">Citizen Benefits</CardTitle>
+                <CardTitle className="text-green-700 font-bold">{t('beCitizen.benefitsTitle')}</CardTitle>
               </CardHeader>
               <CardContent className="text-gray-700 font-medium space-y-2 text-sm">
-                <p>✓ Trust score calculation enabled</p>
-                <p>✓ Governance voting rights</p>
-                <p>✓ Referral tree participation</p>
-                <p>✓ Staking multiplier bonuses</p>
+                <p>✓ {t('beCitizen.benefit1')}</p>
+                <p>✓ {t('beCitizen.benefit2')}</p>
+                <p>✓ {t('beCitizen.benefit3')}</p>
+                <p>✓ {t('beCitizen.benefit4')}</p>
               </CardContent>
             </Card>
           </div>
@@ -206,11 +208,9 @@ const BeCitizen: React.FC = () => {
               <div className="flex items-start gap-3">
                 <Shield className="h-6 w-6 text-yellow-700 mt-1 flex-shrink-0" />
                 <div className="text-sm text-gray-700">
-                  <p className="font-bold text-yellow-800 mb-2">Privacy & Security</p>
+                  <p className="font-bold text-yellow-800 mb-2">{t('beCitizen.securityTitle')}</p>
                   <p className="font-medium">
-                    Your personal data is encrypted using AES-GCM with your wallet-derived keys.
-                    Only commitment hashes are stored on the blockchain. Encrypted data is stored
-                    on IPFS and locally on your device. No personal information is ever publicly visible.
+                    {t('beCitizen.securityDesc')}
                   </p>
                 </div>
               </div>