import React, { useState } from 'react';
import { 
  ChevronRight, 
  ChevronLeft, 
  ShieldCheck, 
  Users, 
  CreditCard, 
  BarChart3, 
  Smartphone, 
  Server, 
  CheckCircle2, 
  Mail, 
  Phone,
  FileText
} from 'lucide-react';

const App = () => {
  const [currentSlide, setCurrentSlide] = useState(0);

  const slides = [
    // Slide 1: Portada
    {
      type: 'cover',
      content: {
        title: "Sistema Integral de Gestión de Crédito de Nómina (SICN)",
        subtitle: "Ecosistema Digital de Otorgamiento y Control de Cartera",
        presenter: "Ing. Jesús Enrique Carrillo Aldrete",
        email: "enrique@delcarmx.com",
        phone: "8711881192",
        logo: "https://master.henrycarrillo.com/logo_delcar_2025.svg"
      }
    },
    // Slide 2: El Reto
    {
      title: "Desafíos del Crédito de Nómina Tradicional",
      subtitle: "Eliminando la fricción en el proceso de colocación",
      items: [
        { icon: <ShieldCheck className="text-red-500" />, text: "Riesgo de suplantación de identidad en trámites remotos." },
        { icon: <FileText className="text-red-500" />, text: "Falta de certeza jurídica en contratos digitales simples." },
        { icon: <Users className="text-red-500" />, text: "Dificultad de los Centros de Trabajo para reportar retenciones y bajas." },
        { icon: <BarChart3 className="text-red-500" />, text: "Operación lenta dependiente de papelería física." }
      ]
    },
    // Slide 3: La Solución
    {
      title: "Nuestra Solución: Ecosistema Digital",
      subtitle: "Una plataforma, tres frentes conectados",
      grid: [
        { title: "Portal de Empresas", desc: "Captura de solicitudes y consulta de saldos en tiempo real para RH.", icon: <Users className="text-blue-600" /> },
        { title: "Onboarding Web", desc: "App responsiva para biometría y firma NOM-151 del empleado.", icon: <Smartphone className="text-blue-600" /> },
        { title: "Core Administrativo", desc: "Gestión de cartera, mesa de control y reporteo ejecutivo.", icon: <Server className="text-blue-600" /> }
      ]
    },
    // Slide 4: Flujo Operativo
    {
      title: "Proceso de Otorgamiento Digital",
      subtitle: "Eficiencia desde la solicitud hasta la firma",
      steps: [
        "Empresa captura datos e ingresos del empleado en el Portal B2B.",
        "Mesa de Control valida y dispara link de onboarding al empleado.",
        "Empleado realiza Prueba de Vida y validación de INE (Biometría).",
        "Firma de Contrato con certificación NOM-151.",
        "Dispersión y generación automática de calendario de pagos fijos."
      ]
    },
    // Slide 5: Seguridad Jurídica
    {
      title: "Certeza Jurídica y Biometría",
      subtitle: "Blindaje total contra el repudio de deuda",
      highlights: [
        { title: "Validación de Identidad", desc: "Procesamiento de INE y Prueba de Vida (Video) para confirmar que el solicitante es quien dice ser." },
        { title: "NOM-151", desc: "Sello de tiempo por PSC autorizado que garantiza que el contrato no ha sido alterado desde su firma." },
        { title: "Evidencia Digital", desc: "Generación de un expediente electrónico completo con validez legal ante tribunales." }
      ]
    },
    // Slide 6: Gestión de Cartera
    {
      title: "Control de Cartera y Cobranza",
      subtitle: "Herramientas de decisión para la Financiera",
      items: [
        { icon: <CheckCircle2 className="text-green-500" />, text: "Gestión de múltiples convenios con tasas y plazos personalizados." },
        { icon: <CheckCircle2 className="text-green-500" />, text: "Generación de listados de retención para empresas." },
        { icon: <CheckCircle2 className="text-green-500" />, text: "Módulo de consulta de saldos para RH (Bajas, renuncias, finiquitos)." },
        { icon: <CheckCircle2 className="text-green-500" />, text: "Reportes de colocación y recuperación históricos." }
      ]
    },
    // Slide 7: Propuesta Económica
    {
      title: "Inversión y Modelo de Negocio",
      subtitle: "Escalabilidad alineada al crecimiento de su cartera",
      pricing: {
        base: "10,900.00",
        carteraBase: "2 Millones",
        exceso: "790.00",
        biometria: "20.00",
        firma: "7.00"
      }
    },
    // Slide 8: Condiciones Comerciales
    {
      title: "Condiciones y Licenciamiento",
      subtitle: "Transparencia contractual",
      list: [
        "Contratación mínima: 24 meses.",
        "Pago Inicial: Primeros 4 meses de renta base ($43,600 + IVA). Solo se facturarán excedentes y transacciones durante este periodo.",
        "Licenciamiento: Opción de uso limitado/exclusivo por el equivalente a 48 meses de renta (No incluye hosting ni mantenimiento).",
        "Hosting Tier 1 (AWS/Azure/GCP): Disponible con un 35% de cargo adicional sobre la renta base.",
        "Mantenimiento: Incluido en el arrendamiento base (Hosting VPS)."
      ]
    },
    // Slide 9: Cierre
    {
      type: 'contact',
      content: {
        title: "Estamos listos para iniciar su transformación digital",
        presenter: "Ing. Jesús Enrique Carrillo Aldrete",
        email: "enrique@delcarmx.com",
        phone: "8711881192",
        logo: "https://master.henrycarrillo.com/logo_delcar_2025.svg"
      }
    }
  ];

  const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);
  const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);

  const SlideContent = () => {
    const slide = slides[currentSlide];

    if (slide.type === 'cover') {
      return (
        <div className="flex flex-col items-center justify-center h-full text-center space-y-8 animate-fade-in">
          <img src={slide.content.logo} alt="Logo" className="h-32 mb-4" />
          <h1 className="text-4xl md:text-5xl font-bold text-slate-800 leading-tight">
            {slide.content.title}
          </h1>
          <p className="text-xl text-slate-600 max-w-2xl">
            {slide.content.subtitle}
          </p>
          <div className="pt-12 border-t border-slate-200 w-full max-w-md">
            <p className="font-semibold text-slate-800">{slide.content.presenter}</p>
            <div className="flex justify-center space-x-6 mt-4 text-slate-500">
              <span className="flex items-center gap-2"><Mail size={18}/> {slide.content.email}</span>
              <span className="flex items-center gap-2"><Phone size={18}/> {slide.content.phone}</span>
            </div>
          </div>
        </div>
      );
    }

    if (slide.type === 'contact') {
      return (
        <div className="flex flex-col items-center justify-center h-full text-center space-y-8">
          <h2 className="text-3xl font-bold text-slate-800">{slide.content.title}</h2>
          <div className="bg-slate-50 p-10 rounded-2xl shadow-sm border border-slate-100 w-full max-w-xl">
             <img src={slide.content.logo} alt="Logo" className="h-16 mx-auto mb-6" />
             <h3 className="text-2xl font-semibold text-slate-800">{slide.content.presenter}</h3>
             <p className="text-slate-600 mt-2">Director de Desarrollo de Software</p>
             <div className="mt-8 space-y-4">
               <div className="flex items-center justify-center gap-3 text-lg text-blue-600 font-medium">
                 <Mail /> {slide.content.email}
               </div>
               <div className="flex items-center justify-center gap-3 text-lg text-slate-700">
                 <Phone /> {slide.content.phone}
               </div>
             </div>
          </div>
        </div>
      );
    }

    return (
      <div className="flex flex-col h-full space-y-6">
        <div>
          <h2 className="text-3xl font-bold text-slate-800">{slide.title}</h2>
          <p className="text-slate-500 mt-1">{slide.subtitle}</p>
          <div className="h-1 w-20 bg-blue-600 mt-4"></div>
        </div>

        <div className="flex-grow flex flex-col justify-center">
          {slide.items && (
            <div className="space-y-6">
              {slide.items.map((item, idx) => (
                <div key={idx} className="flex items-start gap-4 p-4 rounded-lg bg-slate-50 border border-slate-100">
                  <div className="mt-1">{item.icon}</div>
                  <p className="text-lg text-slate-700">{item.text}</p>
                </div>
              ))}
            </div>
          )}

          {slide.grid && (
            <div className="grid md:grid-cols-3 gap-6">
              {slide.grid.map((card, idx) => (
                <div key={idx} className="p-6 rounded-xl bg-white border border-slate-200 shadow-sm hover:shadow-md transition-shadow">
                  <div className="mb-4">{card.icon}</div>
                  <h3 className="font-bold text-slate-800 mb-2">{card.title}</h3>
                  <p className="text-slate-600 text-sm leading-relaxed">{card.desc}</p>
                </div>
              ))}
            </div>
          )}

          {slide.steps && (
            <div className="space-y-4">
              {slide.steps.map((step, idx) => (
                <div key={idx} className="flex items-center gap-6">
                  <div className="h-10 w-10 rounded-full bg-blue-600 text-white flex items-center justify-center font-bold shrink-0">
                    {idx + 1}
                  </div>
                  <p className="text-lg text-slate-700">{step}</p>
                </div>
              ))}
            </div>
          )}

          {slide.highlights && (
            <div className="grid md:grid-cols-3 gap-8">
              {slide.highlights.map((h, idx) => (
                <div key={idx} className="space-y-3">
                  <h3 className="text-xl font-bold text-blue-700">{h.title}</h3>
                  <p className="text-slate-600 leading-relaxed">{h.desc}</p>
                </div>
              ))}
            </div>
          )}

          {slide.pricing && (
            <div className="space-y-8">
              <div className="grid md:grid-cols-2 gap-6">
                <div className="bg-blue-600 text-white p-8 rounded-2xl shadow-lg relative overflow-hidden">
                   <div className="relative z-10">
                     <p className="text-blue-100 uppercase tracking-widest text-xs font-bold mb-2">Renta Mensual Base</p>
                     <h3 className="text-5xl font-bold">${slide.pricing.base}</h3>
                     <p className="mt-4 text-blue-100">Incluye los primeros <strong>{slide.pricing.carteraBase}</strong> de cartera administrada.</p>
                   </div>
                   <div className="absolute top-0 right-0 p-4 opacity-20">
                     <CreditCard size={120} />
                   </div>
                </div>
                <div className="grid grid-rows-3 gap-4">
                   <div className="bg-slate-100 p-4 rounded-xl flex justify-between items-center">
                     <span className="text-slate-600">Millón adicional de cartera</span>
                     <span className="font-bold text-slate-800">${slide.pricing.exceso}</span>
                   </div>
                   <div className="bg-slate-100 p-4 rounded-xl flex justify-between items-center">
                     <span className="text-slate-600">Validación Biométrica (Exitoso)</span>
                     <span className="font-bold text-slate-800">${slide.pricing.biometria}</span>
                   </div>
                   <div className="bg-slate-100 p-4 rounded-xl flex justify-between items-center">
                     <span className="text-slate-600">Firma Electrónica NOM-151</span>
                     <span className="font-bold text-slate-800">${slide.pricing.firma}</span>
                   </div>
                </div>
              </div>
              <p className="text-center text-slate-400 text-sm">* Precios en MXN, más IVA.</p>
            </div>
          )}

          {slide.list && (
            <div className="grid md:grid-cols-2 gap-4">
              {slide.list.map((l, idx) => (
                <div key={idx} className="flex gap-3 items-start p-3 bg-slate-50 rounded-lg border-l-4 border-blue-600">
                  <CheckCircle2 className="text-blue-600 shrink-0 mt-1" size={18} />
                  <p className="text-slate-700 text-sm leading-relaxed">{l}</p>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-100 flex flex-col p-4 md:p-8 font-sans">
      <div className="max-w-6xl w-full mx-auto bg-white rounded-3xl shadow-2xl flex flex-col overflow-hidden relative aspect-video">
        
        {/* Progress Bar */}
        <div className="absolute top-0 left-0 w-full h-1 bg-slate-200">
          <div 
            className="h-full bg-blue-600 transition-all duration-300"
            style={{ width: `${((currentSlide + 1) / slides.length) * 100}%` }}
          ></div>
        </div>

        {/* Slide Window */}
        <div className="flex-grow p-10 md:p-16 overflow-y-auto">
          <SlideContent />
        </div>

        {/* Navigation */}
        <div className="p-6 bg-slate-50 border-t border-slate-100 flex justify-between items-center">
          <div className="text-slate-400 text-sm font-medium">
            Diapositiva {currentSlide + 1} de {slides.length}
          </div>
          <div className="flex space-x-4">
            <button 
              onClick={prevSlide}
              disabled={currentSlide === 0}
              className={`p-3 rounded-full transition-colors ${currentSlide === 0 ? 'text-slate-300 cursor-not-allowed' : 'bg-white text-blue-600 shadow-sm hover:bg-blue-50'}`}
            >
              <ChevronLeft />
            </button>
            <button 
              onClick={nextSlide}
              className="px-8 py-3 bg-blue-600 text-white rounded-full font-bold shadow-md hover:bg-blue-700 transition-colors flex items-center gap-2"
            >
              {currentSlide === slides.length - 1 ? 'Reiniciar' : 'Siguiente'}
              <ChevronRight size={20} />
            </button>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in {
          animation: fadeIn 0.8s ease-out forwards;
        }
      `}</style>
    </div>
  );
};

export default App;