import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
  HardDrive,
  Cloud,
  Database,
  Clock,
  Phone,
  ArrowRight,
  AlertTriangle,
  RefreshCw,
} 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 Backup Corporativo e gostaria de conversar.';

function FormSection() {
  const [formData, setFormData] = useState({ nome: '', email: '', telefone: '', empresa: '', tamanho: '', 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.empresa || 'Nao informado',
      cargo: `Backup - ${formData.tamanho}`,
      mensagem: `Topico: Backup Corporativo | Desafio: ${formData.desafio || 'Nao informado'} | ${formData.mensagem || ''}`,
    });
    if (success) { setStatus('success'); setFormData({ nome: '', email: '', telefone: '', empresa: '', tamanho: '', 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 de backup gratuito</h3>
        <p className="text-gray-400 mb-6">Avaliamos sua estrategia atual e identificamos falhas antes que seja tarde demais.</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 <span className="text-[#ffc300]">*</span></Label><Input type="email" value={formData.email} onChange={e => handleChange('email', e.target.value)} placeholder="seu@empresa.com" 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">Empresa</Label><Input value={formData.empresa} onChange={e => handleChange('empresa', e.target.value)} placeholder="Nome da empresa" className="bg-[#2a2a2a] border-[#444] text-white mt-1" /></div>
          <div><Label className="text-gray-300">Volume de dados</Label><Select onValueChange={v => handleChange('tamanho', v)}><SelectTrigger className="bg-[#2a2a2a] border-[#444] text-white mt-1"><SelectValue placeholder="Selecione" /></SelectTrigger><SelectContent className="bg-[#2a2a2a] border-[#444]"><SelectItem value="ate-500gb">Ate 500 GB</SelectItem><SelectItem value="500gb-2tb">500 GB a 2 TB</SelectItem><SelectItem value="2tb-10tb">2 TB a 10 TB</SelectItem><SelectItem value="10tb+">Acima de 10 TB</SelectItem></SelectContent></Select></div>
          <div><Label className="text-gray-300">Maior preocupacao</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="nao-tem">Nao tenho backup</SelectItem><SelectItem value="nao-confia">Nao confio no backup atual</SelectItem><SelectItem value="ransomware">Medo de ransomware</SelectItem><SelectItem value="nuvem">Quero backup na nuvem</SelectItem><SelectItem value="testar">Nunca testei o restore</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..." 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'}</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 BackupCorporativoPage() {
  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: <AlertTriangle className="w-8 h-8 text-red-400" />, title: 'Nao tem backup', desc: 'Sua empresa depende de dados digitais mas nao tem uma estrategia de backup. Um HD queimou e anos de trabalho desapareceram.' },
    { icon: <HardDrive className="w-8 h-8 text-red-400" />, title: 'Backup no mesmo lugar', desc: 'Faz backup em HD externo que fica do lado do servidor. Se houver incendio, roubo ou raio, perde o original e o backup juntos.' },
    { icon: <RefreshCw className="w-8 h-8 text-red-400" />, title: 'Nunca testou o restore', desc: 'Faz backup ha anos mas nunca verificou se consegue recuperar. Na hora do desespero, descobre que o backup esta corrompido.' },
    { icon: <Clock className="w-8 h-8 text-red-400" />, title: 'Backup manual e esquecido', desc: 'Depende de alguem lembrar de copiar os arquivos. Quando a pessoa sai de ferias, o backup nao e feito. Ha meses sem backup funcional.' },
  ];

  const solucoes = [
    { icon: <Database className="w-10 h-10 text-[#ffc300]" />, title: 'Backup em 3 camadas (3-2-1)', desc: '3 copias dos dados, em 2 midias diferentes, 1 fora do local. Backup local rapido + nuvem criptografada + offsite para maxima protecao.' },
    { icon: <Cloud className="w-10 h-10 text-[#ffc300]" />, title: 'Backup na nuvem criptografado', desc: 'Dados criptografados com AES-256 antes de sair da sua empresa. Armazenados em nuvem Azure ou AWS com redundancia geografica.' },
    { icon: <RefreshCw className="w-10 h-10 text-[#ffc300]" />, title: 'Teste mensal de restore', desc: 'Todo mes testamos a recuperacao de arquivos aleatorios do backup. Voce recebe um relatorio de integridade. Nunca mais duvide do seu backup.' },
    { icon: <Clock className="w-10 h-10 text-[#ffc300]" />, title: 'Backup automatico e monitorado', desc: 'Agendamento automatico com verificacao de integridade. Se um backup falhar, recebemos alerta imediato e corrigimos antes que voce perceba.' },
  ];

  const faqs = [
    { q: 'Quanto tempo leva para restaurar os dados?', a: 'Depende do volume. Arquivos individuais sao recuperados em minutos. Restauracao completa de servidores pode levar de 2 a 24 horas conforme o tamanho. Fazemos o planejamento de RTO e RPO no diagnostico.' },
    { q: 'Backup na nuvem e seguro?', a: 'Sim. Seus dados sao criptografados com AES-256 antes de sair da sua empresa. A chave de criptografia fica apenas com voce. Ninguem, nem o provedor de nuvem, consegue ler seus dados.' },
    { q: 'E se meu servidor for infectado por ransomware?', a: 'Backup em nuvem com versionamento mantem varias versoes dos arquivos. Se o ransomware criptografar seus dados, restauramos a versao anterior, limpa. Voce nao paga resgate.' },
    { q: 'Quanto custa?', a: 'Depende do volume de dados e da frequencia de backup. A partir de R$ 297/mes para empresas pequenas. Fazemos um diagnostico gratuito e apresentamos a proposta exata.' },
    { q: 'Posso manter meu backup atual e complementar?', a: 'Sim. Muitos clientes mantem o backup local existente e adicionamos a camada de nuvem e o monitoramento. Nao precisa jogar fora o que ja tem.' },
  ];

  return (
    <div ref={pageRef} className="min-h-screen bg-[#0e0e0e]">
      <title>Backup Corporativo em Nuvem | Avanzato Tecnologia</title>
      <meta name="description" content="Backup corporativo com 3 camadas de protecao. Backup local + nuvem + offsite. Teste mensal de restore e protecao contra ransomware." />

      <section className="relative min-h-[90vh] flex items-center bg-[#0e0e0e]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1544197150-b99a580bb7a8?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"><Cloud className="w-4 h-4" /> Backup Corporativo</div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">Backup que voce pode <span className="text-[#ffc300]">confiar</span></h1>
              <p className="text-xl text-gray-300 mb-6">3 camadas de protecao: local + nuvem + offsite. Teste mensal de restore e monitoramento 24/7.</p>
              <p className="text-gray-400 mb-8">80% das empresas que perdem dados fecham em 2 anos. Nao seja uma delas. Proteja seu negocio com backup corporativo serio.</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">Voce tem certeza que seu backup funciona?</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">A maioria das empresas descobre que o backup falhou na hora que mais precisam.</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">Estrategia 3 camadas</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Metodo 3-2-1 recomendado por especialistas em seguranca da informacao.</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: '3', label: 'Camadas de protecao' }, { number: '100%', label: 'Criptografia AES-256' }, { number: '30', label: 'Dias de retencao minima' }].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">Nao espere perder dados para se preocupar</h2>
          <p className="text-gray-400 text-lg mb-8 gsap-item">Solicite um diagnostico gratuito de backup. Identificaremos falhas e apresentaremos a estrategia ideal para sua empresa.</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">Diagnostico gratuito <ArrowRight className="w-5 h-5 ml-2" /></Button></a></div>
        </div>
      </section>
    </div>
  );
}
