import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Truck, Users, Building2, ChevronRight, Zap, FileSpreadsheet } from 'lucide-react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';

export const PortalHome = () => {
  const navigate = useNavigate();

  return (
    <div className="min-h-screen bg-[#050914] flex flex-col items-center justify-center p-6 relative overflow-hidden">
      {/* Background Animated Elements */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-[10%] -left-[10%] w-[40%] h-[40%] bg-blue-600/10 rounded-full blur-[120px] animate-pulse" />
        <div className="absolute -bottom-[10%] -right-[10%] w-[40%] h-[40%] bg-emerald-600/10 rounded-full blur-[120px] animate-pulse" style={{ animationDelay: '1s' }} />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150" />
      </div>

      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
        className="max-w-6xl w-full text-center space-y-12 relative z-10"
      >
        <div className="space-y-4">
          <motion.div
            initial={{ opacity: 0, scale: 0.9 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.2 }}
            className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/5 border border-white/10 text-white/60 text-xs font-medium backdrop-blur-md mb-4"
          >
            <Zap size={14} className="text-yellow-400 fill-yellow-400" />
            <span>Ecossistema Corporativo Inteligente</span>
          </motion.div>
          
          <div className="flex flex-col items-center gap-6">
            <motion.div
              initial={{ scale: 0.8, opacity: 0 }}
              animate={{ scale: 1, opacity: 1 }}
              transition={{ duration: 0.5 }}
              className="w-20 h-20 bg-blue-600 rounded-3xl flex items-center justify-center shadow-2xl shadow-blue-600/20"
            >
              <Zap size={40} className="text-white" strokeWidth={2.5} />
            </motion.div>
            
            <h1 className="text-5xl md:text-7xl font-black tracking-tight text-white flex flex-col items-center">
              Pralog <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 via-emerald-400 to-blue-500">Sistemas</span>
            </h1>
          </div>
          <p className="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto font-medium leading-relaxed">
            Gestão estratégica unificada: frotas, capital humano e inteligência financeira em uma única experiência premium.
          </p>
        </div>

        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-16">
          {/* Workspace Financeiro Premium Card */}
          <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
            <Card 
              className="group cursor-pointer transition-all border border-[#22c0a3]/30 bg-[#22c0a3]/[0.03] hover:bg-[#22c0a3]/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(34,192,163,0.1)]"
              onClick={() => navigate('/plataforma/workspace')}
            >
              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#22bb6c] via-[#22c0a3] to-[#26b1c7]" />
              <div className="absolute top-4 right-4">
                 <span className="bg-[#22c0a3] text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-[#22c0a3]/20 border border-white/10">NOVO AMBIENTE</span>
              </div>
              <CardContent className="p-8 space-y-8 flex flex-col items-center">
                <div className="w-16 h-16 bg-gradient-to-br from-[#22bb6c] to-[#22c0a3] text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(34,192,163,0.4)] relative overflow-hidden">
                  <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20" />
                  <Zap size={32} className="relative z-10" />
                </div>
                <div className="space-y-3 flex-grow">
                  <h2 className="text-xl font-bold text-white group-hover:text-[#22c0a3] transition-colors">Workspace Financeiro</h2>
                  <p className="text-slate-400 text-sm leading-relaxed font-medium">
                    Experiência modernizada com gestão de entradas, saídas e conciliação bancária inteligente.
                  </p>
                </div>
                <Button className="w-full bg-[#22c0a3] hover:bg-[#22bb6c] text-white font-bold shadow-lg shadow-[#22c0a3]/20 border-none group">
                  Acessar Workspace <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                </Button>
              </CardContent>
            </Card>
          </motion.div>
          {/* Fleet Management Card (Legacy/V1) */}
          <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
            <Card 
              className="group cursor-pointer transition-all border border-white/5 bg-white/[0.02] hover:bg-white/[0.04] backdrop-blur-xl overflow-hidden relative h-full"
              onClick={() => navigate('/plataforma/fleet/login')}
            >
              <CardContent className="p-8 space-y-8 flex flex-col items-center">
                <div className="w-16 h-16 bg-blue-500/10 text-blue-400 rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform ring-1 ring-blue-500/20 shadow-[0_0_20px_rgba(59,130,246,0.15)]">
                  <Truck size={32} />
                </div>
                <div className="space-y-3 flex-grow">
                  <h2 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">Frota V1</h2>
                  <p className="text-slate-500 text-sm leading-relaxed">
                    Sistema central de logística e monitoramento operacional legado.
                  </p>
                </div>
                <Button className="w-full bg-white/5 hover:bg-white/10 text-white border-white/10 font-bold group" variant="outline">
                  Acessar <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                </Button>
              </CardContent>
            </Card>
          </motion.div>

          {/* Fleet V2 Premium Card */}
          <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
            <Card 
              className="group cursor-pointer transition-all border border-blue-500/30 bg-blue-500/[0.03] hover:bg-blue-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(59,130,246,0.1)]"
              onClick={() => navigate('/plataforma/fleet-v2')}
            >
              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-blue-600 via-blue-400 to-blue-600" />
              <div className="absolute top-4 right-4 focus-within:">
                 <span className="bg-blue-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-blue-500/20 border border-blue-400/30">V2 PRÊMIO</span>
              </div>
              <CardContent className="p-8 space-y-8 flex flex-col items-center">
                <div className="w-16 h-16 bg-blue-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(59,130,246,0.4)]">
                  <Truck size={32} />
                </div>
                <div className="space-y-3 flex-grow">
                  <h2 className="text-xl font-bold text-white group-hover:text-blue-400 transition-colors">Pralog Frota</h2>
                  <p className="text-slate-400 text-sm leading-relaxed font-medium">
                    Telemetria avançada, Dashboards 2.0 e BI integrado em tempo real.
                  </p>
                </div>
                <Button className="w-full bg-blue-600 hover:bg-blue-500 text-white font-bold shadow-lg shadow-blue-600/20 border-none group">
                  Iniciar Painel <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                </Button>
              </CardContent>
            </Card>
          </motion.div>

          {/* HR Management Premium Card */}
          <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
            <Card 
              className="group cursor-pointer transition-all border border-emerald-500/30 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(16,185,129,0.1)]"
              onClick={() => navigate('/plataforma/rh/login')}
            >
               <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-600 via-teal-400 to-emerald-600" />
               <div className="absolute top-4 right-4">
                  <span className="bg-emerald-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-emerald-500/20 border border-emerald-400/30">V2 PRÊMIO</span>
               </div>
              <CardContent className="p-8 space-y-8 flex flex-col items-center">
                <div className="w-16 h-16 bg-emerald-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,185,129,0.4)]">
                  <Users size={32} />
                </div>
                <div className="space-y-3 flex-grow">
                  <h2 className="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors">Integra RH</h2>
                  <p className="text-slate-400 text-sm leading-relaxed font-medium">
                    Gestão de Colaboradores, Ponto Eletrônico e Departamento Pessoal Inteligente.
                  </p>
                </div>
                <Button className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-lg shadow-emerald-600/20 border-none group">
                  Acessar Painel <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                </Button>
              </CardContent>
            </Card>
          </motion.div>

          {/* Financeiro V2 Premium Card */}
          <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
            <Card 
              className="group cursor-pointer transition-all border border-emerald-500/30 bg-emerald-500/[0.03] hover:bg-emerald-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(16,185,129,0.1)]"
              onClick={() => navigate('/plataforma/financeiro-v2')}
            >
              <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-600 via-emerald-400 to-emerald-600" />
              <div className="absolute top-4 right-4">
                 <span className="bg-emerald-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-emerald-500/20 border border-emerald-400/30">V2 PRÊMIO</span>
              </div>
              <CardContent className="p-8 space-y-8 flex flex-col items-center">
                <div className="w-16 h-16 bg-emerald-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,185,129,0.4)]">
                  <Building2 size={32} />
                </div>
                <div className="space-y-3 flex-grow">
                  <h2 className="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors text-nowrap">Gestão Financeira</h2>
                  <p className="text-slate-400 text-sm leading-relaxed font-medium">
                    Fluxo de caixa inteligente, auditoria avançada e controle total.
                  </p>
                </div>
                <Button className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-lg shadow-emerald-600/20 border-none group">
                  Iniciar Painel <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                </Button>
              </CardContent>
            </Card>
          </motion.div>

 
           <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
             <Card 
               className="group cursor-pointer transition-all border border-yellow-500/30 bg-yellow-500/[0.03] hover:bg-yellow-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(234,179,8,0.1)]"
               onClick={() => navigate('/plataforma/prafrot/login')}
             >
               <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-yellow-600 via-yellow-400 to-yellow-600" />
               <div className="absolute top-4 right-4">
                  <span className="bg-yellow-500 text-[#1c1c1c] text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-yellow-500/20 border border-yellow-400/30">MONITORAMENTO</span>
               </div>
               <CardContent className="p-8 space-y-8 flex flex-col items-center">
                 <div className="w-16 h-16 bg-yellow-500 text-[#1c1c1c] rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(234,179,8,0.4)]">
                   <Truck size={32} />
                 </div>
                 <div className="space-y-3 flex-grow">
                   <h2 className="text-xl font-bold text-white group-hover:text-yellow-400 transition-colors text-nowrap">Prafrot Monitor</h2>
                   <p className="text-slate-400 text-sm leading-relaxed font-medium">
                     Gestão de Frotas, motoristas e manutenção com visualização em tempo real.
                   </p>
                 </div>
                 <Button className="w-full bg-yellow-500 hover:bg-yellow-400 text-[#1c1c1c] font-bold shadow-lg shadow-yellow-500/20 border-none group">
                   Acessar Ambiente <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                 </Button>
               </CardContent>
             </Card>
           </motion.div>

           {/* CNAB 240 Premium Card */}
           <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
             <Card 
               className="group cursor-pointer transition-all border border-emerald-400/30 bg-emerald-400/[0.03] hover:bg-emerald-400/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(52,211,153,0.1)]"
               onClick={() => navigate('/plataforma/financeiro-cnab')}
             >
               <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-500 via-emerald-400 to-emerald-500" />
               <div className="absolute top-4 right-4">
                  <span className="bg-emerald-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-emerald-500/20 border border-emerald-400/30">BETA</span>
               </div>
               <CardContent className="p-8 space-y-8 flex flex-col items-center">
                 <div className="w-16 h-16 bg-emerald-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,185,129,0.4)]">
                   <FileSpreadsheet size={32} />
                 </div>
                 <div className="space-y-3 flex-grow">
                   <h2 className="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors text-nowrap">Financeiro CNAB</h2>
                   <p className="text-slate-400 text-sm leading-relaxed font-medium">
                     Geração de remessas CNAB 240, gestão de favorecidos e dashboards.
                   </p>
                 </div>
                 <Button className="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold shadow-lg shadow-emerald-600/20 border-none group">
                   Entrar <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                 </Button>
               </CardContent>
             </Card>
           </motion.div>

           {/* GR - Gestão de Risco Card */}
           <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
             <Card 
               className="group cursor-pointer transition-all border border-[#105018]/30 bg-[#105018]/[0.05] hover:bg-[#105018]/[0.1] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(16,80,24,0.1)]"
               onClick={() => navigate('/plataforma/gr/login')}
             >
               <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-[#285d2a] via-[#105018] to-[#285d2a]" />
               <div className="absolute top-4 right-4">
                  <span className="bg-[#105018] text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-[#105018]/20 border border-[#285d2a]/30">COCKPIT</span>
               </div>
               <CardContent className="p-8 space-y-8 flex flex-col items-center">
                 <div className="w-16 h-16 bg-[#105018] text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(16,80,24,0.4)]">
                   <Building2 size={32} />
                 </div>
                 <div className="space-y-3 flex-grow">
                   <h2 className="text-xl font-bold text-white group-hover:text-[#285d2a] transition-colors text-nowrap">Cockpit GR</h2>
                   <p className="text-slate-400 text-sm leading-relaxed font-medium">
                     Gestão de risco de motoristas e gerenciamento contratual.
                   </p>
                 </div>
                 <Button className="w-full bg-[#105018] hover:bg-[#285d2a] text-white font-bold shadow-lg shadow-[#105018]/20 border-none group">
                   Acessar Cockpit <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                 </Button>
               </CardContent>
             </Card>
           </motion.div>

            {/* CNAB Test Direct Link (Temporary/Local) */}
            <motion.div whileHover={{ y: -5 }} transition={{ type: "spring", stiffness: 300 }}>
              <Card 
                className="group cursor-pointer transition-all border border-rose-500/30 bg-rose-500/[0.03] hover:bg-rose-500/[0.05] backdrop-blur-2xl overflow-hidden relative h-full shadow-[0_0_30px_rgba(244,63,94,0.1)]"
                onClick={() => navigate('/plataforma/cnab-login')}
              >
                <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-rose-600 via-rose-400 to-rose-600" />
                <div className="absolute top-4 right-4 focus-within:">
                   <span className="bg-rose-500 text-white text-[0.65rem] font-black px-2.5 py-1 rounded-md uppercase tracking-wider shadow-lg shadow-rose-500/20 border border-rose-400/30">ACESSO RÁPIDO</span>
                </div>
                <CardContent className="p-8 space-y-8 flex flex-col items-center">
                  <div className="w-16 h-16 bg-rose-500 text-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform shadow-[0_0_25px_rgba(244,63,94,0.4)] relative overflow-hidden">
                    <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20" />
                    <FileSpreadsheet size={32} className="relative z-10" />
                  </div>
                  <div className="space-y-3 flex-grow">
                    <h2 className="text-xl font-bold text-white group-hover:text-rose-400 transition-colors text-nowrap">Login Direto CNAB</h2>
                    <p className="text-slate-400 text-sm leading-relaxed font-medium">
                      Ambiente de homologação direta para validação de fluxos financeiros.
                    </p>
                  </div>
                  <Button className="w-full bg-rose-600 hover:bg-rose-500 text-white font-bold shadow-lg shadow-rose-600/20 border-none group">
                    Entrar via Homologação <ChevronRight size={16} className="ml-2 group-hover:translate-x-1 transition-transform" />
                  </Button>
                </CardContent>
              </Card>
            </motion.div>
          </div>

        <motion.div 
          initial={{ opacity: 0 }}
          animate={{ opacity: 0.4 }}
          transition={{ delay: 1 }}
          className="text-[10px] text-white pt-8 uppercase tracking-[0.3em] font-medium"
        >
          © 2026 PRALOG • TECNOLOGIA PARA LOGÍSTICA DE ALTO IMPACTO
        </motion.div>
      </motion.div>
    </div>
  );
};