import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button } from '../../components/ui';
import { PublicLayout } from '../../components/layout';
import { PricingSection } from '../../components/subscription';
import {
  BarChart3,
  TrendingUp,
  Shield,
  Zap,
  Users,
  Award,
  ChevronRight,
  Check,
  Star,
  ArrowRight,
  Play,
  Calendar,
  Clock,
  Euro,
  Package,
  PieChart,
  Settings,
  Brain
} from 'lucide-react';

const LandingPage: React.FC = () => {
  const { t } = useTranslation();

  const scrollToSection = (sectionId: string) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <PublicLayout
      variant="full-width"
      contentPadding="none"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: true,
        showLanguageSelector: true,
        variant: "default",
        navigationItems: [
          { id: 'features', label: t('landing:navigation.features', 'Características'), href: '#features' },
          { id: 'benefits', label: t('landing:navigation.benefits', 'Beneficios'), href: '#benefits' },
          { id: 'pricing', label: t('landing:navigation.pricing', 'Precios'), href: '#pricing' },
          { id: 'testimonials', label: t('landing:navigation.testimonials', 'Testimonios'), href: '#testimonials' }
        ]
      }}
    >

      {/* Hero Section */}
      <section className="relative py-20 lg:py-32 bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <div className="mb-6 flex flex-wrap items-center justify-center gap-3">
              <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
                <Zap className="w-4 h-4 mr-2" />
                {t('landing:hero.badge', 'IA Avanzada para Panaderías')}
              </span>
              <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-500/10 text-green-600 dark:text-green-400">
                <Shield className="w-4 h-4 mr-2" />
                Reducción de Desperdicio Alimentario
              </span>
            </div>

            <h1 className="text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-7xl">
              <span className="block">{t('landing:hero.title_line1', 'IA que Reduce')}</span>
              <span className="block text-[var(--color-primary)]">{t('landing:hero.title_line2', 'Desperdicio Alimentario')}</span>
            </h1>

            <p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl">
              {t('landing:hero.subtitle', 'Tecnología de inteligencia artificial que reduce hasta un 35% el desperdicio alimentario, optimiza tu producción y protege tu información. Tus datos son 100% tuyos.')}
            </p>

            {/* Pilot Launch Banner */}
            <div className="mt-8 inline-block">
              <div className="bg-gradient-to-r from-amber-500/10 to-orange-500/10 border-2 border-amber-500/30 rounded-xl px-6 py-4">
                <div className="flex items-center justify-center gap-2 text-amber-600 dark:text-amber-400 font-bold text-lg">
                  <Star className="w-5 h-5 fill-current" />
                  <span>¡Lanzamiento Piloto!</span>
                  <Star className="w-5 h-5 fill-current" />
                </div>
                <p className="mt-2 text-sm text-[var(--text-secondary)] text-center">
                  <strong className="text-[var(--color-primary)]">3 meses GRATIS</strong> para early adopters que se registren ahora
                </p>
              </div>
            </div>

            <div className="mt-8 flex flex-col sm:flex-row gap-4 justify-center">
              <Link to="/register">
                <Button size="lg" className="px-8 py-4 text-lg font-semibold bg-[var(--color-primary)] hover:bg-[var(--color-primary-dark)] text-white shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200">
                  {t('landing:hero.cta_primary', 'Comenzar GRATIS 3 Meses')}
                  <ArrowRight className="ml-2 w-5 h-5" />
                </Button>
              </Link>
              <Link to="/demo">
                <Button
                  variant="outline"
                  size="lg"
                  className="px-8 py-4 text-lg font-semibold border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white transition-all duration-200"
                >
                  <Play className="mr-2 w-5 h-5" />
                  {t('landing:hero.cta_secondary', 'Ver Demo en Vivo')}
                </Button>
              </Link>
            </div>
            
            <div className="mt-12 flex items-center justify-center space-x-6 text-sm text-[var(--text-tertiary)]">
              <div className="flex items-center">
                <Check className="w-4 h-4 text-green-500 mr-2" />
                {t('landing:hero.features.no_credit_card', 'Sin tarjeta de crédito')}
              </div>
              <div className="flex items-center">
                <Check className="w-4 h-4 text-green-500 mr-2" />
                {t('landing:hero.features.quick_setup', 'Configuración en 5 minutos')}
              </div>
              <div className="flex items-center">
                <Check className="w-4 h-4 text-green-500 mr-2" />
                {t('landing:hero.features.support_24_7', 'Soporte 24/7 en español')}
              </div>
            </div>
          </div>
        </div>
        
        {/* Background decoration */}
        <div className="absolute top-0 left-0 right-0 h-full overflow-hidden -z-10">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-[var(--color-primary)]/5 rounded-full blur-3xl"></div>
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-[var(--color-secondary)]/5 rounded-full blur-3xl"></div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-16 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
            <div className="text-center">
              <div className="text-3xl font-bold text-[var(--color-primary)]">500+</div>
              <div className="mt-2 text-sm text-[var(--text-secondary)]">Panaderías Activas</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-[var(--color-primary)]">35%</div>
              <div className="mt-2 text-sm text-[var(--text-secondary)]">Reducción de Desperdicios</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-[var(--color-primary)]">92%</div>
              <div className="mt-2 text-sm text-[var(--text-secondary)]">Precisión de Predicciones</div>
            </div>
            <div className="text-center">
              <div className="text-3xl font-bold text-[var(--color-primary)]">4.8★</div>
              <div className="mt-2 text-sm text-[var(--text-secondary)]">Satisfacción de Clientes</div>
            </div>
          </div>
        </div>
      </section>

      {/* Main Features Section - Focus on AI & Food Waste */}
      <section id="features" className="py-24 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <div className="mb-4">
              <span className="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-gradient-to-r from-blue-500/10 to-purple-500/10 text-blue-600 dark:text-blue-400 border border-blue-500/20">
                <Brain className="w-4 h-4 mr-2" />
                Tecnología de IA de Última Generación
              </span>
            </div>
            <h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]">
              Combate el Desperdicio Alimentario
              <span className="block text-[var(--color-primary)]">con Inteligencia Artificial</span>
            </h2>
            <p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)]">
              Sistema de alta tecnología que utiliza algoritmos de IA avanzados para optimizar tu producción, reducir residuos alimentarios y mantener tus datos 100% seguros y bajo tu control.
            </p>
          </div>

          <div className="mt-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* AI Technology */}
            <div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-blue-500/50">
              <div className="absolute -top-4 left-8">
                <div className="w-12 h-12 bg-gradient-to-r from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                  <Brain className="w-6 h-6 text-white" />
                </div>
              </div>
              <div className="mt-6">
                <h3 className="text-xl font-bold text-[var(--text-primary)]">IA Avanzada de Predicción</h3>
                <p className="mt-4 text-[var(--text-secondary)]">
                  Algoritmos de machine learning de última generación analizan patrones históricos, clima, eventos y tendencias para predecir demanda con precisión quirúrgica.
                </p>
                <div className="mt-6 space-y-3">
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3">
                      <Zap className="w-3 h-3 text-blue-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Precisión del 92% en predicciones</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3">
                      <TrendingUp className="w-3 h-3 text-blue-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Aprendizaje continuo y adaptativo</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-blue-500/10 rounded-full flex items-center justify-center mr-3">
                      <BarChart3 className="w-3 h-3 text-blue-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Análisis predictivo en tiempo real</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Food Waste Reduction */}
            <div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-green-500/50">
              <div className="absolute -top-4 left-8">
                <div className="w-12 h-12 bg-gradient-to-r from-green-600 to-emerald-600 rounded-xl flex items-center justify-center shadow-lg">
                  <Shield className="w-6 h-6 text-white" />
                </div>
              </div>
              <div className="mt-6">
                <h3 className="text-xl font-bold text-[var(--text-primary)]">Reducción de Desperdicio</h3>
                <p className="mt-4 text-[var(--text-secondary)]">
                  Contribuye al medioambiente y reduce costos eliminando hasta un 35% del desperdicio alimentario mediante producción optimizada e inteligente.
                </p>
                <div className="mt-6 space-y-3">
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3">
                      <Check className="w-3 h-3 text-green-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Hasta 35% menos desperdicio</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3">
                      <Euro className="w-3 h-3 text-green-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Ahorro promedio de €800/mes</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-green-500/10 rounded-full flex items-center justify-center mr-3">
                      <Award className="w-3 h-3 text-green-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Elegible para ayudas UE</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Data Ownership & Privacy */}
            <div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border-2 border-[var(--border-primary)] hover:border-amber-500/50">
              <div className="absolute -top-4 left-8">
                <div className="w-12 h-12 bg-gradient-to-r from-amber-600 to-orange-600 rounded-xl flex items-center justify-center shadow-lg">
                  <Shield className="w-6 h-6 text-white" />
                </div>
              </div>
              <div className="mt-6">
                <h3 className="text-xl font-bold text-[var(--text-primary)]">Tus Datos, Tu Propiedad</h3>
                <p className="mt-4 text-[var(--text-secondary)]">
                  Privacidad y seguridad total. Tus datos operativos, proveedores y analíticas permanecen 100% bajo tu control. Nunca compartidos, nunca vendidos.
                </p>
                <div className="mt-6 space-y-3">
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3">
                      <Shield className="w-3 h-3 text-amber-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">100% propiedad de datos</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3">
                      <Settings className="w-3 h-3 text-amber-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Control total de privacidad</span>
                  </div>
                  <div className="flex items-center text-sm">
                    <div className="flex-shrink-0 w-6 h-6 bg-amber-500/10 rounded-full flex items-center justify-center mr-3">
                      <Award className="w-3 h-3 text-amber-600" />
                    </div>
                    <span className="text-[var(--text-secondary)]">Cumplimiento GDPR garantizado</span>
                  </div>
                </div>
              </div>
            </div>

            {/* Smart Inventory */}
            <div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30">
              <div className="absolute -top-4 left-8">
                <div className="w-12 h-12 bg-gradient-to-r from-[var(--color-secondary)] to-[var(--color-secondary-dark)] rounded-xl flex items-center justify-center shadow-lg">
                  <Package className="w-6 h-6 text-white" />
                </div>
              </div>
              <div className="mt-6">
                <h3 className="text-xl font-bold text-[var(--text-primary)]">Inventario Inteligente</h3>
                <p className="mt-4 text-[var(--text-secondary)]">
                  Control automático de stock con alertas predictivas, órdenes de compra automatizadas y optimización de costos.
                </p>
                <div className="mt-6">
                  <div className="flex items-center text-sm text-[var(--color-secondary)]">
                    <Check className="w-4 h-4 mr-2" />
                    Alertas automáticas de stock bajo
                  </div>
                  <div className="flex items-center text-sm text-[var(--color-secondary)] mt-2">
                    <Check className="w-4 h-4 mr-2" />
                    Órdenes de compra automatizadas
                  </div>
                  <div className="flex items-center text-sm text-[var(--color-secondary)] mt-2">
                    <Check className="w-4 h-4 mr-2" />
                    Optimización de costos de materias primas
                  </div>
                </div>
              </div>
            </div>

            {/* Production Planning */}
            <div className="group relative bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300 border border-[var(--border-primary)] hover:border-[var(--color-primary)]/30">
              <div className="absolute -top-4 left-8">
                <div className="w-12 h-12 bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-dark)] rounded-xl flex items-center justify-center shadow-lg">
                  <Calendar className="w-6 h-6 text-white" />
                </div>
              </div>
              <div className="mt-6">
                <h3 className="text-xl font-bold text-[var(--text-primary)]">Planificación de Producción</h3>
                <p className="mt-4 text-[var(--text-secondary)]">
                  Programa automáticamente la producción diaria basada en predicciones, optimiza horarios y recursos disponibles.
                </p>
                <div className="mt-6">
                  <div className="flex items-center text-sm text-[var(--color-accent)]">
                    <Check className="w-4 h-4 mr-2" />
                    Programación automática de horneado
                  </div>
                  <div className="flex items-center text-sm text-[var(--color-accent)] mt-2">
                    <Check className="w-4 h-4 mr-2" />
                    Optimización de uso de hornos
                  </div>
                  <div className="flex items-center text-sm text-[var(--color-accent)] mt-2">
                    <Check className="w-4 h-4 mr-2" />
                    Gestión de personal y turnos
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Additional Features Grid */}
          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
              <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                <BarChart3 className="w-6 h-6 text-[var(--color-primary)]" />
              </div>
              <h4 className="font-semibold text-[var(--text-primary)]">Analytics Avanzado</h4>
              <p className="text-sm text-[var(--text-secondary)] mt-2">Dashboards en tiempo real con métricas clave</p>
            </div>

            <div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
              <div className="w-12 h-12 bg-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                <Euro className="w-6 h-6 text-[var(--color-secondary)]" />
              </div>
              <h4 className="font-semibold text-[var(--text-primary)]">POS Integrado</h4>
              <p className="text-sm text-[var(--text-secondary)] mt-2">Sistema de ventas completo y fácil de usar</p>
            </div>

            <div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
              <div className="w-12 h-12 bg-[var(--color-accent)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                <Shield className="w-6 h-6 text-[var(--color-accent)]" />
              </div>
              <h4 className="font-semibold text-[var(--text-primary)]">Control de Calidad</h4>
              <p className="text-sm text-[var(--text-secondary)] mt-2">Trazabilidad completa y gestión HACCP</p>
            </div>

            <div className="text-center p-6 bg-[var(--bg-primary)] rounded-xl border border-[var(--border-primary)]">
              <div className="w-12 h-12 bg-[var(--color-info)]/10 rounded-lg flex items-center justify-center mx-auto mb-4">
                <Settings className="w-6 h-6 text-[var(--color-info)]" />
              </div>
              <h4 className="font-semibold text-[var(--text-primary)]">Automatización</h4>
              <p className="text-sm text-[var(--text-secondary)] mt-2">Procesos automáticos que ahorran tiempo</p>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits Section */}
      <section id="benefits" className="py-24 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="lg:grid lg:grid-cols-2 lg:gap-16 items-center">
            <div>
              <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
                Resultados Comprobados
                <span className="block text-[var(--color-primary)]">en Cientos de Panaderías</span>
              </h2>
              <p className="mt-6 text-lg text-[var(--text-secondary)]">
                Nuestros clientes han logrado transformaciones significativas en sus operaciones, 
                mejorando rentabilidad y reduciendo desperdicios desde el primer mes.
              </p>

              <div className="mt-10 space-y-8">
                <div className="flex items-start">
                  <div className="flex-shrink-0">
                    <div className="w-8 h-8 bg-[var(--color-success)]/10 rounded-full flex items-center justify-center">
                      <TrendingUp className="w-5 h-5 text-[var(--color-success)]" />
                    </div>
                  </div>
                  <div className="ml-4">
                    <h4 className="text-lg font-semibold text-[var(--text-primary)]">Aumenta Ventas 22% Promedio</h4>
                    <p className="text-[var(--text-secondary)]">Optimización de producción y mejor disponibilidad de productos populares</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="flex-shrink-0">
                    <div className="w-8 h-8 bg-[var(--color-info)]/10 rounded-full flex items-center justify-center">
                      <Shield className="w-5 h-5 text-[var(--color-info)]" />
                    </div>
                  </div>
                  <div className="ml-4">
                    <h4 className="text-lg font-semibold text-[var(--text-primary)]">Reduce Desperdicios 35%</h4>
                    <p className="text-[var(--text-secondary)]">Predicciones precisas evitan sobreproducción y productos vencidos</p>
                  </div>
                </div>

                <div className="flex items-start">
                  <div className="flex-shrink-0">
                    <div className="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                      <Clock className="w-5 h-5 text-purple-600" />
                    </div>
                  </div>
                  <div className="ml-4">
                    <h4 className="text-lg font-semibold text-[var(--text-primary)]">Ahorra 8 Horas Semanales</h4>
                    <p className="text-[var(--text-secondary)]">Automatización de tareas administrativas y de planificación</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="mt-12 lg:mt-0">
              <div className="bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-2xl p-8">
                <div className="grid grid-cols-2 gap-8">
                  <div className="text-center">
                    <div className="text-3xl font-bold text-[var(--color-primary)]">€127k</div>
                    <div className="text-sm text-[var(--text-secondary)]">Ahorro promedio anual por panadería</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-[var(--color-secondary)]">98%</div>
                    <div className="text-sm text-[var(--text-secondary)]">Satisfacción de clientes</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-[var(--color-accent)]">2.3x</div>
                    <div className="text-sm text-[var(--text-secondary)]">ROI promedio en 12 meses</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-bold text-[var(--color-info)]">24/7</div>
                    <div className="text-sm text-[var(--text-secondary)]">Soporte técnico especializado</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section id="testimonials" className="py-24 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
              Lo que Dicen Nuestros Clientes
            </h2>
            <p className="mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]">
              Panaderías de toda España han transformado sus negocios con nuestra plataforma
            </p>
          </div>

          <div className="mt-16 grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Testimonial 1 */}
            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]">
              <div className="flex items-center mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              <blockquote className="text-[var(--text-secondary)] italic">
                "Desde que implementamos Panadería IA, nuestros desperdicios se redujeron un 40% y las ventas aumentaron un 28%. 
                La predicción de demanda es increíblemente precisa."
              </blockquote>
              <div className="mt-6 flex items-center">
                <div className="w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold">
                  M
                </div>
                <div className="ml-4">
                  <div className="font-semibold text-[var(--text-primary)]">María González</div>
                  <div className="text-sm text-[var(--text-secondary)]">Panadería Santa María, Madrid</div>
                </div>
              </div>
            </div>

            {/* Testimonial 2 */}
            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]">
              <div className="flex items-center mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              <blockquote className="text-[var(--text-secondary)] italic">
                "El sistema nos ahorra 10 horas semanales en planificación. Ahora puedo enfocarme en mejorar nuestros productos 
                mientras la IA maneja la logística."
              </blockquote>
              <div className="mt-6 flex items-center">
                <div className="w-12 h-12 bg-[var(--color-secondary)] rounded-full flex items-center justify-center text-white font-bold">
                  C
                </div>
                <div className="ml-4">
                  <div className="font-semibold text-[var(--text-primary)]">Carlos Ruiz</div>
                  <div className="text-sm text-[var(--text-secondary)]">Horno de Oro, Valencia</div>
                </div>
              </div>
            </div>

            {/* Testimonial 3 */}
            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 shadow-lg border border-[var(--border-primary)]">
              <div className="flex items-center mb-4">
                {[...Array(5)].map((_, i) => (
                  <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
                ))}
              </div>
              <blockquote className="text-[var(--text-secondary)] italic">
                "Increíble cómo predice exactamente cuántos panes necesitamos cada día. Nuestros clientes siempre encuentran 
                sus productos favoritos disponibles."
              </blockquote>
              <div className="mt-6 flex items-center">
                <div className="w-12 h-12 bg-[var(--color-accent)] rounded-full flex items-center justify-center text-white font-bold">
                  A
                </div>
                <div className="ml-4">
                  <div className="font-semibold text-[var(--text-primary)]">Ana Martínez</div>
                  <div className="text-sm text-[var(--text-secondary)]">Pan & Tradición, Sevilla</div>
                </div>
              </div>
            </div>
          </div>

          {/* Trust indicators */}
          <div className="mt-16 text-center">
            <p className="text-sm text-[var(--text-tertiary)] mb-8">Confiado por más de 500 panaderías en España</p>
            <div className="flex items-center justify-center space-x-8 opacity-60">
              <div className="font-semibold text-[var(--text-secondary)]">Panadería Real</div>
              <div className="font-semibold text-[var(--text-secondary)]">Horno Artesanal</div>
              <div className="font-semibold text-[var(--text-secondary)]">Pan de Casa</div>
              <div className="font-semibold text-[var(--text-secondary)]">Dulce Tradición</div>
            </div>
          </div>
        </div>
      </section>

      {/* Pricing Section */}
      <PricingSection />

      {/* FAQ Section */}
      <section className="py-24 bg-[var(--bg-secondary)]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)]">
              Preguntas Frecuentes
            </h2>
            <p className="mt-4 text-lg text-[var(--text-secondary)]">
              Todo lo que necesitas saber sobre Panadería IA
            </p>
          </div>

          <div className="mt-16 space-y-8">
            <div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                ¿Qué tan precisa es la predicción de demanda?
              </h3>
              <p className="mt-4 text-[var(--text-secondary)]">
                Nuestra IA alcanza una precisión del 92% en predicciones de demanda, analizando más de 50 variables incluyendo 
                histórico de ventas, clima, eventos locales, estacionalidad y tendencias de mercado. La precisión mejora continuamente 
                con más datos de tu panadería.
              </p>
            </div>

            <div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                ¿Cuánto tiempo toma implementar el sistema?
              </h3>
              <p className="mt-4 text-[var(--text-secondary)]">
                La configuración inicial toma solo 5 minutos. Nuestro equipo te ayuda a migrar tus datos históricos en 24-48 horas. 
                La IA comienza a generar predicciones útiles después de una semana de datos, alcanzando máxima precisión en 30 días.
              </p>
            </div>

            <div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                ¿Se integra con mi sistema POS actual?
              </h3>
              <p className="mt-4 text-[var(--text-secondary)]">
                Sí, nos integramos con más de 50 sistemas POS populares en España. También incluimos nuestro propio POS optimizado 
                para panaderías. Si usas un sistema específico, nuestro equipo técnico puede crear una integración personalizada.
              </p>
            </div>

            <div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                ¿Qué soporte técnico ofrecen?
              </h3>
              <p className="mt-4 text-[var(--text-secondary)]">
                Ofrecemos soporte 24/7 en español por chat, email y teléfono. Todos nuestros técnicos son expertos en operaciones 
                de panadería. Además, incluimos onboarding personalizado y training para tu equipo sin costo adicional.
              </p>
            </div>

            <div className="bg-[var(--bg-primary)] rounded-xl p-8 border border-[var(--border-primary)]">
              <h3 className="text-lg font-semibold text-[var(--text-primary)]">
                ¿Mis datos están seguros?
              </h3>
              <p className="mt-4 text-[var(--text-secondary)]">
                Absolutamente. Utilizamos cifrado AES-256, servidores en la UE, cumplimos 100% con RGPD y realizamos auditorías 
                de seguridad trimestrales. Tus datos nunca se comparten con terceros y tienes control total sobre tu información.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA Section */}
      <section className="py-24 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] relative overflow-hidden">
        <div className="absolute inset-0">
          <div className="absolute -top-40 -right-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
          <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-white/5 rounded-full blur-3xl"></div>
        </div>
        
        <div className="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 relative">
          <h2 className="text-3xl lg:text-5xl font-extrabold text-white">
            Transforma tu Panadería
            <span className="block text-white/90">Comenzando Hoy</span>
          </h2>
          <p className="mt-6 text-lg text-white/80 max-w-2xl mx-auto">
            Únete a más de 500 panaderías que ya están reduciendo desperdicios, aumentando ventas y 
            optimizando operaciones con inteligencia artificial.
          </p>
          
          <div className="mt-12 flex flex-col sm:flex-row gap-6 justify-center">
            <Link to="/register">
              <Button 
                size="lg" 
                className="px-10 py-4 text-lg font-semibold bg-white text-[var(--color-primary)] hover:bg-[var(--bg-tertiary)] shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-200"
              >
                Comenzar Prueba Gratuita 14 Días
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </Link>
            <Link to="/demo">
              <Button
                size="lg"
                variant="outline"
                className="px-10 py-4 text-lg font-semibold border-2 border-white text-white hover:bg-white hover:text-[var(--color-primary)] transition-all duration-200"
              >
                <Play className="mr-2 w-5 h-5" />
                Ver Demo
              </Button>
            </Link>
          </div>
          
          <div className="mt-12 grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
            <div>
              <div className="text-2xl font-bold text-white">14 días</div>
              <div className="text-white/70 text-sm">Prueba gratuita</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-white">5 min</div>
              <div className="text-white/70 text-sm">Configuración</div>
            </div>
            <div>
              <div className="text-2xl font-bold text-white">24/7</div>
              <div className="text-white/70 text-sm">Soporte incluido</div>
            </div>
          </div>
        </div>
      </section>

    </PublicLayout>
  );
};

export default LandingPage;