Fix UI interpolation and add i18n translations to onboarding steps

Fix multiple onboarding UI issues:

1. **ReviewSetupStep interpolation fix:**
   - Change single braces {suppliers} to double braces {{suppliers}}
   - Fix {ingredients} and {recipes} interpolation to {{ingredients}}, {{recipes}}
   - This resolves the issue where raw placeholders were displayed instead of actual values

2. **CompletionStep i18n translations:**
   - Add useTranslation hook import
   - Replace all hardcoded Spanish text with translation keys
   - Add translation support for: welcome message, bakery info, inventory,
     AI training, setup guide, next steps sections, and help text
   - Properly interpolate bakery name using {{name}} syntax
   - Ensures widget works in all 3 supported languages (ES, EN, PT)

3. **Confirmed onboarding steps presence:**
   - suppliers-setup step exists (conditional on stockEntryCompleted)
   - ml-training step exists (conditional on aiAnalysisComplete)
   - Both steps are properly configured in UnifiedOnboardingWizard

These changes ensure proper variable interpolation in i18next and
complete internationalization support for the onboarding completion flow.

frontend/src/components/domain/onboarding/steps/CompletionStep.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { Button } from '../../../ui/Button';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
 
@@ -14,6 +15,7 @@ interface CompletionStepProps {
 export const CompletionStep: React.FC<CompletionStepProps> = ({
   onComplete
 }) => {
+  const { t } = useTranslation();
   const navigate = useNavigate();
   const currentTenant = useCurrentTenant();
 
@@ -39,10 +41,10 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
       {/* Success Message */}
       <div className="space-y-4">
         <h1 className="text-3xl font-bold text-[var(--text-primary)]">
-          ¡Bienvenido a Bakery IA!
+          {t('onboarding:completion.welcome', '¡Bienvenido a Bakery IA!')}
         </h1>
         <p className="text-lg text-[var(--text-secondary)] max-w-2xl mx-auto">
-          Tu panadería <strong>{currentTenant?.name}</strong> está lista para usar nuestro sistema de gestión inteligente.
+          {t('onboarding:completion.ready_message', 'Tu panadería {{name}} está lista para usar nuestro sistema de gestión inteligente.', { name: currentTenant?.name })}
         </p>
       </div>
 
@@ -54,9 +56,9 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
             </svg>
           </div>
-          <h3 className="font-semibold mb-2">Panadería Registrada</h3>
+          <h3 className="font-semibold mb-2">{t('onboarding:completion.bakery_registered', 'Panadería Registrada')}</h3>
           <p className="text-sm text-[var(--text-secondary)]">
-            Tu información empresarial está configurada y lista
+            {t('onboarding:completion.bakery_info_ready', 'Tu información empresarial está configurada y lista')}
           </p>
         </div>
 
@@ -66,9 +68,9 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
             </svg>
           </div>
-          <h3 className="font-semibold mb-2">Inventario Creado</h3>
+          <h3 className="font-semibold mb-2">{t('onboarding:completion.inventory_created', 'Inventario Creado')}</h3>
           <p className="text-sm text-[var(--text-secondary)]">
-            Tus productos base están configurados con datos iniciales
+            {t('onboarding:completion.products_configured', 'Tus productos base están configurados con datos iniciales')}
           </p>
         </div>
 
@@ -78,9 +80,9 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
             </svg>
           </div>
-          <h3 className="font-semibold mb-2">IA Entrenada</h3>
+          <h3 className="font-semibold mb-2">{t('onboarding:completion.ai_trained', 'IA Entrenada')}</h3>
           <p className="text-sm text-[var(--text-secondary)]">
-            Tu modelo de inteligencia artificial está listo para predecir demanda
+            {t('onboarding:completion.ai_ready', 'Tu modelo de inteligencia artificial está listo para predecir demanda')}
           </p>
         </div>
       </div>
@@ -92,15 +94,15 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
             ✨
           </div>
           <div>
-            <h3 className="font-semibold text-lg mb-2 text-[var(--text-primary)]">¡Una cosa más!</h3>
+            <h3 className="font-semibold text-lg mb-2 text-[var(--text-primary)]">{t('onboarding:completion.one_more_thing', '¡Una cosa más!')}</h3>
             <p className="text-sm text-[var(--text-secondary)] mb-4">
-              Para aprovechar al máximo el sistema, configura tus operaciones diarias: proveedores, inventario, recetas y estándares de calidad.
+              {t('onboarding:completion.maximize_message', 'Para aprovechar al máximo el sistema, configura tus operaciones diarias: proveedores, inventario, recetas y estándares de calidad.')}
             </p>
             <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
               <svg className="w-4 h-4 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
-              <span>Toma solo 15-20 minutos</span>
+              <span>{t('onboarding:completion.time_estimate', 'Toma solo 15-20 minutos')}</span>
             </div>
           </div>
         </div>
@@ -108,16 +110,16 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
 
       {/* Next Steps */}
       <div className="bg-[var(--bg-secondary)] rounded-lg p-6 max-w-2xl mx-auto text-left">
-        <h3 className="font-semibold mb-4 text-center">Lo Que Configurarás</h3>
+        <h3 className="font-semibold mb-4 text-center">{t('onboarding:completion.what_to_configure', 'Lo Que Configurarás')}</h3>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
           <div className="flex items-start gap-2">
             <div className="w-5 h-5 bg-[var(--color-primary)]/10 rounded flex items-center justify-center flex-shrink-0 mt-0.5">
               📦
             </div>
             <div>
-              <p className="font-medium text-sm">Proveedores e Inventario</p>
+              <p className="font-medium text-sm">{t('onboarding:completion.suppliers_inventory', 'Proveedores e Inventario')}</p>
               <p className="text-xs text-[var(--text-secondary)]">
-                Tracking automático de stock
+                {t('onboarding:completion.stock_tracking', 'Tracking automático de stock')}
               </p>
             </div>
           </div>
@@ -127,9 +129,9 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
               👨‍🍳
             </div>
             <div>
-              <p className="font-medium text-sm">Recetas</p>
+              <p className="font-medium text-sm">{t('onboarding:completion.recipes', 'Recetas')}</p>
               <p className="text-xs text-[var(--text-secondary)]">
-                Costos automáticos por producto
+                {t('onboarding:completion.auto_costs', 'Costos automáticos por producto')}
               </p>
             </div>
           </div>
@@ -139,9 +141,9 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
               ✅
             </div>
             <div>
-              <p className="font-medium text-sm">Estándares de Calidad</p>
+              <p className="font-medium text-sm">{t('onboarding:completion.quality_standards', 'Estándares de Calidad')}</p>
               <p className="text-xs text-[var(--text-secondary)]">
-                Monitoreo de producción
+                {t('onboarding:completion.production_monitoring', 'Monitoreo de producción')}
               </p>
             </div>
           </div>
@@ -151,9 +153,9 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
               👥
             </div>
             <div>
-              <p className="font-medium text-sm">Equipo</p>
+              <p className="font-medium text-sm">{t('onboarding:completion.team', 'Equipo')}</p>
               <p className="text-xs text-[var(--text-secondary)]">
-                Coordinación y tareas
+                {t('onboarding:completion.coordination', 'Coordinación y tareas')}
               </p>
             </div>
           </div>
@@ -167,34 +169,34 @@ export const CompletionStep: React.FC<CompletionStepProps> = ({
           onClick={handleGetStarted}
           className="sm:order-2"
         >
-          Lo haré después
+          {t('onboarding:completion.do_later', 'Lo haré después')}
         </Button>
         <Button
           onClick={handleContinueSetup}
           size="lg"
           className="px-8 sm:order-1"
         >
-          Configurar Ahora (15 min) →
+          {t('onboarding:completion.configure_now', 'Configurar Ahora (15 min) →')}
         </Button>
       </div>
 
       {/* Help Text */}
       <div className="text-sm text-[var(--text-tertiary)]">
-        ¿Necesitas ayuda? Visita nuestra{' '}
-        <a 
-          href="/help" 
+        {t('onboarding:completion.need_help', '¿Necesitas ayuda? Visita nuestra')}{' '}
+        <a
+          href="/help"
           className="text-[var(--color-primary)] hover:underline"
           target="_blank"
           rel="noopener noreferrer"
         >
-          guía de usuario
+          {t('onboarding:completion.user_guide', 'guía de usuario')}
         </a>{' '}
-        o contacta a nuestro{' '}
-        <a 
-          href="mailto:support@bakery-ia.com" 
+        {t('onboarding:completion.or_contact', 'o contacta a nuestro')}{' '}
+        <a
+          href="mailto:support@bakery-ia.com"
           className="text-[var(--color-primary)] hover:underline"
         >
-          equipo de soporte
+          {t('onboarding:completion.support_team', 'equipo de soporte')}
         </a>
       </div>
     </div>

frontend/src/components/domain/setup-wizard/steps/ReviewSetupStep.tsx

@@ -289,7 +289,7 @@ export const ReviewSetupStep: React.FC<SetupStepProps> = ({ onUpdate, onComplete
             </h3>
             <p className="text-[var(--text-secondary)] max-w-xl mx-auto">
               {t('setup_wizard:review.ready_message',
-                "You've successfully configured {suppliers} suppliers, {ingredients} ingredients, and {recipes} recipes. Click 'Complete Setup' to finish and start using the system.",
+                "You've successfully configured {{suppliers}} suppliers, {{ingredients}} ingredients, and {{recipes}} recipes. Click 'Complete Setup' to finish and start using the system.",
                 { suppliers: suppliers.length, ingredients: ingredients.length, recipes: recipes.length }
               )}
             </p>