import { useEffect, useRef, useState } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import {
  Video,
  Camera,
  Eye,
  Server,
  Monitor,
  HardDrive,
  AlertTriangle,
  Wifi,
  Phone,
  ArrowRight,
} 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 Monitoramento/CFTV 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: `Monitoramento - ${formData.tamanho}`,
      mensagem: `Nicho: Monitoramento/CFTV | 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 gratuito de CFTV</h3>
        <p className="text-gray-400 mb-6">Avaliamos sua estrutura e indicamos a melhor solucao de cameras e monitoramento para seu espaco.</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">Nome da empresa</Label><Input value={formData.empresa} onChange={e => handleChange('empresa', e.target.value)} placeholder="Sua empresa" className="bg-[#2a2a2a] border-[#444] text-white mt-1" /></div>
          <div><Label className="text-gray-300">Tamanho do espaco</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="pequeno">Ate 500m2</SelectItem><SelectItem value="medio">500m2 a 2000m2</SelectItem><SelectItem value="grande">2000m2 a 5000m2</SelectItem><SelectItem value="muito-grande">Acima de 5000m2</SelectItem></SelectContent></Select></div>
          <div><Label className="text-gray-300">Maior necessidade</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="instalacao">Instalacao de cameras novas</SelectItem><SelectItem value="substituicao">Substituir sistema antigo</SelectItem><SelectItem value="remoto">Acesso remoto as cameras</SelectItem><SelectItem value="gravacao">Mais tempo de gravacao</SelectItem><SelectItem value="inteligente">Cameras com IA</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 necessidade..." 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 MonitoramentoPage() {
  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: 'Sistema de cameras defasado', desc: 'Cameras antigas com imagem ruim, sem acesso remoto e gravacao que apaga em poucos dias. Inutil em caso de incidente.' },
    { icon: <Eye className="w-8 h-8 text-red-400" />, title: 'Nao consegue acompanhar remotamente', desc: 'Dona ou gestor nao consegue ver as cameras pelo celular. Tem que estar no local para saber o que esta acontecendo.' },
    { icon: <HardDrive className="w-8 h-8 text-red-400" />, title: 'Gravacao se perde ou e curta', desc: 'DVR com HD cheio, gravacao sobrescreve em 3-5 dias. Quando precisa de uma imagem de uma semana atras, ja foi apagada.' },
    { icon: <Wifi className="w-8 h-8 text-red-400" />, title: 'Rede nao suporta cameras IP', desc: 'Quer cameras modernas mas a rede foi feita para computadores. Cameras travam, ficam sem imagem e a internet fica lenta.' },
  ];

  const solucoes = [
    { icon: <Camera className="w-10 h-10 text-[#ffc300]" />, title: 'Projeto de CFTV completo', desc: 'Analisamos seu espaco, definimos quantas cameras, angulos e tipo (bullet, dome, PTZ) sao ideais. Projeto tecnico sem compromisso.' },
    { icon: <Server className="w-10 h-10 text-[#ffc300]" />, title: 'NVR profissional com gravacao estendida', desc: 'Grave de 30 a 90 dias conforme sua necessidade. NVR com redundancia de disco e notificacao se houver falha no equipamento.' },
    { icon: <Monitor className="w-10 h-10 text-[#ffc300]" />, title: 'Acesso remoto multiplataforma', desc: 'Veja suas cameras pelo celular, tablet ou computador, de qualquer lugar. App dedicado com notificacao de movimento.' },
    { icon: <Video className="w-10 h-10 text-[#ffc300]" />, title: 'Cameras com inteligencia artificial', desc: 'Deteccao de pessoas, veiculos, objetos abandonados e contagem de pessoas. Reduz falsos alarmes em ate 90%.' },
  ];

  const faqs = [
    { q: 'Quanto tempo de gravacao consigo ter?', a: 'Depende do numero de cameras, resolucao e capacidade dos discos. Configuramos de 15 ate 90 dias de gravacao. Fazemos o dimensionamento correto no diagnostico.' },
    { q: 'Consigo ver pelo celular?', a: 'Sim. Todas as nossas solucoes incluem app mobile para iOS e Android. Voce acessa de qualquer lugar com internet.' },
    { q: 'Substituem sistemas antigos?', a: 'Sim. Fazemos a migracao completa, inclusive reaproveitando cabos quando possivel para reduzir custos. Removemos o equipamento antigo.' },
    { q: 'Cameras com IA sao caras?', a: 'Hoje em dia cameras com deteccao de pessoas ja tem custo similar as cameras tradicionais. A diferenca esta no NVR, que precisa suportar IA. Fazemos um projeto dentro do seu orcamento.' },
    { q: 'Demora quanto tempo para instalar?', a: 'Instalacoes de ate 16 cameras sao feitas em 1-2 dias. Projetos maiores sao feitos por fases, sem interromper sua operacao.' },
  ];

  return (
    <div ref={pageRef} className="min-h-screen bg-[#0e0e0e]">
      <title>Cameras de Seguranca e CFTV | Avanzato Tecnologia</title>
      <meta name="description" content="Projeto, instalacao e manutencao de cameras de seguranca e CFTV para empresas. Acesso remoto, gravacao estendida e cameras com IA." />

      <section className="relative min-h-[90vh] flex items-center bg-[#0e0e0e]">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1558618666-fcd25c85c82c?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"><Camera className="w-4 h-4" /> Especialistas em CFTV e Monitoramento</div>
              <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">Cameras de seguranca com <span className="text-[#ffc300]">acesso remoto</span></h1>
              <p className="text-xl text-gray-300 mb-6">Instalacao profissional de cameras IP, NVR com gravacao estendida e acesso pelo celular. Veja sua empresa de qualquer lugar.</p>
              <p className="text-gray-400 mb-8">Projetamos, instalamos e damos suporte completo para sistemas de CFTV. Do pequeno comercio ao grande galpao industrial.</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">Problemas comuns de CFTV</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Ja atendemos dezenas de empresas que sofriam com sistemas de camera mal instalados ou defasados.</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">Nossas solucoes de monitoramento</h2><p className="text-gray-400 text-lg max-w-3xl mx-auto">Do projeto a instalacao, cuidamos de tudo para voce ter um sistema de cameras funcional e confiavel.</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: '150+', label: 'Projetos de CFTV entregues' }, { number: '30-90', label: 'Dias de gravacao configuraveis' }, { number: '4K', label: 'Resolucao maxima disponivel' }].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">Quer um projeto de cameras para sua empresa?</h2>
          <p className="text-gray-400 text-lg mb-8 gsap-item">Solicite um orcamento sem compromisso. Fazemos uma visita tecnica e apresentamos o projeto ideal para seu espaco.</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>
  );
}
