import React, { useState } from 'react';
import { 
  Users, 
  Cpu, 
  DollarSign, 
  ShieldAlert, 
  Eye, 
  UserX, 
  FileWarning, 
  PieChart, 
  TrendingDown, 
  ArrowRightLeft,
  Briefcase,
  AlertTriangle,
  Info
} from 'lucide-react';

const App = () => {
  const [activeTab, setActiveTab] = useState('comparison');

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-800 p-4 md:p-8">
      <header className="max-w-6xl mx-auto mb-10 text-center">
        <h1 className="text-3xl md:text-4xl font-extrabold text-slate-900 mb-3">
          La Nueva Morfología del Trabajo Tecnológico
        </h1>
        <p className="text-lg text-slate-600 max-w-2xl mx-auto">
          Visualización basada en el informe del Laboratorio de Innovación y Tecnologías Aplicadas al Trabajo (LITAT) y el Observatorio del Trabajo Informático (OTI).
        </p>
      </header>

      {/* Navigation Tabs */}
      <div className="max-w-6xl mx-auto mb-8 flex flex-col sm:flex-row justify-center gap-4">
        <button
          onClick={() => setActiveTab('comparison')}
          className={`px-6 py-3 rounded-full font-semibold transition-all shadow-sm flex items-center justify-center gap-2 ${
            activeTab === 'comparison'
              ? 'bg-blue-600 text-white shadow-blue-200 ring-2 ring-blue-600 ring-offset-2'
              : 'bg-white text-slate-600 hover:bg-slate-100'
          }`}
        >
          <ArrowRightLeft size={18} />
          Comparativa: Detrás vs. Delante
        </button>
        <button
          onClick={() => setActiveTab('complaints')}
          className={`px-6 py-3 rounded-full font-semibold transition-all shadow-sm flex items-center justify-center gap-2 ${
            activeTab === 'complaints'
              ? 'bg-amber-600 text-white shadow-amber-200 ring-2 ring-amber-600 ring-offset-2'
              : 'bg-white text-slate-600 hover:bg-slate-100'
          }`}
        >
          <AlertTriangle size={18} />
          Denuncias: Ley de Economía del Conocimiento
        </button>
      </div>

      <main className="max-w-6xl mx-auto">
        {activeTab === 'comparison' ? <ComparisonInfographic /> : <ComplaintsInfographic />}
      </main>

      <footer className="max-w-6xl mx-auto mt-12 text-center text-slate-400 text-sm">
        <p>© 2026 Asociación Gremial de Computación (AGC). Datos extraídos del informe "Análisis Laboral Sector Tecnológico y IA".</p>
      </footer>
    </div>
  );
};

// --- Component 1: Comparison Infographic (Table 1) ---
const ComparisonInfographic = () => {
  const rows = [
    {
      icon: <Briefcase size={24} />,
      title: "Rol Principal",
      left: "Producción de datos, etiquetado, moderación, QA manual.",
      right: "Consumo de datos, desarrollo de productos, gestión de IA."
    },
    {
      icon: <Cpu size={24} />,
      title: "Relación con la IA",
      left: "Entrenadores y 'tutores' del algoritmo. Trabajo manual intensivo.",
      right: "Beneficiarios de la automatización. Riesgo de reemplazo tras transferencia de know-how."
    },
    {
      icon: <DollarSign size={24} />,
      title: "Estructura Salarial",
      left: "Salarios en pesos, franja baja/media. Alta dependencia de paritarias (si hubiera).",
      right: "Salarios mixtos (pesos/USD), bonos por desempeño. Alta dispersión según seniority."
    },
    {
      icon: <ShieldAlert size={24} />,
      title: "Estabilidad",
      left: "Alta rotación estructural (modelo 'trampolín').",
      right: "Inestabilidad cíclica ligada a reestructuraciones tecnológicas."
    },
    {
      icon: <Eye size={24} />,
      title: "Visibilidad Pública",
      left: "Invisible. 'Ghost Work'. No reconocida en el producto final.",
      right: "Alta visibilidad. Marca empleadora fuerte ('Unicornio')."
    }
  ];

  return (
    <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-slate-200">
      <div className="bg-slate-900 text-white p-6 md:p-8 text-center">
        <h2 className="text-2xl font-bold mb-2">Realidades Laborales Divididas</h2>
        <p className="opacity-80">La dualidad estructural del sector tecnológico argentino</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2">
        {/* Header Left */}
        <div className="bg-slate-100 p-4 border-b md:border-b-0 md:border-r border-slate-200 text-center sticky top-0 z-10">
          <div className="inline-block p-3 bg-red-100 text-red-700 rounded-full mb-2">
            <UserX size={32} />
          </div>
          <h3 className="text-xl font-bold text-slate-800">Detrás del Telón</h3>
          <p className="text-sm text-slate-500 font-medium">Ej. Arbusta, Data Workers</p>
        </div>

        {/* Header Right */}
        <div className="bg-blue-50 p-4 border-b border-slate-200 text-center sticky top-0 z-10">
          <div className="inline-block p-3 bg-blue-100 text-blue-700 rounded-full mb-2">
            <Users size={32} />
          </div>
          <h3 className="text-xl font-bold text-slate-800">Delante del Telón</h3>
          <p className="text-sm text-slate-500 font-medium">Ej. Mercado Libre, Globant</p>
        </div>
      </div>

      <div className="divide-y divide-slate-100">
        {rows.map((row, index) => (
          <div key={index} className="grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] items-stretch hover:bg-slate-50 transition-colors group">
            
            {/* Left Content */}
            <div className="p-6 md:text-right flex flex-col justify-center order-2 md:order-1 border-l-4 border-red-400 md:border-l-0 md:border-r-0">
              <span className="md:hidden font-bold text-xs uppercase tracking-wider text-slate-400 mb-1 block">Detrás del telón</span>
              <p className="text-slate-700">{row.left}</p>
            </div>

            {/* Center Icon/Label */}
            <div className="flex items-center justify-center p-4 md:py-6 bg-slate-50 order-1 md:order-2 border-b md:border-b-0 border-slate-100">
              <div className="flex flex-row md:flex-col items-center gap-3 md:w-32 text-center">
                <div className="p-2 bg-white rounded-full shadow-sm text-indigo-600 ring-1 ring-slate-200">
                  {row.icon}
                </div>
                <span className="font-bold text-slate-900 text-sm md:text-xs uppercase tracking-wide">{row.title}</span>
              </div>
            </div>

            {/* Right Content */}
            <div className="p-6 flex flex-col justify-center order-3 border-l-4 border-blue-400 md:border-l-0">
              <span className="md:hidden font-bold text-xs uppercase tracking-wider text-slate-400 mb-1 block">Delante del telón</span>
              <p className="text-slate-700">{row.right}</p>
            </div>

          </div>
        ))}
      </div>
    </div>
  );
};

// --- Component 2: Complaints Infographic (Table 2) ---
const ComplaintsInfographic = () => {
  const complaints = [
    {
      icon: <UserX size={32} className="text-rose-500" />,
      color: "border-rose-500",
      bgTitle: "bg-rose-50",
      textTitle: "text-rose-800",
      title: "Despidos con Subsidios",
      description: "Empresas reducen personal mientras cobran bonos fiscales por 'fomento al empleo'.",
      impact: "Financiamiento público de la destrucción de empleo. Fraude al espíritu de la ley."
    },
    {
      icon: <FileWarning size={32} className="text-amber-500" />,
      color: "border-amber-500",
      bgTitle: "bg-amber-50",
      textTitle: "text-amber-800",
      title: "Adulteración Reglamentaria",
      description: "Decreto 1034/2020 permite evadir el 'Libre Deuda Gremial' con declaraciones juradas.",
      impact: "Vaciamiento del poder de control sindical y bloqueo de la negociación colectiva."
    },
    {
      icon: <PieChart size={32} className="text-purple-500" />,
      color: "border-purple-500",
      bgTitle: "bg-purple-50",
      textTitle: "text-purple-800",
      title: "Concentración de Recursos",
      description: "El 2% de las firmas (grandes) capta el 50% de los beneficios fiscales.",
      impact: "Asfixia de las PyMEs y consolidación de monopolios tecnológicos."
    },
    {
      icon: <TrendingDown size={32} className="text-emerald-600" />,
      color: "border-emerald-500",
      bgTitle: "bg-emerald-50",
      textTitle: "text-emerald-800",
      title: "Apropiación de Valor",
      description: "Ratio de facturación vs. salario de 7 a 1.",
      impact: "Estancamiento de salarios reales frente a ganancias empresariales extraordinarias."
    }
  ];

  return (
    <div className="space-y-8">
      <div className="bg-slate-900 text-white p-8 rounded-2xl shadow-lg text-center relative overflow-hidden">
        <div className="relative z-10">
          <h2 className="text-2xl font-bold mb-3 flex items-center justify-center gap-2">
            <AlertTriangle className="text-amber-400" />
            Denuncias: Ley de Economía del Conocimiento
          </h2>
          <p className="text-slate-300 max-w-3xl mx-auto">
            Principales irregularidades detectadas por la AGC en la aplicación de la Ley 27.506 y su impacto en el ecosistema tecnológico.
          </p>
        </div>
        {/* Background decorative element */}
        <div className="absolute top-0 right-0 w-64 h-64 bg-slate-800 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 opacity-50"></div>
        <div className="absolute bottom-0 left-0 w-64 h-64 bg-indigo-900 rounded-full blur-3xl translate-y-1/2 -translate-x-1/2 opacity-50"></div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {complaints.map((item, index) => (
          <div key={index} className={`bg-white rounded-xl shadow-md overflow-hidden border-t-4 ${item.color} hover:shadow-xl transition-shadow duration-300 flex flex-col`}>
            <div className={`p-4 flex items-center gap-4 border-b border-slate-100 ${item.bgTitle}`}>
              <div className="bg-white p-2 rounded-lg shadow-sm">
                {item.icon}
              </div>
              <h3 className={`font-bold text-lg ${item.textTitle}`}>{item.title}</h3>
            </div>
            
            <div className="p-6 flex-grow flex flex-col gap-4">
              <div>
                <h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-1 flex items-center gap-1">
                  <Info size={12} /> El Hecho
                </h4>
                <p className="text-slate-700 font-medium">{item.description}</p>
              </div>
              
              <div className="mt-auto bg-slate-50 p-4 rounded-lg border border-slate-100">
                <h4 className="text-xs font-bold text-slate-500 uppercase tracking-wider mb-1 flex items-center gap-1">
                  <TrendingDown size={12} /> Impacto en el Sector
                </h4>
                <p className="text-slate-600 text-sm leading-relaxed">{item.impact}</p>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;