Update landing page

frontend/src/components/domain/auth/PaymentForm.tsx

@@ -10,6 +10,8 @@ interface PaymentFormProps {
   className?: string;
   bypassPayment?: boolean;
   onBypassToggle?: () => void;
+  userName?: string;
+  userEmail?: string;
 }
 
 const PaymentForm: React.FC<PaymentFormProps> = ({
@@ -17,7 +19,9 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
   onPaymentError,
   className = '',
   bypassPayment = false,
-  onBypassToggle
+  onBypassToggle,
+  userName = '',
+  userEmail = ''
 }) => {
  const { t } = useTranslation();
   const stripe = useStripe();
@@ -26,8 +30,8 @@ const PaymentForm: React.FC<PaymentFormProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [cardComplete, setCardComplete] = useState(false);
   const [billingDetails, setBillingDetails] = useState({
-    name: '',
-    email: '',
+    name: userName,
+    email: userEmail,
     address: {
       line1: '',
       city: '',

frontend/src/components/domain/auth/PilotBanner.tsx

@@ -1,76 +0,0 @@
-/**
- * Pilot Banner Component
- * Displays when pilot=true URL parameter is detected
- * Shows 3-month free trial information and PILOT2025 coupon code
- */
-import React from 'react';
-import { Star, Check, Award } from 'lucide-react';
-import { Card } from '../../ui';
-
-interface PilotBannerProps {
-  couponCode: string;
-  trialMonths: number;
-  className?: string;
-}
-
-export const PilotBanner: React.FC<PilotBannerProps> = ({
-  couponCode,
-  trialMonths,
-  className = ''
-}) => {
-  return (
-    <Card className={`p-6 border-2 border-amber-500 dark:border-amber-600 bg-gradient-to-r from-amber-50 via-orange-50 to-amber-50 dark:from-amber-900/20 dark:via-orange-900/20 dark:to-amber-900/20 ${className}`}>
-      <div className="flex items-start gap-4">
-        {/* Icon */}
-        <div className="flex-shrink-0 w-12 h-12 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-lg">
-          <Award className="w-6 h-6 text-white" />
-        </div>
-
-        {/* Content */}
-        <div className="flex-1">
-          <div className="flex items-center gap-2 mb-2">
-            <Star className="w-5 h-5 text-amber-600 dark:text-amber-400 fill-amber-600 dark:fill-amber-400" />
-            <h3 className="text-lg font-bold text-amber-900 dark:text-amber-100">
-              ¡Programa Piloto Activado!
-            </h3>
-            <Star className="w-5 h-5 text-amber-600 dark:text-amber-400 fill-amber-600 dark:fill-amber-400" />
-          </div>
-
-          <p className="text-sm text-amber-800 dark:text-amber-200 mb-3">
-            Has sido seleccionado para nuestro programa piloto exclusivo.
-            Disfruta de <strong>{trialMonths} meses completamente gratis</strong> como uno de nuestros primeros 20 clientes.
-          </p>
-
-          <div className="flex flex-wrap gap-3">
-            <div className="flex items-center gap-2 bg-white/60 dark:bg-gray-800/60 px-3 py-1.5 rounded-lg border border-amber-300 dark:border-amber-700">
-              <Check className="w-4 h-4 text-green-600 dark:text-green-400" />
-              <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-                Cupón: <span className="font-mono font-bold text-amber-700 dark:text-amber-300">{couponCode}</span>
-              </span>
-            </div>
-
-            <div className="flex items-center gap-2 bg-white/60 dark:bg-gray-800/60 px-3 py-1.5 rounded-lg border border-amber-300 dark:border-amber-700">
-              <Check className="w-4 h-4 text-green-600 dark:text-green-400" />
-              <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-                {trialMonths} meses gratis
-              </span>
-            </div>
-
-            <div className="flex items-center gap-2 bg-white/60 dark:bg-gray-800/60 px-3 py-1.5 rounded-lg border border-amber-300 dark:border-amber-700">
-              <Check className="w-4 h-4 text-green-600 dark:text-green-400" />
-              <span className="text-sm font-medium text-gray-800 dark:text-gray-200">
-                20% descuento de por vida
-              </span>
-            </div>
-          </div>
-
-          <p className="text-xs text-amber-700 dark:text-amber-300 mt-3 italic">
-            El cupón se aplicará automáticamente durante el registro. Tarjeta requerida para validación, sin cargo inmediato.
-          </p>
-        </div>
-      </div>
-    </Card>
-  );
-};
-
-export default PilotBanner;

frontend/src/components/domain/auth/RegisterForm.tsx

@@ -1,19 +1,30 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import { Button, Input, Card } from '../../ui';
 import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
 import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
 import { useToast } from '../../../hooks/ui/useToast';
-import { SubscriptionSelection } from './SubscriptionSelection';
+import { SubscriptionPricingCards } from '../../subscription/SubscriptionPricingCards';
 import PaymentForm from './PaymentForm';
-import PilotBanner from './PilotBanner';
 import { loadStripe } from '@stripe/stripe-js';
 import { Elements } from '@stripe/react-stripe-js';
-import { CheckCircle } from 'lucide-react';
+import { CheckCircle, Clock } from 'lucide-react';
 import { usePilotDetection } from '../../../hooks/usePilotDetection';
+import { subscriptionService } from '../../../api';
 
-// Initialize Stripe - In production, use environment variable
-const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51234567890123456789012345678901234567890123456789012345678901234567890123456789012345');
+// Helper to get Stripe key from runtime config or build-time env
+const getStripeKey = (): string => {
+  // Try runtime config first (Kubernetes/Docker)
+  if (typeof window !== 'undefined' && window.__RUNTIME_CONFIG__?.VITE_STRIPE_PUBLISHABLE_KEY) {
+    return window.__RUNTIME_CONFIG__.VITE_STRIPE_PUBLISHABLE_KEY;
+  }
+  // Fallback to build-time env (local development)
+  return import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51234567890123456789012345678901234567890123456789012345678901234567890123456789012345';
+};
+
+// Initialize Stripe with runtime or build-time key
+const stripePromise = loadStripe(getStripeKey());
 
 interface RegisterFormProps {
   onSuccess?: () => void;
@@ -62,11 +73,17 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
   // Detect pilot program participation
   const { isPilot, couponCode, trialMonths } = usePilotDetection();
 
+  // Read URL parameters for plan persistence
+  const [searchParams] = useSearchParams();
+  const preSelectedPlan = searchParams.get('plan') as string | null; // starter | professional | enterprise
+  const urlPilotParam = searchParams.get('pilot') === 'true';
+
   // Multi-step form state
   const [currentStep, setCurrentStep] = useState<RegistrationStep>('basic_info');
-  const [selectedPlan, setSelectedPlan] = useState<string>('starter');
-  const [useTrial, setUseTrial] = useState<boolean>(isPilot);  // Auto-enable trial for pilot customers
+  const [selectedPlan, setSelectedPlan] = useState<string>(preSelectedPlan || 'starter');
+  const [useTrial, setUseTrial] = useState<boolean>(isPilot || urlPilotParam);  // Auto-enable trial for pilot customers
   const [bypassPayment, setBypassPayment] = useState<boolean>(false);
+  const [selectedPlanMetadata, setSelectedPlanMetadata] = useState<any>(null);
   
   // Helper function to determine password match status
  const getPasswordMatchStatus = () => {
@@ -77,6 +94,58 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
   const passwordMatchStatus = getPasswordMatchStatus();
 
+  // Load plan metadata when plan changes
+  useEffect(() => {
+    const loadPlanMetadata = async () => {
+      try {
+        const plans = await subscriptionService.fetchAvailablePlans();
+        const planData = plans.plans[selectedPlan as keyof typeof plans.plans];
+        setSelectedPlanMetadata(planData);
+      } catch (err) {
+        console.error('Failed to load plan metadata:', err);
+      }
+    };
+    loadPlanMetadata();
+  }, [selectedPlan]);
+
+  // Save form progress to localStorage
+  useEffect(() => {
+    const formState = {
+      formData,
+      selectedPlan,
+      useTrial,
+      currentStep,
+      timestamp: Date.now(),
+    };
+    localStorage.setItem('registration_progress', JSON.stringify(formState));
+  }, [formData, selectedPlan, useTrial, currentStep]);
+
+  // Recover form state on mount (if less than 24 hours old)
+  useEffect(() => {
+    // Only recover if not coming from a direct link with plan pre-selected
+    if (preSelectedPlan) return;
+
+    const saved = localStorage.getItem('registration_progress');
+    if (saved) {
+      try {
+        const state = JSON.parse(saved);
+        const age = Date.now() - state.timestamp;
+        const maxAge = 24 * 60 * 60 * 1000; // 24 hours
+
+        if (age < maxAge) {
+          // Optionally restore state (for now, just log it exists)
+          console.log('Found saved registration progress');
+        } else {
+          // Clear old state
+          localStorage.removeItem('registration_progress');
+        }
+      } catch (err) {
+        console.error('Failed to parse saved registration state:', err);
+        localStorage.removeItem('registration_progress');
+      }
+    }
+  }, [preSelectedPlan]);
+
   const validateForm = (): boolean => {
     const newErrors: Partial<SimpleUserRegistration> = {};
     
@@ -120,17 +189,25 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
       if (!validateForm()) {
         return;
       }
-      setCurrentStep('subscription');
+      // OPTION A: Skip subscription step if plan was pre-selected from pricing page
+      if (preSelectedPlan) {
+        setCurrentStep('payment');
+      } else {
+        setCurrentStep('subscription');
+      }
     } else if (currentStep === 'subscription') {
       setCurrentStep('payment');
     }
   };
 
   const handlePreviousStep = () => {
-    if (currentStep === 'subscription') {
+    if (currentStep === 'payment' && preSelectedPlan) {
+      // Go back to basic_info (skip subscription step)
       setCurrentStep('basic_info');
     } else if (currentStep === 'payment') {
       setCurrentStep('subscription');
+    } else if (currentStep === 'subscription') {
+      setCurrentStep('basic_info');
     }
   };
 
@@ -190,11 +267,17 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
 
   // Render step indicator
   const renderStepIndicator = () => {
-    const steps = [
-      { key: 'basic_info', label: 'Información', number: 1 },
-      { key: 'subscription', label: 'Plan', number: 2 },
-      { key: 'payment', label: 'Pago', number: 3 }
-    ];
+    // Show 2 steps if plan is pre-selected, 3 steps otherwise
+    const steps = preSelectedPlan
+      ? [
+          { key: 'basic_info', label: 'Información', number: 1, time: '2 min' },
+          { key: 'payment', label: 'Pago', number: 2, time: '2 min' }
+        ]
+      : [
+          { key: 'basic_info', label: 'Información', number: 1, time: '2 min' },
+          { key: 'subscription', label: 'Plan', number: 2, time: '1 min' },
+          { key: 'payment', label: 'Pago', number: 3, time: '2 min' }
+        ];
 
     const getStepIndex = (step: RegistrationStep) => {
       return steps.findIndex(s => s.key === step);
@@ -221,11 +304,19 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
                     step.number
                   )}
                 </div>
-                <span className={`mt-1 sm:mt-2 text-[10px] sm:text-xs font-medium hidden sm:block ${
-                  index <= currentIndex ? 'text-text-primary' : 'text-text-secondary'
-                }`}>
-                  {step.label}
-                </span>
+                <div className="flex flex-col items-center mt-1 sm:mt-2">
+                  <span className={`text-[10px] sm:text-xs font-medium block ${
+                    index <= currentIndex ? 'text-text-primary' : 'text-text-secondary'
+                  }`}>
+                    {step.label}
+                  </span>
+                  <span className={`text-[8px] sm:text-[10px] flex items-center gap-0.5 ${
+                    index === currentIndex ? 'text-text-tertiary' : 'hidden sm:flex text-text-tertiary'
+                  }`}>
+                    <Clock className="w-2 h-2 sm:w-3 sm:h-3" />
+                    {step.time}
+                  </span>
+                </div>
               </div>
               {index < steps.length - 1 && (
                 <div className={`h-0.5 w-8 sm:w-16 mx-2 sm:mx-4 transition-all duration-200 ${
@@ -497,16 +588,13 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
               </p>
             </div>
 
-            {isPilot && couponCode && (
-              <PilotBanner couponCode={couponCode} trialMonths={trialMonths} />
-            )}
-
-            <SubscriptionSelection
+            <SubscriptionPricingCards
+              mode="selection"
               selectedPlan={selectedPlan}
               onPlanSelect={setSelectedPlan}
-              showTrialOption={!isPilot}
-              onTrialSelect={setUseTrial}
-              trialSelected={useTrial}
+              showPilotBanner={isPilot}
+              pilotCouponCode={couponCode}
+              pilotTrialMonths={trialMonths}
             />
 
             <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-4 pt-2 border-t border-border-primary">
@@ -544,8 +632,52 @@ export const RegisterForm: React.FC<RegisterFormProps> = ({
               </p>
             </div>
 
+            {/* Plan Summary Card */}
+            {selectedPlanMetadata && (
+              <Card className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-2 border-blue-200 dark:border-blue-800">
+                <h3 className="text-lg font-bold text-text-primary mb-4 flex items-center gap-2">
+                  <CheckCircle className="w-5 h-5 text-color-primary" />
+                  Resumen de tu Plan
+                </h3>
+                <div className="space-y-3">
+                  <div className="flex justify-between items-center">
+                    <span className="text-text-secondary">Plan seleccionado:</span>
+                    <span className="font-bold text-color-primary text-lg">{selectedPlanMetadata.name}</span>
+                  </div>
+                  <div className="flex justify-between items-center">
+                    <span className="text-text-secondary">Precio mensual:</span>
+                    <span className="font-semibold text-text-primary">
+                      {subscriptionService.formatPrice(selectedPlanMetadata.monthly_price)}/mes
+                    </span>
+                  </div>
+                  {useTrial && (
+                    <div className="flex justify-between items-center pt-3 border-t border-blue-200 dark:border-blue-800">
+                      <span className="text-green-700 dark:text-green-400 font-medium">Período de prueba:</span>
+                      <span className="font-bold text-green-700 dark:text-green-400">
+                        {isPilot ? `${trialMonths} meses GRATIS` : '14 días gratis'}
+                      </span>
+                    </div>
+                  )}
+                  <div className="pt-3 border-t border-blue-200 dark:border-blue-800">
+                    <div className="flex justify-between items-center text-sm">
+                      <span className="text-text-tertiary">Total hoy:</span>
+                      <span className="font-bold text-xl text-color-success">€0.00</span>
+                    </div>
+                    <p className="text-xs text-text-tertiary mt-2 text-center">
+                      {useTrial
+                        ? `Se te cobrará ${subscriptionService.formatPrice(selectedPlanMetadata.monthly_price)} después del período de prueba`
+                        : 'Tarjeta requerida para validación'
+                      }
+                    </p>
+                  </div>
+                </div>
+              </Card>
+            )}
+
             <Elements stripe={stripePromise}>
               <PaymentForm
+                userName={formData.full_name}
+                userEmail={formData.email}
                 onPaymentSuccess={handlePaymentSuccess}
                 onPaymentError={handlePaymentError}
                 bypassPayment={bypassPayment}

frontend/src/components/domain/auth/SubscriptionSelection.tsx

@@ -1,371 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, Button, Badge } from '../../ui';
-import { CheckCircle, Users, MapPin, Package, TrendingUp, Star, ArrowRight, Zap } from 'lucide-react';
-import { subscriptionService, type AvailablePlans, type PlanMetadata, SUBSCRIPTION_TIERS } from '../../../api';
-
-interface SubscriptionSelectionProps {
-  selectedPlan: string;
-  onPlanSelect: (planKey: string) => void;
-  showTrialOption?: boolean;
-  onTrialSelect?: (useTrial: boolean) => void;
-  trialSelected?: boolean;
-  className?: string;
-}
-
-export const SubscriptionSelection: React.FC<SubscriptionSelectionProps> = ({
-  selectedPlan,
-  onPlanSelect,
-  showTrialOption = false,
-  onTrialSelect,
-  trialSelected = false,
-  className = ''
-}) => {
-  const { t } = useTranslation();
-  const [availablePlans, setAvailablePlans] = useState<AvailablePlans | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchPlans = async () => {
-      try {
-        setLoading(true);
-        setError(null);
-        const plans = await subscriptionService.fetchAvailablePlans();
-        setAvailablePlans(plans);
-      } catch (err) {
-        console.error('Error fetching subscription plans:', err);
-        setError('No se pudieron cargar los planes. Por favor, intenta de nuevo.');
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchPlans();
-  }, []);
-
-  if (loading) {
-    return (
-      <div className="flex justify-center items-center py-8">
-        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-color-primary"></div>
-      </div>
-    );
-  }
-
-  if (error || !availablePlans) {
-    return (
-      <div className="flex flex-col items-center justify-center py-8 space-y-4">
-        <div className="text-color-error text-center">
-          <p className="font-semibold">{error || 'Error al cargar los planes'}</p>
-        </div>
-        <Button
-          variant="outline"
-          onClick={() => window.location.reload()}
-        >
-          Intentar de nuevo
-        </Button>
-      </div>
-    );
-  }
-
-  const handleTrialToggle = () => {
-    if (onTrialSelect) {
-      onTrialSelect(!trialSelected);
-    }
-  };
-
-  // Helper function to translate feature names to Spanish
-  const translateFeature = (feature: string): string => {
-    const translations: Record<string, string> = {
-      'inventory_management': 'Gestión de inventario',
-      'sales_tracking': 'Seguimiento de ventas',
-      'basic_analytics': 'Analíticas básicas',
-      'basic_forecasting': 'Pronósticos básicos',
-      'pos_integration': 'Punto de venta integrado',
-      'production_planning': 'Planificación de producción',
-      'supplier_management': 'Gestión de proveedores',
-      'recipe_management': 'Gestión de recetas',
-      'advanced_analytics': 'Analíticas avanzadas',
-      'ai_forecasting': 'Pronósticos con IA',
-      'weather_data_integration': 'Integración datos meteorológicos',
-      'multi_location': 'Multi-ubicación',
-      'custom_reports': 'Reportes personalizados',
-      'api_access': 'Acceso API',
-      'priority_support': 'Soporte prioritario',
-      'dedicated_account_manager': 'Manager de cuenta dedicado',
-      'sla_guarantee': 'Garantía SLA',
-      'custom_integrations': 'Integraciones personalizadas',
-      'white_label': 'Marca blanca',
-      'advanced_security': 'Seguridad avanzada',
-      'audit_logs': 'Registros de auditoría',
-      'role_based_access': 'Control de acceso basado en roles',
-      'custom_workflows': 'Flujos de trabajo personalizados',
-      'training_sessions': 'Sesiones de capacitación',
-      'onboarding_support': 'Soporte de incorporación',
-      'data_export': 'Exportación de datos',
-      'backup_restore': 'Respaldo y restauración',
-      'mobile_app': 'Aplicación móvil',
-      'offline_mode': 'Modo offline',
-      'real_time_sync': 'Sincronización en tiempo real',
-      'notifications': 'Notificaciones',
-      'email_alerts': 'Alertas por email',
-      'sms_alerts': 'Alertas por SMS',
-      'inventory_alerts': 'Alertas de inventario',
-      'low_stock_alerts': 'Alertas de stock bajo',
-      'expiration_tracking': 'Seguimiento de caducidad',
-      'batch_tracking': 'Seguimiento de lotes',
-      'quality_control': 'Control de calidad',
-      'compliance_reporting': 'Reportes de cumplimiento',
-      'financial_reports': 'Reportes financieros',
-      'tax_reports': 'Reportes de impuestos',
-      'waste_tracking': 'Seguimiento de desperdicios',
-      'cost_analysis': 'Análisis de costos',
-      'profit_margins': 'Márgenes de ganancia',
-      'sales_forecasting': 'Pronóstico de ventas',
-      'demand_planning': 'Planificación de demanda',
-      'seasonal_trends': 'Tendencias estacionales',
-      'customer_analytics': 'Analíticas de clientes',
-      'loyalty_program': 'Programa de lealtad',
-      'discount_management': 'Gestión de descuentos',
-      'promotion_tracking': 'Seguimiento de promociones',
-      'gift_cards': 'Tarjetas de regalo',
-      'online_ordering': 'Pedidos en línea',
-      'delivery_management': 'Gestión de entregas',
-      'route_optimization': 'Optimización de rutas',
-      'driver_tracking': 'Seguimiento de conductores',
-      'customer_portal': 'Portal de clientes',
-      'vendor_portal': 'Portal de proveedores',
-      'invoice_management': 'Gestión de facturas',
-      'payment_processing': 'Procesamiento de pagos',
-      'purchase_orders': 'Órdenes de compra',
-      'receiving_management': 'Gestión de recepciones'
-    };
-    return translations[feature] || feature.replace(/_/g, ' ');
-  };
-
-  // Get trial days from the selected plan (default to 90 for pilot customers)
-  const trialDays = 90;  // 3 months for pilot customers
-
-  return (
-    <div className={`space-y-4 ${className}`}>
-      {showTrialOption && (
-        <Card className="p-4 border-2 border-color-primary/30 bg-gradient-to-r from-color-primary/5 to-color-primary/10">
-          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
-            <div className="flex items-center gap-3 flex-1">
-              <div className="p-2.5 bg-color-primary/20 rounded-lg flex-shrink-0">
-                <Star className="w-5 h-5 text-color-primary" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <h3 className="font-semibold text-text-primary text-base">
-                  {t('auth:subscription.trial_title', 'Prueba gratuita')}
-                </h3>
-                <p className="text-sm text-text-secondary">
-                  {t('auth:subscription.trial_description', `Obtén 3 meses de prueba gratuita - tarjeta requerida para validación`)}
-                </p>
-              </div>
-            </div>
-            <Button
-              variant={trialSelected ? "primary" : "outline"}
-              size="md"
-              onClick={handleTrialToggle}
-              className="w-full sm:w-auto flex-shrink-0 min-w-[100px]"
-            >
-              {trialSelected ? (
-                <div className="flex items-center gap-2">
-                  <CheckCircle className="w-4 h-4" />
-                  <span>{t('auth:subscription.trial_active', 'Activo')}</span>
-                </div>
-              ) : (
-                t('auth:subscription.trial_activate', 'Activar')
-              )}
-            </Button>
-          </div>
-        </Card>
-      )}
-
-      <div className="space-y-3">
-        {Object.entries(availablePlans.plans).map(([planKey, plan]) => {
-          const isSelected = selectedPlan === planKey;
-          const metadata = plan as PlanMetadata;
-
-          return (
-            <Card
-              key={planKey}
-              className={`relative p-6 cursor-pointer transition-all duration-200 border-2 ${
-                isSelected
-                  ? 'border-color-primary bg-color-primary/5 shadow-lg ring-2 ring-color-primary/20'
-                  : 'border-border-primary bg-bg-primary hover:border-color-primary/40 hover:shadow-md'
-              } ${metadata.popular ? 'pt-8' : ''}`}
-              onClick={() => onPlanSelect(planKey)}
-            >
-              {/* Popular Badge */}
-              {metadata.popular && (
-                <div className="absolute top-0 left-0 right-0 flex justify-center -translate-y-1/2 z-20">
-                  <Badge variant="primary" className="px-4 py-1.5 text-xs font-bold flex items-center gap-1.5 shadow-lg rounded-full">
-                    <Star className="w-3.5 h-3.5 fill-current" />
-                    {t('auth:subscription.popular', 'Más Popular')}
-                  </Badge>
-                </div>
-              )}
-
-              {/* Card Content */}
-              <div className="space-y-6">
-                {/* Header Section: Plan Info & Pricing */}
-                <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2 mb-2">
-                      <h4 className="text-2xl font-bold text-text-primary">{metadata.name}</h4>
-                      {metadata.trial_days > 0 && (
-                        <Badge variant="success" className="text-xs px-2 py-0.5">
-                          <Zap className="w-3 h-3 mr-1" />
-                          3 meses gratis
-                        </Badge>
-                      )}
-                    </div>
-                    <p className="text-sm text-color-primary font-semibold mb-3">{metadata.tagline}</p>
-                    <div className="flex items-baseline gap-1 mb-3">
-                      <span className="text-4xl font-bold text-color-primary">
-                        {subscriptionService.formatPrice(metadata.monthly_price)}
-                      </span>
-                      <span className="text-base text-text-secondary font-medium">/mes</span>
-                    </div>
-                    <p className="text-sm text-text-secondary leading-relaxed max-w-prose">{metadata.description}</p>
-                    {metadata.recommended_for && (
-                      <p className="text-xs text-text-tertiary mt-2 italic">
-                        💡 {metadata.recommended_for}
-                      </p>
-                    )}
-                  </div>
-
-                  {/* Action Button - Desktop position */}
-                  <div className="hidden sm:flex flex-shrink-0">
-                    <Button
-                      variant={isSelected ? "primary" : "outline"}
-                      className="min-w-[140px]"
-                      size="lg"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onPlanSelect(planKey);
-                      }}
-                    >
-                      {isSelected ? (
-                        <div className="flex items-center justify-center gap-2">
-                          <CheckCircle className="w-5 h-5" />
-                          <span className="font-semibold">Seleccionado</span>
-                        </div>
-                      ) : (
-                        <div className="flex items-center justify-center gap-2">
-                          <span className="font-semibold">Elegir Plan</span>
-                          <ArrowRight className="w-4 h-4" />
-                        </div>
-                      )}
-                    </Button>
-                  </div>
-                </div>
-
-                {/* Body Section: Limits & Features */}
-                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 pt-4 border-t border-border-primary/50">
-                  {/* Plan Limits */}
-                  <div className="space-y-3">
-                    <div className="flex items-center gap-2 mb-3">
-                      <Package className="w-5 h-5 text-color-primary flex-shrink-0" />
-                      <h5 className="text-base font-bold text-text-primary">
-                        Límites del Plan
-                      </h5>
-                    </div>
-                    <div className="space-y-2.5">
-                      <div className="flex items-center gap-2.5 text-sm text-text-primary">
-                        <Users className="w-4 h-4 text-color-accent flex-shrink-0" />
-                        <span className="font-medium">
-                          {metadata.limits.users === null ? 'Usuarios ilimitados' : `${metadata.limits.users} usuario${metadata.limits.users > 1 ? 's' : ''}`}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-2.5 text-sm text-text-primary">
-                        <MapPin className="w-4 h-4 text-color-accent flex-shrink-0" />
-                        <span className="font-medium">
-                          {metadata.limits.locations === null ? 'Ubicaciones ilimitadas' : `${metadata.limits.locations} ubicación${metadata.limits.locations > 1 ? 'es' : ''}`}
-                        </span>
-                      </div>
-                      <div className="flex items-center gap-2.5 text-sm text-text-primary">
-                        <Package className="w-4 h-4 text-color-accent flex-shrink-0" />
-                        <span className="font-medium">
-                          {metadata.limits.products === null ? 'Productos ilimitados' : `${metadata.limits.products} producto${metadata.limits.products > 1 ? 's' : ''}`}
-                        </span>
-                      </div>
-                      {metadata.limits.forecasts_per_day !== null && (
-                        <div className="flex items-center gap-2.5 text-sm text-text-primary">
-                          <TrendingUp className="w-4 h-4 text-color-accent flex-shrink-0" />
-                          <span className="font-medium">
-                            {metadata.limits.forecasts_per_day} pronóstico{metadata.limits.forecasts_per_day > 1 ? 's' : ''}/día
-                          </span>
-                        </div>
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Features */}
-                  <div className="space-y-3 lg:pl-6 lg:border-l border-border-primary/50">
-                    <div className="flex items-center gap-2 mb-3">
-                      <CheckCircle className="w-5 h-5 text-color-success flex-shrink-0" />
-                      <h5 className="text-base font-bold text-text-primary">
-                        {t('auth:subscription.features', 'Funcionalidades Incluidas')}
-                      </h5>
-                    </div>
-
-                    <div className="space-y-2.5 max-h-48 overflow-y-auto pr-2 scrollbar-thin">
-                      {metadata.features.slice(0, 8).map((feature, index) => (
-                        <div key={index} className="flex items-start gap-2.5 text-sm">
-                          <CheckCircle className="w-4 h-4 text-color-success flex-shrink-0 mt-0.5" />
-                          <span className="text-text-primary leading-snug">{translateFeature(feature)}</span>
-                        </div>
-                      ))}
-                      {metadata.features.length > 8 && (
-                        <p className="text-xs text-text-tertiary italic pl-6">
-                          +{metadata.features.length - 8} funcionalidades más
-                        </p>
-                      )}
-                    </div>
-
-                    {/* Support Level */}
-                    {metadata.support && (
-                      <div className="pt-3 mt-3 border-t border-border-primary/30">
-                        <p className="text-xs text-text-secondary">
-                          <span className="font-semibold">Soporte:</span> {metadata.support}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-
-                {/* Action Button - Mobile position */}
-                <div className="sm:hidden pt-4 border-t border-border-primary/50">
-                  <Button
-                    variant={isSelected ? "primary" : "outline"}
-                    className="w-full"
-                    size="lg"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onPlanSelect(planKey);
-                    }}
-                  >
-                    {isSelected ? (
-                      <div className="flex items-center justify-center gap-2">
-                        <CheckCircle className="w-5 h-5" />
-                        <span className="font-semibold">Seleccionado</span>
-                      </div>
-                    ) : (
-                      <div className="flex items-center justify-center gap-2">
-                        <span className="font-semibold">Elegir Plan</span>
-                        <ArrowRight className="w-4 h-4" />
-                      </div>
-                    )}
-                  </Button>
-                </div>
-              </div>
-            </Card>
-          );
-        })}
-      </div>
-    </div>
-  );
-};