import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { Building2, Phone, Server, ArrowRight, CheckCircle2, Shield, Wifi } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Link } from 'react-router-dom';

gsap.registerPlugin(ScrollTrigger);

const CondominiosCTA = () => {
  const sectionRef = useRef<HTMLDivElement>(null);
  const contentRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const ctx = gsap.context(() => {
      const elements = contentRef.current?.querySelectorAll('.animate-item');
      if (elements && elements.length > 0) {
        gsap.fromTo(
          elements,
          { y: 50, opacity: 0 },
          {
            y: 0,
            opacity: 1,
            duration: 0.7,
            stagger: 0.1,
            ease: 'expo.out',
            scrollTrigger: {
              trigger: sectionRef.current,
              start: 'top 80%',
              toggleActions: 'play none none reverse',
            },
          }
        );
      }
    }, sectionRef);

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

  const beneficios = [
    'Redução de até 90% no investimento inicial',
    'Independência de empresas de portaria',
    'Ramais gratuitos para áreas comuns',
    'Monitoramento 24/7',
  ];

  return (
    <section
      ref={sectionRef}
      className="section-padding bg-[#141414] relative overflow-hidden"
    >
      {/* Background decorations */}
      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-[#cbf400]/5 rounded-full blur-[120px] -translate-y-1/2 translate-x-1/4" />
      <div className="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[#cbf400]/3 rounded-full blur-[100px] translate-y-1/2 -translate-x-1/4" />

      <div className="container-custom relative z-10">
        <div
          ref={contentRef}
          className="bg-gradient-to-br from-[#1a1a1a] to-[#0e0e0e] rounded-3xl p-8 md:p-12 lg:p-16 border border-[#cbf400]/20 relative overflow-hidden"
        >
          {/* Badge */}
          <div className="animate-item 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">Nova Solução</span>
          </div>

          <div className="grid lg:grid-cols-2 gap-12 items-center">
            {/* Content */}
            <div>
              <h2 className="animate-item text-3xl md:text-4xl lg:text-5xl font-black text-white mb-6 leading-tight">
                Tecnologia para{' '}
                <span className="text-gradient">Condomínios</span>
              </h2>

              <p className="animate-item text-gray-400 text-lg mb-8">
                Infraestrutura própria, VOIP moderno e redução de custos. 
                Seu condomínio com tecnologia que não para.
              </p>

              {/* Benefícios */}
              <div className="animate-item space-y-3 mb-8">
                {beneficios.map((item, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <CheckCircle2 className="w-5 h-5 text-[#cbf400] flex-shrink-0" />
                    <span className="text-gray-300">{item}</span>
                  </div>
                ))}
              </div>

              {/* CTA Buttons */}
              <div className="animate-item flex flex-col sm:flex-row gap-4">
                <Link to="/tecnologia-para-condominios">
                  <Button 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 w-full sm:w-auto">
                    Conhecer Solução
                    <ArrowRight className="ml-2 w-5 h-5" />
                  </Button>
                </Link>
                <Link to="/contato">
                  <Button
                    variant="outline"
                    className="border-white/20 text-white hover:bg-white/10 px-8 py-6 text-lg font-medium rounded-xl transition-all duration-300 w-full sm:w-auto"
                  >
                    Falar com Especialista
                  </Button>
                </Link>
              </div>
            </div>

            {/* Visual */}
            <div className="animate-item relative">
              <div className="absolute inset-0 bg-[#cbf400]/10 rounded-3xl blur-3xl" />
              <div className="relative bg-[#0e0e0e] rounded-3xl p-8 border border-white/10">
                {/* Cards de serviço */}
                <div className="space-y-4">
                  <div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-[#cbf400]/20">
                    <div className="w-12 h-12 rounded-xl bg-[#cbf400]/10 flex items-center justify-center">
                      <Phone className="w-6 h-6 text-[#cbf400]" />
                    </div>
                    <div>
                      <h3 className="text-white font-bold">VOIP para Condomínios</h3>
                      <p className="text-gray-500 text-sm">Comunicação moderna e econômica</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-white/10">
                    <div className="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center">
                      <Server className="w-6 h-6 text-blue-400" />
                    </div>
                    <div>
                      <h3 className="text-white font-bold">Gestão de CPD</h3>
                      <p className="text-gray-500 text-sm">Infraestrutura profissional</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-white/10">
                    <div className="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center">
                      <Wifi className="w-6 h-6 text-purple-400" />
                    </div>
                    <div>
                      <h3 className="text-white font-bold">Rede e Conectividade</h3>
                      <p className="text-gray-500 text-sm">Alta disponibilidade</p>
                    </div>
                  </div>

                  <div className="flex items-center gap-4 p-4 bg-[#1a1a1a] rounded-xl border border-white/10">
                    <div className="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
                      <Shield className="w-6 h-6 text-red-400" />
                    </div>
                    <div>
                      <h3 className="text-white font-bold">Segurança</h3>
                      <p className="text-gray-500 text-sm">Monitoramento 24/7</p>
                    </div>
                  </div>
                </div>

                {/* Stats */}
                <div className="grid grid-cols-3 gap-4 mt-6 pt-6 border-t border-white/10">
                  <div className="text-center">
                    <div className="text-2xl font-black text-[#cbf400]">90%</div>
                    <div className="text-gray-500 text-xs">Economia</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-black text-[#cbf400]">24/7</div>
                    <div className="text-gray-500 text-xs">Operação</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-black text-[#cbf400]">500+</div>
                    <div className="text-gray-500 text-xs">Clientes</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default CondominiosCTA;