Improve the UI and training

frontend/src/components/subscription/PricingComparisonTable.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+
+interface FeatureComparison {
+  key: string;
+  name: string;
+  name_es?: string;
+  category: string;
+  starter: boolean;
+  professional: boolean;
+  enterprise: boolean;
+  tooltip?: string;
+  tooltip_es?: string;
+}
+
+interface CategoryInfo {
+  icon: string;
+  name: string;
+  name_es?: string;
+}
+
+interface PricingComparisonTableProps {
+  features: FeatureComparison[];
+  categories: Record<string, CategoryInfo>;
+  className?: string;
+}
+
+/**
+ * PricingComparisonTable - Full feature comparison across all tiers
+ * Expandable table showing all features side-by-side
+ */
+export const PricingComparisonTable: React.FC<PricingComparisonTableProps> = ({
+  features,
+  categories,
+  className = '',
+}) => {
+  const currentLang = localStorage.getItem('language') || 'es';
+
+  // Group features by category
+  const featuresByCategory = features.reduce((acc, feature) => {
+    if (!acc[feature.category]) {
+      acc[feature.category] = [];
+    }
+    acc[feature.category].push(feature);
+    return acc;
+  }, {} as Record<string, FeatureComparison[]>);
+
+  const renderCheckmark = (hasFeature: boolean) => {
+    if (hasFeature) {
+      return (
+        <svg
+          className="w-5 h-5 text-green-500 mx-auto"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+        >
+          <path
+            fillRule="evenodd"
+            d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+            clipRule="evenodd"
+          />
+        </svg>
+      );
+    }
+    return (
+      <svg
+        className="w-5 h-5 text-gray-300 mx-auto"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+      >
+        <path
+          fillRule="evenodd"
+          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+          clipRule="evenodd"
+        />
+      </svg>
+    );
+  };
+
+  return (
+    <div className={`overflow-x-auto ${className}`}>
+      <table className="w-full border-collapse bg-white rounded-lg shadow-sm">
+        <thead>
+          <tr className="bg-gray-50 border-b border-gray-200">
+            <th className="px-6 py-4 text-left text-sm font-semibold text-gray-900 sticky left-0 bg-gray-50">
+              {currentLang === 'es' ? 'Funcionalidad' : 'Feature'}
+            </th>
+            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900">
+              Starter
+            </th>
+            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900 bg-orange-50">
+              Professional
+              <span className="ml-2 text-xs bg-orange-100 text-orange-700 px-2 py-0.5 rounded-full">
+                {currentLang === 'es' ? 'Más Popular' : 'Most Popular'}
+              </span>
+            </th>
+            <th className="px-6 py-4 text-center text-sm font-semibold text-gray-900">
+              Enterprise
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {Object.entries(featuresByCategory).map(([categoryKey, categoryFeatures]) => {
+            const category = categories[categoryKey];
+            if (!category) return null;
+
+            const categoryName = currentLang === 'es' && category.name_es
+              ? category.name_es
+              : category.name;
+
+            return (
+              <React.Fragment key={categoryKey}>
+                {/* Category Header */}
+                <tr className="bg-gray-100 border-t border-gray-200">
+                  <td
+                    colSpan={4}
+                    className="px-6 py-3 text-sm font-semibold text-gray-700 sticky left-0 bg-gray-100"
+                  >
+                    <div className="flex items-center gap-2">
+                      <span className="text-lg" role="img" aria-label={categoryName}>
+                        {category.icon}
+                      </span>
+                      <span>{categoryName}</span>
+                    </div>
+                  </td>
+                </tr>
+
+                {/* Category Features */}
+                {categoryFeatures.map((feature, index) => {
+                  const featureName = currentLang === 'es' && feature.name_es
+                    ? feature.name_es
+                    : feature.name;
+                  const tooltip = currentLang === 'es' && feature.tooltip_es
+                    ? feature.tooltip_es
+                    : feature.tooltip;
+
+                  return (
+                    <tr
+                      key={feature.key}
+                      className={`border-b border-gray-100 hover:bg-gray-50 ${
+                        index % 2 === 0 ? 'bg-white' : 'bg-gray-50'
+                      }`}
+                      title={tooltip}
+                    >
+                      <td className="px-6 py-3 text-sm text-gray-700 sticky left-0 bg-inherit">
+                        {featureName}
+                        {tooltip && (
+                          <span className="ml-1 text-gray-400 text-xs">ℹ️</span>
+                        )}
+                      </td>
+                      <td className="px-6 py-3 text-center">
+                        {renderCheckmark(feature.starter)}
+                      </td>
+                      <td className="px-6 py-3 text-center bg-orange-50/30">
+                        {renderCheckmark(feature.professional)}
+                      </td>
+                      <td className="px-6 py-3 text-center">
+                        {renderCheckmark(feature.enterprise)}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </React.Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default PricingComparisonTable;

frontend/src/components/subscription/PricingFeatureCategory.tsx

@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface Feature {
+  key: string;
+  translation_key: string;
+  tooltip_key?: string;
+  category: string;
+}
+
+interface Category {
+  icon: string;
+  translation_key: string;
+}
+
+interface PricingFeatureCategoryProps {
+  categoryKey: string;
+  category: Category;
+  features: Feature[];
+  className?: string;
+}
+
+/**
+ * PricingFeatureCategory - Displays a collapsible category of features
+ * Groups related features with icons for better organization
+ */
+export const PricingFeatureCategory: React.FC<PricingFeatureCategoryProps> = ({
+  categoryKey,
+  category,
+  features,
+  className = '',
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const { t } = useTranslation('subscription');
+
+  if (features.length === 0) {
+    return null;
+  }
+
+  const categoryName = t(category.translation_key);
+
+  return (
+    <div className={`border-b border-gray-200 last:border-b-0 ${className}`}>
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="w-full flex items-center justify-between py-3 px-4 hover:bg-gray-50 transition-colors"
+        aria-expanded={isExpanded}
+        aria-controls={`category-${categoryKey}`}
+      >
+        <div className="flex items-center gap-2">
+          <span className="text-xl" role="img" aria-label={categoryName}>
+            {category.icon}
+          </span>
+          <span className="font-semibold text-gray-800 text-sm">
+            {categoryName}
+          </span>
+          <span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">
+            {features.length}
+          </span>
+        </div>
+        <svg
+          className={`w-5 h-5 text-gray-400 transition-transform ${
+            isExpanded ? 'rotate-180' : ''
+          }`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {isExpanded && (
+        <div
+          id={`category-${categoryKey}`}
+          className="px-4 pb-3 space-y-2"
+        >
+          {features.map((feature) => {
+            const featureName = t(feature.translation_key);
+            const tooltip = feature.tooltip_key ? t(feature.tooltip_key) : undefined;
+
+            return (
+              <div
+                key={feature.key}
+                className="flex items-start gap-2 text-sm group"
+                title={tooltip}
+              >
+                <svg
+                  className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+                <span className="text-gray-700 flex-1">
+                  {featureName}
+                  {tooltip && (
+                    <span className="ml-1 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity">
+                      ℹ️
+                    </span>
+                  )}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PricingFeatureCategory;

frontend/src/components/subscription/PricingSection.tsx

@@ -21,7 +21,11 @@ export const PricingSection: React.FC = () => {
         </div>
 
         {/* Pricing Cards */}
-        <SubscriptionPricingCards mode="landing" />
+        <SubscriptionPricingCards
+          mode="landing"
+          showPilotBanner={true}
+          pilotTrialMonths={3}
+        />
 
         {/* Feature Comparison Link */}
         <div className="text-center mt-12">

frontend/src/components/subscription/SubscriptionPricingCards.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
-import { Check, Star, ArrowRight, Package, TrendingUp, Settings, Loader, Users, MapPin, CheckCircle, Zap } from 'lucide-react';
+import { Check, Star, ArrowRight, Package, TrendingUp, Settings, Loader, Users, MapPin, CheckCircle, Zap, ChevronDown, ChevronUp } from 'lucide-react';
 import { Button, Card, Badge } from '../ui';
 import {
   subscriptionService,
@@ -10,6 +10,8 @@ import {
   SUBSCRIPTION_TIERS
 } from '../../api';
 import { getRegisterUrl } from '../../utils/navigation';
+import { ValuePropositionBadge } from './ValuePropositionBadge';
+import { PricingFeatureCategory } from './PricingFeatureCategory';
 
 type BillingCycle = 'monthly' | 'yearly';
 type DisplayMode = 'landing' | 'selection';
@@ -33,11 +35,12 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
   pilotTrialMonths = 3,
   className = ''
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation('subscription');
   const [plans, setPlans] = useState<Record<SubscriptionTier, PlanMetadata> | null>(null);
   const [billingCycle, setBillingCycle] = useState<BillingCycle>('monthly');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [expandedPlan, setExpandedPlan] = useState<string | null>(null);
 
   useEffect(() => {
     loadPlans();
@@ -243,7 +246,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 ${isSelected
                   ? 'border-2 border-[var(--color-primary)] bg-gradient-to-br from-[var(--color-primary)]/10 via-[var(--color-primary)]/5 to-transparent shadow-2xl ring-4 ring-[var(--color-primary)]/30 scale-[1.02]'
                   : isPopular
-                    ? 'bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary)] to-[var(--color-primary-dark)] shadow-2xl transform scale-105 z-10'
+                    ? 'bg-gradient-to-br from-blue-700 via-blue-800 to-blue-900 shadow-2xl transform scale-105 z-10 ring-4 ring-[var(--color-primary)]/20'
                     : 'bg-[var(--bg-secondary)] border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 hover:shadow-xl hover:-translate-y-1'
                 }
               `}
@@ -276,18 +279,18 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 <h3 className={`text-2xl font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
                   {plan.name}
                 </h3>
-                <p className={`mt-3 leading-relaxed ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
-                  {plan.tagline}
+                <p className={`mt-3 text-sm leading-relaxed ${isPopular ? 'text-white' : 'text-[var(--text-secondary)]'}`}>
+                  {plan.tagline_key ? t(plan.tagline_key) : plan.tagline || ''}
                 </p>
               </div>
 
               {/* Pricing */}
-              <div className="mb-8">
+              <div className="mb-6">
                 <div className="flex items-baseline">
                   <span className={`text-5xl font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
                     {subscriptionService.formatPrice(price)}
                   </span>
-                  <span className={`ml-2 text-lg ${isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}`}>
+                  <span className={`ml-2 text-lg ${isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}`}>
                     /{billingCycle === 'monthly' ? 'mes' : 'año'}
                   </span>
                 </div>
@@ -302,50 +305,99 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 )}
 
                 {/* Trial Badge */}
-                {!savings && (
+                {!savings && showPilotBanner && (
                   <div className={`mt-2 px-3 py-1 text-sm font-medium rounded-full inline-block ${
                     isPopular ? 'bg-white/20 text-white' : 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
                   }`}>
-                    3 meses gratis
+                    {pilotTrialMonths} meses gratis
+                  </div>
+                )}
+                {!savings && !showPilotBanner && (
+                  <div className={`mt-2 px-3 py-1 text-sm font-medium rounded-full inline-block ${
+                    isPopular ? 'bg-white/20 text-white' : 'bg-[var(--color-success)]/10 text-[var(--color-success)]'
+                  }`}>
+                    {plan.trial_days} días gratis
                   </div>
                 )}
               </div>
 
+              {/* ROI Badge */}
+              {plan.roi_badge && !isPopular && (
+                <div className="mb-4">
+                  <ValuePropositionBadge roiBadge={plan.roi_badge} />
+                </div>
+              )}
+              {plan.roi_badge && isPopular && (
+                <div className="mb-4 bg-white/20 border border-white/30 rounded-lg px-4 py-3">
+                  <p className="text-sm font-semibold text-white leading-tight flex items-center gap-2">
+                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                    {plan.roi_badge.translation_key ? t(plan.roi_badge.translation_key) : (plan.roi_badge.text_es || plan.roi_badge.text || '')}
+                  </p>
+                </div>
+              )}
+
+              {/* Good For / Recommended For */}
+              {plan.recommended_for_key && (
+                <div className={`mb-6 text-center px-4 py-2 rounded-lg ${
+                  isPopular
+                    ? 'bg-white/10 border border-white/20'
+                    : 'bg-[var(--bg-secondary)] border border-[var(--border-primary)]'
+                }`}>
+                  <p className={`text-xs font-medium ${isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}`}>
+                    {t(plan.recommended_for_key)}
+                  </p>
+                </div>
+              )}
+
               {/* Key Limits */}
-              <div className={`mb-6 p-4 rounded-lg ${
-                isPopular ? 'bg-white/10' : isSelected ? 'bg-[var(--color-primary)]/5' : 'bg-[var(--bg-primary)]'
+              <div className={`mb-6 p-3 rounded-lg ${
+                isPopular ? 'bg-white/15 border border-white/20' : isSelected ? 'bg-[var(--color-primary)]/5' : 'bg-[var(--bg-primary)]'
               }`}>
-                <div className="grid grid-cols-2 gap-3 text-sm">
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Usuarios:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.users || 'Ilimitado'}
+                <div className="space-y-2">
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <Users className="w-3 h-3 inline mr-1" />
+                      Usuarios
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.users || '∞'}
                     </span>
                   </div>
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Ubicaciones:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.locations || 'Ilimitado'}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <MapPin className="w-3 h-3 inline mr-1" />
+                      Ubicaciones
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.locations || '∞'}
                     </span>
                   </div>
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Productos:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.products || 'Ilimitado'}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <Package className="w-3 h-3 inline mr-1" />
+                      Productos
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.products || '∞'}
                     </span>
                   </div>
-                  <div>
-                    <span className={isPopular ? 'text-white/80' : 'text-[var(--text-secondary)]'}>Pronósticos/día:</span>
-                    <span className={`font-semibold ml-2 ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
-                      {plan.limits.forecasts_per_day || 'Ilimitado'}
+                  <div className="flex items-center justify-between text-xs">
+                    <span className={isPopular ? 'text-white/95' : 'text-[var(--text-secondary)]'}>
+                      <TrendingUp className="w-3 h-3 inline mr-1" />
+                      Pronóstico
+                    </span>
+                    <span className={`font-bold ${isPopular ? 'text-white' : isSelected ? 'text-[var(--color-primary)]' : 'text-[var(--text-primary)]'}`}>
+                      {plan.limits.forecast_horizon_days ? `${plan.limits.forecast_horizon_days}d` : '∞'}
                     </span>
                   </div>
                 </div>
               </div>
 
-              {/* Features List */}
-              <div className={`space-y-3 mb-8 max-h-80 overflow-y-auto pr-2 scrollbar-thin`}>
-                {plan.features.slice(0, 8).map((feature) => (
+              {/* Hero Features List */}
+              <div className={`space-y-3 mb-6`}>
+                {(plan.hero_features || plan.features.slice(0, 4)).map((feature) => (
                   <div key={feature} className="flex items-start">
                     <div className="flex-shrink-0 mt-1">
                       <div className={`w-5 h-5 rounded-full flex items-center justify-center ${
@@ -361,18 +413,63 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                     </span>
                   </div>
                 ))}
-                {plan.features.length > 8 && (
-                  <p className={`text-sm italic ${isPopular ? 'text-white/70' : 'text-[var(--text-secondary)]'}`}>
-                    Y {plan.features.length - 8} características más...
-                  </p>
-                )}
               </div>
 
+              {/* Expandable Features - Show All Button */}
+              {plan.features.length > 4 && (
+                <div className="mb-8">
+                  <button
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      setExpandedPlan(expandedPlan === tier ? null : tier);
+                    }}
+                    className={`w-full py-2 px-4 rounded-lg text-sm font-medium transition-all flex items-center justify-center gap-2 ${
+                      isPopular
+                        ? 'bg-white/10 hover:bg-white/20 text-white border border-white/20'
+                        : 'bg-[var(--bg-secondary)] hover:bg-[var(--bg-primary)] text-[var(--text-secondary)] border border-[var(--border-primary)]'
+                    }`}
+                  >
+                    {expandedPlan === tier ? (
+                      <>
+                        <ChevronUp className="w-4 h-4" />
+                        Mostrar menos características
+                      </>
+                    ) : (
+                      <>
+                        <ChevronDown className="w-4 h-4" />
+                        Ver todas las {plan.features.length} características
+                      </>
+                    )}
+                  </button>
+
+                  {/* Expanded Features List */}
+                  {expandedPlan === tier && (
+                    <div className={`mt-4 p-4 rounded-lg max-h-96 overflow-y-auto ${
+                      isPopular
+                        ? 'bg-white/10 border border-white/20'
+                        : 'bg-[var(--bg-primary)] border border-[var(--border-primary)]'
+                    }`}>
+                      <div className="space-y-2">
+                        {plan.features.map((feature) => (
+                          <div key={feature} className="flex items-start py-1">
+                            <Check className={`w-4 h-4 flex-shrink-0 mt-0.5 ${isPopular ? 'text-white' : 'text-[var(--color-success)]'}`} />
+                            <span className={`ml-2 text-xs ${isPopular ? 'text-white/95' : 'text-[var(--text-primary)]'}`}>
+                              {formatFeatureName(feature)}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+
               {/* Support */}
               <div className={`mb-6 text-sm text-center border-t pt-4 ${
-                isPopular ? 'text-white/80 border-white/20' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'
+                isPopular ? 'text-white/95 border-white/30' : 'text-[var(--text-secondary)] border-[var(--border-primary)]'
               }`}>
-                {plan.support}
+                {plan.support_key ? t(plan.support_key) : plan.support || ''}
               </div>
 
               {/* CTA Button */}
@@ -418,7 +515,7 @@ export const SubscriptionPricingCards: React.FC<SubscriptionPricingCardsProps> =
                 </Button>
               )}
 
-              <p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/70' : 'text-[var(--text-secondary)]'}`}>
+              <p className={`text-xs text-center mt-3 ${isPopular ? 'text-white/90' : 'text-[var(--text-secondary)]'}`}>
                 3 meses gratis • Tarjeta requerida para validación
               </p>
             </CardWrapper>

frontend/src/components/subscription/ValuePropositionBadge.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+interface ROIBadge {
+  savings_min?: number;
+  savings_max?: number;
+  currency?: string;
+  period?: string;
+  translation_key: string;
+  custom?: boolean;
+}
+
+interface ValuePropositionBadgeProps {
+  roiBadge: ROIBadge;
+  className?: string;
+}
+
+/**
+ * ValuePropositionBadge - Displays ROI and business value metrics for pricing tiers
+ * Shows savings potential to help bakery owners understand the value
+ */
+export const ValuePropositionBadge: React.FC<ValuePropositionBadgeProps> = ({
+  roiBadge,
+  className = '',
+}) => {
+  const { t } = useTranslation('subscription');
+  const displayText = t(roiBadge.translation_key);
+
+  return (
+    <div
+      className={`
+        bg-gradient-to-r from-green-50 to-emerald-50
+        border border-green-200
+        rounded-lg
+        px-4 py-3
+        flex items-center gap-2
+        ${className}
+      `}
+      role="status"
+      aria-label="ROI information"
+    >
+      <div className="flex-shrink-0">
+        <svg
+          className="w-5 h-5 text-green-600"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <div className="flex-1">
+        <p className="text-sm font-semibold text-green-800 leading-tight">
+          {displayText}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ValuePropositionBadge;

frontend/src/locales/en/subscription.json

@@ -0,0 +1,74 @@
+{
+  "categories": {
+      "daily_operations": "Daily Operations",
+      "smart_forecasting": "Smart Forecasting",
+      "smart_ordering": "Smart Ordering",
+      "business_insights": "Business Insights",
+      "multi_location": "Multi-Location",
+      "integrations": "Integrations",
+      "support": "Support & Training"
+    },
+    "features": {
+      "inventory_management": "Track all your inventory in real-time",
+      "inventory_management_tooltip": "See stock levels, expiry dates, and get low-stock alerts",
+      "sales_tracking": "Record every sale automatically",
+      "sales_tracking_tooltip": "Connect your POS or manually track sales",
+      "basic_recipes": "Manage recipes & ingredients",
+      "basic_recipes_tooltip": "Track ingredient costs and recipe profitability",
+      "production_planning": "Plan daily production batches",
+      "production_planning_tooltip": "Know exactly what to bake each day",
+      "basic_forecasting": "AI predicts your daily demand (7 days)",
+      "basic_forecasting_tooltip": "AI learns your sales patterns to reduce waste",
+      "demand_prediction": "Know what to bake before you run out",
+      "seasonal_patterns": "AI detects seasonal trends",
+      "seasonal_patterns_tooltip": "Understand Christmas, summer, and holiday patterns",
+      "weather_data_integration": "Weather-based demand predictions",
+      "weather_data_integration_tooltip": "Rainy days = more pastries, sunny days = less bread",
+      "traffic_data_integration": "Traffic & event impact analysis",
+      "traffic_data_integration_tooltip": "Predict demand during local events and high traffic",
+      "supplier_management": "Never run out of ingredients",
+      "supplier_management_tooltip": "Automatic reorder alerts based on usage",
+      "waste_tracking": "Track & reduce waste",
+      "waste_tracking_tooltip": "See what's expiring and why products go unsold",
+      "expiry_alerts": "Expiry date alerts",
+      "expiry_alerts_tooltip": "Get notified before ingredients expire",
+      "basic_reporting": "Sales & inventory reports",
+      "advanced_analytics": "Advanced profit & trend analysis",
+      "advanced_analytics_tooltip": "Understand which products make you the most money",
+      "profitability_analysis": "See profit margins by product",
+      "multi_location_support": "Manage up to 3 bakery locations",
+      "inventory_transfer": "Transfer products between locations",
+      "location_comparison": "Compare performance across bakeries",
+      "pos_integration": "Connect your POS system",
+      "pos_integration_tooltip": "Automatic sales import from your cash register",
+      "accounting_export": "Export to accounting software",
+      "full_api_access": "Full API access for custom integrations",
+      "email_support": "Email support (48h response)",
+      "phone_support": "Phone support (24h response)",
+      "dedicated_account_manager": "Dedicated account manager",
+      "support_24_7": "24/7 priority support"
+    },
+    "plans": {
+      "starter": {
+        "description": "Perfect for small bakeries getting started",
+        "tagline": "Start reducing waste and selling more",
+        "roi_badge": "Bakeries save €300-500/month on waste",
+        "support": "Email support (48h response)",
+        "recommended_for": "Single bakery, up to 50 products, 5 team members"
+      },
+      "professional": {
+        "description": "For growing bakeries with multiple locations",
+        "tagline": "Grow smart with advanced AI",
+        "roi_badge": "Bakeries save €800-1,200/month on waste & ordering",
+        "support": "Priority email + phone support (24h response)",
+        "recommended_for": "Growing bakeries, 2-3 locations, 100-500 products"
+      },
+      "enterprise": {
+        "description": "For large bakery chains and franchises",
+        "tagline": "No limits, maximum control",
+        "roi_badge": "Contact us for custom ROI analysis",
+        "support": "24/7 dedicated support + account manager",
+        "recommended_for": "Bakery chains, franchises, unlimited scale"
+      }
+    }
+  }

frontend/src/locales/es/subscription.json

@@ -0,0 +1,74 @@
+{
+  "categories": {
+      "daily_operations": "Operaciones Diarias",
+      "smart_forecasting": "Predicción Inteligente",
+      "smart_ordering": "Pedidos Inteligentes",
+      "business_insights": "Análisis de Negocio",
+      "multi_location": "Multi-Ubicación",
+      "integrations": "Integraciones",
+      "support": "Soporte y Formación"
+    },
+    "features": {
+      "inventory_management": "Controla todo tu inventario en tiempo real",
+      "inventory_management_tooltip": "Ve niveles de stock, fechas de caducidad y alertas de bajo stock",
+      "sales_tracking": "Registra cada venta automáticamente",
+      "sales_tracking_tooltip": "Conecta tu TPV o registra ventas manualmente",
+      "basic_recipes": "Gestiona recetas e ingredientes",
+      "basic_recipes_tooltip": "Controla costes de ingredientes y rentabilidad de recetas",
+      "production_planning": "Planifica producción diaria",
+      "production_planning_tooltip": "Sabe exactamente qué hornear cada día",
+      "basic_forecasting": "IA predice tu demanda diaria (7 días)",
+      "basic_forecasting_tooltip": "IA aprende tus patrones de venta para reducir desperdicio",
+      "demand_prediction": "Sabe qué hornear antes de quedarte sin stock",
+      "seasonal_patterns": "IA detecta tendencias estacionales",
+      "seasonal_patterns_tooltip": "Entiende patrones de Navidad, verano y festivos",
+      "weather_data_integration": "Predicciones basadas en el clima",
+      "weather_data_integration_tooltip": "Días lluviosos = más bollería, días soleados = menos pan",
+      "traffic_data_integration": "Análisis de tráfico y eventos",
+      "traffic_data_integration_tooltip": "Predice demanda durante eventos locales y alto tráfico",
+      "supplier_management": "Nunca te quedes sin ingredientes",
+      "supplier_management_tooltip": "Alertas automáticas de reorden según uso",
+      "waste_tracking": "Controla y reduce desperdicios",
+      "waste_tracking_tooltip": "Ve qué caduca y por qué productos no se venden",
+      "expiry_alerts": "Alertas de caducidad",
+      "expiry_alerts_tooltip": "Recibe avisos antes de que caduquen ingredientes",
+      "basic_reporting": "Informes de ventas e inventario",
+      "advanced_analytics": "Análisis avanzado de beneficios y tendencias",
+      "advanced_analytics_tooltip": "Entiende qué productos te dan más beneficios",
+      "profitability_analysis": "Ve márgenes de beneficio por producto",
+      "multi_location_support": "Gestiona hasta 3 panaderías",
+      "inventory_transfer": "Transfiere productos entre ubicaciones",
+      "location_comparison": "Compara rendimiento entre panaderías",
+      "pos_integration": "Conecta tu sistema TPV",
+      "pos_integration_tooltip": "Importación automática de ventas desde tu caja",
+      "accounting_export": "Exporta a software de contabilidad",
+      "full_api_access": "API completa para integraciones personalizadas",
+      "email_support": "Soporte por email (48h)",
+      "phone_support": "Soporte telefónico (24h)",
+      "dedicated_account_manager": "Gestor de cuenta dedicado",
+      "support_24_7": "Soporte prioritario 24/7"
+    },
+    "plans": {
+      "starter": {
+        "description": "Perfecto para panaderías pequeñas comenzando",
+        "tagline": "Empieza a reducir desperdicios y vender más",
+        "roi_badge": "Panaderías ahorran €300-500/mes en desperdicios",
+        "support": "Soporte por email (48h)",
+        "recommended_for": "Una panadería, hasta 50 productos, 5 miembros del equipo"
+      },
+      "professional": {
+        "description": "Para panaderías en crecimiento con múltiples ubicaciones",
+        "tagline": "Crece inteligentemente con IA avanzada",
+        "roi_badge": "Panaderías ahorran €800-1,200/mes en desperdicios y pedidos",
+        "support": "Soporte prioritario por email + teléfono (24h)",
+        "recommended_for": "Panaderías en crecimiento, 2-3 ubicaciones, 100-500 productos"
+      },
+      "enterprise": {
+        "description": "Para cadenas de panaderías y franquicias",
+        "tagline": "Sin límites, máximo control",
+        "roi_badge": "Contacta para análisis ROI personalizado",
+        "support": "Soporte dedicado 24/7 + gestor de cuenta",
+        "recommended_for": "Cadenas de panaderías, franquicias, escala ilimitada"
+      }
+    }
+  }

frontend/src/locales/eu/subscription.json

@@ -0,0 +1,74 @@
+{
+  "categories": {
+      "daily_operations": "Eguneroko Eragiketak",
+      "smart_forecasting": "Iragarpen Adimentsua",
+      "smart_ordering": "Eskaera Adimentsua",
+      "business_insights": "Negozioaren Analisia",
+      "multi_location": "Hainbat Kokapen",
+      "integrations": "Integrazioak",
+      "support": "Laguntza eta Prestakuntza"
+    },
+    "features": {
+      "inventory_management": "Kontrolatu zure inbentario guztia denbora errealean",
+      "inventory_management_tooltip": "Ikusi stock mailak, iraungitze datak eta stock baxuko alertak",
+      "sales_tracking": "Erregistratu salmenta guztiak automatikoki",
+      "sales_tracking_tooltip": "Konektatu zure TPV edo erregistratu salmentak eskuz",
+      "basic_recipes": "Kudeatu errezetak eta osagaiak",
+      "basic_recipes_tooltip": "Kontrolatu osagaien kostuak eta errezeten errentagarritasuna",
+      "production_planning": "Planifikatu eguneko ekoizpena",
+      "production_planning_tooltip": "Jakin zehazki zer labean egun bakoitzean",
+      "basic_forecasting": "AIk zure eguneroko eskaria aurreikusten du (7 egun)",
+      "basic_forecasting_tooltip": "AIk zure salmenten ereduak ikasten ditu hondakina murrizteko",
+      "demand_prediction": "Jakin zer labean stock gabe gelditu aurretik",
+      "seasonal_patterns": "AIk sasoiko joerak detektatzen ditu",
+      "seasonal_patterns_tooltip": "Ulertu Eguberriko, udako eta jaieguneko ereduak",
+      "weather_data_integration": "Eguraldian oinarritutako eskaeraren iragarpenak",
+      "weather_data_integration_tooltip": "Egun euritsua = gozoki gehiago, egun eguratsua = ogi gutxiago",
+      "traffic_data_integration": "Trafikoaren eta ekitaldien inpaktuaren analisia",
+      "traffic_data_integration_tooltip": "Iragarri eskaria tokiko ekitaldien eta trafikoko gehiengo denboran",
+      "supplier_management": "Ez gelditu inoiz osagairik gabe",
+      "supplier_management_tooltip": "Erabileraren arabera berrizatzeko alertak automatikoak",
+      "waste_tracking": "Kontrolatu eta murriztu hondakinak",
+      "waste_tracking_tooltip": "Ikusi zer iraungitzen den eta zergatik ez diren produktuak saltzen",
+      "expiry_alerts": "Iraungitze dataren alertak",
+      "expiry_alerts_tooltip": "Jaso jakinarazpenak osagaiak iraungi aurretik",
+      "basic_reporting": "Salmenten eta inbentarioaren txostenak",
+      "advanced_analytics": "Irabazien eta joeren analisi aurreratua",
+      "advanced_analytics_tooltip": "Ulertu zein produktuk ematen dizkizuten irabazi gehien",
+      "profitability_analysis": "Ikusi produktuko irabazi-marjinak",
+      "multi_location_support": "Kudeatu 3 ogi-denda arte",
+      "inventory_transfer": "Transferitu produktuak kokapenen artean",
+      "location_comparison": "Konparatu errendimendua ogi-denda artean",
+      "pos_integration": "Konektatu zure TPV sistema",
+      "pos_integration_tooltip": "Salmenten inportazio automatikoa zure kutxatik",
+      "accounting_export": "Esportatu kontabilitate softwarera",
+      "full_api_access": "API osoa integraz personaletarako",
+      "email_support": "Posta elektronikoko laguntza (48h)",
+      "phone_support": "Telefono laguntza (24h)",
+      "dedicated_account_manager": "Kontu kudeatzaile dedikatua",
+      "support_24_7": "24/7 lehentasunezko laguntza"
+    },
+    "plans": {
+      "starter": {
+        "description": "Egokia hasten diren ogi-denda txikientzat",
+        "tagline": "Hasi hondakinak murrizten eta gehiago saltzen",
+        "roi_badge": "Ogi-dendek €300-500/hilean aurrezten dituzte hondakinetan",
+        "support": "Posta elektronikoko laguntza (48h)",
+        "recommended_for": "Ogi-denda bat, 50 produktu arte, 5 taldekide"
+      },
+      "professional": {
+        "description": "Hazteko ogi-dendak hainbat kokapenekin",
+        "tagline": "Hazi adimentsua AI aurreratuarekin",
+        "roi_badge": "Ogi-dendek €800-1,200/hilean aurrezten dituzte hondakinak eta eskaerak",
+        "support": "Lehentasunezko posta + telefono laguntza (24h)",
+        "recommended_for": "Hazteko ogi-dendak, 2-3 kokapenekin, 100-500 produktu"
+      },
+      "enterprise": {
+        "description": "Ogi-denda kateak eta frantzizietarako",
+        "tagline": "Mugarik gabe, kontrol maximoa",
+        "roi_badge": "Jarri gurekin harremanetan ROI analisi pertsonalizaturako",
+        "support": "24/7 laguntza dedikatua + kontu kudeatzailea",
+        "recommended_for": "Ogi-denda kateak, frantziziak, eskala mugagabea"
+      }
+    }
+  }

frontend/src/locales/index.ts

@@ -15,6 +15,7 @@ import settingsEs from './es/settings.json';
 import ajustesEs from './es/ajustes.json';
 import reasoningEs from './es/reasoning.json';
 import wizardsEs from './es/wizards.json';
+import subscriptionEs from './es/subscription.json';
 
 // English translations
 import commonEn from './en/common.json';
@@ -33,6 +34,7 @@ import settingsEn from './en/settings.json';
 import ajustesEn from './en/ajustes.json';
 import reasoningEn from './en/reasoning.json';
 import wizardsEn from './en/wizards.json';
+import subscriptionEn from './en/subscription.json';
 
 // Basque translations
 import commonEu from './eu/common.json';
@@ -51,6 +53,7 @@ import settingsEu from './eu/settings.json';
 import ajustesEu from './eu/ajustes.json';
 import reasoningEu from './eu/reasoning.json';
 import wizardsEu from './eu/wizards.json';
+import subscriptionEu from './eu/subscription.json';
 
 // Translation resources by language
 export const resources = {
@@ -71,6 +74,7 @@ export const resources = {
     ajustes: ajustesEs,
     reasoning: reasoningEs,
     wizards: wizardsEs,
+    subscription: subscriptionEs,
   },
   en: {
     common: commonEn,
@@ -89,6 +93,7 @@ export const resources = {
     ajustes: ajustesEn,
     reasoning: reasoningEn,
     wizards: wizardsEn,
+    subscription: subscriptionEn,
   },
   eu: {
     common: commonEu,
@@ -107,6 +112,7 @@ export const resources = {
     ajustes: ajustesEu,
     reasoning: reasoningEu,
     wizards: wizardsEu,
+    subscription: subscriptionEu,
   },
 };
 
@@ -143,7 +149,7 @@ export const languageConfig = {
 };
 
 // Namespaces available in translations
-export const namespaces = ['common', 'auth', 'inventory', 'foodSafety', 'suppliers', 'orders', 'recipes', 'errors', 'dashboard', 'production', 'equipment', 'landing', 'settings', 'ajustes', 'reasoning', 'wizards'] as const;
+export const namespaces = ['common', 'auth', 'inventory', 'foodSafety', 'suppliers', 'orders', 'recipes', 'errors', 'dashboard', 'production', 'equipment', 'landing', 'settings', 'ajustes', 'reasoning', 'wizards', 'subscription'] as const;
 export type Namespace = typeof namespaces[number];
 
 // Helper function to get language display name