feat(i18n): Comprehensive internationalization of frontend components and pages

Translate all hardcoded English strings to use i18n translation keys:

Components:
- TransactionDetailModal: payment details, refunds, technical info
- ConnectOnboarding/ConnectOnboardingEmbed: Stripe Connect setup
- StripeApiKeysForm: API key management
- DomainPurchase: domain registration flow
- Sidebar: navigation labels
- Schedule/Sidebar, PendingSidebar: scheduler UI
- MasqueradeBanner: masquerade status
- Dashboard widgets: metrics, capacity, customers, tickets
- Marketing: PricingTable, PluginShowcase, BenefitsSection
- ConfirmationModal, ServiceList: common UI

Pages:
- Staff: invitation flow, role management
- Customers: form placeholders
- Payments: transactions, payouts, billing
- BookingSettings: URL and redirect configuration
- TrialExpired: upgrade prompts and features
- PlatformSettings, PlatformBusinesses: admin UI
- HelpApiDocs: API documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

frontend/src/pages/platform/PlatformSettings.tsx

@@ -227,11 +227,11 @@ const GeneralSettingsTab: React.FC = () => {
         </h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">Mail Server</p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('platform.settings.mailServer')}</p>
             <p className="text-lg font-semibold text-gray-900 dark:text-white">mail.talova.net</p>
           </div>
           <div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">Email Domain</p>
+            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('platform.settings.emailDomain')}</p>
             <p className="text-lg font-semibold text-gray-900 dark:text-white">smoothschedule.com</p>
           </div>
         </div>
@@ -282,7 +282,7 @@ const StripeSettingsTab: React.FC = () => {
       <div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4">
         <div className="flex items-center gap-2 text-red-700 dark:text-red-400">
           <AlertCircle className="w-5 h-5" />
-          <span>Failed to load settings</span>
+          <span>{t('platform.settings.failedToLoadSettings')}</span>
         </div>
       </div>
     );
@@ -294,7 +294,7 @@ const StripeSettingsTab: React.FC = () => {
       <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-6">
         <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
           <Shield className="w-5 h-5" />
-          Stripe Configuration Status
+          {t('platform.settings.stripeConfigStatus')}
         </h2>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@@ -319,7 +319,7 @@ const StripeSettingsTab: React.FC = () => {
               <AlertCircle className="w-5 h-5 text-yellow-500" />
             )}
             <div>
-              <p className="text-sm font-medium text-gray-900 dark:text-white">Validation</p>
+              <p className="text-sm font-medium text-gray-900 dark:text-white">{t('platform.settings.validation')}</p>
               <p className="text-xs text-gray-500 dark:text-gray-400">
                 {settings?.stripe_keys_validated_at
                   ? `Validated ${new Date(settings.stripe_keys_validated_at).toLocaleDateString()}`
@@ -332,7 +332,7 @@ const StripeSettingsTab: React.FC = () => {
         {settings?.stripe_account_id && (
           <div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
             <p className="text-sm text-blue-700 dark:text-blue-400">
-              <span className="font-medium">Account ID:</span> {settings.stripe_account_id}
+              <span className="font-medium">{t('platform.settings.accountId')}:</span> {settings.stripe_account_id}
               {settings.stripe_account_name && (
                 <span className="ml-2">({settings.stripe_account_name})</span>
               )}
@@ -357,19 +357,19 @@ const StripeSettingsTab: React.FC = () => {
 
         <div className="space-y-3">
           <div className="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
-            <span className="text-sm text-gray-600 dark:text-gray-400">Secret Key</span>
+            <span className="text-sm text-gray-600 dark:text-gray-400">{t('platform.settings.secretKey')}</span>
             <code className="text-sm font-mono text-gray-900 dark:text-white">
               {settings?.stripe_secret_key_masked || 'Not configured'}
             </code>
           </div>
           <div className="flex justify-between items-center py-2 border-b border-gray-100 dark:border-gray-700">
-            <span className="text-sm text-gray-600 dark:text-gray-400">Publishable Key</span>
+            <span className="text-sm text-gray-600 dark:text-gray-400">{t('platform.settings.publishableKey')}</span>
             <code className="text-sm font-mono text-gray-900 dark:text-white">
               {settings?.stripe_publishable_key_masked || 'Not configured'}
             </code>
           </div>
           <div className="flex justify-between items-center py-2">
-            <span className="text-sm text-gray-600 dark:text-gray-400">Webhook Secret</span>
+            <span className="text-sm text-gray-600 dark:text-gray-400">{t('platform.settings.webhookSecret')}</span>
             <code className="text-sm font-mono text-gray-900 dark:text-white">
               {settings?.stripe_webhook_secret_masked || 'Not configured'}
             </code>
@@ -637,7 +637,7 @@ const TiersSettingsTab: React.FC = () => {
       {/* Base Plans */}
       <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
         <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 className="font-medium text-gray-900 dark:text-white">Base Tiers</h3>
+          <h3 className="font-medium text-gray-900 dark:text-white">{t('platform.settings.baseTiers')}</h3>
         </div>
         <div className="divide-y divide-gray-200 dark:divide-gray-700">
           {basePlans.length === 0 ? (
@@ -660,7 +660,7 @@ const TiersSettingsTab: React.FC = () => {
       {/* Add-on Plans */}
       <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
         <div className="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
-          <h3 className="font-medium text-gray-900 dark:text-white">Add-ons</h3>
+          <h3 className="font-medium text-gray-900 dark:text-white">{t('platform.settings.addOns')}</h3>
         </div>
         <div className="divide-y divide-gray-200 dark:divide-gray-700">
           {addonPlans.length === 0 ? (