import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Button, ScrollReveal, FloatingCTA, AnimatedCounter } from '../../components/ui';
import { PublicLayout } from '../../components/layout';
import { PricingSection } from '../../components/subscription';
import { getRegisterUrl, getDemoUrl } from '../../utils/navigation';
import {
  TrendingUp,
  Shield,
  Zap,
  Check,
  ArrowRight,
  Clock,
  MapPin,
  Leaf,
  Target,
  CheckCircle2,
  AlertCircle,
  School,
  Building2,
  Cloud,
  Euro,
  ChevronRight,
  Play
} from 'lucide-react';

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

  return (
    <PublicLayout
      variant="full-width"
      contentPadding="none"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: true,
        showLanguageSelector: true,
        variant: "default"
      }}
    >
      {/* Floating CTA - appears after scrolling */}
      <FloatingCTA
        text={t('landing:hero.cta_primary', 'Únete al Programa Piloto')}
        onClick={() => navigate(getRegisterUrl())}
        icon={<ArrowRight className="w-4 h-4" />}
        position="bottom-right"
        showAfterScroll={600}
        dismissible
      />
      {/* 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 overflow-hidden">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center">
            {/* Pre-headline */}
            <div className="mb-4">
              <p className="text-sm md:text-base font-medium text-[var(--text-tertiary)]">
                {t('landing:hero.pre_headline', 'Para Panaderías que Pierden €500-2,000/Mes en Desperdicios')}
              </p>
            </div>

            {/* Scarcity Badge */}
            <div className="mb-8 inline-block">
              <div className="bg-gradient-to-r from-amber-50 via-orange-50 to-amber-50 dark:from-amber-900/20 dark:via-orange-900/20 dark:to-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-full px-6 py-3 shadow-lg hover:shadow-xl transition-shadow">
                <p className="text-sm font-bold text-amber-700 dark:text-amber-300">
                  🔥 {t('landing:hero.scarcity', 'Solo 12 plazas restantes de 20 • 3 meses GRATIS')}
                </p>
              </div>
            </div>

            <h1 className="text-4xl tracking-tight font-extrabold text-[var(--text-primary)] sm:text-5xl lg:text-7xl leading-tight">
              <span className="block">{t('landing:hero.title_option_a_line1', 'Ahorra €500-2,000 al Mes')}</span>
              <span className="block text-[var(--color-primary)] mt-2">{t('landing:hero.title_option_a_line2', 'Produciendo Exactamente Lo Que Venderás')}</span>
            </h1>

            <p className="mt-8 max-w-3xl mx-auto text-lg text-[var(--text-secondary)] sm:text-xl leading-relaxed">
              {t('landing:hero.subtitle_option_a', 'La primera IA que conoce tu barrio: colegios cerca, clima local, tu competencia, eventos. Sistema automático cada mañana. Listo a las 6 AM.')}
            </p>

            {/* CTA Buttons */}
            <div className="mt-10 flex flex-col sm:flex-row gap-5 justify-center items-center">
              <Link to={getRegisterUrl()} className="w-full sm:w-auto">
                <Button
                  size="lg"
                  className="w-full sm:w-auto group px-10 py-5 text-lg font-bold bg-gradient-to-r from-[var(--color-primary)] to-orange-600 hover:from-[var(--color-primary-dark)] hover:to-orange-700 text-white shadow-2xl hover:shadow-3xl transform hover:scale-105 transition-all duration-300 rounded-xl"
                >
                  <span className="flex items-center justify-center gap-2">
                    {t('landing:hero.cta_primary', 'Únete al Programa Piloto')}
                    <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
                  </span>
                </Button>
              </Link>
              <Link to={getDemoUrl()} className="w-full sm:w-auto">
                <Button
                  size="lg"
                  variant="secondary"
                  className="w-full sm:w-auto group px-10 py-5 text-lg font-bold shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 rounded-xl"
                >
                  <span className="flex items-center justify-center gap-2">
                    {t('landing:hero.cta_demo', 'Ver Demo')}
                    <Play className="w-5 h-5 group-hover:scale-110 transition-transform" />
                  </span>
                </Button>
              </Link>
            </div>

            {/* Social Proof - New */}
            <div className="mt-12 max-w-3xl mx-auto">
              <div className="grid md:grid-cols-3 gap-6 text-left">
                <div className="flex items-start gap-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm p-4 rounded-xl shadow-sm border border-[var(--border-primary)]">
                  <CheckCircle2 className="w-5 h-5 text-green-600 dark:text-green-400 mt-0.5 flex-shrink-0" />
                  <span className="text-sm font-medium text-[var(--text-secondary)]">
                    {t('landing:hero.social_proof.bakeries', '20 panaderías ya ahorran €1,500/mes de promedio')}
                  </span>
                </div>
                <div className="flex items-start gap-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm p-4 rounded-xl shadow-sm border border-[var(--border-primary)]">
                  <Target className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
                  <span className="text-sm font-medium text-[var(--text-secondary)]">
                    {t('landing:hero.social_proof.accuracy', 'Predicciones 92% precisas (vs 60% sistemas genéricos)')}
                  </span>
                </div>
                <div className="flex items-start gap-3 bg-white/60 dark:bg-gray-800/60 backdrop-blur-sm p-4 rounded-xl shadow-sm border border-[var(--border-primary)]">
                  <Clock className="w-5 h-5 text-amber-600 dark:text-amber-400 mt-0.5 flex-shrink-0" />
                  <span className="text-sm font-medium text-[var(--text-secondary)]">
                    {t('landing:hero.social_proof.setup', 'Configuración en 15 minutos')}
                  </span>
                </div>
              </div>
            </div>

            {/* Trust Badges */}
            <div className="mt-8 flex flex-wrap items-center justify-center gap-x-8 gap-y-4 text-sm">
              <div className="flex items-center">
                <CheckCircle2 className="w-4 h-4 text-green-600 dark:text-green-400 mr-2" />
                <span className="font-medium text-[var(--text-tertiary)]">
                  {t('landing:hero.trust.no_cc', '3 meses gratis')}
                </span>
              </div>
              <div className="flex items-center">
                <Clock className="w-4 h-4 text-blue-600 dark:text-blue-400 mr-2" />
                <span className="font-medium text-[var(--text-tertiary)]">
                  {t('landing:hero.trust.quick', 'Configuración en 15 min')}
                </span>
              </div>
              <div className="flex items-center">
                <Shield className="w-4 h-4 text-purple-600 dark:text-purple-400 mr-2" />
                <span className="font-medium text-[var(--text-tertiary)]">
                  {t('landing:hero.trust.card', 'Tarjeta requerida')}
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Problem/Solution Section */}
      <section className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-2 gap-12">
            {/* Problems */}
            <ScrollReveal variant="fadeRight" delay={0.1}>
              <div>
                <h2 className="text-3xl font-bold text-[var(--text-primary)] mb-8">
                  {t('landing:problems.title', '❌ Los Problemas Que Enfrentas')}
                </h2>
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <AlertCircle className="w-6 h-6 text-red-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('landing:problems.item1.title', 'Desperdicios Diarios')}
                    </h3>
                    <p className="text-[var(--text-secondary)]">
                      {t('landing:problems.item1.description', 'Tiras €2,000 al mes porque produces "por si acaso" y terminas con pan que no se vende.')}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <AlertCircle className="w-6 h-6 text-red-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('landing:problems.item2.title', 'Adivinando Cada Día')}
                    </h3>
                    <p className="text-[var(--text-secondary)]">
                      {t('landing:problems.item2.description', 'No sabes cuánto hacer. A veces te quedas sin stock, a veces sobra demasiado.')}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-red-100 dark:bg-red-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <AlertCircle className="w-6 h-6 text-red-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('landing:problems.item3.title', 'Tiempo Perdido')}
                    </h3>
                    <p className="text-[var(--text-secondary)]">
                      {t('landing:problems.item3.description', 'Horas calculando pedidos, revisando inventario, planificando producción manualmente.')}
                    </p>
                  </div>
                </div>
              </div>
              </div>
            </ScrollReveal>

            {/* Solutions */}
            <ScrollReveal variant="fadeLeft" delay={0.2}>
              <div>
                <h2 className="text-3xl font-bold text-[var(--text-primary)] mb-8">
                  {t('landing:solutions.title', '✅ La Solución Con IA')}
                </h2>
              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <CheckCircle2 className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('landing:solutions.item1.title', 'Ahorra €500-2,000/Mes')}
                    </h3>
                    <p className="text-[var(--text-secondary)]">
                      {t('landing:solutions.item1.description', 'Reduce desperdicios 20-40% produciendo exactamente lo que vas a vender.')}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <CheckCircle2 className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('landing:solutions.item2.title', 'Predicciones 92% Precisas')}
                    </h3>
                    <p className="text-[var(--text-secondary)]">
                      {t('landing:solutions.item2.description', 'Sabe exactamente cuánto venderás mañana basándose en tus datos y tu entorno.')}
                    </p>
                  </div>
                </div>
                <div className="flex items-start gap-4">
                  <div className="w-12 h-12 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center flex-shrink-0">
                    <CheckCircle2 className="w-6 h-6 text-green-600" />
                  </div>
                  <div>
                    <h3 className="font-bold text-[var(--text-primary)] mb-2">
                      {t('landing:solutions.item3.title', 'Automatización Total')}
                    </h3>
                    <p className="text-[var(--text-secondary)]">
                      {t('landing:solutions.item3.description', 'Sistema automático cada mañana: predicción, producción, pedidos. Todo listo a las 6 AM.')}
                    </p>
                  </div>
                </div>
              </div>
              </div>
            </ScrollReveal>
          </div>
        </div>
      </section>

      {/* Core Value Propositions - 3 Pillars */}
      <section className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-5xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('landing:pillars.title', 'Cómo Funciona Bakery-IA')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              {t('landing:pillars.subtitle', 'Tres pilares que transforman tu panadería')}
            </p>
          </div>

          <div className="space-y-12">
            {/* Pilar 1: Predice Demanda con Datos de Tu Zona */}
            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 lg:p-12 border-2 border-[var(--color-primary)] shadow-xl">
              <div className="flex items-start gap-6">
                <div className="w-16 h-16 bg-[var(--color-primary)] rounded-2xl flex items-center justify-center flex-shrink-0">
                  <MapPin className="w-8 h-8 text-white" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4">
                    {t('landing:pillars.pillar1.title', '🎯 Predice Demanda con Datos de Tu Zona')}
                  </h3>
                  <p className="text-lg text-[var(--text-secondary)] mb-6">
                    {t('landing:pillars.pillar1.intro', 'IA que conoce tu barrio, no solo el calendario. Sabe que el colegio de al lado cierra en agosto, que los viernes hay mercado en tu plaza, y que abrió otra panadería a 500m.')}
                  </p>

                  <div className="grid md:grid-cols-2 gap-4">
                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
                      <div className="flex items-center gap-3 mb-2">
                        <School className="w-5 h-5 text-blue-600" />
                        <h4 className="font-bold text-[var(--text-primary)]">
                          {t('landing:pillars.pillar1.schools', 'Colegios y Oficinas Cerca')}
                        </h4>
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">
                        {t('landing:pillars.pillar1.schools_desc', 'Sabe cuándo hay vacaciones, horarios de oficina, eventos escolares')}
                      </p>
                    </div>
                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
                      <div className="flex items-center gap-3 mb-2">
                        <Building2 className="w-5 h-5 text-purple-600" />
                        <h4 className="font-bold text-[var(--text-primary)]">
                          {t('landing:pillars.pillar1.competition', 'Tu Competencia')}
                        </h4>
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">
                        {t('landing:pillars.pillar1.competition_desc', 'Detecta nuevas panaderías en tu zona y ajusta predicciones')}
                      </p>
                    </div>
                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
                      <div className="flex items-center gap-3 mb-2">
                        <Cloud className="w-5 h-5 text-sky-600" />
                        <h4 className="font-bold text-[var(--text-primary)]">
                          {t('landing:pillars.pillar1.weather', 'Clima Local')}
                        </h4>
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">
                        {t('landing:pillars.pillar1.weather_desc', 'Lluvia → menos croissants. Calor → más productos frescos')}
                      </p>
                    </div>
                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4">
                      <div className="flex items-center gap-3 mb-2">
                        <Target className="w-5 h-5 text-amber-600" />
                        <h4 className="font-bold text-[var(--text-primary)]">
                          {t('landing:pillars.pillar1.events', 'Eventos y Festivales')}
                        </h4>
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">
                        {t('landing:pillars.pillar1.events_desc', 'Fiestas del barrio, mercadillos, partidos importantes')}
                      </p>
                    </div>
                  </div>

                  <div className="mt-6 bg-gradient-to-r from-[var(--color-primary)]/10 to-orange-500/10 rounded-lg p-4 border-l-4 border-[var(--color-primary)]">
                    <p className="font-bold text-[var(--text-primary)]">
                      🎯 Precisión: <AnimatedCounter value={92} suffix="%" className="inline text-[var(--color-primary)]" /> (vs 60-70% de sistemas genéricos)
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Pilar 2: Sistema Automático Cada Mañana */}
            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 lg:p-12 border-2 border-blue-600 shadow-xl">
              <div className="flex items-start gap-6">
                <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center flex-shrink-0">
                  <Clock className="w-8 h-8 text-white" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4">
                    {t('landing:pillars.pillar2.title', '🤖 Sistema Automático Cada Mañana')}
                  </h3>
                  <p className="text-lg text-[var(--text-secondary)] mb-6">
                    {t('landing:pillars.pillar2.intro', 'Despierta con todo el trabajo hecho. A las 5:30 AM el sistema ya predijo ventas, planificó producción, gestionó inventario y creó pedidos a proveedores.')}
                  </p>

                  <div className="space-y-3">
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                      <p className="text-[var(--text-secondary)]">
                        <strong>{t('landing:pillars.pillar2.step1', 'Predice ventas de hoy:')}</strong> {t('landing:pillars.pillar2.step1_desc', '"Harás 80 croissants, 120 barras"')}
                      </p>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                      <p className="text-[var(--text-secondary)]">
                        <strong>{t('landing:pillars.pillar2.step2', 'Planifica producción:')}</strong> {t('landing:pillars.pillar2.step2_desc', 'Lista exacta de lo que hornear')}
                      </p>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                      <p className="text-[var(--text-secondary)]">
                        <strong>{t('landing:pillars.pillar2.step3', 'Gestiona inventario:')}</strong> {t('landing:pillars.pillar2.step3_desc', 'Proyecta 7 días → "Te quedarás sin harina en 4 días, pide 50kg hoy"')}
                      </p>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                      <p className="text-[var(--text-secondary)]">
                        <strong>{t('landing:pillars.pillar2.step4', 'Previene desperdicios:')}</strong> {t('landing:pillars.pillar2.step4_desc', '"Leche caduca en 5 días, no pidas más de 15L"')}
                      </p>
                    </div>
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                      <p className="text-[var(--text-secondary)]">
                        <strong>{t('landing:pillars.pillar2.step5', 'Crea pedidos:')}</strong> {t('landing:pillars.pillar2.step5_desc', 'Listos para aprobar con 1 clic')}
                      </p>
                    </div>
                  </div>

                  <div className="mt-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-lg p-4 border-l-4 border-blue-600">
                    <p className="font-bold text-[var(--text-primary)]">
                      {t('landing:pillars.pillar2.key', '🔑 Nunca llegas al punto de quedarte sin stock. El sistema lo previene 7 días antes.')}
                    </p>
                  </div>
                </div>
              </div>
            </div>

            {/* Pilar 3: Tus Datos, Tu Impacto Ambiental */}
            <div className="bg-[var(--bg-primary)] rounded-2xl p-8 lg:p-12 border-2 border-green-600 shadow-xl">
              <div className="flex items-start gap-6">
                <div className="w-16 h-16 bg-green-600 rounded-2xl flex items-center justify-center flex-shrink-0">
                  <Leaf className="w-8 h-8 text-white" />
                </div>
                <div className="flex-1">
                  <h3 className="text-2xl lg:text-3xl font-bold text-[var(--text-primary)] mb-4">
                    {t('landing:pillars.pillar3.title', 'Tus Datos, Tu Impacto Ambiental')}
                  </h3>
                  <p className="text-lg text-[var(--text-secondary)] mb-6">
                    {t('landing:pillars.pillar3.intro', '100% de tus datos te pertenecen. Mide tu impacto ambiental automáticamente y genera informes de sostenibilidad que cumplen con los estándares internacionales.')}
                  </p>

                  <div className="grid md:grid-cols-3 gap-4 mb-6">
                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4 text-center">
                      <div className="text-3xl font-bold text-green-600 mb-2">
                        {t('landing:pillars.pillar3.data_ownership_value', '100%')}
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">
                        {t('landing:pillars.pillar3.data_ownership', 'Propiedad de datos')}
                      </p>
                    </div>
                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4 text-center">
                      <div className="text-3xl font-bold text-blue-600 mb-2">
                        {t('landing:pillars.pillar3.co2_metric', 'CO₂')}
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">
                        {t('landing:pillars.pillar3.co2', 'Medición automática')}
                      </p>
                    </div>
                    <div className="bg-[var(--bg-secondary)] rounded-lg p-4 text-center">
                      <div className="text-3xl font-bold text-amber-600 mb-2">
                        {t('landing:pillars.pillar3.sdg_value', 'ODS 12.3')}
                      </div>
                      <p className="text-sm text-[var(--text-secondary)]">
                        {t('landing:pillars.pillar3.sdg', 'Seguimiento de cumplimiento')}
                      </p>
                    </div>
                  </div>

                  <div className="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 rounded-lg p-4 border-l-4 border-green-600">
                    <p className="font-bold text-[var(--text-primary)] mb-2">
                      {t('landing:pillars.pillar3.sustainability_title', 'Informes de Sostenibilidad Automatizados')}
                    </p>
                    <p className="text-sm text-[var(--text-secondary)]">
                      {t('landing:pillars.pillar3.sustainability_desc', 'Genera informes que cumplen con los estándares internacionales de sostenibilidad y reducción de desperdicio alimentario')}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Link to Features Page */}
          <div className="mt-12 text-center">
            <Link to="/features" className="inline-flex items-center gap-2 text-[var(--color-primary)] hover:text-white font-semibold text-lg group px-6 py-3 rounded-lg transition-all duration-200 hover:bg-[var(--color-primary)] no-underline">
              {t('landing:pillars.see_all', 'Ver todas las funcionalidades en detalle')}
              <ChevronRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
            </Link>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('landing:how_it_works.title', 'Cómo Empezar')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {t('landing:how_it_works.subtitle', 'En 3 pasos simples')}
            </p>
          </div>

          <div className="space-y-8">
            <div className="flex items-start gap-6">
              <div className="w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold text-xl flex-shrink-0">
                1
              </div>
              <div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
                  {t('landing:how_it_works.step1.title', 'Sube 6-12 meses de datos de ventas')}
                </h3>
                <p className="text-[var(--text-secondary)]">
                  {t('landing:how_it_works.step1.description', 'Más meses = predicciones más precisas. Si tienes solo 6 meses, funciona igual, pero mejora con el tiempo.')}
                </p>
              </div>
            </div>

            <div className="flex items-start gap-6">
              <div className="w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold text-xl flex-shrink-0">
                2
              </div>
              <div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
                  {t('landing:how_it_works.step2.title', 'La IA aprende tus patrones y tu entorno')}
                </h3>
                <p className="text-[var(--text-secondary)]">
                  {t('landing:how_it_works.step2.description', 'Analiza tus ventas, clima, competencia, eventos locales. Tarda 15 minutos en configurarse.')}
                </p>
              </div>
            </div>

            <div className="flex items-start gap-6">
              <div className="w-12 h-12 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold text-xl flex-shrink-0">
                3
              </div>
              <div>
                <h3 className="text-xl font-bold text-[var(--text-primary)] mb-2">
                  {t('landing:how_it_works.step3.title', 'Cada mañana recibes tu plan del día')}
                </h3>
                <p className="text-[var(--text-secondary)]">
                  {t('landing:how_it_works.step3.description', 'Qué hacer, qué pedir, cuándo llegará. Todo automático, tú solo apruebas.')}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Pilot Program */}
      <section className="py-20 bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/10 dark:to-orange-900/10">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <div className="inline-block bg-[var(--color-primary)] text-white px-4 py-2 rounded-full text-sm font-bold mb-4">
              {t('landing:pilot.badge', '⏰ PROGRAMA PILOTO • SOLO 12 PLAZAS RESTANTES')}
            </div>
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('landing:pilot.title', 'Únete al Programa Piloto')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {t('landing:pilot.subtitle', '3 meses gratis + beneficios exclusivos')}
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8 mb-12">
            <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border-2 border-green-500">
              <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                {t('landing:pilot.you_get.title', '✅ Qué Recibes')}
              </h3>
              <ul className="space-y-3">
                <li className="flex items-start gap-2">
                  <Check className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('landing:pilot.you_get.item1', '3 meses completamente gratis')}</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('landing:pilot.you_get.item2', 'Soporte premium personalizado')}</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('landing:pilot.you_get.item3', 'Influencia en el desarrollo del producto')}</span>
                </li>
              </ul>
            </div>

            <div className="bg-white dark:bg-gray-800 rounded-xl p-6 border-2 border-blue-500">
              <h3 className="text-xl font-bold text-[var(--text-primary)] mb-4">
                {t('landing:pilot.we_ask.title', '🤝 Qué Necesitamos')}
              </h3>
              <ul className="space-y-3">
                <li className="flex items-start gap-2">
                  <Check className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('landing:pilot.we_ask.item1', '6-12 meses de datos de ventas')}</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('landing:pilot.we_ask.item2', 'Tarjeta de crédito (sin cargo por 3 meses)')}</span>
                </li>
                <li className="flex items-start gap-2">
                  <Check className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
                  <span className="text-[var(--text-secondary)]">{t('landing:pilot.we_ask.item3', 'Comprensión de que es un programa piloto y feedback semanal sobre fallos y mejoras')}</span>
                </li>
              </ul>
            </div>
          </div>

          <div className="text-center">
            <Link to={getRegisterUrl()}>
              <Button
                size="lg"
                className="px-10 py-5 text-lg font-bold bg-gradient-to-r from-[var(--color-primary)] to-orange-600 hover:from-[var(--color-primary-dark)] hover:to-orange-700 text-white shadow-2xl"
              >
                {t('landing:pilot.cta', 'Solicitar Plaza Ahora')}
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </Link>
          </div>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('landing:pricing.title', 'Precios Transparentes')}
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {t('landing:pricing.subtitle', 'Sin sorpresas, sin costos ocultos')}
            </p>
          </div>
          <PricingSection />
        </div>
      </section>

      {/* FAQ */}
      <section className="py-20 bg-[var(--bg-primary)]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              {t('landing:faq.title', 'Preguntas Frecuentes')}
            </h2>
          </div>

          <div className="space-y-6">
            <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
              <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">
                {t('landing:faq.q1.question', '¿Cuántos datos necesito?')}
              </h3>
              <p className="text-[var(--text-secondary)]">
                {t('landing:faq.q1.answer', '6-12 meses de datos de ventas. Más datos = mejores predicciones, pero funciona desde 6 meses.')}
              </p>
            </div>

            <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
              <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">
                {t('landing:faq.q2.question', '¿Por qué necesito dar mi tarjeta?')}
              </h3>
              <p className="text-[var(--text-secondary)]">
                {t('landing:faq.q2.answer', 'Para continuar automáticamente después del período de prueba gratuito de 3 meses. Puedes cancelar en cualquier momento sin cargo.')}
              </p>
            </div>

            <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
              <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">
                {t('landing:faq.q3.question', '¿Qué pasa con mis datos?')}
              </h3>
              <p className="text-[var(--text-secondary)]">
                {t('landing:faq.q3.answer', '100% tuyos. Servidores en España, cumplimiento RGPD, nunca compartimos ni vendemos tu información.')}
              </p>
            </div>

            <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
              <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">
                {t('landing:faq.q4.question', '¿Funciona para mi tipo de panadería?')}
              </h3>
              <p className="text-[var(--text-secondary)]">
                {t('landing:faq.q4.answer', 'Sí. Ya sea producción local o obrador central con múltiples puntos de venta, el sistema se adapta a tu modelo de negocio.')}
              </p>
            </div>

            <div className="bg-[var(--bg-secondary)] rounded-xl p-6 border border-[var(--border-primary)]">
              <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">
                {t('landing:faq.q5.question', '¿Qué pasa si me quedo sin stock?')}
              </h3>
              <p className="text-[var(--text-secondary)]">
                {t('landing:faq.q5.answer', 'El sistema previene esto. Proyecta 7 días hacia adelante y te avisa cuando necesitas pedir a proveedores, creando automáticamente las órdenes de compra.')}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <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-5xl font-bold text-white mb-6">
            {t('landing:final_cta.title', 'Deja de Perder €2,000 al Mes en Desperdicios')}
          </h2>
          <p className="text-xl text-white/90 mb-8">
            {t('landing:final_cta.subtitle', 'Únete a las primeras 20 panaderías. Solo quedan 12 plazas.')}
          </p>
          <Link to={getRegisterUrl()}>
            <Button
              size="lg"
              className="bg-white text-[var(--color-primary)] hover:bg-gray-100 font-bold text-lg px-10 py-5 shadow-2xl"
            >
              {t('landing:final_cta.button', 'Comenzar Ahora - Sin Tarjeta Requerida')}
              <ArrowRight className="ml-2 w-6 h-6" />
            </Button>
          </Link>
          <p className="mt-6 text-white/80 text-sm">
            {t('landing:final_cta.guarantee', 'Tarjeta requerida. Sin cargo por 3 meses. Cancela cuando quieras.')}
          </p>
        </div>
      </section>
    </PublicLayout>
  );
};

export default LandingPage;