import { useState, useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ArrowRight, ArrowLeft, Check, AlertCircle, Server, Wifi, Shield, Database, Users, Building2, ChevronRight, Loader2, Globe, Search, Zap, Smartphone } from 'lucide-react';
import { sendLeadToMautic, sendLeadViaMailto, trackConversion, trackFacebookPixel } from '../config/mautic';

interface FormData {
  // Dados da empresa
  nome: string;
  email: string;
  whatsapp: string;
  empresa: string;
  segmento: string;
  funcionarios: string;
  temSite: string;
  urlSite: string;
  
  // Infraestrutura
  computadores: string;
  notebooks: string;
  servidores: string;
  equipamentosAntigos: string;
  
  // Sistema Operacional
  windowsAtualizados: string;
  windowsAntigos: string;
  
  // Internet
  linksInternet: string;
  operadoras: string;
  failover: string;
  equipamentoInternet: string;
  wifiVisitantes: string;
  
  // Segurança
  antivirus: string;
  antivirusNome: string;
  backup: string;
  backupTestado: string;
  nobreak: string;
  controleAcesso: string;
  senhasIndividuais: string;
  mfa: string;
  
  // Gestão
  responsavelTI: string;
  chamadosRegistrados: string;
  documentacao: string;
  
  // Dor principal
  dorPrincipal: string;
}

const etapas = [
  { id: 1, titulo: 'Sobre sua empresa', icone: <Building2 className="w-5 h-5" /> },
  { id: 2, titulo: 'Infraestrutura', icone: <Server className="w-5 h-5" /> },
  { id: 3, titulo: 'Internet e Rede', icone: <Wifi className="w-5 h-5" /> },
  { id: 4, titulo: 'Segurança', icone: <Shield className="w-5 h-5" /> },
  { id: 5, titulo: 'Gestão de TI', icone: <Users className="w-5 h-5" /> },
  { id: 6, titulo: 'Contato', icone: <Database className="w-5 h-5" /> },
];

const segmentos = [
  'Contabilidade',
  'Advocacia',
  'Indústria',
  'Comércio',
  'Serviços',
  'Saúde',
  'Educação',
  'Construção',
  'Tecnologia',
  'Condomínio',
  'Outro'
];

const faixasFuncionarios = [
  '1-5',
  '6-15',
  '16-30',
  '31-50',
  '51-100',
  '100+'
];

const opcoesSimNao = [
  { value: 'sim', label: 'Sim' },
  { value: 'nao', label: 'Não' },
  { value: 'naosei', label: 'Não sei' }
];

const tiposAntivirus = [
  { value: 'pago', label: 'Pago (corporativo)' },
  { value: 'gratuito', label: 'Gratuito' },
  { value: 'nao', label: 'Não utiliza' }
];

const tiposBackup = [
  { value: 'diario', label: 'Diário' },
  { value: 'semanal', label: 'Semanal' },
  { value: 'eventual', label: 'Eventual' },
  { value: 'nao', label: 'Não existe' },
  { value: 'naosei', label: 'Não sei' }
];

const responsaveisTI = [
  { value: 'interno', label: 'Funcionário interno' },
  { value: 'terceirizado', label: 'Empresa terceirizada' },
  { value: 'eventual', label: 'Técnico eventual' },
  { value: 'nenhum', label: 'Ninguém definido' }
];

const doresPrincipais = [
  { value: 'lentidao', label: 'Lentidão nos sistemas' },
  { value: 'internet', label: 'Quedas de internet' },
  { value: 'seguranca', label: 'Insegurança dos dados' },
  { value: 'suporte', label: 'Falta de suporte' },
  { value: 'servidores', label: 'Servidores antigos' },
  { value: 'wifi', label: 'Wi-Fi ruim' },
  { value: 'backup', label: 'Problemas com backup' },
  { value: 'custos', label: 'Custos altos com TI' }
];

// Interface para análise de SEO
interface SeoAnalysis {
  score: number;
  checks: {
    hasTitle: boolean;
    hasDescription: boolean;
    hasHttps: boolean;
    isResponsive: boolean;
    loadSpeed: 'fast' | 'medium' | 'slow';
  };
  recommendations: string[];
}

const Avaliador = () => {
  const [etapaAtual, setEtapaAtual] = useState(1);
  const [formData, setFormData] = useState<FormData>({
    nome: '', email: '', whatsapp: '', empresa: '', segmento: '', funcionarios: '', temSite: '', urlSite: '',
    computadores: '', notebooks: '', servidores: '', equipamentosAntigos: '',
    windowsAtualizados: '', windowsAntigos: '',
    linksInternet: '', operadoras: '', failover: '', equipamentoInternet: '', wifiVisitantes: '',
    antivirus: '', antivirusNome: '', backup: '', backupTestado: '', nobreak: '', controleAcesso: '', senhasIndividuais: '', mfa: '',
    responsavelTI: '', chamadosRegistrados: '', documentacao: '',
    dorPrincipal: ''
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isAnalyzingSite, setIsAnalyzingSite] = useState(false);
  const [seoResult, setSeoResult] = useState<SeoAnalysis | null>(null);
  const [resultado, setResultado] = useState<null | { score: number; nivel: string; diagnostico: any; seo?: SeoAnalysis }>(null);
  const formRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (formRef.current) {
      gsap.fromTo(formRef.current, { opacity: 0, y: 20 }, { opacity: 1, y: 0, duration: 0.4 });
    }
  }, [etapaAtual]);

  const handleChange = (field: keyof FormData, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
    
    // Se mudou o site, limpa análise anterior
    if (field === 'urlSite') {
      setSeoResult(null);
    }
  };

  // Função para analisar SEO do site (simulação - integrar com API real no futuro)
  const analisarSite = async () => {
    if (!formData.urlSite) return;
    
    setIsAnalyzingSite(true);
    
    // Simulação de análise de SEO
    // No futuro, isso seria uma chamada real para uma API de análise de SEO
    // ou integração com serviços como PageSpeed Insights, SEMrush, etc.
    
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    // Simulação de resultado baseado no URL
    const url = formData.urlSite.toLowerCase();
    const hasHttps = url.includes('https');
    
    // Score aleatório entre 30 e 85 para demonstração
    // Na implementação real, isso viria da API de análise
    const simulatedScore = Math.floor(Math.random() * 55) + 30;
    
    const analysis: SeoAnalysis = {
      score: simulatedScore,
      checks: {
        hasTitle: Math.random() > 0.3,
        hasDescription: Math.random() > 0.4,
        hasHttps: hasHttps || Math.random() > 0.5,
        isResponsive: Math.random() > 0.3,
        loadSpeed: simulatedScore > 70 ? 'fast' : simulatedScore > 50 ? 'medium' : 'slow',
      },
      recommendations: []
    };
    
    // Gera recomendações baseadas nos checks
    if (!analysis.checks.hasTitle) {
      analysis.recommendations.push('Adicionar título otimizado nas páginas');
    }
    if (!analysis.checks.hasDescription) {
      analysis.recommendations.push('Incluir meta descrição para melhor indexação');
    }
    if (!analysis.checks.hasHttps) {
      analysis.recommendations.push('Migrar para HTTPS para maior segurança');
    }
    if (!analysis.checks.isResponsive) {
      analysis.recommendations.push('Tornar o site responsivo para dispositivos móveis');
    }
    if (analysis.checks.loadSpeed === 'slow') {
      analysis.recommendations.push('Otimizar velocidade de carregamento');
    }
    
    if (analysis.recommendations.length === 0) {
      analysis.recommendations.push('Manter as boas práticas atuais');
    }
    
    setSeoResult(analysis);
    setIsAnalyzingSite(false);
  };

  const calcularScore = () => {
    let score = 100;
    
    // Infraestrutura
    const comp = parseInt(formData.computadores) || 0;
    const note = parseInt(formData.notebooks) || 0;
    const totalEquip = comp + note;
    
    if (formData.equipamentosAntigos === 'sim') score -= 10;
    
    // Windows
    const winAntigo = parseInt(formData.windowsAntigos) || 0;
    if (totalEquip > 0 && winAntigo / totalEquip > 0.3) score -= 10;
    
    // Internet
    const links = parseInt(formData.linksInternet) || 1;
    if (links === 1) score -= 15;
    if (formData.failover === 'nao') score -= 10;
    if (formData.wifiVisitantes === 'nao') score -= 10;
    
    // Segurança
    if (formData.antivirus === 'gratuito') score -= 10;
    if (formData.antivirus === 'nao') score -= 20;
    if (formData.backup === 'nao') score -= 20;
    if (formData.backup === 'eventual') score -= 10;
    if (formData.backupTestado === 'nao') score -= 10;
    if (formData.nobreak === 'nao') score -= 5;
    if (formData.senhasIndividuais === 'nao') score -= 5;
    if (formData.mfa === 'nao') score -= 5;
    
    // Gestão
    if (formData.responsavelTI === 'nenhum') score -= 15;
    if (formData.responsavelTI === 'eventual') score -= 10;
    if (formData.documentacao === 'nao') score -= 5;
    
    return Math.max(0, Math.min(100, score));
  };

  const getNivel = (score: number) => {
    if (score >= 80) return { label: 'Bem estruturado', cor: 'text-green-400', bg: 'bg-green-400/10', border: 'border-green-400/30' };
    if (score >= 60) return { label: 'Estrutura intermediária', cor: 'text-yellow-400', bg: 'bg-yellow-400/10', border: 'border-yellow-400/30' };
    if (score >= 40) return { label: 'Estrutura frágil', cor: 'text-orange-400', bg: 'bg-orange-400/10', border: 'border-orange-400/30' };
    return { label: 'Alto risco', cor: 'text-red-400', bg: 'bg-red-400/10', border: 'border-red-400/30' };
  };

  const gerarDiagnostico = (score: number) => {
    const diagnosticos = [];
    
    // Score é usado para classificação geral no resultado
    console.log('Score calculado:', score);
    
    if (parseInt(formData.linksInternet) === 1) {
      diagnosticos.push({ area: 'Internet', status: 'crítico', texto: 'Sua empresa depende de um único link de internet. Em caso de falha, a operação para completamente.' });
    }
    if (formData.failover === 'nao') {
      diagnosticos.push({ area: 'Contingência', status: 'alto', texto: 'Não há troca automática de internet em caso de falha, exigindo intervenção manual.' });
    }
    if (formData.antivirus === 'nao' || formData.antivirus === 'gratuito') {
      diagnosticos.push({ area: 'Segurança', status: 'alto', texto: 'A proteção contra ameaças digitais está abaixo do ideal para um ambiente corporativo.' });
    }
    if (formData.backup === 'nao') {
      diagnosticos.push({ area: 'Backup', status: 'crítico', texto: 'Não há rotina de backup. Em caso de falha, os dados podem ser perdidos permanentemente.' });
    }
    if (formData.wifiVisitantes === 'nao') {
      diagnosticos.push({ area: 'Rede', status: 'médio', texto: 'Visitantes compartilham a mesma rede dos funcionários, criando risco de segurança.' });
    }
    if (formData.responsavelTI === 'nenhum' || formData.responsavelTI === 'eventual') {
      diagnosticos.push({ area: 'Gestão', status: 'alto', texto: 'Não há gestão estruturada de TI, o que pode levar a problemas acumulados.' });
    }
    
    return diagnosticos;
  };

  const enviarParaMautic = (score: number, nivel: string) => {
    // Google Ads conversion tracking
    trackConversion();
    
    // Facebook Pixel - Lead
    trackFacebookPixel('Lead', {
      content_name: 'Avaliacao Maturidade TI',
      content_category: 'lead_avaliacao_ti',
      value: score,
    });

    // Enviar para Mautic (Form ID 3) - sincrono via iframe
    const mauticSuccess = sendLeadToMautic('avaliacaoTI', {
      nome: formData.nome,
      email: formData.email,
      whatsapp: formData.whatsapp,
      empresa: formData.empresa,
      segmento: formData.segmento,
      computadores: formData.computadores,
      notebooks: formData.notebooks,
      servidores: formData.servidores,
      funcionarios: formData.funcionarios,
      links_internet: formData.linksInternet,
      failover: formData.failover,
      antivirus: formData.antivirus,
      backup: formData.backup,
      backup_testado: formData.backupTestado,
      wifi_visitantes: formData.wifiVisitantes,
      responsavel_ti: formData.responsavelTI,
      dor_principal: formData.dorPrincipal,
      score_tecnologia: String(score),
      nivel_maturidade: nivel,
      origem_lead: 'avaliador_tecnologico',
    });

    if (!mauticSuccess) {
      sendLeadViaMailto({
        nome: formData.nome,
        email: formData.email,
      });
    }

    console.log('[Mautic] Score enviado:', score, nivel);
  };

  const handleSubmit = async () => {
    setIsSubmitting(true);
    
    const score = calcularScore();
    const nivel = getNivel(score);
    const diagnostico = gerarDiagnostico(score);
    
    // Enviar para Mautic (incluindo dados de SEO se disponíveis)
    await enviarParaMautic(score, nivel.label);
    
    setResultado({ score, nivel: nivel.label, diagnostico, seo: seoResult || undefined });
    setIsSubmitting(false);
  };

  const proximaEtapa = () => {
    if (etapaAtual < etapas.length) {
      setEtapaAtual(etapaAtual + 1);
    } else {
      handleSubmit();
    }
  };

  const etapaAnterior = () => {
    if (etapaAtual > 1) {
      setEtapaAtual(etapaAtual - 1);
    }
  };

  const isEtapaValida = () => {
    switch (etapaAtual) {
      case 1:
        return formData.empresa && formData.segmento && formData.funcionarios && formData.temSite;
      case 2:
        return formData.computadores && formData.notebooks && formData.equipamentosAntigos;
      case 3:
        return formData.linksInternet && formData.failover && formData.wifiVisitantes;
      case 4:
        return formData.antivirus && formData.backup && formData.backupTestado;
      case 5:
        return formData.responsavelTI && formData.dorPrincipal;
      case 6:
        return formData.nome && formData.email && formData.whatsapp;
      default:
        return false;
    }
  };

  if (resultado) {
    return <Resultado resultado={resultado} formData={formData} />;
  }

  return (
    <div className="bg-[#0e0e0e] min-h-screen pt-24 pb-12">
      <div className="container-custom max-w-4xl">
        {/* Header */}
        <div className="text-center mb-10">
          <span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
            Avaliação Gratuita
          </span>
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">
            Descubra o nível <span className="text-gradient">tecnológico</span> da sua empresa
          </h1>
          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
            Responda algumas perguntas simples e receba um diagnóstico personalizado em poucos minutos.
          </p>
        </div>

        {/* Progresso */}
        <div className="mb-8">
          <div className="flex items-center justify-between mb-4">
            {etapas.map((etapa, i) => (
              <div key={etapa.id} className="flex items-center">
                <div className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold transition-all ${
                  etapa.id === etapaAtual 
                    ? 'bg-[#cbf400] text-[#0e0e0e]' 
                    : etapa.id < etapaAtual 
                      ? 'bg-[#cbf400]/30 text-[#cbf400]' 
                      : 'bg-[#1a1a1a] text-gray-500 border border-white/10'
                }`}>
                  {etapa.id < etapaAtual ? <Check className="w-5 h-5" /> : etapa.id}
                </div>
                {i < etapas.length - 1 && (
                  <div className={`w-8 md:w-16 h-0.5 mx-1 md:mx-2 ${etapa.id < etapaAtual ? 'bg-[#cbf400]/50' : 'bg-white/10'}`} />
                )}
              </div>
            ))}
          </div>
          <div className="text-center">
            <span className="text-[#cbf400] font-semibold">Etapa {etapaAtual}</span>
            <span className="text-gray-500"> de {etapas.length}</span>
            <p className="text-white font-medium mt-1">{etapas[etapaAtual - 1].titulo}</p>
          </div>
        </div>

        {/* Formulário */}
        <div ref={formRef} className="bg-[#1a1a1a] rounded-2xl p-6 md:p-10 border border-white/5">
          {/* Etapa 1: Dados da empresa */}
          {etapaAtual === 1 && (
            <div className="space-y-6">
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-white font-medium mb-2">Nome da empresa *</label>
                  <input 
                    type="text" 
                    value={formData.empresa}
                    onChange={(e) => handleChange('empresa', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                    placeholder="Ex: Empresa XYZ"
                  />
                </div>
                <div>
                  <label className="block text-white font-medium mb-2">Segmento *</label>
                  <select 
                    value={formData.segmento}
                    onChange={(e) => handleChange('segmento', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                  >
                    <option value="">Selecione</option>
                    {segmentos.map(s => <option key={s} value={s}>{s}</option>)}
                  </select>
                </div>
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Quantidade de funcionários *</label>
                <div className="grid grid-cols-3 md:grid-cols-6 gap-3">
                  {faixasFuncionarios.map(f => (
                    <button
                      key={f}
                      onClick={() => handleChange('funcionarios', f)}
                      className={`px-4 py-3 rounded-xl border transition-all ${
                        formData.funcionarios === f 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {f}
                    </button>
                  ))}
                </div>
              </div>
              
              {/* Site da empresa */}
              <div className="pt-4 border-t border-white/5">
                <label className="block text-white font-medium mb-2">Sua empresa tem site? *</label>
                <div className="flex gap-4">
                  {[
                    { value: 'sim', label: 'Sim, temos site' },
                    { value: 'nao', label: 'Não temos site' },
                    { value: 'desatualizado', label: 'Tem, mas está desatualizado' }
                  ].map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('temSite', o.value)}
                      className={`flex-1 px-4 py-3 rounded-xl border transition-all ${
                        formData.temSite === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
              
              {formData.temSite === 'sim' && (
                <div className="space-y-4">
                  <div>
                    <label className="block text-white font-medium mb-2">Endereço do site</label>
                    <div className="flex gap-3">
                      <input 
                        type="text" 
                        value={formData.urlSite}
                        onChange={(e) => handleChange('urlSite', e.target.value)}
                        className="flex-1 bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                        placeholder="www.suaempresa.com.br"
                      />
                      <button
                        onClick={analisarSite}
                        disabled={!formData.urlSite || isAnalyzingSite}
                        className={`px-4 py-3 rounded-xl font-medium transition-all flex items-center gap-2 ${
                          formData.urlSite && !isAnalyzingSite
                            ? 'bg-[#cbf400] text-[#0e0e0e] hover:bg-[#d4ff1a]' 
                            : 'bg-gray-700 text-gray-500 cursor-not-allowed'
                        }`}
                      >
                        {isAnalyzingSite ? (
                          <><Loader2 className="w-4 h-4 animate-spin" /> Analisando...</>
                        ) : (
                          <><Search className="w-4 h-4" /> Analisar SEO</>
                        )}
                      </button>
                    </div>
                  </div>
                  
                  {/* Resultado da análise de SEO */}
                  {seoResult && (
                    <div className="bg-[#0e0e0e] rounded-xl p-5 border border-white/10">
                      <div className="flex items-center justify-between mb-4">
                        <h4 className="text-white font-semibold flex items-center gap-2">
                          <Globe className="w-5 h-5 text-[#cbf400]" />
                          Análise de SEO do Site
                        </h4>
                        <div className={`text-2xl font-black ${
                          seoResult.score >= 70 ? 'text-green-400' : 
                          seoResult.score >= 50 ? 'text-yellow-400' : 'text-red-400'
                        }`}>
                          {seoResult.score}/100
                        </div>
                      </div>
                      
                      {/* Checks */}
                      <div className="grid grid-cols-2 gap-3 mb-4">
                        <div className={`flex items-center gap-2 text-sm ${seoResult.checks.hasTitle ? 'text-green-400' : 'text-red-400'}`}>
                          {seoResult.checks.hasTitle ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                          Título otimizado
                        </div>
                        <div className={`flex items-center gap-2 text-sm ${seoResult.checks.hasDescription ? 'text-green-400' : 'text-red-400'}`}>
                          {seoResult.checks.hasDescription ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                          Meta descrição
                        </div>
                        <div className={`flex items-center gap-2 text-sm ${seoResult.checks.hasHttps ? 'text-green-400' : 'text-red-400'}`}>
                          {seoResult.checks.hasHttps ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                          HTTPS ativo
                        </div>
                        <div className={`flex items-center gap-2 text-sm ${seoResult.checks.isResponsive ? 'text-green-400' : 'text-red-400'}`}>
                          {seoResult.checks.isResponsive ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                          <Smartphone className="w-3 h-3" /> Responsivo
                        </div>
                        <div className={`flex items-center gap-2 text-sm col-span-2 ${
                          seoResult.checks.loadSpeed === 'fast' ? 'text-green-400' : 
                          seoResult.checks.loadSpeed === 'medium' ? 'text-yellow-400' : 'text-red-400'
                        }`}>
                          <Zap className="w-4 h-4" />
                          Velocidade: {seoResult.checks.loadSpeed === 'fast' ? 'Rápida' : seoResult.checks.loadSpeed === 'medium' ? 'Média' : 'Lenta'}
                        </div>
                      </div>
                      
                      {/* Recomendações */}
                      {seoResult.recommendations.length > 0 && (
                        <div className="border-t border-white/5 pt-3">
                          <p className="text-gray-400 text-sm mb-2">Recomendações:</p>
                          <ul className="space-y-1">
                            {seoResult.recommendations.map((rec, i) => (
                              <li key={i} className="text-gray-300 text-sm flex items-start gap-2">
                                <span className="text-[#cbf400]">•</span>
                                {rec}
                              </li>
                            ))}
                          </ul>
                        </div>
                      )}
                      
                      <div className="mt-4 pt-3 border-t border-white/5">
                        <p className="text-gray-400 text-xs">
                          <span className="text-[#cbf400]">💡 Dica:</span> Um site bem otimizado aparece melhor no Google e atrai mais clientes. A Avanzato oferece serviços de SEO e otimização de sites.
                        </p>
                      </div>
                    </div>
                  )}
                </div>
              )}
              
              {formData.temSite === 'nao' && (
                <div className="bg-[#cbf400]/5 border border-[#cbf400]/20 rounded-xl p-4">
                  <p className="text-gray-300 text-sm">
                    <span className="text-[#cbf400] font-semibold">Dica:</span> Ter um site profissional aumenta a credibilidade da sua empresa e pode gerar novos negócios. A Avanzato também desenvolve sites corporativos.
                  </p>
                </div>
              )}
              
              {formData.temSite === 'desatualizado' && (
                <div className="bg-[#cbf400]/5 border border-[#cbf400]/20 rounded-xl p-4">
                  <p className="text-gray-300 text-sm">
                    <span className="text-[#cbf400] font-semibold">Dica:</span> Um site desatualizado pode afastar clientes. A Avanzato oferece serviços de modernização e gestão de sites.
                  </p>
                </div>
              )}
            </div>
          )}

          {/* Etapa 2: Infraestrutura */}
          {etapaAtual === 2 && (
            <div className="space-y-6">
              <div className="grid md:grid-cols-3 gap-6">
                <div>
                  <label className="block text-white font-medium mb-2">Computadores *</label>
                  <input 
                    type="number" 
                    value={formData.computadores}
                    onChange={(e) => handleChange('computadores', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                    placeholder="0"
                  />
                </div>
                <div>
                  <label className="block text-white font-medium mb-2">Notebooks *</label>
                  <input 
                    type="number" 
                    value={formData.notebooks}
                    onChange={(e) => handleChange('notebooks', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                    placeholder="0"
                  />
                </div>
                <div>
                  <label className="block text-white font-medium mb-2">Servidores</label>
                  <input 
                    type="number" 
                    value={formData.servidores}
                    onChange={(e) => handleChange('servidores', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                    placeholder="0"
                  />
                </div>
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Existem equipamentos muito antigos em operação? *</label>
                <div className="flex gap-4">
                  {opcoesSimNao.map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('equipamentosAntigos', o.value)}
                      className={`flex-1 px-4 py-3 rounded-xl border transition-all ${
                        formData.equipamentosAntigos === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* Etapa 3: Internet */}
          {etapaAtual === 3 && (
            <div className="space-y-6">
              <div>
                <label className="block text-white font-medium mb-2">Quantos links de internet? *</label>
                <div className="flex gap-4">
                  {['1', '2', '3+'].map(n => (
                    <button
                      key={n}
                      onClick={() => handleChange('linksInternet', n)}
                      className={`flex-1 px-4 py-3 rounded-xl border transition-all ${
                        formData.linksInternet === n 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {n} link{n !== '1' ? 's' : ''}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Quando uma internet cai, a outra assume automaticamente? *</label>
                <div className="flex gap-4">
                  {[
                    { value: 'sim', label: 'Sim, automático' },
                    { value: 'nao', label: 'Não, precisa trocar' },
                    { value: 'naosei', label: 'Não sei' }
                  ].map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('failover', o.value)}
                      className={`flex-1 px-4 py-3 rounded-xl border transition-all ${
                        formData.failover === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Existe Wi-Fi separado para visitantes? *</label>
                <div className="flex gap-4">
                  {opcoesSimNao.map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('wifiVisitantes', o.value)}
                      className={`flex-1 px-4 py-3 rounded-xl border transition-all ${
                        formData.wifiVisitantes === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* Etapa 4: Segurança */}
          {etapaAtual === 4 && (
            <div className="space-y-6">
              <div>
                <label className="block text-white font-medium mb-2">A empresa usa antivírus? *</label>
                <div className="flex gap-3 flex-wrap">
                  {tiposAntivirus.map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('antivirus', o.value)}
                      className={`px-4 py-3 rounded-xl border transition-all ${
                        formData.antivirus === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
              {formData.antivirus === 'pago' && (
                <div>
                  <label className="block text-white font-medium mb-2">Qual antivírus?</label>
                  <input 
                    type="text" 
                    value={formData.antivirusNome}
                    onChange={(e) => handleChange('antivirusNome', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                    placeholder="Ex: Kaspersky, Bitdefender..."
                  />
                </div>
              )}
              <div>
                <label className="block text-white font-medium mb-2">Há rotina de backup? *</label>
                <div className="flex gap-3 flex-wrap">
                  {tiposBackup.map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('backup', o.value)}
                      className={`px-4 py-3 rounded-xl border transition-all ${
                        formData.backup === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
              {formData.backup !== 'nao' && formData.backup !== 'naosei' && (
                <div>
                  <label className="block text-white font-medium mb-2">O backup é testado regularmente? *</label>
                  <div className="flex gap-4">
                    {opcoesSimNao.map(o => (
                      <button
                        key={o.value}
                        onClick={() => handleChange('backupTestado', o.value)}
                        className={`flex-1 px-4 py-3 rounded-xl border transition-all ${
                          formData.backupTestado === o.value 
                            ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                            : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                        }`}
                      >
                        {o.label}
                      </button>
                    ))}
                  </div>
                </div>
              )}
            </div>
          )}

          {/* Etapa 5: Gestão */}
          {etapaAtual === 5 && (
            <div className="space-y-6">
              <div>
                <label className="block text-white font-medium mb-2">Quem resolve os problemas de TI? *</label>
                <div className="grid md:grid-cols-2 gap-3">
                  {responsaveisTI.map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('responsavelTI', o.value)}
                      className={`px-4 py-3 rounded-xl border transition-all text-left ${
                        formData.responsavelTI === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
              <div>
                <label className="block text-white font-medium mb-2">Qual é a maior dor tecnológica hoje? *</label>
                <div className="grid md:grid-cols-2 gap-3">
                  {doresPrincipais.map(o => (
                    <button
                      key={o.value}
                      onClick={() => handleChange('dorPrincipal', o.value)}
                      className={`px-4 py-3 rounded-xl border transition-all text-left ${
                        formData.dorPrincipal === o.value 
                          ? 'bg-[#cbf400] text-[#0e0e0e] border-[#cbf400]' 
                          : 'bg-[#0e0e0e] text-gray-400 border-white/10 hover:border-[#cbf400]/50'
                      }`}
                    >
                      {o.label}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* Etapa 6: Contato */}
          {etapaAtual === 6 && (
            <div className="space-y-6">
              <div className="bg-[#cbf400]/10 border border-[#cbf400]/30 rounded-xl p-4 mb-6">
                <div className="flex items-start gap-3">
                  <AlertCircle className="w-5 h-5 text-[#cbf400] flex-shrink-0 mt-0.5" />
                  <p className="text-gray-300 text-sm">
                    Preencha seus dados para receber o diagnóstico completo e um especialista entrará em contato.
                  </p>
                </div>
              </div>
              <div className="grid md:grid-cols-2 gap-6">
                <div>
                  <label className="block text-white font-medium mb-2">Seu nome *</label>
                  <input 
                    type="text" 
                    value={formData.nome}
                    onChange={(e) => handleChange('nome', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                    placeholder="Nome completo"
                  />
                </div>
                <div>
                  <label className="block text-white font-medium mb-2">WhatsApp *</label>
                  <input 
                    type="tel" 
                    value={formData.whatsapp}
                    onChange={(e) => handleChange('whatsapp', e.target.value)}
                    className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                    placeholder="(11) 99999-9999"
                  />
                </div>
              </div>
              <div>
                <label className="block text-white font-medium mb-2">E-mail corporativo *</label>
                <input 
                  type="email" 
                  value={formData.email}
                  onChange={(e) => handleChange('email', e.target.value)}
                  className="w-full bg-[#0e0e0e] border border-white/10 rounded-xl px-4 py-3 text-white focus:border-[#cbf400] focus:outline-none transition-colors"
                  placeholder="seu@email.com"
                />
              </div>
            </div>
          )}

          {/* Botões de navegação */}
          <div className="flex justify-between mt-10">
            <button
              onClick={etapaAnterior}
              disabled={etapaAtual === 1}
              className={`flex items-center gap-2 px-6 py-3 rounded-xl font-medium transition-all ${
                etapaAtual === 1 
                  ? 'opacity-0 pointer-events-none' 
                  : 'text-gray-400 hover:text-white'
              }`}
            >
              <ArrowLeft className="w-5 h-5" />
              Voltar
            </button>
            <button
              onClick={proximaEtapa}
              disabled={!isEtapaValida() || isSubmitting}
              className={`flex items-center gap-2 px-8 py-4 rounded-xl font-bold transition-all ${
                isEtapaValida() && !isSubmitting
                  ? 'bg-[#cbf400] text-[#0e0e0e] hover:bg-[#d4ff1a]' 
                  : 'bg-gray-700 text-gray-500 cursor-not-allowed'
              }`}
            >
              {isSubmitting ? (
                <><Loader2 className="w-5 h-5 animate-spin" /> Processando...</>
              ) : etapaAtual === etapas.length ? (
                <><Check className="w-5 h-5" /> Ver resultado</>
              ) : (
                <>Próximo <ArrowRight className="w-5 h-5" /></>
              )}
            </button>
          </div>
        </div>

        {/* Stats */}
        <div className="mt-12 grid grid-cols-2 md:grid-cols-4 gap-4">
          {[
            { valor: '1.247', label: 'Empresas avaliadas' },
            { valor: '68%', label: 'Sem backup adequado' },
            { valor: '54%', label: 'Sem contingência de internet' },
            { valor: '4.8', label: 'Nota média de satisfação' },
          ].map((stat, i) => (
            <div key={i} className="bg-[#1a1a1a] rounded-xl p-4 text-center border border-white/5">
              <div className="text-2xl font-black text-[#cbf400]">{stat.valor}</div>
              <div className="text-gray-500 text-xs">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// Componente de Resultado
const Resultado = ({ resultado, formData }: { resultado: any; formData: FormData }) => {
  const score = resultado.score;
  const nivel = score >= 80 ? { label: 'Bem estruturado', cor: 'text-green-400', bg: 'bg-green-400/10', barra: 'bg-green-400' } :
                score >= 60 ? { label: 'Estrutura intermediária', cor: 'text-yellow-400', bg: 'bg-yellow-400/10', barra: 'bg-yellow-400' } :
                score >= 40 ? { label: 'Estrutura frágil', cor: 'text-orange-400', bg: 'bg-orange-400/10', barra: 'bg-orange-400' } :
                { label: 'Alto risco', cor: 'text-red-400', bg: 'bg-red-400/10', barra: 'bg-red-400' };

  const areas = [
    { nome: 'Infraestrutura', score: Math.min(100, score + 10) },
    { nome: 'Internet', score: parseInt(formData.linksInternet) > 1 ? 80 : 40 },
    { nome: 'Segurança', score: formData.antivirus === 'pago' ? 80 : 30 },
    { nome: 'Backup', score: formData.backup === 'diario' && formData.backupTestado === 'sim' ? 90 : 30 },
    { nome: 'Gestão', score: formData.responsavelTI === 'terceirizado' ? 75 : 40 },
  ];

  return (
    <div className="bg-[#0e0e0e] min-h-screen pt-24 pb-12">
      <div className="container-custom max-w-4xl">
        {/* Score Principal */}
        <div className="text-center mb-10">
          <span className="inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
            Diagnóstico Completo
          </span>
          <h1 className="text-3xl md:text-4xl font-black text-white mb-2">
            Resultado da Avaliação
          </h1>
          <p className="text-gray-400">{formData.empresa}</p>
        </div>

        {/* Score Card */}
        <div className="bg-[#1a1a1a] rounded-2xl p-8 border border-white/5 mb-8">
          <div className="flex flex-col md:flex-row items-center gap-8">
            <div className="relative">
              <svg className="w-40 h-40 transform -rotate-90">
                <circle cx="80" cy="80" r="70" stroke="#1a1a1a" strokeWidth="12" fill="none" />
                <circle 
                  cx="80" 
                  cy="80" 
                  r="70" 
                  stroke="currentColor" 
                  strokeWidth="12" 
                  fill="none"
                  strokeDasharray={`${score * 4.4} 440`}
                  className={nivel.cor}
                  strokeLinecap="round"
                />
              </svg>
              <div className="absolute inset-0 flex flex-col items-center justify-center">
                <span className={`text-4xl font-black ${nivel.cor}`}>{score}</span>
                <span className="text-gray-500 text-sm">/100</span>
              </div>
            </div>
            <div className="flex-1 text-center md:text-left">
              <div className={`inline-block px-4 py-2 rounded-full ${nivel.bg} ${nivel.cor} text-sm font-semibold mb-4`}>
                {nivel.label}
              </div>
              <p className="text-gray-300 mb-4">
                Com base nas informações fornecidas, identificamos oportunidades de melhoria na estrutura tecnológica da sua empresa.
              </p>
              <a 
                href={`https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Fiz%20a%20avaliação%20e%20gostaria%20de%20conversar%20sobre%20meu%20resultado%20(${score}/100)`}
                target="_blank"
                rel="noopener noreferrer"
                className="btn-primary inline-flex items-center gap-2"
              >
                Falar com especialista
                <ChevronRight className="w-5 h-5" />
              </a>
            </div>
          </div>
        </div>

        {/* Áreas */}
        <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 mb-8">
          <h3 className="text-xl font-bold text-white mb-6">Análise por área</h3>
          <div className="space-y-4">
            {areas.map((area, i) => (
              <div key={i}>
                <div className="flex justify-between mb-2">
                  <span className="text-gray-300">{area.nome}</span>
                  <span className={area.score >= 70 ? 'text-green-400' : area.score >= 50 ? 'text-yellow-400' : 'text-red-400'}>
                    {area.score}%
                  </span>
                </div>
                <div className="h-2 bg-[#0e0e0e] rounded-full overflow-hidden">
                  <div 
                    className={`h-full rounded-full transition-all duration-1000 ${
                      area.score >= 70 ? 'bg-green-400' : area.score >= 50 ? 'bg-yellow-400' : 'bg-red-400'
                    }`}
                    style={{ width: `${area.score}%` }}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Pontos de Atenção */}
        {resultado.diagnostico.length > 0 && (
          <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 mb-8">
            <h3 className="text-xl font-bold text-white mb-6">Pontos de atenção</h3>
            <div className="space-y-4">
              {resultado.diagnostico.map((item: any, i: number) => (
                <div key={i} className="flex gap-4 p-4 bg-[#0e0e0e] rounded-xl">
                  <div className={`w-2 h-full rounded-full ${
                    item.status === 'crítico' ? 'bg-red-400' : item.status === 'alto' ? 'bg-orange-400' : 'bg-yellow-400'
                  }`} />
                  <div>
                    <h4 className="text-white font-semibold mb-1">{item.area}</h4>
                    <p className="text-gray-400 text-sm">{item.texto}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {/* Análise de SEO do Site */}
        {resultado.seo && (
          <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 mb-8">
            <h3 className="text-xl font-bold text-white mb-4 flex items-center gap-2">
              <Globe className="w-5 h-5 text-[#cbf400]" />
              Análise de SEO do Site
            </h3>
            <div className="flex items-center gap-4 mb-6">
              <div className={`text-4xl font-black ${
                resultado.seo.score >= 70 ? 'text-green-400' : 
                resultado.seo.score >= 50 ? 'text-yellow-400' : 'text-red-400'
              }`}>
                {resultado.seo.score}
              </div>
              <div className="text-gray-400">/100</div>
            </div>
            
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4 mb-6">
              <div className={`p-4 rounded-xl ${resultado.seo.checks.hasTitle ? 'bg-green-400/10 text-green-400' : 'bg-red-400/10 text-red-400'}`}>
                <div className="flex items-center gap-2 mb-1">
                  {resultado.seo.checks.hasTitle ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                  <span className="font-medium">Título</span>
                </div>
                <p className="text-xs opacity-80">{resultado.seo.checks.hasTitle ? 'Otimizado' : 'Não encontrado'}</p>
              </div>
              <div className={`p-4 rounded-xl ${resultado.seo.checks.hasDescription ? 'bg-green-400/10 text-green-400' : 'bg-red-400/10 text-red-400'}`}>
                <div className="flex items-center gap-2 mb-1">
                  {resultado.seo.checks.hasDescription ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                  <span className="font-medium">Descrição</span>
                </div>
                <p className="text-xs opacity-80">{resultado.seo.checks.hasDescription ? 'Presente' : 'Ausente'}</p>
              </div>
              <div className={`p-4 rounded-xl ${resultado.seo.checks.hasHttps ? 'bg-green-400/10 text-green-400' : 'bg-red-400/10 text-red-400'}`}>
                <div className="flex items-center gap-2 mb-1">
                  {resultado.seo.checks.hasHttps ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                  <span className="font-medium">HTTPS</span>
                </div>
                <p className="text-xs opacity-80">{resultado.seo.checks.hasHttps ? 'Seguro' : 'Não seguro'}</p>
              </div>
              <div className={`p-4 rounded-xl ${resultado.seo.checks.isResponsive ? 'bg-green-400/10 text-green-400' : 'bg-red-400/10 text-red-400'}`}>
                <div className="flex items-center gap-2 mb-1">
                  {resultado.seo.checks.isResponsive ? <Check className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
                  <span className="font-medium">Responsivo</span>
                </div>
                <p className="text-xs opacity-80">{resultado.seo.checks.isResponsive ? 'Sim' : 'Não'}</p>
              </div>
              <div className={`p-4 rounded-xl col-span-2 md:col-span-1 ${
                resultado.seo.checks.loadSpeed === 'fast' ? 'bg-green-400/10 text-green-400' : 
                resultado.seo.checks.loadSpeed === 'medium' ? 'bg-yellow-400/10 text-yellow-400' : 'bg-red-400/10 text-red-400'
              }`}>
                <div className="flex items-center gap-2 mb-1">
                  <Zap className="w-4 h-4" />
                  <span className="font-medium">Velocidade</span>
                </div>
                <p className="text-xs opacity-80">
                  {resultado.seo.checks.loadSpeed === 'fast' ? 'Rápida' : resultado.seo.checks.loadSpeed === 'medium' ? 'Média' : 'Lenta'}
                </p>
              </div>
            </div>
            
            {resultado.seo.recommendations.length > 0 && (
              <div className="bg-[#0e0e0e] rounded-xl p-4">
                <p className="text-gray-400 text-sm mb-2">Recomendações de SEO:</p>
                <ul className="space-y-2">
                  {resultado.seo.recommendations.map((rec: string, i: number) => (
                    <li key={i} className="text-gray-300 text-sm flex items-start gap-2">
                      <span className="text-[#cbf400]">→</span>
                      {rec}
                    </li>
                  ))}
                </ul>
              </div>
            )}
            
            <div className="mt-4 p-4 bg-[#cbf400]/5 border border-[#cbf400]/20 rounded-xl">
              <p className="text-gray-300 text-sm">
                <span className="text-[#cbf400] font-semibold">💡 Oportunidade:</span> Um site bem otimizado para SEO aparece melhor no Google e atrai mais clientes. A Avanzato oferece serviços de otimização de sites e SEO técnico.
              </p>
            </div>
          </div>
        )}

        {/* CTA Final */}
        <div className="bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl p-8 text-center border border-[#cbf400]/20">
          <h3 className="text-2xl font-bold text-white mb-4">
            Receba um relatório completo
          </h3>
          <p className="text-gray-400 mb-6">
            Um especialista da Avanzato vai analisar seu caso e preparar recomendações personalizadas para sua empresa.
          </p>
          <div className="flex flex-wrap justify-center gap-4">
            <a 
              href={`https://api.whatsapp.com/send?phone=551148101704&text=Olá!%20Fiz%20a%20avaliação%20(${score}/100)%20e%20gostaria%20de%20receber%20o%20relatório%20completo`}
              target="_blank"
              rel="noopener noreferrer"
              className="btn-primary inline-flex items-center gap-2"
            >
              Receber relatório
              <ArrowRight className="w-5 h-5" />
            </a>
            <a href="tel:+551148101704" className="btn-secondary">
              Ligar agora
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Avaliador;
