import SEO from '../../components/SEO';
import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
  Shield,
  Globe,
  Network,
  Lock,
  Phone,
  ArrowRight,
  AlertTriangle,
  Router,
} 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 Firewall pfSense e gostaria de conversar.';

function FormSection() {
  const [formData, setFormData] = useState({ nome: '', email: '', telefone: '', empresa: '', 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.empresa || 'Nao informado',
      cargo: `Firewall - ${formData.funcionarios} func`,
      mensagem: `Topico: Firewall pfSense | Desafio: ${formData.desafio || 'Nao informado'} | ${formData.mensagem || ''}`,
    });
    if (success) { setStatus('success'); setFormData({ nome: '', email: '', telefone: '', empresa: '', funcionarios: '', desafio: '', mensagem: '' }); setTimeout(() => setStatus('idle'), 5000); }
    else { setStatus('error'); setTimeout(() => setStatus('idle'), 3000); }
  };

  return (
    <div id="formulario" className="scroll-mt-20">
      <SEO
        title="Firewall pfSense Empresarial"
        description="Implementacao e configuracao de firewall pfSense e OPNsense. Seguranca de rede, VPN, filtro de conteudo."
      />
      <div className="bg-[#1a1a1a] border border-[#333] rounded-2xl p-8 sticky top-24">
        <h3 className="text-2xl font-bold text-white mb-2">Avaliacao gratuita de firewall</h3>
        <p className="text-gray-400 mb-6">Analisamos sua rede e indicamos a melhor configuracao de firewall para sua empresa.</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">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-10">1-10</SelectItem><SelectItem value="11-50">11-50</SelectItem><SelectItem value="51-200">51-200</SelectItem><SelectItem value="200+">200+</SelectItem></SelectContent></Select></div>
          <div><Label className="text-gray-300">Maior desafio</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="ataques">Ataques e invasoes</SelectItem><SelectItem value="controle">Controle de acesso a sites</SelectItem><SelectItem value="vpn">VPN para home office</SelectItem><SelectItem value="substituir">Substituir firewall atual</SelectItem><SelectItem value="implementar">Implementar firewall</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 avaliacao'}</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 FirewallPfSensePage() {
  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: 'Sem protecao contra ataques', desc: 'Sua empresa usa o roteador da operadora como unica protecao. Isso e como deixar a porta aberta para hackers e ransomware.' },
    { icon: <Globe className="w-8 h-8 text-red-400" />, title: 'Sem controle de acesso a sites', desc: 'Funcionarios acessam qualquer site, baixam arquivos sem controle e voce nao tem visibilidade do que entra e sai da rede.' },
    { icon: <Network className="w-8 h-8 text-red-400" />, title: 'Rede interna vulneravel', desc: 'Se um computador for infectado, o virus se espalha para todos. Sem segmentacao de rede, todo mundo esta exposto.' },
    { icon: <Lock className="w-8 h-8 text-red-400" />, title: 'VPN inexistente ou insegura', desc: 'Funcionarios acessam arquivos de casa sem VPN ou usando senhas fracas. Dados sensiveis trafegando pela internet sem protecao.' },
  ];

  const solucoes = [
    { icon: <Shield className="w-10 h-10 text-[#ffc300]" />, title: 'Firewall pfSense implementado', desc: 'Implementamos pfSense com regras de seguranca customizadas para seu negocio. Bloqueio de ameacas, filtro de pacotes e protecao contra intrusao.' },
    { icon: <Globe className="w-10 h-10 text-[#ffc300]" />, title: 'Controle de conteudo e sites', desc: 'Bloqueie sites maliciosos, controle downloads, filtre conteudo inapropriado e monitore o trafego da rede em tempo real.' },
    { icon: <Router className="w-10 h-10 text-[#ffc300]" />, title: 'Segmentacao de rede (VLANs)', desc: 'Separamos a rede em segmentos: administrativo, visitantes, financeiro, servidores. Se um segmento for comprometido, os outros ficam protegidos.' },
    { icon: <Lock className="w-10 h-10 text-[#ffc300]" />, title: 'VPN segura para home office', desc: 'VPN com criptografia AES-256 para acesso remoto seguro. Seus funcionarios trabalham de casa com a mesma seguranca do escritorio.' },
  ];

  const faqs = [
    { q: 'O que e pfSense?', a: 'pfSense e um firewall de codigo aberto baseado em FreeBSD. E usado por empresas de todos os tamanhos por ser robusto, seguro e altamente configuravel. Tem milhares de instalacoes no mundo todo.' },
    { q: 'pfSense substitui o roteador da operadora?', a: 'Sim, em ambiente corporativo o pfSense assume o papel de roteador e firewall. O modem da operadora fica em modo bridge. Assim voce tem controle total da sua rede.' },
    { q: 'Quanto tempo leva para implementar?', a: 'A maioria das implementacoes e feita em 1-2 dias. Primeiro fazemos um levantamento da rede atual, depois instalamos e configuramos o pfSense com as regras especificas do seu negocio.' },
    { q: 'Preciso de hardware dedicado?', a: 'Recomendamos hardware dedicado (Protectli, Netgate ou similar) para melhor desempenho. Podemos indicar o equipamento ideal conforme o tamanho da sua rede e trafego.' },
    { q: 'Voces dao suporte apos a instalacao?', a: 'Sim. Oferecemos planos de suporte mensal que incluem monitoramento do firewall, atualizacoes de seguranca, ajustes de regras e atendimento prioritario.' },
  ];

  return (
    <div ref={pageRef} className="min-h-screen bg-[#0e0e0e]">
      <title>Firewall pfSense para Empresas | Avanzato Tecnologia</title>
      <meta name="description" content="Implementacao e configuracao de firewall pfSense para empresas. Protecao contra ataques, controle de acesso, VPN e segmentacao de rede." />

      <section className="relative min-h-[90vh] flex items-center bg-[#0e0e0e]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1563986768609-322da13575f2?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"><Shield className="w-4 h-4" /> Especialistas em pfSense</div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">Firewall <span className="text-[#ffc300]">pfSense</span> para sua empresa</h1>
              <p className="text-xl text-gray-300 mb-6">Proteja sua rede contra ataques, ransomware e acessos nao autorizados com um firewall robusto e monitorado.</p>
              <p className="text-gray-400 mb-8">O roteador da operadora nao e firewall. Empresas precisam de protecao corporativa que bloqueie ameacas, controle acesso e monitore trafego.</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">Avaliacao gratuita <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">Sua rede esta desprotegida?</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Muitas empresas acham que o roteador da operadora e suficiente. Nao e. Veja os riscos.</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">O que o pfSense entrega</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Solucao completa de seguranca de rede para empresas.</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: '50+', label: 'Firewalls implementados' }, { number: '99.9%', label: 'Bloqueio de intrusoes' }, { number: '24/7', label: 'Monitoramento de rede' }].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 sua empresa agora</h2>
          <p className="text-gray-400 text-lg mb-8 gsap-item">Solicite uma avaliacao gratuita de seguranca da rede. Nossos especialistas identificarao vulnerabilidades e apresentarao a solucao ideal.</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">Avaliacao gratuita <ArrowRight className="w-5 h-5 ml-2" /></Button></a></div>
        </div>
      </section>
    </div>
  );
}