import { useEffect, useRef, useState } from 'react';
import { sendLeadToMautic, sendLeadViaMailto, trackConversion, trackFacebookPixel } from '../config/mautic';
import { gsap } from 'gsap';
import { 
  Phone, 
  Server, 
  Shield, 
  Wifi, 
  Camera, 
  Lock, 
  Zap, 
  CheckCircle2, 
  ArrowRight,
  Building2,
  Users,
  Wallet,
  TrendingDown,
  Headphones,
  FileCheck,
  Clock,
  ChevronRight,
  HardDrive,
  Network,
  BatteryCharging
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';

interface FormData {
  nome: string;
  condominio: string;
  unidades: string;
  cidade: string;
  whatsapp: string;
  email: string;
  portariaRemota: string;
  possuiCpd: string;
}

const Condominios = () => {
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [formData, setFormData] = useState<FormData>({
    nome: '',
    condominio: '',
    unidades: '',
    cidade: '',
    whatsapp: '',
    email: '',
    portariaRemota: '',
    possuiCpd: ''
  });

  const heroRef = useRef<HTMLDivElement>(null);
  const problemaRef = useRef<HTMLDivElement>(null);
  const solucaoRef = useRef<HTMLDivElement>(null);
  const voipRef = useRef<HTMLDivElement>(null);
  const cpdRef = useRef<HTMLDivElement>(null);
  const economiaRef = useRef<HTMLDivElement>(null);
  const diferencialRef = useRef<HTMLDivElement>(null);
  const comoFuncionaRef = useRef<HTMLDivElement>(null);
  const casosUsoRef = useRef<HTMLDivElement>(null);
  const ctaRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      // Hero animation
      const heroElements = heroRef.current?.querySelectorAll('.hero-animate');
      if (heroElements && heroElements.length > 0) {
        gsap.fromTo(
          heroElements,
          { y: 40, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.8,
            stagger: 0.15,
            ease: 'expo.out',
          }
        );
      }

      // Section animations
      const sections = [
        problemaRef,
        solucaoRef,
        voipRef,
        cpdRef,
        economiaRef,
        diferencialRef,
        comoFuncionaRef,
        casosUsoRef,
        ctaRef,
      ];

      sections.forEach((ref) => {
        if (ref.current) {
          const sectionElements = ref.current.querySelectorAll('.section-animate');
          if (sectionElements.length > 0) {
            gsap.fromTo(
              sectionElements,
              { y: 50, opacity: 0 },
              {
                y: 0,
                opacity: 1,
                duration: 0.7,
                stagger: 0.1,
                ease: 'expo.out',
                scrollTrigger: {
                  trigger: ref.current,
                  start: 'top 80%',
                  toggleActions: 'play none none reverse',
                },
              }
            );
          }
        }
      });
    });

    return () => ctx.revert();
  }, []);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Google Ads conversion tracking
    trackConversion();
    
    // Facebook Pixel - Lead
    trackFacebookPixel('Lead', {
      content_name: 'Formulario Condominio',
      content_category: 'lead_condominio',
    });

    // Enviar ao Mautic (Form ID 2) - sincrono via iframe
    const mauticSuccess = sendLeadToMautic('condominio', {
      nome: formData.nome,
      condominio: formData.condominio,
      unidades: formData.unidades,
      cidade: formData.cidade,
      whatsapp: formData.whatsapp,
      email: formData.email,
      portaria_remota: formData.portariaRemota,
      possui_cpd: formData.possuiCpd,
    });

    if (!mauticSuccess) {
      sendLeadViaMailto({
        nome: formData.nome,
        condominio: formData.condominio,
        email: formData.email,
      });
    }

    setIsDialogOpen(true);
  };

  const scrollToForm = () => {
    ctaRef.current?.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div className="min-h-screen bg-[#0e0e0e]">
      {/* SEO Meta Tags - Injected via useEffect */}
      <title>Tecnologia para Condomínios | VOIP e Infraestrutura | Avanzato</title>
      <meta name="description" content="Reduza custos e tenha independência com VOIP e infraestrutura para condomínios. Diagnóstico gratuito com a Avanzato." />
      <meta name="keywords" content="tecnologia para condomínios, voip para condomínio, infraestrutura de TI condomínio, cpd condomínio, rede para condomínio, portaria remota tecnologia" />
      <link rel="canonical" href="/tecnologia-para-condominios" />

      {/* HERO */}
      <section
        ref={heroRef}
        className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
      >
        {/* Background */}
        <div className="absolute inset-0 bg-gradient-to-br from-[#0e0e0e] via-[#141414] to-[#0e0e0e]" />
        <div className="absolute top-0 right-0 w-[600px] h-[600px] bg-[#cbf400]/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/4" />
        <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-[#cbf400]/3 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/4" />

        <div className="container-custom relative z-10 py-20">
          <div className="max-w-4xl mx-auto text-center">
            <div className="hero-animate inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#cbf400]/10 border border-[#cbf400]/20 mb-6">
              <Building2 className="w-4 h-4 text-[#cbf400]" />
              <span className="text-[#cbf400] text-sm font-medium">Soluções para Condomínios</span>
            </div>

            <h1 className="hero-animate text-4xl md:text-5xl lg:text-6xl font-black text-white mb-6 leading-tight">
              Tecnologia para Condomínios que{' '}
              <span className="text-gradient">Não Podem Parar</span>
            </h1>

            <p className="hero-animate text-xl md:text-2xl text-gray-300 mb-4 font-medium">
              Infraestrutura própria, redução de custos e independência de fornecedores.
            </p>

            <p className="hero-animate text-gray-400 text-lg mb-10 max-w-2xl mx-auto">
              Tenha controle total da tecnologia do seu condomínio: comunicação, segurança e operação funcionando 24 horas por dia.
            </p>

            <div className="hero-animate flex flex-col sm:flex-row gap-4 justify-center">
              <Button
                onClick={scrollToForm}
                className="bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000] px-8 py-6 text-lg font-bold rounded-xl transition-all duration-300 hover:scale-105"
              >
                Solicitar Diagnóstico Gratuito
                <ArrowRight className="ml-2 w-5 h-5" />
              </Button>
            </div>

            {/* Stats */}
            <div className="hero-animate grid grid-cols-2 md:grid-cols-4 gap-6 mt-16">
              {[
                { valor: '500+', label: 'Condomínios atendidos' },
                { valor: '11', label: 'Anos de experiência' },
                { valor: '40%', label: 'Economia média' },
                { valor: '24/7', label: 'Monitoramento' },
              ].map((stat, i) => (
                <div key={i} className="text-center">
                  <div className="text-3xl md:text-4xl font-black text-[#cbf400] mb-1">{stat.valor}</div>
                  <div className="text-gray-500 text-sm">{stat.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Scroll indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
          <div className="w-6 h-10 border-2 border-white/20 rounded-full flex justify-center pt-2">
            <div className="w-1.5 h-1.5 bg-[#cbf400] rounded-full" />
          </div>
        </div>
      </section>

      {/* PROBLEMA */}
      <section ref={problemaRef} className="section-padding bg-[#0e0e0e] relative">
        <div className="container-custom">
          <div className="max-w-4xl mx-auto">
            <div className="section-animate text-center mb-12">
              <span className="inline-block px-4 py-2 rounded-full bg-red-500/10 text-red-400 text-sm font-semibold mb-4 border border-red-500/20">
                O Problema
              </span>
              <h2 className="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
                Seu condomínio está{' '}
                <span className="text-red-400">dependente demais</span> de fornecedores?
              </h2>
            </div>

            <div className="section-animate grid md:grid-cols-2 gap-6 mb-12">
              {[
                {
                  icon: <Users className="w-6 h-6 text-red-400" />,
                  text: 'Troca de empresa de portaria = troca de toda infraestrutura'
                },
                {
                  icon: <Wallet className="w-6 h-6 text-red-400" />,
                  text: 'Alto custo com interfone e telefonia tradicional'
                },
                {
                  icon: <Lock className="w-6 h-6 text-red-400" />,
                  text: 'Falta de controle sobre sistemas críticos'
                },
                {
                  icon: <Server className="w-6 h-6 text-red-400" />,
                  text: 'Equipamentos desorganizados ou sem padrão'
                },
                {
                  icon: <Zap className="w-6 h-6 text-red-400" />,
                  text: 'Risco de parada total por falhas simples'
                },
                {
                  icon: <Clock className="w-6 h-6 text-red-400" />,
                  text: 'Dependência de horário comercial para suporte'
                },
              ].map((item, i) => (
                <div
                  key={i}
                  className="flex items-start gap-4 p-5 bg-[#1a1a1a] rounded-xl border border-white/5"
                >
                  <div className="flex-shrink-0 w-12 h-12 rounded-lg bg-red-500/10 flex items-center justify-center">
                    {item.icon}
                  </div>
                  <p className="text-gray-300">{item.text}</p>
                </div>
              ))}
            </div>

            <div className="section-animate text-center p-8 bg-gradient-to-r from-red-500/10 to-orange-500/10 rounded-2xl border border-red-500/20">
              <p className="text-xl md:text-2xl font-bold text-white">
                A portaria pode mudar. A tecnologia do condomínio{' '}
                <span className="text-[#cbf400]">não deveria.</span>
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SOLUÇÃO */}
      <section ref={solucaoRef} className="section-padding bg-[#141414] relative">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-[#cbf400]/5 rounded-full blur-[150px]" />
        
        <div className="container-custom relative z-10">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
              A Solução
            </div>
            <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
              Infraestrutura <span className="text-gradient">própria e inteligente</span> para condomínios
            </h2>
            <p className="section-animate text-gray-400 text-lg">
              A Avanzato entrega uma solução completa baseada em dois pilares:
            </p>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {/* Pilar 1: VOIP */}
            <div className="section-animate bg-[#1a1a1a] rounded-2xl p-8 border border-[#cbf400]/20 hover:border-[#cbf400]/40 transition-all duration-300">
              <div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-6">
                <Phone className="w-8 h-8 text-[#cbf400]" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">
                Pilar 1: Comunicação com VOIP
              </h3>
              <ul className="space-y-3">
                {[
                  'Ramais internos inteligentes',
                  'Integração com portaria remota',
                  'Sem dependência de linhas telefônicas',
                  'Redução de custos operacionais',
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 text-gray-300">
                    <CheckCircle2 className="w-5 h-5 text-[#cbf400] flex-shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>

            {/* Pilar 2: CPD */}
            <div className="section-animate bg-[#1a1a1a] rounded-2xl p-8 border border-[#cbf400]/20 hover:border-[#cbf400]/40 transition-all duration-300">
              <div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-6">
                <Server className="w-8 h-8 text-[#cbf400]" />
              </div>
              <h3 className="text-2xl font-bold text-white mb-4">
                Pilar 2: Gestão de CPD e Infraestrutura
              </h3>
              <ul className="space-y-3">
                {[
                  'Organização e padronização do ambiente',
                  'Monitoramento 24x7',
                  'Segurança e continuidade operacional',
                  'Redução de riscos',
                ].map((item, i) => (
                  <li key={i} className="flex items-center gap-3 text-gray-300">
                    <CheckCircle2 className="w-5 h-5 text-[#cbf400] flex-shrink-0" />
                    {item}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* VOIP PARA CONDOMÍNIOS */}
      <section ref={voipRef} className="section-padding bg-[#0e0e0e] relative">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
                Comunicação Moderna
              </div>
              <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
                Sistema de comunicação{' '}
                <span className="text-gradient">moderno e econômico</span>
              </h2>
              <p className="section-animate text-gray-400 text-lg mb-8">
                Substitua sistemas antigos de interfone por uma solução moderna baseada em rede.
              </p>

              <div className="section-animate space-y-4 mb-8">
                <h4 className="text-white font-semibold mb-4">Benefícios:</h4>
                {[
                  'Comunicação entre portaria e moradores via ramais',
                  'Integração com portões e áreas comuns',
                  'Uso da rede existente',
                  'Escalabilidade sem grandes obras',
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className="w-6 h-6 rounded-full bg-[#cbf400]/20 flex items-center justify-center">
                      <ChevronRight className="w-4 h-4 text-[#cbf400]" />
                    </div>
                    <span className="text-gray-300">{item}</span>
                  </div>
                ))}
              </div>

              {/* Oferta Especial */}
              <div className="section-animate bg-gradient-to-r from-[#cbf400]/20 to-[#cbf400]/5 rounded-xl p-6 border border-[#cbf400]/30">
                <div className="flex items-center gap-3 mb-4">
                  <span className="text-2xl">🎁</span>
                  <h4 className="text-[#cbf400] font-bold text-lg">Oferta Especial</h4>
                </div>
                <p className="text-white font-medium mb-3">
                  Condomínios com mais de 100 unidades:
                </p>
                <p className="text-gray-300 text-sm mb-4">
                  Ramais de áreas comuns <span className="text-[#cbf400] font-bold">GRATUITOS</span>:
                </p>
                <div className="grid grid-cols-2 gap-2">
                  {['Portaria', 'Portões', 'Piscina', 'Áreas técnicas'].map((area, i) => (
                    <div key={i} className="flex items-center gap-2 text-gray-400 text-sm">
                      <CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
                      {area}
                    </div>
                  ))}
                </div>
              </div>
            </div>

            <div className="section-animate relative">
              <div className="absolute inset-0 bg-[#cbf400]/10 rounded-3xl blur-3xl" />
              <div className="relative bg-[#1a1a1a] rounded-3xl p-8 border border-white/10">
                <div className="flex items-center justify-center mb-8">
                  <div className="w-32 h-32 rounded-full bg-[#cbf400]/10 flex items-center justify-center">
                    <Phone className="w-16 h-16 text-[#cbf400]" />
                  </div>
                </div>
                
                <div className="space-y-4">
                  <div className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-[#cbf400]/20 flex items-center justify-center">
                        <Building2 className="w-5 h-5 text-[#cbf400]" />
                      </div>
                      <span className="text-white">Portaria</span>
                    </div>
                    <span className="text-[#cbf400] font-mono">Ramal 100</span>
                  </div>
                  
                  <div className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center">
                        <Users className="w-5 h-5 text-blue-400" />
                      </div>
                      <span className="text-white">Apartamento 101</span>
                    </div>
                    <span className="text-blue-400 font-mono">Ramal 101</span>
                  </div>
                  
                  <div className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
                    <div className="flex items-center gap-3">
                      <div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center">
                        <Wifi className="w-5 h-5 text-purple-400" />
                      </div>
                      <span className="text-white">Área Comum</span>
                    </div>
                    <span className="text-purple-400 font-mono">Ramal 200</span>
                  </div>
                </div>

                <div className="mt-6 p-4 bg-[#cbf400]/10 rounded-xl border border-[#cbf400]/20">
                  <p className="text-center text-[#cbf400] text-sm font-medium">
                    💡 Economia de até 60% na telefonia
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CPD E INFRAESTRUTURA */}
      <section ref={cpdRef} className="section-padding bg-[#141414] relative">
        <div className="absolute top-1/2 left-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-[150px] -translate-y-1/2 -translate-x-1/2" />
        
        <div className="container-custom relative z-10">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
              Infraestrutura Profissional
            </div>
            <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
              Tecnologia com <span className="text-gradient">padrão corporativo</span> dentro do condomínio
            </h2>
            <p className="section-animate text-gray-400 text-lg">
              Condomínios de alto padrão precisam de tecnologia à altura.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            {/* Infraestrutura */}
            <div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
              <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4">
                <Server className="w-6 h-6 text-[#cbf400]" />
              </div>
              <h4 className="text-white font-bold mb-4">🔧 Infraestrutura</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li>• Rack organizado</li>
                <li>• Switches gerenciáveis</li>
                <li>• Firewall (pfSense)</li>
                <li>• Segmentação de rede (VLANs)</li>
              </ul>
            </div>

            {/* Conectividade */}
            <div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
              <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-4">
                <Wifi className="w-6 h-6 text-blue-400" />
              </div>
              <h4 className="text-white font-bold mb-4">🌐 Conectividade</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li>• Múltiplos links de internet</li>
                <li>• Failover automático</li>
                <li>• Balanceamento de carga</li>
                <li>• VPN segura</li>
              </ul>
            </div>

            {/* CFTV */}
            <div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
              <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-4">
                <Camera className="w-6 h-6 text-purple-400" />
              </div>
              <h4 className="text-white font-bold mb-4">🎥 CFTV</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li>• Armazenamento de imagens</li>
                <li>• Alta performance</li>
                <li>• Acesso remoto seguro</li>
                <li>• Backup automático</li>
              </ul>
            </div>

            {/* Segurança */}
            <div className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300">
              <div className="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center mb-4">
                <Lock className="w-6 h-6 text-red-400" />
              </div>
              <h4 className="text-white font-bold mb-4">🔐 Segurança</h4>
              <ul className="space-y-2 text-gray-400 text-sm">
                <li>• Controle de acesso integrado</li>
                <li>• Proteção de rede</li>
                <li>• Logs e auditoria</li>
                <li>• Monitoramento 24/7</li>
              </ul>
            </div>
          </div>

          {/* Continuidade */}
          <div className="section-animate mt-8 bg-gradient-to-r from-[#1a1a1a] to-[#141414] rounded-2xl p-8 border border-[#cbf400]/20">
            <div className="flex flex-col md:flex-row items-center gap-6">
              <div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center flex-shrink-0">
                <BatteryCharging className="w-8 h-8 text-[#cbf400]" />
              </div>
              <div className="flex-1">
                <h4 className="text-white font-bold text-xl mb-2">⚡ Continuidade Operacional</h4>
                <div className="grid md:grid-cols-3 gap-4 text-gray-400 text-sm">
                  <div className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
                    Nobreaks (UPS)
                  </div>
                  <div className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
                    Integração com gerador
                  </div>
                  <div className="flex items-center gap-2">
                    <CheckCircle2 className="w-4 h-4 text-[#cbf400]" />
                    Alta disponibilidade
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="section-animate mt-12 text-center p-8 bg-gradient-to-r from-[#cbf400]/10 to-transparent rounded-2xl border border-[#cbf400]/20">
            <p className="text-xl md:text-2xl font-bold text-white">
              Seu condomínio pode ter milhões em patrimônio, mas a tecnologia{' '}
              <span className="text-[#cbf400]">precisa acompanhar esse nível.</span>
            </p>
          </div>
        </div>
      </section>

      {/* ECONOMIA */}
      <section ref={economiaRef} className="section-padding bg-[#0e0e0e] relative">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="section-animate order-2 lg:order-1">
              <div className="relative">
                <div className="absolute inset-0 bg-[#cbf400]/10 rounded-3xl blur-3xl" />
                <div className="relative bg-[#1a1a1a] rounded-3xl p-8 border border-white/10">
                  <div className="text-center mb-8">
                    <TrendingDown className="w-20 h-20 text-[#cbf400] mx-auto mb-4" />
                    <h3 className="text-3xl font-black text-white">Economia Real</h3>
                  </div>
                  
                  <div className="space-y-4">
                    {[
                      { label: 'Linhas telefônicas', economia: '-60%' },
                      { label: 'Cabeamento tradicional', economia: '-50%' },
                      { label: 'Reinstalações', economia: '-80%' },
                      { label: 'Manutenção corretiva', economia: '-70%' },
                    ].map((item, i) => (
                      <div key={i} className="flex items-center justify-between p-4 bg-[#0e0e0e] rounded-xl">
                        <span className="text-gray-300">{item.label}</span>
                        <span className="text-[#cbf400] font-bold text-xl">{item.economia}</span>
                      </div>
                    ))}
                  </div>

                  <div className="mt-6 p-4 bg-[#cbf400]/10 rounded-xl border border-[#cbf400]/20 text-center">
                    <p className="text-[#cbf400] font-bold text-lg">ROI em até 18 meses</p>
                  </div>
                </div>
              </div>

              {/* Caso Real */}
              <div className="section-animate mt-8 relative">
                <div className="absolute inset-0 bg-gradient-to-r from-[#cbf400]/20 to-green-500/10 rounded-3xl blur-xl" />
                <div className="relative bg-gradient-to-br from-[#1a1a1a] to-[#0e0e0e] rounded-3xl p-8 border border-[#cbf400]/30">
                  <div className="flex items-center gap-3 mb-6">
                    <span className="text-3xl">🏆</span>
                    <div>
                      <h4 className="text-[#cbf400] font-bold text-lg">Caso Real</h4>
                      <p className="text-gray-500 text-sm">Condomínio em São Paulo</p>
                    </div>
                  </div>

                  <div className="grid md:grid-cols-2 gap-6">
                    {/* Cabeamento Tradicional */}
                    <div className="p-5 bg-red-500/10 rounded-xl border border-red-500/20">
                      <p className="text-red-400 text-sm font-medium mb-2">Cabeamento tradicional</p>
                      <p className="text-4xl font-black text-red-400">R$ 90.000</p>
                      <p className="text-gray-500 text-sm mt-2">Investimento inicial</p>
                    </div>

                    {/* VOIP Avanzato */}
                    <div className="p-5 bg-[#cbf400]/10 rounded-xl border border-[#cbf400]/30">
                      <p className="text-[#cbf400] text-sm font-medium mb-2">Implantação VOIP</p>
                      <p className="text-4xl font-black text-[#cbf400]">R$ 9.000</p>
                      <p className="text-gray-500 text-sm mt-2">+ R$ 3.000/mês</p>
                    </div>
                  </div>

                  <div className="mt-6 p-4 bg-[#cbf400]/20 rounded-xl text-center">
                    <p className="text-white font-bold text-xl">
                      Economia de <span className="text-[#cbf400]">90%</span> no investimento inicial
                    </p>
                    <p className="text-gray-400 text-sm mt-1">
                      Mesma funcionalidade, sem obras, sem quebra-quebra
                    </p>
                  </div>
                </div>
              </div>
            </div>

            <div className="order-1 lg:order-2">
              <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
                Retorno sobre Investimento
              </div>
              <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
                Redução <span className="text-gradient">real de custos</span> ao longo do tempo
              </h2>
              <p className="section-animate text-gray-400 text-lg mb-8">
                Com a solução Avanzato, o condomínio economiza em diversas áreas:
              </p>

              <div className="section-animate space-y-4 mb-8">
                {[
                  'Linhas telefônicas tradicionais',
                  'Cabeamento e infraestrutura obsoleta',
                  'Reinstalações a cada troca de prestador',
                  'Manutenção corretiva emergencial',
                  'Dependência de fornecedores externos',
                ].map((item, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <div className="w-6 h-6 rounded-full bg-red-500/20 flex items-center justify-center">
                      <TrendingDown className="w-4 h-4 text-red-400" />
                    </div>
                    <span className="text-gray-300">{item}</span>
                  </div>
                ))}
              </div>

              <div className="section-animate bg-gradient-to-r from-[#cbf400]/20 to-[#cbf400]/5 rounded-xl p-6 border border-[#cbf400]/30">
                <div className="flex items-center gap-3">
                  <Wallet className="w-8 h-8 text-[#cbf400]" />
                  <div>
                    <p className="text-white font-bold text-lg">Investimento único</p>
                    <p className="text-gray-400">com economia contínua</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* DIFERENCIAL AVANZATO */}
      <section ref={diferencialRef} className="section-padding bg-[#141414] relative">
        <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-[150px]" />
        
        <div className="container-custom relative z-10">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
              Por que a Avanzato?
            </div>
            <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
              Mais do que tecnologia:{' '}
              <span className="text-gradient">continuidade operacional</span>
            </h2>
            <p className="section-animate text-gray-400 text-lg">
              A Avanzato não vende equipamentos. Nós garantimos que o seu condomínio funcione sempre.
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: <Building2 className="w-6 h-6 text-[#cbf400]" />,
                title: 'Visão corporativa',
                desc: 'Aplicada a condomínios de todos os portes'
              },
              {
                icon: <HardDrive className="w-6 h-6 text-[#cbf400]" />,
                title: 'Ambientes críticos',
                desc: 'Experiência com infraestrutura de missão crítica'
              },
              {
                icon: <Clock className="w-6 h-6 text-[#cbf400]" />,
                title: 'Monitoramento contínuo',
                desc: '24x7 com alertas em tempo real'
              },
              {
                icon: <FileCheck className="w-6 h-6 text-[#cbf400]" />,
                title: 'Documentação completa',
                desc: 'Todo o ambiente mapeado e documentado'
              },
              {
                icon: <Headphones className="w-6 h-6 text-[#cbf400]" />,
                title: 'Suporte especializado',
                desc: 'Equipe técnica qualificada e disponível'
              },
              {
                icon: <Shield className="w-6 h-6 text-[#cbf400]" />,
                title: 'Garantia de serviço',
                desc: 'SLA definido e cumprido rigorosamente'
              },
            ].map((item, i) => (
              <div
                key={i}
                className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300 group"
              >
                <div className="w-14 h-14 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4 group-hover:bg-[#cbf400]/20 transition-colors">
                  {item.icon}
                </div>
                <h4 className="text-white font-bold text-lg mb-2">{item.title}</h4>
                <p className="text-gray-400 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* COMO FUNCIONA */}
      <section ref={comoFuncionaRef} className="section-padding bg-[#0e0e0e] relative">
        <div className="container-custom">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
              Processo
            </div>
            <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
              Implantação <span className="text-gradient">simples e estruturada</span>
            </h2>
          </div>

          <div className="grid md:grid-cols-4 gap-6">
            {[
              {
                step: '01',
                icon: <Network className="w-8 h-8 text-[#cbf400]" />,
                title: 'Diagnóstico',
                desc: 'Análise completa do ambiente atual e necessidades'
              },
              {
                step: '02',
                icon: <FileCheck className="w-8 h-8 text-[#cbf400]" />,
                title: 'Projeto',
                desc: 'Solução personalizada com cronograma detalhado'
              },
              {
                step: '03',
                icon: <Server className="w-8 h-8 text-[#cbf400]" />,
                title: 'Implantação',
                desc: 'Execução profissional com mínimo de interrupção'
              },
              {
                step: '04',
                icon: <Headphones className="w-8 h-8 text-[#cbf400]" />,
                title: 'Suporte',
                desc: 'Monitoramento contínuo e atendimento especializado'
              },
            ].map((item, i) => (
              <div key={i} className="section-animate relative">
                {i < 3 && (
                  <div className="hidden md:block absolute top-16 left-full w-full h-0.5 bg-gradient-to-r from-[#cbf400]/50 to-transparent" />
                )}
                <div className="bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300 text-center">
                  <div className="text-5xl font-black text-[#cbf400]/20 mb-4">{item.step}</div>
                  <div className="w-16 h-16 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mx-auto mb-4">
                    {item.icon}
                  </div>
                  <h4 className="text-white font-bold text-lg mb-2">{item.title}</h4>
                  <p className="text-gray-400 text-sm">{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CASOS DE USO */}
      <section ref={casosUsoRef} className="section-padding bg-[#141414] relative">
        <div className="container-custom">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
              Aplicações
            </div>
            <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
              Onde nossa solução <span className="text-gradient">se aplica</span>
            </h2>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                icon: <Building2 className="w-6 h-6 text-[#cbf400]" />,
                title: 'Condomínios novos',
                desc: 'Implantação desde o projeto, com tecnologia de ponta'
              },
              {
                icon: <Zap className="w-6 h-6 text-[#cbf400]" />,
                title: 'Modernização',
                desc: 'Atualização de sistemas antigos e obsoletos'
              },
              {
                icon: <Users className="w-6 h-6 text-[#cbf400]" />,
                title: 'Troca de portaria',
                desc: 'Mudança de empresa sem perder investimento'
              },
              {
                icon: <AlertTriangle className="w-6 h-6 text-[#cbf400]" />,
                title: 'Falhas recorrentes',
                desc: 'Ambientes com problemas constantes de tecnologia'
              },
              {
                icon: <Star className="w-6 h-6 text-[#cbf400]" />,
                title: 'Alto padrão',
                desc: 'Condomínios que exigem tecnologia de excelência'
              },
              {
                icon: <TrendingDown className="w-6 h-6 text-[#cbf400]" />,
                title: 'Redução de custos',
                desc: 'Condomínios buscando economia sem perder qualidade'
              },
            ].map((item, i) => (
              <div
                key={i}
                className="section-animate bg-[#1a1a1a] rounded-2xl p-6 border border-white/5 hover:border-[#cbf400]/30 transition-all duration-300"
              >
                <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center mb-4">
                  {item.icon}
                </div>
                <h4 className="text-white font-bold text-lg mb-2">{item.title}</h4>
                <p className="text-gray-400 text-sm">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA + FORMULÁRIO */}
      <section ref={ctaRef} className="section-padding bg-[#0e0e0e] relative">
        <div className="absolute inset-0 bg-gradient-to-b from-[#141414] to-[#0e0e0e]" />
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[600px] bg-[#cbf400]/5 rounded-full blur-[150px]" />
        
        <div className="container-custom relative z-10">
          <div className="max-w-4xl mx-auto">
            <div className="text-center mb-12">
              <div className="section-animate inline-block px-4 py-2 rounded-full bg-[#cbf400]/10 text-[#cbf400] text-sm font-semibold mb-4 border border-[#cbf400]/20">
                Comece Agora
              </div>
              <h2 className="section-animate text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6">
                Descubra o <span className="text-gradient">potencial tecnológico</span> do seu condomínio
              </h2>
              <p className="section-animate text-gray-400 text-lg">
                Solicite um diagnóstico gratuito e veja como reduzir custos e aumentar a segurança.
              </p>
            </div>

            <div className="section-animate bg-[#1a1a1a] rounded-3xl p-8 md:p-12 border border-white/10">
              <form onSubmit={handleSubmit} className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="nome" className="text-white">Nome completo *</Label>
                    <Input
                      id="nome"
                      name="nome"
                      value={formData.nome}
                      onChange={handleInputChange}
                      placeholder="Seu nome"
                      required
                      className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="condominio" className="text-white">Nome do Condomínio *</Label>
                    <Input
                      id="condominio"
                      name="condominio"
                      value={formData.condominio}
                      onChange={handleInputChange}
                      placeholder="Nome do condomínio"
                      required
                      className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
                    />
                  </div>
                </div>

                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="unidades" className="text-white">Número de unidades *</Label>
                    <Input
                      id="unidades"
                      name="unidades"
                      value={formData.unidades}
                      onChange={handleInputChange}
                      placeholder="Ex: 120"
                      required
                      className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="cidade" className="text-white">Cidade *</Label>
                    <Input
                      id="cidade"
                      name="cidade"
                      value={formData.cidade}
                      onChange={handleInputChange}
                      placeholder="Sua cidade"
                      required
                      className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
                    />
                  </div>
                </div>

                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-2">
                    <Label htmlFor="whatsapp" className="text-white">WhatsApp *</Label>
                    <Input
                      id="whatsapp"
                      name="whatsapp"
                      value={formData.whatsapp}
                      onChange={handleInputChange}
                      placeholder="(11) 99999-9999"
                      required
                      className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="email" className="text-white">E-mail *</Label>
                    <Input
                      id="email"
                      name="email"
                      type="email"
                      value={formData.email}
                      onChange={handleInputChange}
                      placeholder="seu@email.com"
                      required
                      className="bg-[#0e0e0e] border-white/10 text-white placeholder:text-gray-500 focus:border-[#cbf400]"
                    />
                  </div>
                </div>

                <div className="grid md:grid-cols-2 gap-6">
                  <div className="space-y-3">
                    <Label className="text-white">Usa portaria remota?</Label>
                    <RadioGroup
                      value={formData.portariaRemota}
                      onValueChange={(value) => setFormData(prev => ({ ...prev, portariaRemota: value }))}
                      className="flex gap-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="sim" id="portaria-sim" className="border-white/20 text-[#cbf400]" />
                        <Label htmlFor="portaria-sim" className="text-gray-300">Sim</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="nao" id="portaria-nao" className="border-white/20 text-[#cbf400]" />
                        <Label htmlFor="portaria-nao" className="text-gray-300">Não</Label>
                      </div>
                    </RadioGroup>
                  </div>
                  <div className="space-y-3">
                    <Label className="text-white">Possui sala técnica/CPD?</Label>
                    <RadioGroup
                      value={formData.possuiCpd}
                      onValueChange={(value) => setFormData(prev => ({ ...prev, possuiCpd: value }))}
                      className="flex gap-4"
                    >
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="sim" id="cpd-sim" className="border-white/20 text-[#cbf400]" />
                        <Label htmlFor="cpd-sim" className="text-gray-300">Sim</Label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <RadioGroupItem value="nao" id="cpd-nao" className="border-white/20 text-[#cbf400]" />
                        <Label htmlFor="cpd-nao" className="text-gray-300">Não</Label>
                      </div>
                    </RadioGroup>
                  </div>
                </div>

                <Button
                  type="submit"
                  className="w-full bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000] py-6 text-lg font-bold rounded-xl transition-all duration-300 hover:scale-[1.02]"
                >
                  Quero meu diagnóstico gratuito
                  <ArrowRight className="ml-2 w-5 h-5" />
                </Button>

                <p className="text-center text-gray-500 text-sm">
                  Seus dados estão seguros. Não enviamos spam.
                </p>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* Dialog de confirmação */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="bg-[#1a1a1a] border-white/10 text-white">
          <DialogHeader>
            <DialogTitle className="text-2xl font-bold text-center">
              <span className="text-[#cbf400]">✓</span> Solicitação enviada!
            </DialogTitle>
          </DialogHeader>
          <div className="text-center py-4">
            <p className="text-gray-300 mb-4">
              Obrigado pelo interesse! Nossa equipe entrará em contato em até 24 horas úteis.
            </p>
            <Button
              onClick={() => setIsDialogOpen(false)}
              className="bg-[#cbf400] text-[#0e0e0e] hover:bg-[#b8e000]"
            >
              Entendi
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* SEO Content - Hidden but indexable */}
      <section className="sr-only">
        <h1>Tecnologia para Condomínios | VOIP e Infraestrutura | Avanzato</h1>
        <p>Reduza custos e tenha independência com VOIP e infraestrutura para condomínios. Diagnóstico gratuito com a Avanzato.</p>
        <p>Palavras-chave: tecnologia para condomínios, voip para condomínio, infraestrutura de TI condomínio, cpd condomínio, rede para condomínio, portaria remota tecnologia</p>
        
        <article>
          <h2>Quanto custa depender da portaria remota?</h2>
          <p>Muitos condomínios não percebem o custo oculto da dependência tecnológica de empresas de portaria remota. A cada troca de prestador, todo o investimento em equipamentos e infraestrutura pode ser perdido.</p>
          <p>Com a solução Avanzato, o condomínio mantém o controle da própria tecnologia, independente de qual empresa preste o serviço de portaria.</p>
        </article>
      </section>
    </div>
  );
};

// Ícones adicionais
const AlertTriangle = ({ className }: { className?: string }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
  </svg>
);

const Star = ({ className }: { className?: string }) => (
  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
  </svg>
);

export default Condominios;