import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
  Calculator,
  Lock,
  Server,
  Cloud,
  Phone,
  ArrowRight,
  Clock,
  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 Contabilidade 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((prev) => ({ ...prev, [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: `Contabilidade - ${formData.funcionarios} funcionarios`,
      mensagem: `Nicho: Contabilidade | 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">
      <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 sua infraestrutura e entregamos um relatorio com pontos criticos e oportunidades.
        </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 placeholder:text-gray-500 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 placeholder:text-gray-500 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 placeholder:text-gray-500 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 contabil" className="bg-[#2a2a2a] border-[#444] text-white placeholder:text-gray-500 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="sped-seguranca">Seguranca para envio do SPED</SelectItem>
                <SelectItem value="backup">Backup dos dados dos clientes</SelectItem>
                <SelectItem value="dominio">Gerenciamento de dominio e e-mail</SelectItem>
                <SelectItem value="rede">Rede lenta e instavel</SelectItem>
                <SelectItem value="certificado">Certificado digital A1/A3</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 placeholder:text-gray-500 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 transition-colors text-sm">
            <Phone className="w-4 h-4" /> Prefere pelo WhatsApp? Clique aqui
          </a>
        </div>
      </div>
    </div>
  );
}

export default function ContabilidadePage() {
  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: 'Seguranca do SPED e obrigacoes', desc: 'Receita Federal exige seguranca rigorosa para envio de SPED, ECD, ECF e DIRF. Um vazamento pode resultar em multas severas.' },
    { icon: <AlertTriangle className="w-8 h-8 text-red-400" />, title: 'Backup dos dados dos clientes', desc: 'Escritorios armazenam centenas de CPFs, CNPJs e declaracoes. Perder esses dados e um pesadelo legal e reputacional.' },
    { icon: <Clock className="w-8 h-8 text-red-400" />, title: 'Sistema travando no prazo', desc: 'Na vespera de entrega de obrigacao, a rede cai, o servidor trava e ninguem consegue trabalhar. Estresse e horas extras.' },
    { icon: <Calculator className="w-8 h-8 text-red-400" />, title: 'Certificado digital e dominio', desc: 'Certificado A1 expirando, e-mail parado, dominio mal configurado. Problemas basicos que consomem horas da contabilidade.' },
  ];

  const solucoes = [
    { icon: <Lock className="w-10 h-10 text-[#ffc300]" />, title: 'Rede segura para SPED', desc: 'Firewall, antivirus corporativo e isolamento de rede conforme exigencias da Receita Federal para transmissao de obrigacoes.' },
    { icon: <Cloud className="w-10 h-10 text-[#ffc300]" />, title: 'Backup em 3 camadas', desc: 'Backup local + nuvem + offsite automatico, com testes mensais de restore. Seus dados dos clientes sempre protegidos.' },
    { icon: <Server className="w-10 h-10 text-[#ffc300]" />, title: 'Servidor otimizado para contabil', desc: 'Servidor configurado para os sistemas contabeis (Domus, Alterdata, Folhamatic, etc.) com monitoramento 24x7.' },
    { icon: <Calculator className="w-10 h-10 text-[#ffc300]" />, title: 'Gestao de certificados digitais', desc: 'Controle de validade, renovacao e instalacao de certificados A1 e A3. Nunca mais deixe um certificado expirar.' },
  ];

  const faqs = [
    { q: 'Voces entendem dos sistemas contabeis?', a: 'Sim. Trabalhamos com escritorios que usam Domus, Alterdata, Folhamatic, Sage, entre outros. Configuramos servidores e rede especificamente para esses sistemas.' },
    { q: 'E possivel ter acesso remoto seguro para home office?', a: 'Sim. Implementamos VPN, acesso remoto via RDS ou solucoes de desktop virtual com seguranca reforcada, permitindo que contadores trabalhem de casa com os mesmos dados.' },
    { q: 'Como funciona o backup dos dados dos clientes?', a: 'Fazemos backup automatico em 3 camadas: local (NAS), nuvem (Azure/AWS) e offsite. Testamos o restore mensalmente e voce recebe um relatorio.' },
    { q: 'Quanto tempo leva para implementar?', a: 'A maioria dos escritorios esta operando em 5 a 10 dias. Primeiro fazemos um diagnostico gratuito e apresentamos um plano detalhado.' },
    { q: 'Voces oferecem suporte em horario de entrega de obrigacao?', a: 'Sim. Nosso plano inclui suporte estendido nos periodos de entrega de SPED, DIRF e outros obrigacoes, com atendimento prioritario.' },
  ];

  return (
    <div ref={pageRef} className="min-h-screen bg-[#0e0e0e]">
      <title>TI para Escritorios Contabeis | Avanzato Tecnologia</title>
      <meta name="description" content="TI especializada para escritorios contabeis. Seguranca para SPED, backup de dados, servidor otimizado e suporte tecnico especializado." />

      <section className="relative min-h-[90vh] flex items-center bg-[#0e0e0e]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?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">
                <Calculator className="w-4 h-4" /> Especialistas em TI para Contabilidade
              </div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
                TI que entende de <span className="text-[#ffc300]">obrigacoes contabeis</span>
              </h1>
              <p className="text-xl text-gray-300 mb-6">
                Seguranca para envio do SPED, backup dos dados dos seus clientes e infraestrutura que nao trava na vespera do prazo.
              </p>
              <p className="text-gray-400 mb-8">
                Ja ajudamos mais de 25 escritorios contabeis a eliminarem problemas de TI e focarem no que fazem de melhor: contabilidade.
              </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 desafios de TI que todo escritorio contabil enfrenta</h2>
            <p className="text-gray-400 text-lg max-w-3xl mx-auto">Conhecemos as dores especificas da contabilidade porque atendemos escritorios ha mais de 8 anos.</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">Como a Avanzato resolve cada um desses problemas</h2>
            <p className="text-gray-400 text-lg max-w-3xl mx-auto">Solucoes tecnicas especificas para as demandas da contabilidade.</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: '25+', label: 'Escritorios contabeis atendidos' }, { number: '99.8%', label: 'Uptime dos servidores' }, { 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">Pronto para ter uma TI que entende de contabilidade?</h2>
          <p className="text-gray-400 text-lg mb-8 gsap-item">Solicite um diagnostico gratuito. Nosso time especializado em escritorios contabeis vai avaliar sua infraestrutura e apresentar um plano de acao.</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>
  );
}
