From bbc9cce344ea589a3c9d3d15866c6c36b669c16a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 19:00:54 +0000
Subject: [PATCH] refactor: implement i18n in TierSelectorEnhanced (phase 3)

Refactored TierSelectorEnhanced to use react-i18next translations:
- Tier selection UI labels (selected/select)
- Popular badge
- Pricing labels
- Comparison table headers and rows
- Delivery time labels

Added translation keys to es.json and en.json:
- tierSelector.popular, selected, select, oneTime

Build verified successfully.

https://claude.ai/code/session_4f888c33-8937-4db8-8a9d-ddc9ac51a725
---
 frontend/components/TierSelectorEnhanced.tsx | 30 +++++++++++---------
 frontend/locales/en.json                     |  4 +++
 frontend/locales/es.json                     |  4 +++
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/frontend/components/TierSelectorEnhanced.tsx b/frontend/components/TierSelectorEnhanced.tsx
index b27346f..aa9d4c6 100644
--- a/frontend/components/TierSelectorEnhanced.tsx
+++ b/frontend/components/TierSelectorEnhanced.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Check, Star, Award, Medal, ChevronDown, ChevronUp } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import { TierKey } from '../types';
 import { TIERS } from '../constants';
 import clsx from 'clsx';
@@ -26,6 +27,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
   selectedTier,
   onSelectTier,
 }) => {
+  const { t } = useTranslation();
   const [showComparison, setShowComparison] = useState(false);
 
   const tiers: TierKey[] = ['gold', 'silver', 'bronze'];
@@ -63,7 +65,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                   transition={{ delay: 0.5, type: 'spring' }}
                   className="absolute top-4 -left-8 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-xs font-bold px-10 py-1 rotate-[-45deg] shadow-lg z-10"
                 >
-                  POPULAR
+                  {t('tierSelector.popular')}
                 </motion.div>
               )}
 
@@ -107,7 +109,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                   <span className="text-4xl font-bold text-slate-900">
                     €{tier.price.toLocaleString('es-ES')}
                   </span>
-                  <span className="text-slate-500 text-sm ml-1">one-time</span>
+                  <span className="text-slate-500 text-sm ml-1">{t('tierSelector.oneTime')}</span>
                 </div>
 
                 {/* Description */}
@@ -142,7 +144,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                       : 'bg-slate-100 text-slate-700 hover:bg-slate-200'
                   )}
                 >
-                  {isSelected ? 'Seleccionado' : 'Seleccionar'}
+                  {isSelected ? t('tierSelector.selected') : t('tierSelector.select')}
                 </motion.button>
               </div>
             </motion.div>
@@ -161,12 +163,12 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
           {showComparison ? (
             <>
               <ChevronUp size={20} />
-              Ocultar Comparación
+              {t('tierSelector.hideComparison')}
             </>
           ) : (
             <>
               <ChevronDown size={20} />
-              Ver Comparación Detallada
+              {t('tierSelector.viewComparison')}
             </>
           )}
         </motion.button>
@@ -184,14 +186,14 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
           >
             <div className="bg-white rounded-xl border border-slate-200 shadow-lg p-6">
               <h4 className="text-lg font-bold text-slate-900 mb-4">
-                Comparación de Tiers
+                {t('tierSelector.comparison')}
               </h4>
               <div className="overflow-x-auto">
                 <table className="w-full text-sm">
                   <thead className="bg-slate-50">
                     <tr>
                       <th className="text-left p-3 font-semibold text-slate-700">
-                        Característica
+                        {t('tierSelector.feature')}
                       </th>
                       {tiers.map((tierKey) => (
                         <th
@@ -205,7 +207,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                   </thead>
                   <tbody>
                     <tr className="border-t border-slate-200">
-                      <td className="p-3 text-slate-700">Precio</td>
+                      <td className="p-3 text-slate-700">{t('tierSelector.price')}</td>
                       {tiers.map((tierKey) => (
                         <td key={tierKey} className="p-3 text-center font-semibold">
                           €{TIERS[tierKey].price.toLocaleString('es-ES')}
@@ -213,15 +215,15 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                       ))}
                     </tr>
                     <tr className="border-t border-slate-200 bg-slate-50">
-                      <td className="p-3 text-slate-700">Tiempo de Entrega</td>
+                      <td className="p-3 text-slate-700">{t('tierSelector.deliveryTime')}</td>
                       {tiers.map((tierKey) => (
                         <td key={tierKey} className="p-3 text-center">
-                          {tierKey === 'gold' ? '7 días' : tierKey === 'silver' ? '10 días' : '14 días'}
+                          {tierKey === 'gold' ? t('tierSelector.days7') : tierKey === 'silver' ? t('tierSelector.days10') : t('tierSelector.days14')}
                         </td>
                       ))}
                     </tr>
                     <tr className="border-t border-slate-200">
-                      <td className="p-3 text-slate-700">Análisis de 8 Dimensiones</td>
+                      <td className="p-3 text-slate-700">{t('tierSelector.dimensions8')}</td>
                       {tiers.map((tierKey) => (
                         <td key={tierKey} className="p-3 text-center">
                           <Check className="text-green-500 mx-auto" size={20} />
@@ -229,7 +231,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                       ))}
                     </tr>
                     <tr className="border-t border-slate-200 bg-slate-50">
-                      <td className="p-3 text-slate-700">Roadmap Ejecutable</td>
+                      <td className="p-3 text-slate-700">{t('tierSelector.roadmap')}</td>
                       {tiers.map((tierKey) => (
                         <td key={tierKey} className="p-3 text-center">
                           <Check className="text-green-500 mx-auto" size={20} />
@@ -237,7 +239,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                       ))}
                     </tr>
                     <tr className="border-t border-slate-200">
-                      <td className="p-3 text-slate-700">Modelo Económico ROI</td>
+                      <td className="p-3 text-slate-700">{t('tierSelector.economicModel')}</td>
                       {tiers.map((tierKey) => (
                         <td key={tierKey} className="p-3 text-center">
                           {tierKey !== 'bronze' ? (
@@ -249,7 +251,7 @@ const TierSelectorEnhanced: React.FC<TierSelectorEnhancedProps> = ({
                       ))}
                     </tr>
                     <tr className="border-t border-slate-200 bg-slate-50">
-                      <td className="p-3 text-slate-700">Sesión de Presentación</td>
+                      <td className="p-3 text-slate-700">{t('tierSelector.presentation')}</td>
                       {tiers.map((tierKey) => (
                         <td key={tierKey} className="p-3 text-center">
                           {tierKey === 'gold' ? (
diff --git a/frontend/locales/en.json b/frontend/locales/en.json
index da164ff..ff3ebbc 100644
--- a/frontend/locales/en.json
+++ b/frontend/locales/en.json
@@ -80,6 +80,10 @@
     "viewResults": "View Results"
   },
   "tierSelector": {
+    "popular": "POPULAR",
+    "selected": "Selected",
+    "select": "Select",
+    "oneTime": "one-time",
     "hideComparison": "Hide Comparison",
     "viewComparison": "View Detailed Comparison",
     "comparison": "Tier Comparison",
diff --git a/frontend/locales/es.json b/frontend/locales/es.json
index 9f7cb42..6ffce26 100644
--- a/frontend/locales/es.json
+++ b/frontend/locales/es.json
@@ -80,6 +80,10 @@
     "viewResults": "Ver Resultados"
   },
   "tierSelector": {
+    "popular": "POPULAR",
+    "selected": "Seleccionado",
+    "select": "Seleccionar",
+    "oneTime": "one-time",
     "hideComparison": "Ocultar Comparación",
     "viewComparison": "Ver Comparación Detallada",
     "comparison": "Comparación de Tiers",