import React from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { PublicLayout } from '../../components/layout';
import {
  Briefcase,
  MapPin,
  Clock,
  Euro,
  Users,
  Heart,
  Zap,
  Globe,
  Laptop,
  Coffee,
  TrendingUp,
  Award,
  Mail,
  ArrowRight,
  Code,
  Palette,
  BarChart3
} from 'lucide-react';

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

  const visionPoints = [
    {
      icon: Heart,
      title: 'Propósito Claro',
      description: 'Ayudar a panaderías de todos los tamaños a prosperar mediante tecnología de IA accesible y fácil de usar.',
    },
    {
      icon: Zap,
      title: 'Ejecución Ágil',
      description: 'Como emprendedor en solitario, puedo tomar decisiones rápidas y adaptarme a las necesidades reales de los clientes.',
    },
    {
      icon: Users,
      title: 'Enfoque en el Cliente',
      description: 'Contacto directo con cada panadería piloto. Tu feedback moldea directamente el producto.',
    },
    {
      icon: TrendingUp,
      title: 'Visión a Largo Plazo',
      description: 'Construyendo una empresa sostenible que genere impacto real, no solo crecimiento rápido.',
    },
  ];

  const futureRoles = [
    {
      icon: Code,
      title: 'Desarrollo de Software',
      description: 'Full-stack developers, ML engineers y especialistas en IA cuando lleguemos a la escala adecuada.',
    },
    {
      icon: Palette,
      title: 'Diseño de Producto',
      description: 'Diseñadores UX/UI que entiendan las necesidades de negocios reales y usuarios no técnicos.',
    },
    {
      icon: BarChart3,
      title: 'Customer Success',
      description: 'Expertos que ayuden a las panaderías a sacar el máximo provecho de la plataforma.',
    },
  ];

  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">
              <Briefcase className="w-4 h-4" />
              <span>Emprendimiento en Solitario</span>
            </div>
            <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
              Construyendo el Futuro
              <span className="block text-[var(--color-primary)]">Paso a Paso</span>
            </h1>
            <p className="text-xl text-[var(--text-secondary)] leading-relaxed mb-8">
              Panadería IA es actualmente un proyecto en solitario, enfocado en crear la mejor herramienta
              de IA para panaderías mediante contacto directo con clientes y ejecución ágil. Cuando llegue
              el momento adecuado, construiré un equipo que comparta esta visión.
            </p>
            <div className="flex items-center justify-center gap-6 text-sm text-[var(--text-tertiary)]">
              <div className="flex items-center gap-2">
                <MapPin className="w-4 h-4" />
                <span>Madrid, España</span>
              </div>
              <div className="flex items-center gap-2">
                <Users className="w-4 h-4" />
                <span>Emprendedor Solo</span>
              </div>
              <div className="flex items-center gap-2">
                <Globe className="w-4 h-4" />
                <span>Visión Global</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Current State */}
      <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 Enfoque Actual
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              Por qué un emprendedor en solitario puede ser la mejor opción en esta fase
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {visionPoints.map((point, 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">
                  <point.icon className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{point.title}</h3>
                <p className="text-sm text-[var(--text-secondary)]">{point.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Future Vision */}
      <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">
              El Futuro del Equipo
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              Actualmente no estoy contratando, pero cuando llegue el momento adecuado (tras validar el producto con clientes reales
              y alcanzar product-market fit), buscaré talento excepcional en estas áreas
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 mb-12">
            {futureRoles.map((role, index) => (
              <div
                key={index}
                className="bg-[var(--bg-primary)] 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">
                  <role.icon className="w-6 h-6 text-[var(--color-primary)]" />
                </div>
                <h3 className="text-lg font-bold text-[var(--text-primary)] mb-2">{role.title}</h3>
                <p className="text-sm text-[var(--text-secondary)]">{role.description}</p>
              </div>
            ))}
          </div>

          <div className="max-w-3xl mx-auto 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">
            <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-4 text-center">
              ¿Por Qué Aún No Contrato?
            </h3>
            <div className="space-y-4 text-[var(--text-secondary)]">
              <p className="flex items-start gap-3">
                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
                <span><strong>Validación primero:</strong> Necesito confirmar que el producto realmente resuelve problemas reales antes de escalar el equipo.</span>
              </p>
              <p className="flex items-start gap-3">
                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
                <span><strong>Recursos limitados:</strong> Como emprendedor bootstrapped, cada euro cuenta. Prefiero invertir en producto y clientes ahora.</span>
              </p>
              <p className="flex items-start gap-3">
                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
                <span><strong>Agilidad máxima:</strong> En esta fase, puedo pivotar rápidamente y experimentar sin la complejidad de coordinar un equipo.</span>
              </p>
              <p className="flex items-start gap-3">
                <Award className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
                <span><strong>El equipo adecuado:</strong> Cuando contrate, buscaré personas que compartan la visión, no solo habilidades técnicas.</span>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA - Join as Customer */}
      <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">
            ¿Quieres Ser Parte de Esta Historia?
          </h2>
          <p className="text-xl text-white/90 mb-8 leading-relaxed">
            Ahora mismo, la mejor forma de unirte es como cliente piloto. Ayúdame a construir
            la mejor herramienta de IA para panaderías, obtén 3 meses gratis y 20% de descuento de por vida.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
            <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>Únete al Programa Piloto</span>
              <ArrowRight className="w-5 h-5" />
            </Link>
            <Link
              to="/about"
              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>Conoce al Fundador</span>
            </Link>
          </div>
          <div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 max-w-2xl mx-auto">
            <p className="text-white/90 text-sm mb-4">
              <strong>¿Interesado en oportunidades futuras?</strong>
            </p>
            <p className="text-white/80 text-sm">
              Si te interesa formar parte del equipo cuando llegue el momento, puedes escribirme a{' '}
              <a href="mailto:urtzi@panaderia-ia.com" className="underline font-medium">
                urtzi@panaderia-ia.com
              </a>{' '}
              para mantenernos en contacto.
            </p>
          </div>
        </div>
      </section>
    </PublicLayout>
  );
};

export default CareersPage;