import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PublicLayout } from '../../components/layout';
import {
  ProgressBar,
  FloatingCTA,
  ScrollReveal,
  SavingsCalculator,
  StepTimeline,
  AnimatedCounter,
  TimelineStep,
  Card,
  CardHeader,
  CardBody,
} from '../../components/ui';
import { getDemoUrl } from '../../utils/navigation';
import {
  Clock,
  MapPin,
  TrendingUp,
  Recycle,
  Leaf,
  Store,
  CheckCircle2,
  AlertTriangle,
  Globe,
  School,
  Building2,
  Dumbbell,
  ShoppingBag,
  Cloud,
  PartyPopper,
  ArrowRight,
  Target,
  TreeDeciduous,
  Droplets,
  Award,
  Database,
  FileText,
  Sparkles,
  Cpu,
  Smartphone
} from 'lucide-react';

const FeaturesPage: React.FC = () => {
  const { t } = useTranslation(['features', 'about']);
  const navigate = useNavigate();

  // Automatic System Timeline Steps
  const automaticSystemSteps: TimelineStep[] = [
    {
      id: 'step1',
      number: 1,
      title: t('automatic.step1.title', 'Revisa Todo Tu Inventario'),
      color: 'blue',
      items: [
        t('automatic.step1.item1', 'Cuenta cada kilo de harina, cada litro de leche'),
        t('automatic.step1.item2', 'Comprueba fechas de caducidad'),
        t('automatic.step1.item3', 'Ve qué llega hoy de proveedores'),
      ],
    },
    {
      id: 'step2',
      number: 2,
      title: t('automatic.step2.title', 'Predice Ventas de Hoy'),
      color: 'purple',
      items: [
        t('automatic.step2.item1', 'Analiza el día (lunes lluvioso, fiesta local, colegio cerrado)'),
        t('automatic.step2.item2', 'Compara con días similares del pasado'),
        t('automatic.step2.item3', 'Te dice: "Hoy venderás 80 croissants, 120 barras, 50 magdalenas"'),
      ],
    },
    {
      id: 'step3',
      number: 3,
      title: t('automatic.step3.title', 'Planifica Qué Hacer'),
      color: 'green',
      items: [
        t('automatic.step3.item1', 'Calcula exactamente cuánto hornear'),
        t('automatic.step3.item2', 'Te da una lista lista para ejecutar'),
        t('automatic.step3.item3', '"Haz 80 croissants (no 100), usa 5kg mantequilla, 3kg harina..."'),
      ],
    },
    {
      id: 'step4',
      number: 4,
      title: t('automatic.step4.title', 'Gestiona Inventario Inteligentemente'),
      color: 'amber',
      items: [
        t('automatic.step4.projection_title', 'Proyecta 7 días hacia adelante:'),
        t('automatic.step4.solution', '"Pide 50kg hoy, llega en 3 días, problema resuelto"'),
      ],
    },
    {
      id: 'step5',
      number: 5,
      title: t('automatic.step5.title', 'Crea Pedidos a Proveedores'),
      color: 'red',
      items: [
        t('automatic.step5.item1', 'Sabe que Proveedor A tarda 3 días, Proveedor B tarda 5'),
        t('automatic.step5.item2', 'Calcula cuándo pedir para que llegue justo a tiempo'),
        t('automatic.step5.item3', 'Prepara pedidos listos para aprobar con 1 clic'),
      ],
    },
    {
      id: 'step6',
      number: 6,
      title: t('automatic.step6.title', 'Previene Desperdicios'),
      color: 'teal',
      items: [
        t('automatic.step6.item1', '"Tienes leche que caduca en 5 días"'),
        t('automatic.step6.item2', '"Solo usarás 15L en 5 días"'),
        t('automatic.step6.item3', '"No pidas más de 15L, se desperdiciará"'),
      ],
    },
  ];


  return (
    <PublicLayout
      variant="default"
      contentPadding="md"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: true,
        showLanguageSelector: true,
        variant: "default"
      }}
    >
      {/* Progress Bar */}
      <ProgressBar position="top" height={3} />

      {/* Floating CTA */}
      <FloatingCTA
        text={t('cta.button', 'Solicitar Demo')}
        onClick={() => navigate(getDemoUrl())}
        icon={<ArrowRight className="w-4 h-4" />}
        position="bottom-right"
        showAfterScroll={500}
        dismissible
      />

      {/* Hero Section - Enhanced with Demo page style */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 dark:from-[var(--bg-primary)] dark:via-[var(--bg-secondary)] dark:to-[var(--color-primary)]/10 py-24">
        {/* Background Pattern */}
        <div className="absolute inset-0 bg-pattern opacity-50"></div>

        {/* Animated Background Elements */}
        <div className="absolute top-20 left-10 w-72 h-72 bg-[var(--color-primary)]/10 rounded-full blur-3xl animate-pulse"></div>
        <div className="absolute bottom-10 right-10 w-96 h-96 bg-[var(--color-secondary)]/10 rounded-full blur-3xl animate-pulse" style={{ animationDelay: '1s' }}></div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center max-w-4xl mx-auto space-y-6">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 mb-4">
                <Sparkles className="w-4 h-4 text-[var(--color-primary)]" />
                <span className="text-sm font-medium text-[var(--color-primary)]">{t('hero.badge', 'Funcionalidades Completas')}</span>
              </div>

              <h1 className="text-5xl md:text-6xl font-bold text-[var(--text-primary)] mb-6 leading-tight">
                {t('hero.title', 'Cómo Bakery-IA')}
                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
                  {t('hero.title_highlight', 'Trabaja Para Ti Cada Día')}
                </span>
              </h1>

              <p className="text-xl md:text-2xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                {t('hero.subtitle', 'Todas las funcionalidades explicadas en lenguaje sencillo para dueños de panaderías')}
              </p>

              <div className="flex items-center justify-center gap-8 pt-4 text-sm text-[var(--text-tertiary)]">
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
                  <span>{t('hero.feature1', 'IA Automática 24/7')}</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
                  <span>{t('hero.feature2', '92% Precisión')}</span>
                </div>
                <div className="flex items-center gap-2">
                  <CheckCircle2 className="w-5 h-5 text-[var(--color-success)]" />
                  <span>{t('hero.feature3', 'ROI Inmediato')}</span>
                </div>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Feature 1: Automatic Daily System - THE KILLER FEATURE */}
      <section id="automatic-system" className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center mb-16">
              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Clock className="w-5 h-5" />
                <span>{t('automatic.badge', 'La Funcionalidad Estrella')}</span>
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-6">
                {t('automatic.title', 'Tu Asistente Personal')}
                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
                  {t('automatic.title_highlight', 'Que Nunca Duerme')}
                </span>
              </h2>
              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                {t('automatic.intro', 'Imagina contratar un ayudante súper organizado que llega a las 5:30 AM (antes que tú) y hace todo esto AUTOMÁTICAMENTE:')}
              </p>
            </div>
          </ScrollReveal>

          <ScrollReveal variant="fadeUp" delay={0.2}>
            <div className="max-w-5xl mx-auto">
              {/* Automatic System Timeline */}
              <StepTimeline
                steps={automaticSystemSteps}
                orientation="vertical"
                showConnector
                animated
              />

              {/* Morning Result */}
              <div className="relative overflow-hidden bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white shadow-xl mt-8">
                <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
                <div className="relative text-center max-w-3xl mx-auto">
                  <div className="relative inline-block mb-6">
                    <Clock className="w-16 h-16 mx-auto" />
                    <div className="absolute inset-0 rounded-full bg-white/20 blur-xl animate-pulse"></div>
                  </div>
                  <h3 className="text-2xl lg:text-3xl font-bold mb-6">
                    {t('automatic.result.title', 'A las 6:00 AM recibes un email:')}
                  </h3>
                  <div className="grid md:grid-cols-2 gap-4 text-left">
                    <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
                      <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
                      <span className="text-lg">{t('automatic.result.item1', 'Predicción del día hecha')}</span>
                    </div>
                    <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
                      <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
                      <span className="text-lg">{t('automatic.result.item2', 'Plan de producción listo')}</span>
                    </div>
                    <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
                      <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
                      <span className="text-lg">{t('automatic.result.item3', '3 pedidos creados (aprobar con 1 clic)')}</span>
                    </div>
                    <div className="flex items-center gap-3 bg-white/10 backdrop-blur-sm rounded-lg p-4">
                      <CheckCircle2 className="w-6 h-6 flex-shrink-0" />
                      <span className="text-lg">{t('automatic.result.item4', 'Alerta: "Leche caduca en 2 días, úsala primero"')}</span>
                    </div>
                  </div>
                </div>
              </div>

              {/* What it eliminates */}
              <div className="bg-gradient-to-br from-[var(--bg-secondary)] to-[var(--bg-tertiary)] rounded-2xl p-8 border border-[var(--border-primary)] shadow-lg mt-8">
                <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-6 text-center">
                  {t('automatic.eliminates.title', 'Lo que ELIMINA de tu rutina:')}
                </h3>
                <div className="grid md:grid-cols-2 gap-4">
                  <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
                    <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                    <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item1', 'Adivinar cuánto hacer')}</span>
                  </div>
                  <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
                    <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                    <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item2', 'Contar inventario manualmente')}</span>
                  </div>
                  <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
                    <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                    <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item3', 'Calcular cuándo pedir a proveedores')}</span>
                  </div>
                  <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
                    <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                    <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item4', 'Recordar fechas de caducidad')}</span>
                  </div>
                  <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
                    <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                    <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item5', 'Preocuparte por quedarte sin stock')}</span>
                  </div>
                  <div className="flex items-start gap-3 p-3 rounded-lg hover:bg-[var(--bg-primary)] transition-colors">
                    <span className="text-red-500 text-xl flex-shrink-0">❌</span>
                    <span className="text-[var(--text-secondary)]">{t('automatic.eliminates.item6', 'Desperdiciar ingredientes caducados')}</span>
                  </div>
                </div>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Feature 2: Local Intelligence */}
      <section id="local-intelligence" className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center mb-16">
              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
                <MapPin className="w-5 h-5" />
                <span>{t('local.badge', 'Tu Ventaja Competitiva')}</span>
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-6">
                {t('local.title', 'Tu Panadería Es Única.')}
                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
                  {t('local.title_highlight', 'La IA También.')}
                </span>
              </h2>
              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                {t('local.intro', 'Las IA genéricas saben que es lunes. La TUYA sabe que:')}
              </p>
            </div>
          </ScrollReveal>

          <div className="grid md:grid-cols-2 gap-8 max-w-6xl mx-auto">
            {/* Schools */}
            <ScrollReveal variant="fadeUp" delay={0.1}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-xl flex items-center justify-center mb-4">
                  <School className="w-6 h-6 text-blue-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
                  {t('local.schools.title', 'Colegios Cerca')}
                </h3>
                <ul className="space-y-2 text-[var(--text-secondary)]">
                  <li className="flex items-start gap-2">
                    <span className="text-blue-600 mt-0.5">•</span>
                    <span>{t('local.schools.item1', '"El CEIP San José está a 200m"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-blue-600 mt-0.5">•</span>
                    <span>{t('local.schools.item2', '"En agosto venden 40% menos (vacaciones escolares)"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-blue-600 mt-0.5">•</span>
                    <span>{t('local.schools.item3', '"Los lunes a las 8:30 hay pico (padres tras dejar niños)"')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>

            {/* Offices */}
            <ScrollReveal variant="fadeUp" delay={0.15}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-xl flex items-center justify-center mb-4">
                  <Building2 className="w-6 h-6 text-purple-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
                  {t('local.offices.title', 'Oficinas y Empresas')}
                </h3>
                <ul className="space-y-2 text-[var(--text-secondary)]">
                  <li className="flex items-start gap-2">
                    <span className="text-purple-600 mt-0.5">•</span>
                    <span>{t('local.offices.item1', '"Edificio de oficinas a 150m (250 trabajadores)"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-purple-600 mt-0.5">•</span>
                    <span>{t('local.offices.item2', '"Viernes venden menos al mediodía (teletrabajo)"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-purple-600 mt-0.5">•</span>
                    <span>{t('local.offices.item3', '"Hora punta: 13:00-14:00 (bocadillos)"')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>

            {/* Gyms */}
            <ScrollReveal variant="fadeUp" delay={0.2}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-gradient-to-br from-green-500/10 to-green-600/10 rounded-xl flex items-center justify-center mb-4">
                  <Dumbbell className="w-6 h-6 text-green-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
                  {t('local.gyms.title', 'Centros Deportivos')}
                </h3>
                <ul className="space-y-2 text-[var(--text-secondary)]">
                  <li className="flex items-start gap-2">
                    <span className="text-green-600 mt-0.5">•</span>
                    <span>{t('local.gyms.item1', '"Gimnasio a 300m"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-green-600 mt-0.5">•</span>
                    <span>{t('local.gyms.item2', '"Mayor venta de productos saludables (pan integral, barritas)"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-green-600 mt-0.5">•</span>
                    <span>{t('local.gyms.item3', '"Pico a las 7:00 AM y 19:00 PM"')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>

            {/* Competition */}
            <ScrollReveal variant="fadeUp" delay={0.25}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-gradient-to-br from-amber-500/10 to-amber-600/10 rounded-xl flex items-center justify-center mb-4">
                  <ShoppingBag className="w-6 h-6 text-amber-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
                  {t('local.competition.title', 'Tu Competencia')}
                </h3>
                <ul className="space-y-2 text-[var(--text-secondary)]">
                  <li className="flex items-start gap-2">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>{t('local.competition.item1', '"Otra panadería abrió hace 2 meses a 500m"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>{t('local.competition.item2', '"Impacto: -15% en ventas de pan básico"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-amber-600 mt-0.5">•</span>
                    <span>{t('local.competition.item3', '"Oportunidad: Diferénciate con especialidades"')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>

            {/* Weather */}
            <ScrollReveal variant="fadeUp" delay={0.3}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-gradient-to-br from-sky-500/10 to-sky-600/10 rounded-xl flex items-center justify-center mb-4">
                  <Cloud className="w-6 h-6 text-sky-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
                  {t('local.weather.title', 'Clima de Tu Zona')}
                </h3>
                <ul className="space-y-2 text-[var(--text-secondary)]">
                  <li className="flex items-start gap-2">
                    <span className="text-sky-600 mt-0.5">•</span>
                    <span>{t('local.weather.item1', '"Datos AEMET de tu código postal"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-sky-600 mt-0.5">•</span>
                    <span>{t('local.weather.item2', '"Lluvia → -20% croissants, +10% pan de molde"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-sky-600 mt-0.5">•</span>
                    <span>{t('local.weather.item3', '"Calor → +30% productos frescos"')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>

            {/* Events */}
            <ScrollReveal variant="fadeUp" delay={0.35}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-6 border border-[var(--border-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-gradient-to-br from-pink-500/10 to-pink-600/10 rounded-xl flex items-center justify-center mb-4">
                  <PartyPopper className="w-6 h-6 text-pink-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">
                  {t('local.events.title', 'Eventos Locales')}
                </h3>
                <ul className="space-y-2 text-[var(--text-secondary)]">
                  <li className="flex items-start gap-2">
                    <span className="text-pink-600 mt-0.5">•</span>
                    <span>{t('local.events.item1', '"Mercadillo los viernes en Plaza Mayor (500m)"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-pink-600 mt-0.5">•</span>
                    <span>{t('local.events.item2', '"Fiestas del barrio próxima semana"')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <span className="text-pink-600 mt-0.5">•</span>
                    <span>{t('local.events.item3', '"Partido importante → pico de ventas pre-evento"')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>
          </div>

          {/* Why it matters */}
          <ScrollReveal variant="fadeUp" delay={0.4}>
            <div className="mt-12 max-w-4xl mx-auto relative overflow-hidden bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-2xl p-8 text-white shadow-xl">
              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"></div>
              <div className="relative">
                <h3 className="text-2xl font-bold mb-6 text-center">
                  {t('local.why_matters.title', 'Por qué importa:')}
                </h3>
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="bg-white/10 backdrop-blur-sm rounded-lg p-5 border border-white/20">
                    <p className="font-semibold mb-3 text-lg">{t('local.why_matters.generic', 'IA genérica:')}</p>
                    <p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.generic_example', '"Es lunes → vende X"')}</p>
                  </div>
                  <div className="bg-white/20 backdrop-blur-sm rounded-lg p-5 border-2 border-white shadow-lg">
                    <p className="font-semibold mb-3 text-lg">{t('local.why_matters.yours', 'TU IA:')}</p>
                    <p className="text-white/90 text-base leading-relaxed">{t('local.why_matters.yours_example', '"Es lunes, llueve, colegio cerrado (festivo local), mercadillo cancelado → vende Y"')}</p>
                  </div>
                </div>
                <div className="text-center mt-8 p-4 bg-white/10 backdrop-blur-sm rounded-lg">
                  <p className="text-xl font-bold">
                    Precisión: <span className="text-3xl"><AnimatedCounter value={92} suffix="%" className="inline" /></span> <span className="text-white/80 text-lg">(vs 60-70% de sistemas genéricos)</span>
                  </p>
                </div>
              </div>
            </div>
          </ScrollReveal>
        </div>
      </section>

      {/* Feature 3: Demand Forecasting */}
      <section id="demand-forecasting" className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center mb-12">
              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Target className="w-5 h-5" />
                <span>{t('forecasting.badge', 'Predicción Inteligente')}</span>
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
                {t('forecasting.title', 'Sabe Cuánto Venderás Mañana')}
                <span className="block">
                  (<AnimatedCounter value={92} suffix="%" className="inline bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent" /> de Precisión)
                </span>
              </h2>
              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                {t('forecasting.subtitle', 'No es magia. Es matemáticas con tus datos.')}
              </p>
            </div>
          </ScrollReveal>

          <div className="max-w-5xl mx-auto">
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800 mb-8">
              <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                {t('forecasting.learns_from.title', 'La IA aprende de:')}
              </h3>
              <div className="grid md:grid-cols-2 gap-4">
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('forecasting.learns_from.item1', 'Tus ventas pasadas (6-12 meses)')}</span>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('forecasting.learns_from.item2', 'Día de la semana (lunes ≠ sábado)')}</span>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('forecasting.learns_from.item3', 'Estacionalidad (agosto ≠ diciembre)')}</span>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('forecasting.learns_from.item4', 'Clima local (lluvia, calor, frío)')}</span>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('forecasting.learns_from.item5', 'Eventos y festivos')}</span>
                </div>
                <div className="flex items-start gap-3">
                  <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('forecasting.learns_from.item6', 'Tu entorno único')}</span>
                </div>
              </div>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-2xl p-8 border-2 border-[var(--color-primary)] shadow-lg">
              <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                {t('forecasting.result.title', 'Resultado:')}
              </h3>
              <p className="text-[var(--text-secondary)] mb-4">
                {t('forecasting.result.intro', 'Mañana (martes 15 de marzo) venderás:')}
              </p>
              <div className="space-y-3">
                <div className="flex justify-between items-center bg-[var(--bg-secondary)] rounded-lg p-4">
                  <span className="font-medium">{t('forecasting.result.croissants', '78-82 croissants')}</span>
                  <span className="text-[var(--color-primary)] font-bold">{t('forecasting.result.croissants_avg', '(80 ±2)')}</span>
                </div>
                <div className="flex justify-between items-center bg-[var(--bg-secondary)] rounded-lg p-4">
                  <span className="font-medium">{t('forecasting.result.loaves', '115-125 barras')}</span>
                  <span className="text-[var(--color-primary)] font-bold">{t('forecasting.result.loaves_avg', '(120 ±5)')}</span>
                </div>
                <div className="flex justify-between items-center bg-[var(--bg-secondary)] rounded-lg p-4">
                  <span className="font-medium">{t('forecasting.result.muffins', '45-50 magdalenas')}</span>
                  <span className="text-[var(--color-primary)] font-bold">{t('forecasting.result.muffins_avg', '(48 ±2)')}</span>
                </div>
              </div>
              <p className="mt-4 text-sm text-[var(--text-secondary)]">
                {t('forecasting.confidence', 'Confianza: 92% de las veces acierta dentro del rango')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Feature 4: Reduce Waste = Save Money */}
      <section id="waste-reduction" className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center mb-12">
              <div className="inline-flex items-center gap-2 bg-green-500/10 dark:bg-green-500/20 border border-green-500/20 dark:border-green-500/30 text-green-600 dark:text-green-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Recycle className="w-5 h-5" />
                <span>{t('waste.badge', 'Ahorro Directo')}</span>
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
                {t('waste.title_part1', 'Menos Pan en la Basura,')}
                <span className="block bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                  {t('waste.title_part2', 'Más Dinero en Tu Bolsillo')}
                </span>
              </h2>
            </div>
          </ScrollReveal>

          <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8">
            {/* Before */}
            <ScrollReveal variant="fadeLeft" delay={0.2}>
              <div className="bg-red-50 dark:bg-red-900/20 rounded-2xl p-8 border-2 border-red-200 dark:border-red-800">
                <div className="w-12 h-12 bg-red-500/20 rounded-xl flex items-center justify-center mb-4">
                  <AlertTriangle className="w-6 h-6 text-red-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                  {t('waste.before.title', 'Ejemplo típico de panadería:')}
                </h3>
                <ul className="space-y-3 text-[var(--text-secondary)]">
                  <li>{t('waste.before.item1', 'Haces 50 barras de más cada día "por si acaso"')}</li>
                  <li>{t('waste.before.item2', 'Precio: €2/barra')}</li>
                  <li className="font-bold text-red-700 dark:text-red-400">{t('waste.before.daily', 'Desperdicio: 50 × €2 = €100/día')}</li>
                  <li className="font-bold text-red-700 dark:text-red-400">{t('waste.before.monthly', 'Al mes: €100 × 30 = €3,000 perdidos')}</li>
                  <li className="font-bold text-red-900 dark:text-red-300 text-lg">{t('waste.before.yearly', 'Al año: €36,000 tirados a la basura')}</li>
                </ul>
              </div>
            </ScrollReveal>

            {/* After */}
            <ScrollReveal variant="fadeRight" delay={0.2}>
              <div className="bg-green-50 dark:bg-green-900/20 rounded-2xl p-8 border-2 border-green-200 dark:border-green-800">
                <div className="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center mb-4">
                  <TrendingUp className="w-6 h-6 text-green-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                  {t('waste.after.title', 'Con Bakery-IA:')}
                </h3>
                <ul className="space-y-3 text-[var(--text-secondary)]">
                  <li>{t('waste.after.item1', 'Predicción precisa → Haces 5-10 barras de más (seguridad)')}</li>
                  <li>{t('waste.after.item2', 'Desperdicio: 5 × €2 = €10/día')}</li>
                  <li className="font-bold text-green-700 dark:text-green-400">{t('waste.after.monthly', 'Al mes: €300')}</li>
                  <li className="font-bold text-green-900 dark:text-green-300 text-xl bg-green-100 dark:bg-green-900/40 p-3 rounded-lg">
                    AHORRO: <AnimatedCounter value={2700} prefix="€" className="inline" decimals={0} />/mes (<AnimatedCounter value={32400} prefix="€" className="inline" decimals={0} />/año)
                  </li>
                </ul>
                <p className="mt-4 text-sm font-medium text-green-700 dark:text-green-400">
                  {t('waste.after.roi', 'Recuperas la inversión en semana 1.')}
                </p>
              </div>
            </ScrollReveal>
          </div>

          {/* Interactive Savings Calculator */}
          <div className="mt-12 max-w-4xl mx-auto">
            <ScrollReveal variant="scaleUp" delay={0.2}>
              <SavingsCalculator
                defaultWaste={50}
                pricePerUnit={2}
                wasteReduction={80}
                unitName="barras"
                currency="€"
              />
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Feature 5: Sustainability + Grants */}
      <section id="sustainability" className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center mb-12">
              <div className="inline-flex items-center gap-2 bg-green-500/10 dark:bg-green-500/20 border border-green-500/20 dark:border-green-500/30 text-green-600 dark:text-green-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Leaf className="w-5 h-5" />
                <span>{t('sustainability.badge', 'Impacto Positivo')}</span>
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
                {t('sustainability.title', 'Impacto Ambiental')}
                <span className="block bg-gradient-to-r from-green-600 to-emerald-600 bg-clip-text text-transparent">
                  {t('sustainability.title_highlight', 'y Sostenibilidad')}
                </span>
              </h2>
            </div>
          </ScrollReveal>

          {/* UN SDG Compliance */}
          <div className="max-w-5xl mx-auto mb-12">
            <div className="bg-gradient-to-br from-blue-50 to-green-50 dark:from-blue-900/20 dark:to-green-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800">
              <div className="flex items-start gap-6">
                <div className="w-16 h-16 bg-blue-600 rounded-full flex items-center justify-center text-white flex-shrink-0">
                  <Globe className="w-8 h-8" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-3">
                    {t('sustainability.un_sdg.title', 'Cumplimiento Automático ODS 12.3 (ONU)')}
                  </h3>
                  <p className="text-[var(--text-secondary)] mb-4">
                    {t('sustainability.un_sdg.description', 'Sin hacer nada extra, cumples con el Objetivo de Desarrollo Sostenible 12.3 de Naciones Unidas (reducción desperdicio alimentario).')}
                  </p>
                  <div className="bg-white dark:bg-gray-800 rounded-lg p-4 border-l-4 border-blue-600">
                    <p className="font-medium text-[var(--text-primary)]">
                      {t('sustainability.un_sdg.benefit', 'Recibes certificación automática → Credibilidad con clientes')}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Sustainability Benefits */}
          <div className="max-w-6xl mx-auto mb-12">
            <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-6 text-center">
              {t('sustainability.benefits.title', 'Funcionalidades de Sostenibilidad:')}
            </h3>
            <div className="grid md:grid-cols-2 gap-6">
              <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <TreeDeciduous className="w-5 h-5 text-[var(--color-primary)]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('sustainability.benefits.impact_tracking.title', 'Seguimiento de Impacto Ambiental')}
                    </h4>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('sustainability.benefits.impact_tracking.description', 'Medición automática de CO₂, agua y desperdicio alimentario con métricas detalladas')}
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <Globe className="w-5 h-5 text-[var(--color-primary)]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('sustainability.benefits.sdg_compliance.title', 'Cumplimiento ODS 12.3')}
                    </h4>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('sustainability.benefits.sdg_compliance.description', 'Seguimiento automático del cumplimiento de los Objetivos de Desarrollo Sostenible de la ONU')}
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <FileText className="w-5 h-5 text-[var(--color-primary)]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('sustainability.benefits.reporting.title', 'Informes de Sostenibilidad')}
                    </h4>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('sustainability.benefits.reporting.description', 'Generación automática de informes listos para auditorías y certificaciones ambientales')}
                    </p>
                  </div>
                </div>
              </div>

              <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center flex-shrink-0">
                    <Award className="w-5 h-5 text-[var(--color-primary)]" />
                  </div>
                  <div>
                    <h4 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('sustainability.benefits.certification.title', 'Preparación para Certificaciones')}
                    </h4>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('sustainability.benefits.certification.description', 'Datos y documentación listos para solicitudes de certificaciones de sostenibilidad')}
                    </p>
                  </div>
                </div>
              </div>

              <div className="md:col-span-2 bg-gradient-to-r from-[var(--color-primary)]/10 to-green-500/10 rounded-xl p-6 border-2 border-[var(--color-primary)]">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 bg-[var(--color-primary)] rounded-lg flex items-center justify-center flex-shrink-0">
                    <Database className="w-5 h-5 text-white" />
                  </div>
                  <div>
                    <h4 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('sustainability.benefits.data_export.title', 'Exportación de Datos Ambientales')}
                    </h4>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('sustainability.benefits.data_export.description', 'Exporta tus métricas de sostenibilidad en formatos estándar para reportes externos y auditorías')}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* How it works */}
          <div className="max-w-4xl mx-auto bg-[var(--bg-secondary)] rounded-2xl p-8 border border-[var(--border-primary)]">
            <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
              {t('sustainability.how_it_works.title', 'Cómo funciona:')}
            </h3>
            <ul className="space-y-3">
              <li className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                <span className="text-[var(--text-secondary)]">{t('sustainability.how_it_works.item1', 'Bakery-IA genera reportes automáticos')}</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                <span className="text-[var(--text-secondary)]">{t('sustainability.how_it_works.item2', 'Métricas de reducción de desperdicio (kg CO₂, litros agua)')}</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                <span className="text-[var(--text-secondary)]">{t('sustainability.how_it_works.item3', 'Documentación lista para solicitudes')}</span>
              </li>
              <li className="flex items-start gap-3">
                <CheckCircle2 className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                <span className="text-[var(--text-secondary)]">{t('sustainability.how_it_works.item4', 'Te ayudamos con el proceso')}</span>
              </li>
            </ul>
          </div>

          {/* Impact metrics */}
          <div className="max-w-5xl mx-auto mt-12 grid md:grid-cols-3 gap-6">
            <div className="bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-xl p-6 border border-green-200 dark:border-green-800 text-center">
              <TreeDeciduous className="w-12 h-12 text-green-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-green-700 dark:text-green-400 mb-2">85kg CO₂</div>
              <p className="text-sm text-[var(--text-secondary)]">{t('sustainability.impact.co2', 'reducidos al mes (equivale a 3 árboles plantados)')}</p>
            </div>
            <div className="bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800 text-center">
              <Droplets className="w-12 h-12 text-blue-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-blue-700 dark:text-blue-400 mb-2">675,000L</div>
              <p className="text-sm text-[var(--text-secondary)]">{t('sustainability.impact.water', 'agua ahorrada al año')}</p>
            </div>
            <div className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-xl p-6 border border-amber-200 dark:border-amber-800 text-center">
              <Award className="w-12 h-12 text-amber-600 mx-auto mb-3" />
              <div className="text-3xl font-bold text-amber-700 dark:text-amber-400 mb-2">{t('sustainability.impact.certification', 'Certificado')}</div>
              <p className="text-sm text-[var(--text-secondary)]">{t('sustainability.impact.certification_desc', 'ODS 12.3 ONU')}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Feature 6: Business Models */}
      <section id="business-models" className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center mb-12">
              <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Store className="w-5 h-5" />
                <span>{t('business_models.badge', 'Flexible y Adaptable')}</span>
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
                {t('business_models.title', 'Para Cualquier')}
                <span className="block bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent">
                  {t('business_models.title_highlight', 'Modelo de Negocio')}
                </span>
              </h2>
              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                {t('business_models.subtitle', 'No importa cómo trabajes, funciona para ti')}
              </p>
            </div>
          </ScrollReveal>

          <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
            <ScrollReveal variant="fadeUp" delay={0.15}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-[var(--color-primary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-primary)]/20 rounded-xl flex items-center justify-center mb-4">
                  <Store className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                  {t('business_models.local.title', 'Panadería Producción Local')}
                </h3>
                <p className="text-[var(--text-secondary)] mb-4">
                  {t('business_models.local.description', 'Horneas y vendes en el mismo local')}
                </p>
                <ul className="space-y-2">
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
                    <span className="text-[var(--text-secondary)]">{t('business_models.local.benefit1', 'IA optimiza producción diaria')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="w-5 h-5 text-[var(--color-primary)] mt-0.5 flex-shrink-0" />
                    <span className="text-[var(--text-secondary)]">{t('business_models.local.benefit2', 'Gestiona inventario de un punto')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>

            <ScrollReveal variant="fadeUp" delay={0.2}>
              <div className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-blue-600 shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
                  <Globe className="w-6 h-6 text-blue-600" />
                </div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                  {t('business_models.central.title', 'Obrador Central + Puntos de Venta')}
                </h3>
                <p className="text-[var(--text-secondary)] mb-4">
                  {t('business_models.central.description', 'Produces en obrador, distribuyes a tiendas')}
                </p>
                <ul className="space-y-2">
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                    <span className="text-[var(--text-secondary)]">{t('business_models.central.benefit1', 'IA predice demanda por punto de venta')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                    <span className="text-[var(--text-secondary)]">{t('business_models.central.benefit2', 'Optimiza distribución y transporte')}</span>
                  </li>
                  <li className="flex items-start gap-2">
                    <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                    <span className="text-[var(--text-secondary)]">{t('business_models.central.benefit3', 'Gestiona inventario central + puntos')}</span>
                  </li>
                </ul>
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Condensed Roadmap Section */}
      <section id="roadmap-preview" className="py-20 bg-[var(--bg-primary)] border-t border-[var(--border-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <ScrollReveal variant="fadeUp" delay={0.1}>
            <div className="text-center mb-16">
              <div className="inline-flex items-center gap-2 bg-purple-500/10 dark:bg-purple-500/20 border border-purple-500/20 dark:border-purple-500/30 text-purple-600 dark:text-purple-400 px-4 py-2 rounded-full text-sm font-medium mb-6">
                <Sparkles className="w-5 h-5" />
                <span>{t('roadmap.badge')}</span>
              </div>
              <h2 className="text-4xl lg:text-5xl font-bold text-[var(--text-primary)] mb-4">
                {t('roadmap.title')}
                <span className="block bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
                  {t('roadmap.highlight')}
                </span>
              </h2>
              <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto leading-relaxed">
                {t('roadmap.subtitle')}
              </p>
            </div>
          </ScrollReveal>

          <div className="grid md:grid-cols-3 gap-8">
            <ScrollReveal variant="fadeUp" delay={0.2}>
              <Card className="h-full border-t-4 border-t-purple-500 bg-[var(--bg-secondary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <CardHeader>
                  <div className="w-12 h-12 bg-purple-500/10 rounded-xl flex items-center justify-center mb-4">
                    <Cpu className="w-6 h-6 text-purple-600" />
                  </div>
                  <h3 className="text-xl font-bold">{t('roadmap.iot.title')}</h3>
                </CardHeader>
                <CardBody>
                  <p className="text-[var(--text-secondary)] mb-4">
                    {t('roadmap.iot.description')}
                  </p>
                  <ul className="space-y-2 text-sm text-[var(--text-tertiary)]">
                    <li className="flex items-center gap-2">
                      <CheckCircle2 className="w-4 h-4 text-purple-500" />
                      {t('roadmap.iot.item1')}
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle2 className="w-4 h-4 text-purple-500" />
                      {t('roadmap.iot.item2')}
                    </li>
                  </ul>
                </CardBody>
              </Card>
            </ScrollReveal>

            <ScrollReveal variant="fadeUp" delay={0.3}>
              <Card className="h-full border-t-4 border-t-blue-500 bg-[var(--bg-secondary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <CardHeader>
                  <div className="w-12 h-12 bg-blue-500/10 rounded-xl flex items-center justify-center mb-4">
                    <Smartphone className="w-6 h-6 text-blue-600" />
                  </div>
                  <h3 className="text-xl font-bold">{t('roadmap.staff_app.title')}</h3>
                </CardHeader>
                <CardBody>
                  <p className="text-[var(--text-secondary)] mb-4">
                    {t('roadmap.staff_app.description')}
                  </p>
                  <ul className="space-y-2 text-sm text-[var(--text-tertiary)]">
                    <li className="flex items-center gap-2">
                      <CheckCircle2 className="w-4 h-4 text-blue-500" />
                      {t('roadmap.staff_app.item1')}
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle2 className="w-4 h-4 text-blue-500" />
                      {t('roadmap.staff_app.item2')}
                    </li>
                  </ul>
                </CardBody>
              </Card>
            </ScrollReveal>

            <ScrollReveal variant="fadeUp" delay={0.4}>
              <Card className="h-full border-t-4 border-t-green-500 bg-[var(--bg-secondary)] shadow-lg hover:shadow-2xl transition-all duration-300 hover:-translate-y-1">
                <CardHeader>
                  <div className="w-12 h-12 bg-green-500/10 rounded-xl flex items-center justify-center mb-4">
                    <ArrowRight className="w-6 h-6 text-green-600" />
                  </div>
                  <h3 className="text-xl font-bold">{t('roadmap.ecosystem.title')}</h3>
                </CardHeader>
                <CardBody>
                  <p className="text-[var(--text-secondary)] mb-4">
                    {t('roadmap.ecosystem.description')}
                  </p>
                  <ul className="space-y-2 text-sm text-[var(--text-tertiary)]">
                    <li className="flex items-center gap-2">
                      <CheckCircle2 className="w-4 h-4 text-green-500" />
                      {t('roadmap.ecosystem.item1')}
                    </li>
                    <li className="flex items-center gap-2">
                      <CheckCircle2 className="w-4 h-4 text-green-500" />
                      {t('roadmap.ecosystem.item2')}
                    </li>
                  </ul>
                </CardBody>
              </Card>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Final CTA - Replicated from AboutPage */}
      <section className="py-20 bg-gradient-to-r from-[var(--color-primary)] to-orange-600">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">
            {t('about:cta.title')}
          </h2>
          <p className="text-xl text-white/90 mb-8 leading-relaxed">
            {t('about:cta.subtitle')}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              to="/register"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
            >
              <span>{t('about:cta.primary')}</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link
              to="/demo"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-[var(--color-primary)] transition-all"
            >
              <span>{t('about:cta.secondary')}</span>
            </Link>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
};

export default FeaturesPage;
