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

const LandingPage: React.FC = () => {
  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,
        variant: "default",
        navigationItems: [
          { id: 'features', label: 'Características', href: '#features' },
          { id: 'benefits', label: 'Beneficios', href: '#benefits' },
          { id: 'pricing', label: 'Precios', href: '#pricing' },
          { id: 'testimonials', label: '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">
              <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" />
                IA Avanzada para Panaderías
              </span>
            </div>
            
            <h1 className="text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-7xl">
              <span className="block">Revoluciona tu</span>
              <span className="block text-[var(--color-primary)]">Panadería con IA</span>
            </h1>
            
            <p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl">
              Optimiza automáticamente tu producción, reduce desperdicios hasta un 35%, 
              predice demanda con precisión del 92% y aumenta tus ventas con inteligencia artificial.
            </p>
            
            <div className="mt-10 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">
                  Comenzar Gratis 14 Días
                  <ArrowRight className="ml-2 w-5 h-5" />
                </Button>
              </Link>
              <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"
                onClick={() => scrollToSection('demo')}
              >
                <Play className="mr-2 w-5 h-5" />
                Ver Demo en Vivo
              </Button>
            </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" />
                Sin tarjeta de crédito
              </div>
              <div className="flex items-center">
                <Check className="w-4 h-4 text-green-500 mr-2" />
                Configuración en 5 minutos
              </div>
              <div className="flex items-center">
                <Check className="w-4 h-4 text-green-500 mr-2" />
                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 */}
      <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">
            <h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)]">
              Gestión Completa con
              <span className="block text-[var(--color-primary)]">Inteligencia Artificial</span>
            </h2>
            <p className="mt-6 max-w-3xl mx-auto text-lg text-[var(--text-secondary)]">
              Automatiza procesos, optimiza recursos y toma decisiones inteligentes basadas en datos reales de tu panadería.
            </p>
          </div>

          <div className="mt-20 grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* AI Forecasting */}
            <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-primary)] to-[var(--color-primary-dark)] rounded-xl flex items-center justify-center shadow-lg">
                  <TrendingUp className="w-6 h-6 text-white" />
                </div>
              </div>
              <div className="mt-6">
                <h3 className="text-xl font-bold text-[var(--text-primary)]">Predicción Inteligente</h3>
                <p className="mt-4 text-[var(--text-secondary)]">
                  Algoritmos de IA analizan patrones históricos, clima, eventos locales y tendencias para predecir la demanda exacta de cada producto.
                </p>
                <div className="mt-6">
                  <div className="flex items-center text-sm text-[var(--color-primary)]">
                    <Check className="w-4 h-4 mr-2" />
                    Precisión del 92% en predicciones
                  </div>
                  <div className="flex items-center text-sm text-[var(--color-primary)] mt-2">
                    <Check className="w-4 h-4 mr-2" />
                    Reduce desperdicios hasta 35%
                  </div>
                  <div className="flex items-center text-sm text-[var(--color-primary)] mt-2">
                    <Check className="w-4 h-4 mr-2" />
                    Aumenta ventas promedio 22%
                  </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">
                <DollarSign 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 */}
      <section id="pricing" className="py-24 bg-[var(--bg-primary)]">
        <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)]">
              Planes que se Adaptan a tu Negocio
            </h2>
            <p className="mt-4 max-w-2xl mx-auto text-lg text-[var(--text-secondary)]">
              Sin costos ocultos, sin compromisos largos. Comienza gratis y escala según crezcas.
            </p>
          </div>

          <div className="mt-16 grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Starter Plan */}
            <div className="group relative bg-[var(--bg-secondary)] rounded-3xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)]/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
              <div className="absolute top-6 right-6">
                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-full flex items-center justify-center">
                  <Package className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
              </div>
              
              <div className="mb-6">
                <h3 className="text-2xl font-bold text-[var(--text-primary)]">Starter</h3>
                <p className="mt-3 text-[var(--text-secondary)] leading-relaxed">Ideal para panaderías pequeñas o nuevas</p>
              </div>
              
              <div className="mb-8">
                <div className="flex items-baseline">
                  <span className="text-5xl font-bold text-[var(--text-primary)]">€49</span>
                  <span className="ml-2 text-lg text-[var(--text-secondary)]">/mes</span>
                </div>
                <div className="mt-2 px-3 py-1 bg-[var(--color-success)]/10 text-[var(--color-success)] text-sm font-medium rounded-full inline-block">
                  14 días gratis
                </div>
              </div>
              
              <div className="space-y-4 mb-8">
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Hasta 50 productos</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Control de inventario básico</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Predicción básica de demanda</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Reportes básicos de producción</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Analytics básicos</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">1 ubicación</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Soporte por email</span>
                </div>
              </div>
              
              <Button className="w-full py-4 text-base font-semibold border-2 border-[var(--color-primary)] text-[var(--color-primary)] hover:bg-[var(--color-primary)] hover:text-white transition-all duration-200 group-hover:shadow-lg" variant="outline">
                Comenzar Gratis
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </div>

            {/* Professional Plan - Highlighted */}
            <div className="group relative bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-primary)] to-[var(--color-primary-dark)] rounded-3xl p-8 shadow-2xl transform scale-105 z-10">
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                <div className="bg-gradient-to-r from-[var(--color-secondary)] to-[var(--color-secondary-dark)] text-white px-6 py-2 rounded-full text-sm font-bold shadow-lg">
                  ⭐ Más Popular
                </div>
              </div>
              
              <div className="absolute top-6 right-6">
                <div className="w-12 h-12 bg-white/10 rounded-full flex items-center justify-center">
                  <TrendingUp className="w-6 h-6 text-white" />
                </div>
              </div>
              
              <div className="mb-6 pt-4">
                <h3 className="text-2xl font-bold text-white">Professional</h3>
                <p className="mt-3 text-white/90 leading-relaxed">Ideal para panaderías y cadenas en crecimiento</p>
              </div>
              
              <div className="mb-8">
                <div className="flex items-baseline">
                  <span className="text-5xl font-bold text-white">€129</span>
                  <span className="ml-2 text-lg text-white/80">/mes</span>
                </div>
                <div className="mt-2 px-3 py-1 bg-white/20 text-white text-sm font-medium rounded-full inline-block">
                  14 días gratis
                </div>
              </div>
              
              <div className="space-y-4 mb-8">
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">Productos ilimitados</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">Control de inventario avanzado</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">IA Avanzada con 92% de precisión</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">Gestión completa de producción</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">POS integrado</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">Gestión de Logística Básica</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">Analytics avanzados</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">1-2 ubicaciones</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-[var(--color-primary)]" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-white font-medium">Soporte prioritario 24/7</span>
                </div>
              </div>
              
              <Button className="w-full py-4 text-base font-semibold bg-white text-[var(--color-primary)] hover:bg-gray-100 transition-all duration-200 shadow-lg hover:shadow-xl">
                Comenzar Prueba Gratuita
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </div>

            {/* Enterprise Plan */}
            <div className="group relative bg-[var(--bg-secondary)] rounded-3xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-accent)]/30 transition-all duration-300 hover:shadow-xl hover:-translate-y-1">
              <div className="absolute top-6 right-6">
                <div className="w-12 h-12 bg-[var(--color-accent)]/10 rounded-full flex items-center justify-center">
                  <Settings className="w-6 h-6 text-[var(--color-accent)]" />
                </div>
              </div>
              
              <div className="mb-6">
                <h3 className="text-2xl font-bold text-[var(--text-primary)]">Enterprise</h3>
                <p className="mt-3 text-[var(--text-secondary)] leading-relaxed">Ideal para cadenas con obradores centrales</p>
              </div>
              
              <div className="mb-8">
                <div className="flex items-baseline">
                  <span className="text-5xl font-bold text-[var(--text-primary)]">€399</span>
                  <span className="ml-2 text-lg text-[var(--text-secondary)]">/mes</span>
                </div>
                <div className="mt-2 px-3 py-1 bg-[var(--color-accent)]/10 text-[var(--color-accent)] text-sm font-medium rounded-full inline-block">
                  Demo personalizada
                </div>
              </div>
              
              <div className="space-y-4 mb-8 max-h-80 overflow-y-auto pr-2 scrollbar-thin">
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Productos ilimitados</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Control de inventario multi-locación</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">IA personalizada por ubicación</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Optimización de capacidad</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Integración con ERPs</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Gestión de Logística Avanzada</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Analytics predictivos</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Ubicaciones y obradores ilimitados</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">API Personalizada</span>
                </div>
                <div className="flex items-start">
                  <div className="flex-shrink-0 mt-1">
                    <div className="w-5 h-5 bg-[var(--color-accent)] rounded-full flex items-center justify-center">
                      <Check className="w-3 h-3 text-white" />
                    </div>
                  </div>
                  <span className="ml-3 text-sm text-[var(--text-primary)] font-medium">Manager de Cuenta Dedicado</span>
                </div>
              </div>
              
              <Button className="w-full py-4 text-base font-semibold border-2 border-[var(--color-accent)] text-[var(--color-accent)] hover:bg-[var(--color-accent)] hover:text-white transition-all duration-200 group-hover:shadow-lg" variant="outline">
                Contactar Ventas
                <ArrowRight className="ml-2 w-4 h-4" />
              </Button>
            </div>
          </div>

          <div className="mt-16 text-center">
            <p className="text-sm text-[var(--text-tertiary)]">
              🔒 Todos los planes incluyen cifrado de datos, backups automáticos y cumplimiento RGPD
            </p>
          </div>
        </div>
      </section>

      {/* 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>
            <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"
              onClick={() => scrollToSection('demo')}
            >
              <Play className="mr-2 w-5 h-5" />
              Ver Demo
            </Button>
          </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;