import SEO from '../../components/SEO';
import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
  Scale,
  Lock,
  FileSearch,
  Cloud,
  Phone,
  ArrowRight,
  FileText,
  Eye,
  AlertTriangle,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { CONTACT } from '@/config/site';
import { sendLeadToMautic } from '@/config/mautic';

gsap.registerPlugin(ScrollTrigger);

const WHATSAPP_NUMBER = CONTACT.phoneRaw;
const WHATSAPP_MSG = 'Ola! Vim da pagina de Advocacia e gostaria de conversar.';

function FormSection() {
  const [formData, setFormData] = useState({ nome: '', email: '', telefone: '', escritorio: '', funcionarios: '', desafio: '', mensagem: '' });
  const [status, setStatus] = useState<'idle' | 'sending' | 'success' | 'error'>('idle');
  const handleChange = (field: string, value: string) => setFormData(p => ({ ...p, [field]: value }));

  const handleSubmit = () => {
    if (!formData.nome || !formData.email || !formData.telefone) {
      setStatus('error'); setTimeout(() => setStatus('idle'), 3000); return;
    }
    setStatus('sending');
    const success = sendLeadToMautic('contato', {
      nome: formData.nome, email: formData.email, telefone: formData.telefone,
      empresa: formData.escritorio || 'Nao informado',
      cargo: `Advocacia - ${formData.funcionarios} funcionarios`,
      mensagem: `Nicho: Advocacia | Desafio: ${formData.desafio || 'Nao informado'} | ${formData.mensagem || ''}`,
    });
    if (success) { setStatus('success'); setFormData({ nome: '', email: '', telefone: '', escritorio: '', funcionarios: '', desafio: '', mensagem: '' }); setTimeout(() => setStatus('idle'), 5000); }
    else { setStatus('error'); setTimeout(() => setStatus('idle'), 3000); }
  };

  return (
    <div id="formulario" className="scroll-mt-20">
      <SEO
        title="TI para Escritorios de Advocacia"
        description="TI para advocacias: seguranca de processos, LGPD para clientes, backup de documentos juridicos. PJe e e-SAJ."
      />
      <div className="bg-[#1a1a1a] border border-[#333] rounded-2xl p-8 sticky top-24">
        <h3 className="text-2xl font-bold text-white mb-2">Diagnostico gratuito para seu escritorio</h3>
        <p className="text-gray-400 mb-6">Avaliamos a seguranca da sua infraestrutura e entregamos um relatorio de conformidade para a OAB.</p>
        {status === 'success' && <div className="mb-4 p-4 bg-green-500/20 border border-green-500/30 rounded-xl text-green-400 text-sm">Enviado com sucesso! Nosso time entrara em contato em ate 2h.</div>}
        {status === 'error' && <div className="mb-4 p-4 bg-red-500/20 border border-red-500/30 rounded-xl text-red-400 text-sm">{formData.nome ? 'Erro ao enviar. Tente novamente ou use o WhatsApp.' : 'Preencha nome, e-mail e telefone.'}</div>}
        <div className="space-y-4">
          <div><Label className="text-gray-300">Nome completo <span className="text-[#ffc300]">*</span></Label><Input value={formData.nome} onChange={e => handleChange('nome', e.target.value)} placeholder="Seu nome" className="bg-[#2a2a2a] border-[#444] text-white mt-1" /></div>
          <div><Label className="text-gray-300">E-mail profissional <span className="text-[#ffc300]">*</span></Label><Input type="email" value={formData.email} onChange={e => handleChange('email', e.target.value)} placeholder="seu@escritorio.com.br" className="bg-[#2a2a2a] border-[#444] text-white mt-1" /></div>
          <div><Label className="text-gray-300">WhatsApp <span className="text-[#ffc300]">*</span></Label><Input value={formData.telefone} onChange={e => handleChange('telefone', e.target.value)} placeholder="(00) 00000-0000" className="bg-[#2a2a2a] border-[#444] text-white mt-1" /></div>
          <div><Label className="text-gray-300">Nome do escritorio</Label><Input value={formData.escritorio} onChange={e => handleChange('escritorio', e.target.value)} placeholder="Nome do escritorio de advocacia" className="bg-[#2a2a2a] border-[#444] text-white mt-1" /></div>
          <div><Label className="text-gray-300">Quantos funcionarios?</Label><Select onValueChange={v => handleChange('funcionarios', v)}><SelectTrigger className="bg-[#2a2a2a] border-[#444] text-white mt-1"><SelectValue placeholder="Selecione" /></SelectTrigger><SelectContent className="bg-[#2a2a2a] border-[#444]"><SelectItem value="1-5">1 a 5</SelectItem><SelectItem value="6-15">6 a 15</SelectItem><SelectItem value="16-30">16 a 30</SelectItem><SelectItem value="31+">31 ou mais</SelectItem></SelectContent></Select></div>
          <div><Label className="text-gray-300">Maior desafio de TI hoje</Label><Select onValueChange={v => handleChange('desafio', v)}><SelectTrigger className="bg-[#2a2a2a] border-[#444] text-white mt-1"><SelectValue placeholder="Selecione" /></SelectTrigger><SelectContent className="bg-[#2a2a2a] border-[#444]"><SelectItem value="sigilo">Protecao do sigilo profissional</SelectItem><SelectItem value="backup">Backup de processos e documentos</SelectItem><SelectItem value="pje">Acesso ao PJE e sistemas do tribunal</SelectItem><SelectItem value="home-office">Home office seguro para advogados</SelectItem><SelectItem value="lgpd">Conformidade com LGPD</SelectItem><SelectItem value="outro">Outro</SelectItem></SelectContent></Select></div>
          <div><Label className="text-gray-300">Mensagem (opcional)</Label><Textarea value={formData.mensagem} onChange={e => handleChange('mensagem', e.target.value)} placeholder="Conte mais sobre sua situacao..." className="bg-[#2a2a2a] border-[#444] text-white mt-1 min-h-[80px]" /></div>
          <Button onClick={handleSubmit} disabled={status === 'sending'} className="w-full bg-[#ffc300] hover:bg-[#e6b000] text-[#0e0e0e] font-bold py-6 text-lg rounded-xl">{status === 'sending' ? 'Enviando...' : 'Solicitar diagnostico gratuito'}</Button>
          <a href={`https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(WHATSAPP_MSG)}`} target="_blank" rel="noopener noreferrer" className="flex items-center justify-center gap-2 w-full py-3 text-green-400 hover:text-green-300 text-sm"><Phone className="w-4 h-4" /> Prefere pelo WhatsApp? Clique aqui</a>
        </div>
      </div>
    </div>
  );
}

export default function AdvocaciaPage() {
  const pageRef = useRef<HTMLDivElement>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from('.hero-nicho-content', { opacity: 0, y: 60, duration: 1.2, ease: 'power3.out', delay: 0.2 });
      gsap.utils.toArray<HTMLElement>('.gsap-section').forEach((section) => {
        gsap.from(section.querySelectorAll('.gsap-item'), {
          scrollTrigger: { trigger: section, start: 'top 75%', toggleActions: 'play none none none' },
          opacity: 0, y: 40, duration: 0.8, stagger: 0.15, ease: 'power3.out',
        });
      });
    }, pageRef);
    return () => ctx.revert();
  }, []);

  const dores = [
    { icon: <Lock className="w-8 h-8 text-red-400" />, title: 'Sigilo profissional ameacado', desc: 'Advogados tem o dever etico de manter sigilo absoluto. Uma falha de seguranca pode expor processos, estrategias e dados sensiveis de clientes.' },
    { icon: <AlertTriangle className="w-8 h-8 text-red-400" />, title: 'Perda de processos e documentos', desc: 'Processos, pecas juridicas e contratos armazenados localmente. Um ransomware ou falha de HD pode apagar anos de trabalho irreversivelmente.' },
    { icon: <Eye className="w-8 h-8 text-red-400" />, title: 'Acesso inseguro ao PJE e tribunais', desc: 'Advogados acessam PJE, e-SAJ e outros sistemas judiciais de qualquer lugar, muitas vezes sem VPN ou rede segura. Risco de interceptacao.' },
    { icon: <FileText className="w-8 h-8 text-red-400" />, title: 'LGPD e conformidade', desc: 'Escritorios tratam dados sensiveis de clientes. A LGPD exige medidas tecnicas de protecao. Uma notificacao de vazamento gera multas e danos morais.' },
  ];

  const solucoes = [
    { icon: <Lock className="w-10 h-10 text-[#ffc300]" />, title: 'Infraestrutura com sigilo profissional', desc: 'Rede isolada, criptografia de dados, controle de acesso por perfil e auditoria completa. Seus processos protegidos como exige o Codigo de Etica da OAB.' },
    { icon: <Cloud className="w-10 h-10 text-[#ffc300]" />, title: 'Backup juridico em 3 camadas', desc: 'Backup automatico de processos, contratos e documentos em 3 camadas com criptografia. Testes mensais de restore e relatorio de integridade.' },
    { icon: <Lock className="w-10 h-10 text-[#ffc300]" />, title: 'Acesso seguro ao PJE e tribunais', desc: 'VPN dedicada, estacao de trabalho remota segura e navegacao isolada para acesso aos sistemas judiciais. Proteja suas credenciais de tribunal.' },
    { icon: <FileSearch className="w-10 h-10 text-[#ffc300]" />, title: 'Conformidade LGPD para escritorios', desc: 'Implementamos as medidas tecnicas da LGPD: criptografia, controle de acesso, registro de logs e politica de retencao de dados sensiveis.' },
  ];

  const faqs = [
    { q: 'Como garantem o sigilo profissional?', a: 'Implementamos rede isolada por departamento, criptografia de dados em repouso e em transito, controle de acesso por perfil (socios, advogados, estagiarios) e auditoria de todas as acoes. Alem disso, assinamos NDA especifico para escritorios de advocacia.' },
    { q: 'E possivel acessar o PJE de forma segura?', a: 'Sim. Oferecemos duas opcoes: VPN dedicada com criptografia AES-256 ou estacao de trabalho remota (RDS) configurada exclusivamente para acesso aos sistemas judiciais. Ambas protegem suas credenciais de interceptacao.' },
    { q: 'Como funciona o backup de processos?', a: 'Fazemos backup automatico a cada 4 horas dos arquivos do escritorio, com retencao de 30 dias local e 1 ano na nuvem. Os backups sao criptografados e testamos o restore mensalmente.' },
    { q: 'Voces ajudam com a conformidade LGPD?', a: 'Sim. Implementamos as medidas tecnicas obrigatorias da LGPD: criptografia, pseudonimizacao, controle de acesso, registro de logs e politica de retencao. Fornecemos documentacao tecnica para o DPO.' },
    { q: 'O suporte entende das urgentias de um escritorio?', a: 'Sim. Temos SLA prioritario para escritorios de advocacia, com atendimento em ate 15 min para chamados criticos (ex: nao consegue acessar PJE na vespera de uma audiencia).' },
  ];

  return (
    <div ref={pageRef} className="min-h-screen bg-[#0e0e0e]">
      <title>TI para Escritorios de Advocacia | Avanzato Tecnologia</title>
      <meta name="description" content="TI especializada para escritorios de advocacia. Protecao do sigilo profissional, backup de processos, acesso seguro ao PJE e conformidade LGPD." />

      <section className="relative min-h-[90vh] flex items-center bg-[#0e0e0e]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1920&q=80')] bg-cover bg-center opacity-10" />
        <div className="absolute inset-0 bg-gradient-to-r from-[#0e0e0e] via-[#0e0e0e]/95 to-[#0e0e0e]/80" />
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="hero-nicho-content">
              <div className="inline-flex items-center gap-2 bg-[#ffc300]/10 text-[#ffc300] px-4 py-2 rounded-full text-sm font-medium mb-6"><Scale className="w-4 h-4" /> Especialistas em TI para Advocacia</div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">TI que protege o <span className="text-[#ffc300]">sigilo profissional</span></h1>
              <p className="text-xl text-gray-300 mb-6">Seguranca reforcada para escritorios de advocacia. Backup de processos, acesso seguro ao PJE e conformidade com a LGPD.</p>
              <p className="text-gray-400 mb-8">Escritorios de advocacia precisam de TI que entenda de sigilo. Implementamos infraestrutura com seguranca juridica de nivel corporativo.</p>
              <div className="flex flex-col sm:flex-row gap-4">
                <a href="#formulario"><Button className="bg-[#ffc300] hover:bg-[#e6b000] text-[#0e0e0e] font-bold px-8 py-6 text-lg rounded-xl">Diagnostico gratuito <ArrowRight className="w-5 h-5 ml-2" /></Button></a>
                <a href={`https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(WHATSAPP_MSG)}`} target="_blank" rel="noopener noreferrer"><Button variant="outline" className="border-[#444] text-white hover:bg-white/10 px-8 py-6 text-lg rounded-xl"><Phone className="w-5 h-5 mr-2" /> WhatsApp</Button></a>
              </div>
            </div>
            <div className="hidden lg:block hero-nicho-content"><FormSection /></div>
          </div>
        </div>
      </section>

      <section className="py-24 bg-[#0e0e0e] gsap-section">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 gsap-item"><h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">Os riscos de TI em escritorios de advocacia</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Advocacia exige o mais alto padrao de seguranca. Conhecemos os riscos especificos do Direito.</p></div>
          <div className="grid md:grid-cols-2 gap-8">
            {dores.map((dor, i) => (
              <div key={i} className="gsap-item bg-[#1a1a1a] border border-[#333] rounded-xl p-8 hover:border-red-400/30 transition-all">
                <div className="flex items-start gap-4"><div className="shrink-0 p-3 bg-red-400/10 rounded-lg">{dor.icon}</div><div><h3 className="text-xl font-bold text-white mb-2">{dor.title}</h3><p className="text-gray-400">{dor.desc}</p></div></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-24 bg-[#141414] gsap-section">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 gsap-item"><h2 className="text-3xl sm:text-4xl font-bold text-white mb-4">Infraestrutura juridica segura</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Solucoes tecnicas desenvolvidas especificamente para as demandas da advocacia.</p></div>
          <div className="grid md:grid-cols-2 gap-8">
            {solucoes.map((sol, i) => (
              <div key={i} className="gsap-item bg-[#0e0e0e] border border-[#333] rounded-xl p-8 hover:border-[#ffc300]/30 transition-all"><div className="mb-4">{sol.icon}</div><h3 className="text-xl font-bold text-white mb-3">{sol.title}</h3><p className="text-gray-400">{sol.desc}</p></div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-24 bg-[#0e0e0e] gsap-section">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid md:grid-cols-3 gap-8">
            {[{ number: '18+', label: 'Escritorios de advocacia atendidos' }, { number: '100%', label: 'Conformidade com sigilo OAB' }, { number: '< 15 min', label: 'Tempo medio de resposta' }].map((stat, i) => (
              <div key={i} className="gsap-item text-center p-8 bg-[#1a1a1a] rounded-xl border border-[#333]"><div className="text-4xl sm:text-5xl font-bold text-[#ffc300] mb-2">{stat.number}</div><div className="text-gray-400">{stat.label}</div></div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-12 bg-[#141414] lg:hidden"><div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"><FormSection /></div></section>

      <section className="py-24 bg-[#141414] gsap-section">
        <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-12 text-center gsap-item">Perguntas frequentes</h2>
          <div className="space-y-4">
            {faqs.map((faq, i) => (
              <div key={i} className="gsap-item bg-[#1a1a1a] border border-[#333] rounded-xl overflow-hidden">
                <button onClick={() => setOpenFaq(openFaq === i ? null : i)} className="w-full flex items-center justify-between p-6 text-left"><span className="text-white font-medium pr-4">{faq.q}</span><span className={`text-[#ffc300] text-2xl shrink-0 transition-transform ${openFaq === i ? 'rotate-45' : ''}`}>+</span></button>
                {openFaq === i && <div className="px-6 pb-6 text-gray-400">{faq.a}</div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="py-24 bg-[#0e0e0e] gsap-section">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-white mb-6 gsap-item">Proteja o sigilo do seu escritorio</h2>
          <p className="text-gray-400 text-lg mb-8 gsap-item">Solicite um diagnostico gratuito de seguranca. Nosso time juridico de TI vai avaliar sua infraestrutura e apresentar um plano de protecao.</p>
          <div className="flex flex-col sm:flex-row justify-center gap-4 gsap-item"><a href="#formulario"><Button className="bg-[#ffc300] hover:bg-[#e6b000] text-[#0e0e0e] font-bold px-8 py-6 text-lg rounded-xl">Solicitar diagnostico gratuito <ArrowRight className="w-5 h-5 ml-2" /></Button></a></div>
        </div>
      </section>
    </div>
  );
}