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/components/ServiceList.jsx

@@ -1,18 +1,20 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import './ServiceList.css';
 
 const ServiceList = ({ services, onSelectService, loading }) => {
+    const { t } = useTranslation();
     if (loading) {
-        return <div className="service-list-loading">Loading services...</div>;
+        return <div className="service-list-loading">{t('services.loadingServices')}</div>;
     }
 
     if (!services || services.length === 0) {
-        return <div className="service-list-empty">No services available</div>;
+        return <div className="service-list-empty">{t('services.noServicesAvailable')}</div>;
     }
 
     return (
         <div className="service-list">
-            <h2>Available Services</h2>
+            <h2>{t('services.availableServices')}</h2>
             <div className="service-grid">
                 {services.map((service) => (
                     <div
@@ -28,7 +30,7 @@ const ServiceList = ({ services, onSelectService, loading }) => {
                         {service.description && (
                             <p className="service-description">{service.description}</p>
                         )}
-                        <button className="service-book-btn">Book Now</button>
+                        <button className="service-book-btn">{t('services.bookNow')}</button>
                     </div>
                 ))}
             </div>