import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
  Phone,
  PhoneCall,
  Headphones,
  Wifi,
  Server,
  ArrowRight,
  AlertTriangle,
  TrendingDown,
  Building2,
  Settings,
} 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 VOIP Empresarial e gostaria de conversar.';

function FormSection() {
  const [formData, setFormData] = useState({ nome: '', email: '', telefone: '', empresa: '', ramais: '', 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: `VOIP - ${formData.ramais} ramais`,
      mensagem: `Topico: VOIP Empresarial | Desafio: ${formData.desafio || 'Nao informado'} | ${formData.mensagem || ''}`,
    });
    if (success) { setStatus('success'); setFormData({ nome: '', email: '', telefone: '', empresa: '', ramais: '', 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">Orcamento de PABX VOIP</h3>
        <p className="text-gray-400 mb-6">Preencha os dados e receba uma proposta de migracao para VOIP em ate 4 horas.</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">Quantidade de ramais</Label><Select onValueChange={v => handleChange('ramais', 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-5 ramais</SelectItem><SelectItem value="6-15">6-15 ramais</SelectItem><SelectItem value="16-30">16-30 ramais</SelectItem><SelectItem value="31-50">31-50 ramais</SelectItem><SelectItem value="50+">Mais de 50</SelectItem></SelectContent></Select></div>
          <div><Label className="text-gray-300">Situacao atual</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="conta-alta">Conta de telefone muito alta</SelectItem><SelectItem value="pabx-velho">PABX analogico antigo</SelectItem><SelectItem value="home-office">Precisa de ramal no celular</SelectItem><SelectItem value="crescendo">Empresa crescendo</SelectItem><SelectItem value="novo">Novo escritorio</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 orcamento'}</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 VoipEmpresarialPage() {
  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: <TrendingDown className="w-8 h-8 text-red-400" />, title: 'Conta de telefone astronomica', desc: 'Voce paga R$ 2.000, R$ 5.000 ou mais por mes em telefonia fixa. Ligacoes entre filiais sao cobradas como DDD. Cada minuto custa caro.' },
    { icon: <AlertTriangle className="w-8 h-8 text-red-400" />, title: 'PABX analogico limitado', desc: 'Seu PABX tem 5 anos ou mais. Nao suporta voicemail, nao transfere para celular, nao grava chamadas. Funcionarios usam celular particular.' },
    { icon: <Wifi className="w-8 h-8 text-red-400" />, title: 'Home office sem ramal', desc: 'Funcionarios em home office nao tem acesso ao ramal da empresa. Clientes ligam no fixo e ninguem atende. Perda de negocios.' },
    { icon: <Settings className="w-8 h-8 text-red-400" />, title: 'Mudanca de endereco e drama', desc: 'Trocou de sala ou filial e a operadora demora 30 dias para transferir a linha. Perdeu o numero antigo. Clientes nao conseguem ligar.' },
  ];

  const solucoes = [
    { icon: <PhoneCall className="w-10 h-10 text-[#ffc300]" />, title: 'Reducao de ate 70% na conta', desc: 'Ligacoes entre ramais sao gratis, mesmo entre filiais. Ligacoes para fixo e movel com tarifas muito menores. ROI em 3-6 meses.' },
    { icon: <Headphones className="w-10 h-10 text-[#ffc300]" />, title: 'Ramal no celular e notebook', desc: 'Funcionarios atendem no celular, notebook ou telefone IP. URA, voicemail, transferencia e conferencia em qualquer dispositivo.' },
    { icon: <Server className="w-10 h-10 text-[#ffc300]" />, title: 'PABX virtual na nuvem', desc: 'Sem aparelho fisico na sua empresa. PABX hospedado na nuvem com 99.9% uptime. Escalavel: adicione ramais em minutos.' },
    { icon: <Building2 className="w-10 h-10 text-[#ffc300]" />, title: 'Multi-filial integrada', desc: 'Todas as filiais no mesmo PABX. Ligacao entre unidades e gratis. Atendente unificado. Cliente liga em um numero e e atendido em qualquer filial.' },
  ];

  const faqs = [
    { q: 'VOIP funciona com internet normal?', a: 'Sim, mas recomendamos um link dedicado ou QoS configurado no roteador para priorizar o trafego de voz. Fazemos o teste de qualidade da rede no diagnostico.' },
    { q: 'Posso manter meu numero atual?', a: 'Sim. Fazemos a portabilidade do seu numero fixo para o VOIP. O numero continua o mesmo, so muda a tecnologia por tras.' },
    { q: 'E se a internet cair?', a: 'Oferecemos redundancia de link (2 provedores) e encaminhamento para celular em caso de falha. Seu atendimento nao para.' },
    { q: 'Preciso trocar todos os telefones?', a: 'Depende. Voce pode usar telefones IP, softphone no computador ou app no celular. Fazemos o levantamento do que pode ser reaproveitado.' },
    { q: 'Quanto tempo leva para implementar?', a: 'De 3 a 7 dias uteis apos aprovacao. A portabilidade do numero pode levar mais 3-5 dias. Fazemos todo o planejamento para transicao sem downtime.' },
  ];

  return (
    <div ref={pageRef} className="min-h-screen bg-[#0e0e0e]">
      <title>PABX VOIP Empresarial | Avanzato Tecnologia</title>
      <meta name="description" content="Reduza sua conta de telefone em ate 70% com PABX VOIP. Ramal no celular, multi-filial, URA e gravacao de chamadas." />

      <section className="relative min-h-[90vh] flex items-center bg-[#0e0e0e]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1557200134-90327ee9fafa?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"><Phone className="w-4 h-4" /> PABX VOIP</div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">Reduza sua conta de telefone em <span className="text-[#ffc300]">ate 70%</span></h1>
              <p className="text-xl text-gray-300 mb-6">PABX VOIP com ramal no celular, atendimento multi-filial e reducao drastica dos custos de telefonia.</p>
              <p className="text-gray-400 mb-8">Empresas que migram para VOIP economizam entre 50% e 70% na telefonia. Pague menos e tenha muito mais funcionalidades.</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">Solicitar orcamento <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 telefonia esta custando caro?</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Veja os problemas mais comuns que resolvemos com VOIP.</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 VOIP entrega</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Funcionalidades modernas que o PABX analogico nunca tera.</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: '70%', label: 'Economia na telefonia' }, { number: '100+', label: 'Migracoes realizadas' }, { number: '99.9%', label: 'Uptime do PABX' }].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">Pare de pagar caro por telefonia limitada</h2>
          <p className="text-gray-400 text-lg mb-8 gsap-item">Solicite um orcamento de migracao para VOIP. Economize e modernize sua comunicacao.</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 orcamento <ArrowRight className="w-5 h-5 ml-2" /></Button></a></div>
        </div>
      </section>
    </div>
  );
}