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';

interface JobOpening {
  id: string;
  title: string;
  department: string;
  location: string;
  type: string;
  salary?: string;
  description: string;
  requirements: string[];
  niceToHave: string[];
  icon: React.ComponentType<{ className?: string }>;
}

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

  const benefits = [
    {
      icon: Laptop,
      title: 'Trabajo Remoto',
      description: '100% remoto o híbrido según prefieras. Tenemos oficina en Bilbao pero puedes trabajar desde donde quieras.',
    },
    {
      icon: Clock,
      title: 'Horario Flexible',
      description: 'Enfócate en resultados, no en horas. Organiza tu día como mejor funcione para ti.',
    },
    {
      icon: Euro,
      title: 'Salario Competitivo',
      description: 'Sueldos por encima de mercado + equity en la empresa para fundadores tempranos.',
    },
    {
      icon: TrendingUp,
      title: 'Crecimiento Real',
      description: 'Somos una startup en fase temprana. Aquí aprendes rápido y tu impacto se ve directamente.',
    },
    {
      icon: Heart,
      title: 'Propósito',
      description: 'Ayuda a negocios reales a prosperar. Tu trabajo tiene impacto tangible en familias.',
    },
    {
      icon: Users,
      title: 'Equipo Pequeño',
      description: 'Sin burocracia, sin reuniones inútiles. Decisiones rápidas, ejecución directa.',
    },
  ];

  const openPositions: JobOpening[] = [
    {
      id: '1',
      title: 'Full Stack Developer (React + Python)',
      department: 'Ingeniería',
      location: 'Remoto (España)',
      type: 'Tiempo completo',
      salary: '€45,000 - €65,000 + equity',
      description: 'Buscamos un desarrollador full-stack que nos ayude a construir la mejor plataforma de gestión para panaderías de todos los tamaños y modelos. Trabajarás directamente con los fundadores y tendrás ownership completo de features.',
      requirements: [
        '3+ años de experiencia con React y TypeScript',
        '2+ años con Python (FastAPI, Flask o Django)',
        'Experiencia con bases de datos (PostgreSQL)',
        'Git, CI/CD, testing',
        'Capacidad de trabajar autónomamente',
      ],
      niceToHave: [
        'Experiencia con ML/IA',
        'Background en startups',
        'Conocimiento del sector F&B/hostelería',
        'Contribuciones open source',
      ],
      icon: Code,
    },
    {
      id: '2',
      title: 'ML Engineer (Predicción de Demanda)',
      department: 'IA/ML',
      location: 'Remoto (España)',
      type: 'Tiempo completo',
      salary: '€50,000 - €70,000 + equity',
      description: 'Lidera el desarrollo de nuestros algoritmos de predicción. Trabajarás con datos reales de panaderías (locales y obradores centrales) para crear modelos que predicen demanda con >90% precisión, tanto a nivel individual como agregado.',
      requirements: [
        'MSc o PhD en CS, Matemáticas, o similar',
        '3+ años trabajando con ML en producción',
        'Experiencia con time series forecasting',
        'Python (scikit-learn, TensorFlow/PyTorch)',
        'SQL y manejo de grandes datasets',
      ],
      niceToHave: [
        'Publicaciones en ML/IA',
        'Experiencia con MLOps',
        'Background en retail/forecasting/supply chain',
        'Kaggle competitions',
      ],
      icon: BarChart3,
    },
    {
      id: '3',
      title: 'Product Designer (UI/UX)',
      department: 'Diseño',
      location: 'Remoto (España)',
      type: 'Freelance/Tiempo parcial',
      salary: '€30,000 - €45,000 (parcial)',
      description: 'Diseña interfaces que panaderos puedan usar incluso con las manos llenas de harina. Necesitamos UX/UI funcional, intuitivo y hermoso para usuarios no-técnicos.',
      requirements: [
        '3+ años diseñando productos digitales',
        'Portfolio con casos de estudio reales',
        'Experiencia con Figma',
        'Conocimiento de design systems',
        'User research y testing',
      ],
      niceToHave: [
        'Experiencia en B2B/SaaS',
        'Conocimiento de front-end (HTML/CSS)',
        'Ilustración/motion design',
        'Background en F&B/hostelería',
      ],
      icon: Palette,
    },
  ];

  const cultureFacts = [
    'Somos un equipo de 5 personas (por ahora)',
    'Promedio de edad: 32 años',
    'Daily standups de 10 minutos máximo',
    '80% del equipo trabaja remoto',
    'Viernes terminamos a las 14:00',
    'Budget para cursos y conferencias',
    'Equipo multilingüe (ES/EN/EU)',
    'Sin dress code (incluso en videollamadas)',
  ];

  return (
    <PublicLayout
      variant="default"
      contentPadding="default"
      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>Estamos Contratando</span>
            </div>
            <h1 className="text-4xl lg:text-6xl font-extrabold text-[var(--text-primary)] mb-6">
              Construye el Futuro de
              <span className="block text-[var(--color-primary)]">las Panaderías</span>
            </h1>
            <p className="text-xl text-[var(--text-secondary)] leading-relaxed mb-8">
              Únete a una startup en fase temprana que combina IA, sostenibilidad y pasión por ayudar a negocios reales de todos los tamaños.
              Somos pequeños, ágiles y con un propósito claro.
            </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>Remoto/Híbrido</span>
              </div>
              <div className="flex items-center gap-2">
                <Users className="w-4 h-4" />
                <span>Equipo de 5</span>
              </div>
              <div className="flex items-center gap-2">
                <Globe className="w-4 h-4" />
                <span>100% España</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Benefits */}
      <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">
              ¿Por Qué Trabajar Con Nosotros?
            </h2>
            <p className="text-xl text-[var(--text-secondary)] max-w-3xl mx-auto">
              Beneficios reales, no promesas vacías
            </p>
          </div>

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

      {/* Open Positions */}
      <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">
              Posiciones Abiertas
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              {openPositions.length} vacantes disponibles
            </p>
          </div>

          <div className="space-y-6">
            {openPositions.map((job) => (
              <div
                key={job.id}
                className="bg-[var(--bg-primary)] rounded-2xl p-8 border-2 border-[var(--border-primary)] hover:border-[var(--color-primary)] transition-all duration-300"
              >
                <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
                  {/* Left: Job Info */}
                  <div className="flex-1">
                    <div className="flex items-start gap-4 mb-4">
                      <div className="w-12 h-12 bg-[var(--color-primary)]/10 rounded-xl flex items-center justify-center flex-shrink-0">
                        <job.icon className="w-6 h-6 text-[var(--color-primary)]" />
                      </div>
                      <div>
                        <h3 className="text-2xl font-bold text-[var(--text-primary)] mb-2">{job.title}</h3>
                        <div className="flex flex-wrap items-center gap-4 text-sm text-[var(--text-secondary)]">
                          <span className="inline-flex items-center gap-1">
                            <Briefcase className="w-4 h-4" />
                            {job.department}
                          </span>
                          <span className="inline-flex items-center gap-1">
                            <MapPin className="w-4 h-4" />
                            {job.location}
                          </span>
                          <span className="inline-flex items-center gap-1">
                            <Clock className="w-4 h-4" />
                            {job.type}
                          </span>
                          {job.salary && (
                            <span className="inline-flex items-center gap-1 text-[var(--color-primary)] font-medium">
                              <Euro className="w-4 h-4" />
                              {job.salary}
                            </span>
                          )}
                        </div>
                      </div>
                    </div>

                    <p className="text-[var(--text-secondary)] mb-6">{job.description}</p>

                    <div className="grid md:grid-cols-2 gap-6">
                      {/* Requirements */}
                      <div>
                        <h4 className="font-bold text-[var(--text-primary)] mb-3">Requisitos:</h4>
                        <ul className="space-y-2">
                          {job.requirements.map((req, i) => (
                            <li key={i} className="flex items-start gap-2 text-sm text-[var(--text-secondary)]">
                              <Award className="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5" />
                              <span>{req}</span>
                            </li>
                          ))}
                        </ul>
                      </div>

                      {/* Nice to Have */}
                      <div>
                        <h4 className="font-bold text-[var(--text-primary)] mb-3">Valorable:</h4>
                        <ul className="space-y-2">
                          {job.niceToHave.map((item, i) => (
                            <li key={i} className="flex items-start gap-2 text-sm text-[var(--text-secondary)]">
                              <Zap className="w-4 h-4 text-[var(--color-primary)] flex-shrink-0 mt-0.5" />
                              <span>{item}</span>
                            </li>
                          ))}
                        </ul>
                      </div>
                    </div>
                  </div>

                  {/* Right: Apply Button */}
                  <div className="flex flex-col gap-3 lg:min-w-[200px]">
                    <a
                      href={`mailto:careers@panaderia-ia.com?subject=Aplicación: ${job.title}`}
                      className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-[var(--color-primary)] text-white rounded-xl font-bold hover:bg-[var(--color-primary-dark)] transition-all hover:scale-105"
                    >
                      <Mail className="w-5 h-5" />
                      <span>Aplicar</span>
                    </a>
                    <Link
                      to="/demo"
                      className="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-[var(--border-primary)] text-[var(--text-primary)] rounded-xl font-medium hover:border-[var(--color-primary)] transition-all text-center"
                    >
                      <span>Ver Producto</span>
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Culture */}
      <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">
              Nuestra Cultura
            </h2>
            <p className="text-xl text-[var(--text-secondary)]">
              Datos reales, sin marketing
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-4">
            {cultureFacts.map((fact, index) => (
              <div
                key={index}
                className="flex items-center gap-3 bg-[var(--bg-secondary)] p-4 rounded-lg border border-[var(--border-primary)]"
              >
                <Coffee className="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" />
                <span className="text-[var(--text-secondary)]">{fact}</span>
              </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">
            ¿No Ves Tu Posición Ideal?
          </h2>
          <p className="text-xl text-white/90 mb-8 leading-relaxed">
            Siempre estamos abiertos a conocer talento excepcional.
            Envíanos tu CV y cuéntanos por qué quieres unirte a Panadería IA.
          </p>
          <a
            href="mailto:careers@panaderia-ia.com?subject=Aplicación Espontánea"
            className="inline-flex items-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"
          >
            <Mail className="w-5 h-5" />
            <span>Enviar Aplicación Espontánea</span>
            <ArrowRight className="w-5 h-5" />
          </a>
          <p className="text-white/80 text-sm mt-6">
            careers@panaderia-ia.com
          </p>
        </div>
      </section>
    </PublicLayout>
  );
};

export default CareersPage;