import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PublicLayout } from '../../components/layout';
import {
  Target,
  Heart,
  Shield,
  Users,
  TrendingUp,
  Brain,
  Leaf,
  Award,
  ArrowRight,
  CheckCircle2,
  Sparkles
} from 'lucide-react';

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

  const values = [
    {
      icon: Leaf,
      title: 'Sostenibilidad',
      description: 'Reducir el desperdicio alimentario no es solo bueno para tu negocio, es nuestra responsabilidad con el planeta. Cada panadería que optimiza su producción contribuye a un futuro más sostenible.',
    },
    {
      icon: Shield,
      title: 'Privacidad Total',
      description: 'Tus datos son TU PROPIEDAD. Servidores 100% en España, cumplimiento RGPD garantizado, nunca compartimos ni vendemos información. Tienes control total sobre tu información.',
    },
    {
      icon: Heart,
      title: 'Pasión por la Panadería',
      description: 'Amamos el pan de calidad, sea producido localmente o en un obrador central. Nuestra tecnología existe para ayudarte a enfocarte en lo que mejor sabes hacer: crear productos excepcionales y servir a tus clientes.',
    },
    {
      icon: Users,
      title: 'Transparencia',
      description: 'No prometemos números mágicos. Te contamos la verdad: esto es un piloto, habrá imperfecciones, pero trabajaremos contigo para construir la mejor herramienta.',
    },
  ];

  const founderHighlights = [
    {
      icon: Brain,
      title: 'Experiencia Internacional',
      description: 'Más de una década liderando proyectos globales de alta tecnología, desde startups innovadoras hasta corporaciones multinacionales en Reino Unido, Europa, Asia y América.',
    },
    {
      icon: Award,
      title: 'Formación de Élite',
      description: 'Ingeniero en Telecomunicaciones (Mondragon University, 2013) con año de intercambio en École Polytechnique Fédérale de Lausanne (EPFL), Suiza.',
    },
    {
      icon: TrendingUp,
      title: 'Especialización en IA & Innovación',
      description: 'Experto en IA/ML, transformación digital, desarrollo de productos ágiles y diseño de modelos de negocio para grandes empresas y startups.',
    },
    {
      icon: Users,
      title: 'Visión Global',
      description: 'Políglota (euskera, español, inglés, francés, chino) con pasión por fusionar creatividad humana y tecnología de vanguardia para crear soluciones de valor real.',
    },
  ];

  const milestones = [
    {
      year: '2024 Q3',
      title: 'Nacimiento de la Idea',
      description: 'Después de ver panaderías familiares luchar con desperdicios y márgenes estrechos, decidimos aplicar IA al problema.',
    },
    {
      year: '2024 Q4',
      title: 'Desarrollo Inicial',
      description: 'Construimos el MVP con feedback de 5 panaderías locales. Primeras predicciones exitosas.',
    },
    {
      year: '2025 Q1',
      title: 'Lanzamiento Piloto',
      description: 'Buscamos 20 panaderías pioneras para el programa piloto. 3 meses gratis + beneficios de por vida.',
    },
    {
      year: '2025 Q2',
      title: 'Expansión',
      description: 'Apertura pública tras refinar el producto con feedback del piloto. Objetivo: 100 panaderías.',
    },
  ];

  return (
    <PublicLayout
      variant="default"
      contentPadding="md"
      headerProps={{
        showThemeToggle: true,
        showAuthButtons: true,
        showLanguageSelector: true,
        variant: "default"
      }}
    >
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-[var(--bg-primary)] via-[var(--bg-secondary)] to-[var(--color-primary)]/5 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-4xl mx-auto">
            <div className="inline-flex items-center gap-2 bg-[var(--color-primary)]/10 text-[var(--color-primary)] px-4 py-2 rounded-full text-sm font-medium mb-6">
              <Sparkles className="w-4 h-4" />
              <span>Nuestra Misión</span>
            </div>
            <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
              Tecnología al Servicio
              <span className="block text-[var(--color-primary)]">de Tu Panadería</span>
            </h1>
            <p className="text-xl text-[var(--text-secondary)] leading-relaxed">
              Creemos que todas las panaderías merecen las mismas herramientas tecnológicas que las grandes cadenas,
              sin importar su tamaño o modelo de negocio. Estamos aquí para ayudarte a competir, crecer y prosperar.
            </p>
          </div>
        </div>
      </section>

      {/* Mission & Vision */}
      <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">
            {/* Mission */}
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800">
              <div className="w-16 h-16 bg-blue-600 rounded-2xl flex items-center justify-center mb-6">
                <Target className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-3xl font-bold text-[var(--text-primary)] mb-4">Nuestra Misión</h2>
              <p className="text-lg text-[var(--text-secondary)] leading-relaxed">
                Ayudar a panaderías a <strong>reducir desperdicios, aumentar rentabilidad y ahorrar tiempo</strong>
                mediante inteligencia artificial accesible y fácil de usar. Ya sea que produzcas localmente o gestiones un obrador central
                con múltiples puntos de venta, queremos que puedas enfocarte en tu pasión: crear productos de calidad excepcional.
              </p>
            </div>

            {/* Vision */}
            <div className="bg-gradient-to-br from-amber-50 to-orange-50 dark:from-amber-900/20 dark:to-orange-900/20 rounded-2xl p-8 border-2 border-amber-200 dark:border-amber-800">
              <div className="w-16 h-16 bg-amber-600 rounded-2xl flex items-center justify-center mb-6">
                <Brain className="w-8 h-8 text-white" />
              </div>
              <h2 className="text-3xl font-bold text-[var(--text-primary)] mb-4">Nuestra Visión</h2>
              <p className="text-lg text-[var(--text-secondary)] leading-relaxed">
                Un mundo donde <strong>ninguna panadería cierre por problemas de gestión</strong>, sin importar su tamaño o modelo de negocio.
                Donde la tecnología democratiza el acceso a herramientas avanzadas y permite que la calidad y el talento florezcan
                sin las cargas administrativas que agobian a los negocios.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <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-4xl font-extrabold text-[var(--text-primary)] mb-4">
              Nuestros Valores
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              Principios que guían cada decisión que tomamos
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {values.map((value, index) => (
              <div
                key={index}
                className="bg-[var(--bg-primary)] rounded-2xl p-8 border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300"
              >
                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-6">
                  <value.icon className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-4">{value.title}</h3>
                <p className="text-[var(--text-secondary)] leading-relaxed">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Founder */}
      <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="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              El Fundador
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              Un emprendedor en solitario con una visión clara: democratizar la tecnología de IA para panaderías de todos los tamaños
            </p>
          </div>

          {/* Founder Profile Card */}
          <div className="max-w-4xl mx-auto mb-12">
            <div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border-2 border-blue-200 dark:border-blue-800">
              <div className="flex flex-col md:flex-row gap-8 items-center md:items-start">
                <div className="w-32 h-32 bg-gradient-to-r from-[var(--color-primary)] to-orange-600 rounded-full flex items-center justify-center text-white text-4xl font-bold flex-shrink-0">
                  UA
                </div>
                <div className="flex-1 text-center md:text-left">
                  <h3 className="text-3xl font-bold text-[var(--text-primary)] mb-2">Urtzi Alfaro</h3>
                  <p className="text-xl text-[var(--color-primary)] font-medium mb-4">Fundador & CEO</p>
                  <p className="text-[var(--text-secondary)] leading-relaxed mb-4">
                    Catalizador de transformación, arquitecto estratégico y visionario en tecnología avanzada.
                    Con más de una década de experiencia internacional liderando proyectos de alta tecnología e innovación,
                    mi misión es crear impacto sostenible en empresas y sociedad a escala global.
                  </p>
                  <p className="text-[var(--text-secondary)] leading-relaxed">
                    Natural de Donostia-San Sebastián (País Vasco), he trabajado en Londres y Cambridge durante 7 años,
                    liderando proyectos globales con clientes en EE.UU., Europa y China. Ahora desde Madrid,
                    aplico mi experiencia en IA, transformación digital y desarrollo de productos para ayudar
                    a las panaderías a prosperar en la era digital.
                  </p>
                </div>
              </div>
            </div>
          </div>

          {/* Founder Highlights */}
          <div className="grid md:grid-cols-2 gap-8">
            {founderHighlights.map((highlight, index) => (
              <div
                key={index}
                className="bg-[var(--bg-secondary)] rounded-2xl p-6 border border-[var(--border-primary)] hover:shadow-xl transition-all duration-300"
              >
                <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center mb-4">
                  <highlight.icon className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{highlight.title}</h3>
                <p className="text-sm text-[var(--text-secondary)]">{highlight.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Timeline */}
      <section className="py-20 bg-[var(--bg-secondary)]">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl lg:text-4xl font-extrabold text-[var(--text-primary)] mb-4">
              Nuestro Camino
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              De la idea al impacto real
            </p>
          </div>

          <div className="relative">
            {/* Timeline line */}
            <div className="absolute left-8 top-0 bottom-0 w-0.5 bg-[var(--color-primary)]/30"></div>

            {/* Milestones */}
            <div className="space-y-12">
              {milestones.map((milestone, index) => (
                <div key={index} className="relative pl-20">
                  <div className="absolute left-0 w-16 h-16 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white font-bold border-4 border-[var(--bg-secondary)]">
                    <CheckCircle2 className="w-8 h-8" />
                  </div>
                  <div className="bg-[var(--bg-primary)] rounded-xl p-6 border border-[var(--border-primary)]">
                    <div className="text-sm font-bold text-[var(--color-primary)] mb-2">{milestone.year}</div>
                    <h3 className="text-xl font-bold text-[var(--text-primary)] mb-3">{milestone.title}</h3>
                    <p className="text-[var(--text-secondary)]">{milestone.description}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 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-4xl font-bold text-white mb-6">
            Sé Parte de Nuestra Historia
          </h2>
          <p className="text-xl text-white/90 mb-8 leading-relaxed">
            Estamos buscando 20 panaderías pioneras para nuestro programa piloto.
            3 meses gratis, 20% descuento de por vida, y la oportunidad de moldear el producto.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link
              to="/register"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-white text-[var(--color-primary)] rounded-xl font-bold hover:shadow-2xl transition-all hover:scale-105"
            >
              <span>Solicitar Plaza en el Piloto</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link
              to="/demo"
              className="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-white text-white rounded-xl font-bold hover:bg-white hover:text-[var(--color-primary)] transition-all"
            >
              <span>Ver Demo</span>
            </Link>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
};

export default AboutPage;
